/* =====================================================================
   Estilo do sistema. Complementa o Bootstrap 5, nao o substitui.

   Pensado para dois usos reais:
     - computador do consultorio, tela grande
     - celular, durante o atendimento

   Toda regra de impressao fica na secao final.
   ===================================================================== */

:root {
  --adm-cor: #0d6efd;
  --adm-cor-escura: #0a58ca;
  /* A BARRA DE MENU (04/09/2026).
     Estes seis valores sao o padrao — o azul de sempre. Quem escolher
     outra cor em Configuracoes > Aparencia recebe um <style> depois
     desta folha, redefinindo os mesmos nomes; o desenho abaixo nao muda
     uma linha. Os valores de texto e realce nao sao escolhidos a mao:
     saem da conta de contraste em inc/aparencia.php. */
  --adm-barra: #12395e;
  --adm-barra-texto: #ffffff;
  --adm-barra-texto-suave: #eaf1f8;
  --adm-barra-realce: rgba(255, 255, 255, .12);
  --adm-barra-realce-forte: rgba(255, 255, 255, .22);
  --adm-barra-borda: rgba(255, 255, 255, .4);

  /* Nome antigo do texto da barra. Continua aqui porque instalacao que
     nao recarregou o CSS ainda pode pedi-lo. */
  --adm-texto-claro: #eaf1f8;
  --adm-borda: #dee2e6;
  --adm-fundo: #f5f7fa;
}

body {
  background: var(--adm-fundo);
  /* Sem fonte de fora: o consultorio pode estar sem internet e a
     Hostgator pode bloquear. Usa a fonte do proprio sistema. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------------------------------------------------------------------
   Barra de menu
   --------------------------------------------------------------------- */

.adm-barra {
  background: var(--adm-barra);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.adm-barra .navbar-brand {
  color: var(--adm-barra-texto);
  font-weight: 600;
  letter-spacing: .2px;
}

.adm-barra .navbar-brand:hover { color: var(--adm-barra-texto); }

.adm-barra .nav-link {
  color: var(--adm-barra-texto-suave);
  padding: .5rem .75rem;
  border-radius: .375rem;
  white-space: nowrap;
}

.adm-barra .nav-link:hover,
.adm-barra .nav-link:focus {
  color: var(--adm-barra-texto);
  background: var(--adm-barra-realce);
}

.adm-barra .nav-link.active {
  color: var(--adm-barra-texto);
  background: var(--adm-barra-realce-forte);
  font-weight: 600;
}

.adm-barra .nav-link i { margin-right: .35rem; }

.adm-barra .navbar-toggler {
  border-color: var(--adm-barra-borda);
}

/* O icone padrao do Bootstrap e escuro; a barra, por padrao, e escura. */
.adm-barra .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Barra de cor CLARA: o desenho de tracos brancos sumiria dentro dela, e
   sumiria so no celular — onde ninguem testa. O PHP poe esta classe
   quando a cor escolhida pede texto escuro (inc/aparencia.php). */
.adm-barra--clara .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2828,43,58,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------------------------------------------------------------------
   Conteudo
   --------------------------------------------------------------------- */

.adm-conteudo {
  flex: 1 0 auto;
  padding-top: 1.25rem;
  padding-bottom: 2rem;
  max-width: 1400px;
}

.adm-titulo {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1c2b3a;
  margin-bottom: 1.25rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--adm-borda);
}

/* Cartao usado nos atalhos da tela inicial */
.adm-atalho {
  display: flex;
  align-items: center;
  gap: .9rem;
  height: 100%;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--adm-borda);
  border-radius: .6rem;
  color: #1c2b3a;
  text-decoration: none;
  transition: box-shadow .15s, border-color .15s, transform .15s;
}

.adm-atalho:hover {
  border-color: var(--adm-cor);
  box-shadow: 0 4px 12px rgba(13, 110, 253, .15);
  transform: translateY(-2px);
  color: var(--adm-cor-escura);
}

.adm-atalho-icone {
  font-size: 1.75rem;
  color: var(--adm-cor);
  line-height: 1;
}

.adm-atalho-nome {
  font-weight: 600;
  display: block;
}

.adm-atalho-etapa {
  font-size: .8rem;
  color: #6c757d;
}

/* ---------------------------------------------------------------------
   Aviso de area ainda nao construida
   --------------------------------------------------------------------- */

.adm-construcao {
  background: #fff;
  border: 1px dashed #b8c4d0;
  border-radius: .6rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: #5b6b7c;
}

.adm-construcao-icone {
  font-size: 2.5rem;
  color: #f0ad4e;
  display: block;
  margin-bottom: .75rem;
}

