/* =============================================================================
   PAINEL /gestor
   ========================================================================== */

@import url("../base/_camadas.css");
@import url("../base/_fontes.css");
@import url("../base/_reset.css");
@import url("../base/_tokens.css");
@import url("../base/_base.css");
@import url("../base/_layout.css");

@import url("../componentes/_botao.css");
@import url("../componentes/_campo.css");
@import url("../componentes/_cartao.css");
@import url("../componentes/_cracha.css");
@import url("../componentes/_tabela.css");
@import url("../componentes/_navegacao.css");
@import url("../componentes/_alerta.css");
@import url("../componentes/_modal.css");
@import url("../componentes/_grelha-horas.css");

/* Interface iOS aprovada — vocabulário partilhado por todos os menus novos. */
@import url("../componentes/_ios-ecra.css");
@import url("../componentes/_ios-sobreposicoes.css");

/* Menus da interface iOS: Consultas (Fase 1), Painel (2), Mensagens (3),
   Automações (4), Loja (5), Leads (7). */
@import url("../componentes/_consultas-lista.css");
@import url("../componentes/_consultas-calendario.css");
@import url("../componentes/_consultas-detalhe.css");
@import url("../componentes/_consultas-formulario.css");
@import url("../componentes/_painel.css");
@import url("../componentes/_mensagens.css");
@import url("../componentes/_automacoes.css");
@import url("../componentes/_loja.css");
@import url("../componentes/_loja-ficha.css");
/* Depois dos outros menus, de propósito: o menu Leads redefine três classes
   partilhadas (.icone-botao--activo, .etiqueta, .aviso) com os valores da sua
   própria maqueta, e a ordem é o que faz isso valer. */
@import url("../componentes/_leads.css");
/* Cobranças (Fase 6) entra a seguir a Leads porque REAPROVEITA o vocabulário
   dele (.lead, .avatar, .banner, .aviso, .kpi, .evento-linha) e só acrescenta
   o que é novo. Antes de _leads.css, metade das classes não existiria ainda. */
@import url("../componentes/_cobrancas.css");
/* Pacientes (Fase 7) entra depois de Leads e de Cobranças pela mesma razão que
   Cobranças entrou depois de Leads: REAPROVEITA o vocabulário deles (.aviso,
   .vazio-caixa, .opcao-folha, .escolha-chip, .campo-lead, .campo-par,
   .bola-cor, .par-ctas) e só acrescenta o que é novo. As poucas medidas que
   fogem à maqueta de Leads ficam presas a [data-modulo="pacientes"], para não
   mexerem em ecrãs já aprovados. */
@import url("../componentes/_pacientes.css");

@import url("../base/_utilitarios.css");

/* --- Especifico do painel ------------------------------------------------ */

/* O fundo do gestor e BRANCO PURO (decisao da maqueta aprovada). O site e a
   loja nao mudam — so esta app importa esta camada. */
@layer temas {
  body {
    background: var(--ios-fundo);
  }
}

@layer componentes {
  .pagina__cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--espaco-s);
    flex-wrap: wrap;
    margin-block-end: var(--espaco-m);
  }

  .pagina__titulo {
    font-size: var(--texto-xl);
    font-weight: var(--peso-forte);
  }

  .filtros {
    display: flex;
    gap: var(--espaco-2xs);
    flex-wrap: wrap;
    align-items: end;
    margin-block-end: var(--espaco-s);
  }

  /* Separadores de canal / periodo. <a> reais, com URL — partilhaveis e com historico. */
  .abas {
    display: flex;
    gap: var(--espaco-3xs);
    border-block-end: 1px solid var(--cor-borda);
    margin-block-end: var(--espaco-m);
    overflow-x: auto;

    & a {
      padding: var(--espaco-2xs) var(--espaco-s);
      font-size: var(--texto-s);
      text-decoration: none;
      color: var(--cor-texto-suave);
      border-block-end: 2px solid transparent;
      white-space: nowrap;

      &:hover { color: var(--cor-texto); }

      &[aria-current="page"] {
        color: var(--cor-marca);
        border-block-end-color: var(--cor-marca);
        font-weight: var(--peso-medio);
      }
    }
  }

  /* Calendario da agenda. */
  .calendario {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--cor-borda);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-m);
    overflow: hidden;
  }

  .calendario__dia {
    background: var(--cor-superficie);
    min-block-size: 7rem;
    padding: var(--espaco-3xs);
    display: flex;
    flex-direction: column;
    gap: 2px;

    &[data-fora-do-mes] { opacity: 0.4; }
    &[data-hoje] { box-shadow: inset 0 0 0 2px var(--cor-marca); }
  }

  .calendario__numero {
    font-size: var(--texto-xs);
    color: var(--cor-texto-suave);
    font-variant-numeric: tabular-nums;
  }

  .calendario__consulta {
    font-size: var(--texto-2xs);
    padding: 2px 4px;
    border-radius: var(--raio-s);
    background: var(--cor-marca-fundo);
    color: var(--cor-marca);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Editor de questionarios: pergunta arquivada continua visivel, riscada.
     Nunca desaparece — as respostas antigas dependem dela. */
  .pergunta-editor[data-arquivada="true"] {
    opacity: 0.5;

    & .pergunta-editor__rotulo { text-decoration: line-through; }
  }

  .barra-lateral-ficha {
    display: grid;
    gap: var(--espaco-m);
    grid-template-columns: 1fr;

    @media (width >= 64rem) {
      grid-template-columns: 1fr minmax(18rem, 22rem);
    }
  }
}