.adm-construcao-titulo {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1c2b3a;
  margin-bottom: .35rem;
}

.adm-construcao-texto { margin-bottom: .35rem; }

.adm-construcao-etapa {
  margin-bottom: 0;
  font-size: .9rem;
}

/* ---------------------------------------------------------------------
   Rodape
   --------------------------------------------------------------------- */

.adm-rodape {
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid var(--adm-borda);
  padding: .85rem 0;
  font-size: .85rem;
  color: #6c757d;
}

.adm-rodape-sep { margin: 0 .4rem; }

/* ---------------------------------------------------------------------
   Celular
   --------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  /* No menu recolhido cada item vira uma linha; sem isso os itens
     ficam colados e dificeis de acertar com o dedo. */
  .adm-barra .nav-link {
    padding: .6rem .5rem;
    border-radius: .25rem;
  }
  .adm-barra .navbar-nav { padding-top: .5rem; }
}

@media (max-width: 575.98px) {
  .adm-titulo { font-size: 1.25rem; }
  .adm-conteudo { padding-top: 1rem; }
}

/* ---------------------------------------------------------------------
   Configuracoes (Etapa 3) — abas com as listas de cadastro
   --------------------------------------------------------------------- */

.adm-abas {
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}

.adm-abas .nav-link {
  white-space: nowrap;
}

.adm-abas-conteudo {
  background: #fff;
  border: 1px solid var(--adm-borda);
  border-top: none;
  border-radius: 0 0 .5rem .5rem;
  padding: 1.1rem;
}

.adm-config-topo {
  margin-bottom: .9rem;
}

.adm-tabela-config th {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #6c757d;
  border-bottom-width: 1px;
}

.adm-linha-inativa {
  opacity: .55;
}

.adm-config-acoes .btn {
  padding: .2rem .5rem;
}

.adm-form-clinica {
  max-width: 560px;
}

/* ---------------------------------------------------------------------
   Aparencia (04/09/2026) — a cor da barra de menu
   --------------------------------------------------------------------- */

.adm-cores {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Cada cor pronta e um botao de verdade: quem navega pelo teclado chega
   nele com Tab e escolhe com Enter, como em qualquer outro botao. */
.adm-cor {
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid var(--adm-borda);
  border-radius: .5rem;
  padding: 0;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}

.adm-cor:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
}

/* A escolhida ganha um anel POR FORA, e nao uma borda: borda mudaria o
   tamanho do quadrado e a fileira inteira dancaria a cada clique. */
.adm-cor-escolhida {
  border-color: #1c2b3a;
  box-shadow: 0 0 0 3px rgba(28, 43, 58, .25);
}

/* A previa e uma barra de mentira: mesmos tons, mesmos cantos, para a
   escolha ser conferida sem sair da aba. */
.adm-cor-previa {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .6rem .9rem;
  border-radius: .5rem;
  background: var(--adm-barra);
  color: var(--adm-barra-texto-suave);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.adm-cor-previa-marca {
  font-weight: 600;
  color: var(--adm-barra-texto);
}

.adm-cor-previa-item {
  font-size: .9rem;
  padding: .3rem .6rem;
  border-radius: .375rem;
}

.adm-cor-previa-ativo {
  color: var(--adm-barra-texto);
  background: var(--adm-barra-realce-forte);
  font-weight: 600;
}

.adm-cor-secao {
  font-size: 1rem;
  font-weight: 700;
  color: #1c2b3a;
  margin-bottom: .15rem;
}

/* Previa do agendamento: as mesmas medidas do cartao da agenda, para a
   escolha ser conferida sem precisar abrir a outra tela. As cores saem
   de style="" posto pelo JS — sao as unicas coisas que mudam aqui. */
.adm-ag-previa {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
}

.adm-ag-previa-card {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 9rem;
  padding: 4px 7px;
  border-radius: .35rem;
  overflow: hidden;
}

.adm-ag-previa-hora {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .02em;
  opacity: .85;
}

.adm-ag-previa-nome {
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.15;
}

.adm-ag-previa-proc {
  font-size: 10px;
  line-height: 1.15;
  opacity: .9;
}

.adm-ag-previa-nota { flex: 1 1 14rem; }

/* ---------------------------------------------------------------------
   Pacientes (Etapa 4)
   --------------------------------------------------------------------- */

.adm-busca-barra {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: .85rem;
}

.adm-busca-campo {
  position: relative;
  flex: 1 1 320px;
}

.adm-busca-campo .form-control {
  padding-left: 2.3rem;
}

.adm-busca-icone {
  position: absolute;
  left: .8rem;
  top: 50%;
  transform: translateY(-50%);
  color: #8a97a4;
  pointer-events: none;
}

.adm-contador {
  font-size: .87rem;
  margin-bottom: .5rem;
}

.adm-tabela-pacientes th {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #6c757d;
}

.adm-linha-clicavel {
  cursor: pointer;
}

.adm-nome-paciente {
  display: block;
  font-weight: 600;
  color: #1c2b3a;
}

.adm-nome-apoio {
  display: block;
  font-size: .8rem;
  color: #6c757d;
}

/* Ficha */

.adm-ficha-topo {
  margin-bottom: .9rem;
}

.adm-grupo {
  border: none;
  padding: 0;
  margin: 0 0 .5rem;
}

.adm-grupo-titulo {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--adm-cor);
  border-bottom: 1px solid var(--adm-borda);
  padding-bottom: .35rem;
  margin-bottom: .9rem;
  float: none;   /* o Bootstrap solta o legend; aqui ele fica no fluxo */
  width: 100%;
}

.adm-form-acoes {
  display: flex;
  gap: .6rem;
  padding-top: .5rem;
  border-top: 1px solid var(--adm-borda);
}

/* O mesmo par Salvar/Cancelar repetido no TOPO do formulário (revisão
   14). A linha divisória troca de lado — em cima ela fecha por baixo,
   separando os botões do primeiro campo. */
.adm-form-acoes-topo {
  padding-top: 0;
  padding-bottom: .7rem;
  margin-bottom: 1rem;
  border-top: none;
  border-bottom: 1px solid var(--adm-borda);
}

/* ---------------------------------------------------------------------
   Pagamentos (Etapa 5)
   --------------------------------------------------------------------- */

.adm-filtros {
  background: #fff;
  border: 1px solid var(--adm-borda);
  border-radius: .5rem;
  padding: .9rem 1rem .5rem;
  margin-bottom: .9rem;
}

.adm-tabela-pagamentos th {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #6c757d;
}

.adm-linha-total {
  font-weight: 700;
  background: #f5f7fa;
}

.adm-linha-total td {
  border-top: 2px solid var(--adm-borda);
}

/* Revisao 03: Total pago / Tratamentos / Saldo sao tres linhas seguidas
   no rodape do extrato. Só a primeira leva o traço grosso em cima, e o
   Saldo se destaca por ser a conclusão das outras duas. */
.adm-linha-total + .adm-linha-total td {
  border-top: 1px solid var(--adm-borda);
}

.adm-linha-saldo td {
  border-top: 2px solid var(--adm-borda);
  font-size: 1.05rem;
}

.adm-lista-sugestoes {
  position: relative;
  max-height: 220px;
  overflow-y: auto;
  margin-top: -1px;
}

.adm-lista-sugestoes:empty {
  display: none;
}

/* ---------------------------------------------------------------------
   Orçamentos (Etapa 6) — tabela de itens dinamica
   --------------------------------------------------------------------- */

.adm-tabela-itens th {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #6c757d;
}

.adm-tabela-itens td {
  vertical-align: middle;
}

/* ---------------------------------------------------------------------
   Prontuário (Etapa 7)
   --------------------------------------------------------------------- */

.adm-busca-paciente-central {
  max-width: 480px;
  margin: 2.5rem auto 0;
  text-align: center;
}

.adm-busca-paciente-central .adm-busca-campo {
  text-align: left;
}

.adm-tabela-prontuario th {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #6c757d;
}

/* Observacao e TEXT (sem limite pratico) — trunca visualmente na lista,
   o texto inteiro continua no banco e aparece na impressao. */
.adm-obs-truncada {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Anamnese (Etapa 8) — formulario de perguntas SIM/NAO
   --------------------------------------------------------------------- */

.adm-anam-perguntas {
  border: 1px solid var(--adm-borda);
  border-radius: .4rem;
  overflow: hidden;
}

.adm-anam-pergunta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--adm-borda);
  background: #fff;
}

.adm-anam-pergunta:last-child {
  border-bottom: none;
}

.adm-anam-pergunta:nth-child(even) {
  background: #f8f9fb;
}

.adm-anam-pergunta-texto {
  flex: 1 1 auto;
}

.adm-anam-pergunta-opcoes {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .adm-anam-pergunta {
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
  }
}

/* ---------------------------------------------------------------------
   Próteses (Etapa 9) — painel de pendentes/atrasados/entregues
   --------------------------------------------------------------------- */

.adm-painel-proteses {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-bottom: 1rem;
}

.adm-painel-cartao {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  padding: 1rem .5rem;
  border: 1px solid var(--adm-borda);
  border-radius: .5rem;
  background: #fff;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}

.adm-painel-cartao:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.adm-painel-ativo {
  border-color: currentColor;
  box-shadow: 0 0 0 2px currentColor inset;
}

.adm-painel-numero {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.adm-painel-rotulo {
  font-size: .8rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.adm-painel-cartao-pendente .adm-painel-numero { color: #495057; }
.adm-painel-cartao-atrasado .adm-painel-numero { color: #b02a37; }
.adm-painel-cartao-entregue .adm-painel-numero { color: #1e7e34; }
.adm-painel-cartao-todos    .adm-painel-numero { color: #1c2b3a; }

.adm-linha-atrasada {
  background: #fdf1f2;
}

@media (max-width: 575.98px) {
  .adm-painel-proteses {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------------------------------------------------------------------
   Atestados (Etapa 10)
   --------------------------------------------------------------------- */

.adm-marcadores code {
  background: #eef1f4;
  padding: .1rem .4rem;
  border-radius: .25rem;
  margin-right: .3rem;
  font-size: .8rem;
}

/* ---------------------------------------------------------------------
   Revisao 01 — avisos e campos automaticos
   --------------------------------------------------------------------- */

/* Aviso de paciente sem CPF, no topo da ficha. Precisa ser dificil de
   ignorar: os 597 pacientes herdados da agenda estao todos sem CPF. */
.adm-alerta-cpf {
  display: flex;
  align-items: center;
  gap: .8rem;
  border-left: 5px solid #ffc107;
}

.adm-alerta-cpf-icone {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Campo preenchido pelo sistema (numero de prontuario). Continua
   visivel e selecionavel, mas nao aceita digitacao. */
.adm-campo-automatico {
  background-color: #eef1f4;
  cursor: default;
}

.adm-campo-automatico:focus {
  background-color: #eef1f4;
  box-shadow: none;
}

/* ---------------------------------------------------------------------
   Tela inicial — pendencias de CPF de quem pagou (revisao 01)
   --------------------------------------------------------------------- */

.adm-pendencias {
  background: #fff;
  border: 1px solid #ffc107;
  border-left: 5px solid #ffc107;
  border-radius: .6rem;
  padding: 1rem 1.1rem .4rem;
  margin-bottom: 1.25rem;
}

.adm-pendencias-topo {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-bottom: .75rem;
}

.adm-pendencias-icone {
  font-size: 1.5rem;
  color: #d39e00;
  line-height: 1.2;
  flex-shrink: 0;
}

.adm-pendencias-texto {
  font-size: .87rem;
  color: #5b6b7c;
}

.adm-tabela-pendencias th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #6c757d;
}

/* ---------------------------------------------------------------------
   Modais com <form> dentro

   Os modais deste sistema poem o <form> entre .modal-content e
   .modal-body, para o botao Salvar do rodape enviar o formulario. Isso
   quebra o `modal-dialog-scrollable` do Bootstrap: ele conta com o
   .modal-body sendo filho DIRETO do flex de .modal-content. Com o form
   no meio, quem vira item flexivel e o form — que nao tem limite de
   altura —, entao o corpo cresce sem parar, o overflow-y: auto nunca
   entra em acao e o rodape com o botao Salvar sai da tela.

   Encontrado no modal de Proteses, que e o mais alto. Vale para todos.
   --------------------------------------------------------------------- */

.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
}

/* ---------------------------------------------------------------------
   Relatorios (Etapa 11)
   --------------------------------------------------------------------- */

/* Lista de escolha do relatorio (coluna da esquerda) */
.adm-rel-lista {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.adm-rel-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  width: 100%;
  text-align: left;
  padding: .65rem .8rem;
  border: 1px solid var(--adm-borda);
  border-radius: .5rem;
  background: #fff;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}

.adm-rel-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.adm-rel-item-ativo {
  border-color: #1c2b3a;
  box-shadow: 0 0 0 2px #1c2b3a inset;
}

.adm-rel-item-icone {
  font-size: 1.15rem;
  color: #1c2b3a;
  line-height: 1.3;
}

.adm-rel-item-texto {
  display: flex;
  flex-direction: column;
}

.adm-rel-item-titulo {
  font-weight: 600;
  font-size: .92rem;
}

.adm-rel-item-descricao {
  font-size: .78rem;
  color: #6c757d;
  line-height: 1.25;
}

/* Cabecalho do resultado */
.adm-rel-titulo {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .1rem;
}

.adm-rel-subtitulo {
  font-size: .85rem;
  margin-bottom: .8rem;
}

/* Cartoes de total */
.adm-rel-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: .9rem;
}

.adm-rel-cartao {
  flex: 1 1 9rem;
  padding: .7rem .9rem;
  border: 1px solid var(--adm-borda);
  border-radius: .5rem;
  background: #fff;
}

.adm-rel-cartao-destaque {
  border-color: #1c2b3a;
}

.adm-rel-cartao-valor {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
}

.adm-rel-cartao-destaque .adm-rel-cartao-valor {
  color: #1c2b3a;
}

.adm-rel-cartao-rotulo {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6c757d;
}

.adm-rel-aviso {
  font-size: .84rem;
}

.adm-tabela-relatorio th {
  font-size: .78rem;
  text-transform: uppercase;
  color: #6c757d;
  letter-spacing: .02em;
  white-space: nowrap;
}

.adm-tabela-relatorio td {
  font-size: .88rem;
}

/* ---------------------------------------------------------------------
   Comparativo ano a ano (revisao 14)

   Segundo quadro do Faturamento, abaixo da tabela principal. O traco em
   cima existe para que ele se leia como OUTRO assunto: sem ele, as duas
   tabelas grudam e o mes a mes parece continuacao dos grupos de cima.
   --------------------------------------------------------------------- */
.adm-rel-comparativo {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--adm-borda);
}

.adm-rel-comparativo-titulo {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .1rem;
}

.adm-rel-comparativo-nota {
  font-size: .8rem;
  color: #6c757d;
  margin-bottom: .7rem;
}

/* O mes corrente esta pela metade — em negrito para nao ser lido como
   um mes fechado que despencou. */
.adm-rel-comparativo .adm-rel-mes-atual td {
  font-weight: 600;
  background: #f5f7fa;
}

/* Meses que ainda nao chegaram: presentes para a tabela ter os doze,
   apagados para nao competirem com o que ja aconteceu. */
.adm-rel-comparativo .adm-rel-mes-futuro td {
  color: #adb5bd;
}

/* A linha do Acumulado e a resposta do quadro — a unica em que os dois
   anos cobrem o mesmo pedaco de calendario. Ela precisa saltar aos
   olhos antes do "Total da coluna", que fica logo abaixo e e maior. */
.adm-rel-comparativo .adm-rel-linha-chave td {
  background: #eef2f7;
  color: #1c2b3a;
}

/* ---------------------------------------------------------------------
   Impressao
   --------------------------------------------------------------------- */

@media print {
  /* Menu, rodape e qualquer coisa marcada com d-print-none somem.
     O relatorio impresso e o conteudo, nada mais. */
  body {
    background: #fff;
    font-size: 11pt;
  }

  .adm-conteudo {
    padding: 0;
    max-width: none;
  }

  .adm-titulo {
    font-size: 14pt;
    border-bottom: 1px solid #000;
  }

  a { text-decoration: none; color: #000; }

  /* Nao quebrar linha de tabela no meio, entre uma pagina e outra */
  tr, .adm-nao-quebrar { page-break-inside: avoid; }

  @page { margin: 1.5cm; }
}

/* =====================================================================
   Assinatura digital (revisao 04)
   ===================================================================== */

/* Previa na aba Configuracoes > Atestado. O xadrez claro atras revela
   se o PNG tem mesmo fundo transparente: com fundo branco a assinatura
   sai com um retangulo por cima da linha no atestado impresso, e sem
   isto o usuario so descobriria na hora de imprimir. */
.adm-assinatura-preview {
  display: block;
  max-height: 70px;
  max-width: 260px;
  padding: 2px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eef1f4 25%, transparent 25%, transparent 75%, #eef1f4 75%),
    linear-gradient(45deg, #eef1f4 25%, transparent 25%, transparent 75%, #eef1f4 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}

/* =====================================================================
   DOCUMENTOS MONTADOS NA HORA — atestado e receita (revisões 05 a 07)
   =====================================================================

   Estas regras viviam num <style> dentro de cada tela. Desde a revisão
   07 os dois documentos aparecem NA MESMA PÁGINA (abas Atestado e
   Receita da ficha do paciente), e dois blocos idênticos de CSS na mesma
   página é convite a um ficar para trás quando o outro mudar. Agora
   estão aqui, uma vez só.

   Documento COM registro no banco (orçamento, prontuário, anamnese)
   continua com o seu próprio CSS em relatorios/*.php: aquelas páginas
   são folhas separadas e não convivem com nenhuma outra.
   ===================================================================== */

/* A folha, na tela: branca no meio do cinza. */
.adm-doc {
  max-width: 800px;
  margin: 0 auto 2rem;
  background: #fff;
  padding: 2.2rem 2.5rem;
  border: 1px solid #dee2e6;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.adm-doc-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid #1c2b3a;
  padding-bottom: 1rem;
  margin-bottom: 1.3rem;
}
/* Logotipo + textos da clínica, lado a lado (revisão 11). O logotipo
   fica à ESQUERDA do nome, e quando não há logotipo o bloco continua
   igual ao de sempre — o flex com um filho só não muda nada. */
.adm-doc-clinica {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.adm-doc-logo {
  /* Altura manda: logotipo largo e logotipo quadrado saem com a mesma
     altura de linha no cabeçalho, que é o que o olho compara. A largura
     tem teto para um logotipo muito deitado não empurrar o nome da
     clínica para fora. */
  height: 64px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  flex-shrink: 0;
}
.adm-doc-clinica-nome { font-size: 1.25rem; font-weight: 700; margin: 0; }
.adm-doc-clinica-info { font-size: .85rem; color: #495057; margin: 0; }
.adm-doc-titulo { text-align: right; }
.adm-doc-titulo h1 { font-size: 1.1rem; margin: 0; text-transform: uppercase; letter-spacing: .04em; }

.adm-doc-texto {
  margin: 2rem 0 3rem;
  min-height: 4rem;
  font-size: 1.02rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* ESPAÇAMENTO REGULÁVEL (revisão 12)
   Os valores vêm de Configurações › Impressão, por variável CSS emitida
   em inc/documento.php (adm_doc_espacos_estilo). O número depois da
   vírgula é o padrão, e é ele que vale se o bloco não for emitido — a
   folha nunca fica sem espaçamento.

   Só o atestado: #atest-doc-texto é mais específico que .adm-doc-texto e
   vence só no top, sem mexer na margem de baixo nem no texto livre da
   receita (#rec-doc-livre, que tem sua própria regra logo abaixo). */
#atest-doc-texto { margin-top: var(--adm-esp-atest-cab-texto, 10.2rem); }

.adm-doc-assinatura { margin-top: 3.5rem; text-align: center; }

/* A distância até a assinatura é regulável e vale um número diferente em
   cada documento — por isso a margem fica em dois seletores por
   container, em vez de mudar .adm-doc-assinatura, que os dois usam. */
#atest-documento .adm-doc-assinatura { margin-top: var(--adm-esp-atest-texto-assin, 11.9rem); }
#rec-documento   .adm-doc-assinatura { margin-top: var(--adm-esp-rec-data-assin,   8.5rem); }
.adm-doc-assinatura .linha {
  /* `relative` para a assinatura poder se posicionar em cima deste
     bloco — ver .adm-doc-assinatura-imagem. */
  position: relative;
  display: inline-block;
  border-top: 1px solid #1c2b3a;
  padding-top: .4rem;
  min-width: 320px;
}
.adm-doc-assinatura .cargo { font-size: .82rem; color: #6c757d; margin-top: .2rem; }

/* A assinatura fica POR CIMA da linha e do nome, atravessando os dois,
   como uma assinatura de caneta feita sobre o papel já impresso (D29).
   Absoluta de propósito: assim não empurra nada — pode ser mais alta que
   o bloco e transbordar para cima sem mexer no texto. O PNG tem fundo
   transparente, então a linha e o nome continuam visíveis por baixo. */
.adm-doc-assinatura-imagem {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-height: 120px;
  max-width: 300px;
  pointer-events: none;
}

/* --- só da receita ------------------------------------------------- */

/* Espaço em volta do nome do paciente, na receita. Foi ajustado à mão
   nas revisões 09 e 10 até virar regulável na 12 — os padrões abaixo são
   o que aquelas duas rodadas deixaram, arredondado para linha inteira. */
.adm-rec-paciente {
  margin-top:    var(--adm-esp-rec-cab-pac, 5.1rem);
  margin-bottom: var(--adm-esp-rec-pac-med, 3.4rem);
}
.adm-rec-rotulo {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6c757d;
}
.adm-rec-nome { font-size: 1.08rem; font-weight: 600; }

.adm-rec-uso {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  font-size: .95rem;
  border-bottom: 1px solid #1c2b3a;
  padding-bottom: .3rem;
  margin: 0 0 1.4rem;
}

.adm-rec-lista { margin: 0 0 2.5rem; padding-left: 1.4rem; }
.adm-rec-lista li { margin-bottom: 1.1rem; }
/* evita que um medicamento fique com o nome numa folha e a posologia na
   outra */
.adm-rec-item { break-inside: avoid; page-break-inside: avoid; }
.adm-rec-linha {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: 1.02rem;
}
.adm-rec-medicamento { font-weight: 600; }
/* os pontinhos entre o nome e a quantidade, como em receita de papel */
.adm-rec-pontos {
  flex: 1;
  border-bottom: 1px dotted #adb5bd;
  transform: translateY(-.25rem);
}
.adm-rec-quantidade { white-space: nowrap; }
.adm-rec-posologia {
  margin: .25rem 0 0 1.2rem;
  font-size: .95rem;
  color: #343a40;
  white-space: pre-wrap;
}

/* Na receita o texto livre entra logo abaixo do nome do paciente, então
   não leva a margem de cima que o atestado precisa. */
#rec-doc-livre { margin: 0 0 2.5rem; min-height: 0; }

.adm-rec-data {
  text-align: right;
  margin: var(--adm-esp-rec-med-data, 1.7rem) 0 0;
}

/* --- na tela pequena (revisão 14) ------------------------------------

   A pré-visualização "Como vai sair no papel" é uma folha desenhada em
   tamanho de papel: 800px de largura, 2,5rem de margem interna e
   espaçamentos em rem pensados para a impressão — na receita a
   assinatura nasce 8,5rem abaixo da data, no atestado o texto começa
   10,2rem abaixo do cabeçalho. Num celular de 375px isso dava três
   problemas ao mesmo tempo: letra grande demais, cabeçalho ocupando
   meia tela e a linha da assinatura (`min-width: 320px`) furando a
   lateral direita.

   Aqui a folha vira MAQUETE: mesma ordem e as mesmas partes, tudo menor
   e cabendo na tela. Duas coisas que este bloco NÃO faz:

   1. não muda o papel — a consulta é `screen and`, então @media print
      continua vendo os valores originais;
   2. não mexe nas variáveis de Configurações › Impressão. Elas saem num
      <style> emitido no corpo da página, DEPOIS desta folha, e com a
      mesma especificidade (`:root`) venceriam por ordem de origem. O
      que se sobrescreve abaixo são as propriedades finais, que aquele
      <style> não declara. */

@media screen and (max-width: 767.98px) {
  .adm-doc {
    padding: 1rem 1.1rem;
    font-size: .9rem;
  }

  /* Logotipo, nome e título deixam de disputar a mesma faixa
     horizontal: o título cai para a linha de baixo. */
  .adm-doc-cabecalho {
    flex-wrap: wrap;
    gap: .5rem;
    padding-bottom: .6rem;
    margin-bottom: .8rem;
  }
  .adm-doc-clinica { gap: .6rem; }
  .adm-doc-logo { height: 38px; max-width: 110px; }
  .adm-doc-clinica-nome { font-size: 1rem; }
  .adm-doc-clinica-info { font-size: .72rem; }
  .adm-doc-titulo { text-align: left; width: 100%; }
  .adm-doc-titulo h1 { font-size: .95rem; }

  .adm-doc-texto {
    font-size: .92rem;
    line-height: 1.6;
    margin: 1.2rem 0 1.5rem;
  }

  /* Os vãos de folha em branco viram vãos de tela. */
  #atest-doc-texto  { margin-top: 1.2rem; }
  .adm-rec-paciente { margin-top: 1.2rem; margin-bottom: 1.2rem; }
  .adm-rec-lista    { margin-bottom: 1.2rem; }
  #rec-doc-livre    { margin-bottom: 1.2rem; }
  .adm-rec-data     { margin-top: 1rem; }
  #atest-documento .adm-doc-assinatura,
  #rec-documento   .adm-doc-assinatura { margin-top: 2.5rem; }

  /* 320px de linha numa tela de 375px, com margem dos dois lados, não
     cabe — era isto que saía pela direita. */
  .adm-doc-assinatura .linha { min-width: 0; width: 100%; }
  .adm-doc-assinatura-imagem { max-height: 70px; max-width: 90%; }

  .adm-rec-uso        { font-size: .85rem; margin-bottom: 1rem; }
  .adm-rec-nome       { font-size: 1rem; }
  .adm-rec-linha      { font-size: .92rem; flex-wrap: wrap; }
  .adm-rec-quantidade { white-space: normal; }
  .adm-rec-posologia  { font-size: .85rem; margin-left: 0; }
}

/* --- no papel ------------------------------------------------------- */

@media print {
  /* Sai SÓ o documento. O <h1> da página é escrito por adm_cabecalho() e
     não tem como receber d-print-none; as abas idem. As abas que não
     estão em foco já saem por conta do display:none do Bootstrap, então
     imprime-se sempre e só o documento da aba aberta. */
  .adm-titulo { display: none !important; }
  .adm-abas   { display: none !important; }

  /* O QUADRADO QUASE INVISÍVEL (revisão 14).
     `.adm-abas-conteudo` é a caixa branca que segura as abas da ficha do
     paciente, e ela tem borda de 1px cinza-claro. Com as abas escondidas
     acima, essa borda sobrava no papel como um retângulo pálido em volta
     do atestado e da receita inteiros — o `.adm-doc` já tirava a própria
     borda desde a revisão 05, mas ninguém tinha reparado na de fora.
     Só aparecia imprimindo PELA FICHA; pelas páginas próprias
     (paginas/atestado_emitir.php e paginas/receita.php), que não têm
     abas, o papel sempre saiu limpo. */
  .adm-abas-conteudo {
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
  }

  .adm-doc {
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    max-width: none;
  }
  /* exact: sem isto alguns navegadores clareiam a imagem na impressão */
  .adm-doc-assinatura-imagem,
  .adm-doc-logo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* =====================================================================
   AVISO DE SESSAO EXPIRADA (Etapa 12)

   Barra fixa no rodape, por cima de tudo. Fica fora do fluxo da pagina
   de proposito: aparece sem empurrar o conteudo, entao o formulario que
   a pessoa estava preenchendo continua exatamente onde estava.
   ===================================================================== */
.adm-sessao-expirada {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;              /* acima do modal do Bootstrap (1055) */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .9rem 1.25rem;
    background: #b02a37;
    color: #fff;
    box-shadow: 0 -.25rem .75rem rgba(0, 0, 0, .25);
}

.adm-sessao-expirada__txt { font-weight: 600; }

.adm-sessao-expirada__obs {
    font-size: .875rem;
    opacity: .85;
}

@media print {
    .adm-sessao-expirada { display: none; }
}

/* =====================================================================
   A SEÇÃO DA AGENDA SAIU DAQUI — 29/08/2026

   Ela existiu por algumas horas: a área de Agenda foi primeiro
   redesenhada nas classes `adm-` do sistema, e este arquivo ganhou ~180
   linhas para o calendário, o bloco do evento e a faixa de almoço.

   O Giovani viu e pediu o visual antigo de volta. A agenda voltou a usar
   o `theme.css` original, agora em `css/theme-agenda.css`, carregado só
   por `paginas/agenda.php`. Aquelas 180 linhas viraram código morto e
   foram apagadas — CSS órfão é o tipo de coisa que sobrevive anos
   fazendo todo mundo se perguntar quem usa.

   Se um dia a Agenda voltar a ser desenhada no padrão do sistema, o
   ponto de partida está no histórico deste arquivo, não aqui.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Comando do cron, na tela Sistema.  [29/08/2026]

   O comando do backup diário é longo e tem de ser copiado INTEIRO. Um
   <code> solto quebraria em qualquer lugar e a pessoa coparia meio
   comando — que no cron falha em silêncio. Aqui ele rola na horizontal
   dentro da própria caixa, sem empurrar a página.
   --------------------------------------------------------------------- */
.adm-cron {
  margin: 0;
  padding: .5rem .6rem;
  background-color: #F3F5F7;
  border: 1px solid #DDE3E8;
  border-radius: 6px;
  font-size: .75rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

.adm-cron code {
  color: #16262D;
  background: none;
  padding: 0;
  white-space: pre;
}

/* =====================================================================
   FOLHA DO DIA — o aviso do topo (29/08/2026)
   =====================================================================

   Aparece em toda tela enquanto a folha de hoje não sair. Por isso é
   COMPACTO: uma faixa de uma linha, e não o cartão alto de
   `.adm-pendencias`. Aquele avisa de uma pendência rara; este aparece
   todo santo dia até o meio da manhã, e um bloco grande nessa
   frequência vira coisa que o olho aprende a pular.

   Âmbar, e não vermelho: nada está errado — só falta fazer.
   ===================================================================== */
.adm-folha-aviso {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;

  background: #fff;
  border: 1px solid #ffc107;
  border-left: 5px solid #ffc107;
  border-radius: .6rem;
  padding: .6rem .9rem;
  margin-bottom: 1.1rem;
}

.adm-folha-aviso__icone {
  font-size: 1.3rem;
  color: #d39e00;
  flex-shrink: 0;
}

/* `min-width: 0` deixa o texto encolher e quebrar dentro do flex em vez
   de empurrar o botão para fora da faixa na tela estreita da recepção. */
.adm-folha-aviso__texto {
  flex: 1 1 16rem;
  min-width: 0;
  font-size: .87rem;
  color: #5b6b7c;
  line-height: 1.35;
}

.adm-folha-aviso__texto strong {
  display: block;
  color: #16262D;
}

/* `margin-left: auto` no fim da faixa, mas só quando ela cabe numa
   linha; quebrada, o botão vai para baixo alinhado à esquerda, junto do
   texto que ele responde. */
.adm-folha-aviso__botao {
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}