/* ==========================================================================
   ReceitaDigital — folha de estilo única.

   Não há build de CSS, não há framework, não há segunda folha. Tudo o que a
   interface usa está aqui, e os valores estão em :root.

   GÊMEO: app/estilo_pdf.py carrega as MESMAS cores como tuplas RGB, porque o
   PDF é desenhado pelo ReportLab em coordenadas e nenhum CSS chega perto dele.
   Os dois arquivos existem de propósito, e tests/test_paleta_do_pdf_bate_com_o_css.py
   lê este arquivo e quebra se eles divergirem. Ao mudar uma cor aqui, mude lá.
   ========================================================================== */

/* --- Fontes -------------------------------------------------------------
   Auto-hospedadas. O motivo está em estaticos/fontes/LEIA-ME.md: a página
   pública não pode ter recurso de terceiro, porque o Referer levaria o código
   de validação junto. */

@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fontes/bitter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fontes/bitter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1EFF, U+2020, U+20A0-20AB; }
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fontes/bitter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fontes/bitter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1EFF, U+2020, U+20A0-20AB; }
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fontes/bitter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fontes/bitter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1EFF, U+2020, U+20A0-20AB; }

@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fontes/public-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fontes/public-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1EFF, U+2020, U+20A0-20AB; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fontes/public-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fontes/public-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1EFF, U+2020, U+20A0-20AB; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fontes/public-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fontes/public-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1EFF, U+2020, U+20A0-20AB; }


/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Paleta — vinho/grená da Odontologia */
  --primaria:        #7b1e3b;
  --primaria-hover:  #5e152d;
  --sidebar:         #33101e;
  --menu-ativo:      #5a1c34;
  --acento:          #dd8fa6;
  --fundo:           #f4eef0;
  --superficie:      #ffffff;
  --borda:           #e6d8dc;
  --borda-interna:   #f3eaed;
  --hover-linha:     #faf5f7;
  --tinta-clara:     #f9f2f4;
  --texto:           #241419;
  --texto-2:         #4a3a41;
  --apagado:         #75606a;

  /* Situação do documento */
  --assinado-fundo:  #f6e6ec;
  --assinado-texto:  #5e152d;
  --cancelado-fundo: #fbe9e7;
  --cancelado-texto: #a03a2c;

  /* Cor por tipo de documento. O marcador de 10x10 e o cabeçalho de cada
     grupo em Configurações leem daqui — a cor de um tipo aparece uma vez. */
  --tipo-simples:           #7b1e3b;
  --tipo-antimicrobiano:    #3d7a5c;
  --tipo-controle-especial: #b3702a;
  --tipo-notificacao-b:     #2a5db3;
  --tipo-exames:            #6a51a8;
  --tipo-atestado:          #54707f;

  /* Aviso contextual (faixa âmbar do controle especial, faixa de certificado
     vencendo) */
  --aviso-fundo:  #fdf4e3;
  --aviso-borda:  #e8cf9c;
  --aviso-texto:  #7a5312;

  /* Forma */
  --raio-cartao: 12px;
  --raio-botao:  8px;
  --raio-chip:   20px;
  --sidebar-largura: 248px;
  --conteudo-largura: 1180px;

  /* Tipografia */
  --serif: 'Bitter', Georgia, 'Times New Roman', serif;
  --sans:  'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}


/* --- Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--texto); margin: 0; }
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }

a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Foco visível em tudo o que recebe teclado. Sem isto, quem navega por Tab não
   sabe onde está — e "Emitir e assinar" é um botão que ninguém deve apertar
   sem saber que está nele. */
:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; border-radius: 4px; }


/* --- Estrutura ---------------------------------------------------------- */

.aplicacao { display: flex; min-height: 100vh; }

.barra-lateral {
  width: var(--sidebar-largura);
  flex: 0 0 var(--sidebar-largura);
  background: var(--sidebar);
  color: #f0e2e7;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.barra-lateral .marca { padding: 22px 20px 18px; }
.barra-lateral .logo { font-family: var(--serif); font-size: 21px; font-weight: 700; color: #fff; }
.barra-lateral .logo em { font-style: normal; color: var(--acento); }
.barra-lateral .subtitulo { font-size: 11.5px; color: #b99aa5; margin-top: 3px; }

.menu { flex: 1; padding: 6px 12px; display: flex; flex-direction: column; gap: 2px; }
.menu a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--raio-botao);
  color: #e4d0d7;
  font-size: 14.5px;
  font-weight: 500;
}
.menu a:hover { background: #431625; color: #fff; text-decoration: none; }
.menu a[aria-current="page"] { background: var(--menu-ativo); color: #fff; font-weight: 600; }

.rodape-perfil {
  border-top: 1px solid #4a1d2c;
  padding: 14px 16px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.avatar {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--sidebar);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.rodape-perfil .nome { font-size: 13.5px; font-weight: 600; color: #fff; }
.rodape-perfil .conselho { font-size: 11.5px; color: #b99aa5; }
.rodape-perfil .certificado { font-size: 11.5px; color: #b99aa5; margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.ponto { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.ponto.valido   { background: #57b37a; }
.ponto.vencendo { background: #d9a441; }
.ponto.ausente  { background: #c15a4a; }

.conteudo { flex: 1; min-width: 0; padding: 30px 34px 60px; }
.conteudo > .interno { max-width: var(--conteudo-largura); margin: 0 auto; }

.cabecalho-pagina {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 22px; flex-wrap: wrap;
}
.cabecalho-pagina .data { color: var(--apagado); font-size: 13.5px; margin-top: 3px; }

/* Indicadores da tela de Início. Quatro cartões que encolhem juntos e quebram
   em duas colunas no celular — nunca um número sozinho numa linha. */
.kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 720px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
}
.kpi {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-cartao); padding: 18px 20px;
}
.kpi-numero {
  font-family: var(--serif); font-size: 32px; line-height: 1.1;
  color: var(--primaria); font-weight: 700;
}
.kpi-rotulo {
  margin-top: 4px; font-size: 12.5px; color: var(--apagado);
  text-transform: uppercase; letter-spacing: .05em;
}
.nota-kpi { margin: 12px 2px 0; font-size: 13px; color: var(--texto-2); }

/* Tela do documento assinado: as duas metades (compartilhar e assinatura) lado
   a lado no desktop, empilhadas no celular. */
.grade-documento {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
@media (max-width: 720px) {
  .grade-documento { grid-template-columns: 1fr; gap: 20px; }
}

/* Os três botões da tela do documento: mesma largura, um ao lado do outro. */
.acoes-documento {
  display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap;
}
.acoes-documento > .botao {
  flex: 1 1 0; min-width: 160px; justify-content: center; text-align: center;
}

/* Sub-navegação de Configurações: uma trilha de links, o atual sublinhado em
   vinho. Discreta — é orientação, não a ação da página. */
.abas-config {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--borda); margin-bottom: 22px;
}
.abas-config .aba-config {
  padding: 9px 14px; color: var(--texto-2); text-decoration: none;
  font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.abas-config .aba-config:hover { color: var(--primaria); }
.abas-config .aba-config[aria-current="page"] {
  color: var(--primaria); font-weight: 600; border-bottom-color: var(--primaria);
}

/* Volta para a tela de onde se veio. Discreto de propósito: fica ACIMA do
   título, e um botão sólido aqui competiria com a ação da página. */
.voltar {
  display: inline-block; margin-bottom: 10px;
  color: var(--texto-2); font-size: 13.5px; text-decoration: none;
}
.voltar:hover { color: var(--primaria); text-decoration: underline; }


/* --- Cartões ------------------------------------------------------------ */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  padding: 18px 20px;
}
.cartao + .cartao { margin-top: 16px; }
.cartao > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

.rotulo-secao {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--apagado);
}


/* --- Botões ------------------------------------------------------------- */

.botao {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--raio-botao);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  /* 44px de alvo mínimo — a mesma regra do layout iOS. A web é usada no
     celular entre um atendimento e outro. */
  min-height: 44px;
}
.botao-primario { background: var(--primaria); color: #fff; }
.botao-primario:hover { background: var(--primaria-hover); text-decoration: none; }
.botao-secundario { background: var(--superficie); color: var(--primaria); border-color: var(--borda); }
.botao-secundario:hover { background: var(--tinta-clara); text-decoration: none; }
.botao[disabled] { opacity: 0.5; cursor: not-allowed; }


/* --- Chips -------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 15px;
  border-radius: var(--raio-chip);
  border: 1px solid #e0c9d1;
  background: var(--superficie);
  color: var(--texto-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  min-height: 40px;
  display: inline-flex; align-items: center; gap: 7px;
}
.chip:hover { background: var(--tinta-clara); }
.chip[aria-pressed="true"] { background: var(--primaria); border-color: var(--primaria); color: #fff; }


/* --- Marcador e badge --------------------------------------------------- */

.marcador-tipo {
  width: 10px; height: 10px; border-radius: 3px;
  display: inline-block; flex: 0 0 10px;
  background: var(--cor-tipo, var(--primaria));
}

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.badge.assinado  { background: var(--assinado-fundo);  color: var(--assinado-texto); }
.badge.cancelado { background: var(--cancelado-fundo); color: var(--cancelado-texto); }
.badge.rascunho  { background: var(--tinta-clara);     color: var(--apagado); }


/* --- Tabelas e listas --------------------------------------------------- */

table.lista { width: 100%; border-collapse: collapse; }
table.lista th {
  text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--apagado);
  padding: 0 12px 9px; border-bottom: 1px solid var(--borda);
}
table.lista td { padding: 12px; border-bottom: 1px solid var(--borda-interna); font-size: 14.5px; }
table.lista tbody tr:hover { background: var(--hover-linha); }
table.lista tbody tr:last-child td { border-bottom: none; }

/* Coluna de ações do histórico: ícones lado a lado, discretos até o hover. O
   alvo é de 32px — menor que o botão de 44px porque aqui são quatro numa linha
   de tabela, mas ainda clicável no celular. */
.acoes-linha { display: flex; gap: 4px; justify-content: flex-end; }
.acoes-linha form { display: inline; margin: 0; }
.acao {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--apagado);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.acao:hover {
  background: var(--tinta-clara); color: var(--primaria);
  border-color: var(--borda); text-decoration: none;
}
.acao:focus-visible { outline: 2px solid var(--primaria); outline-offset: 1px; }
/* Cancelar é destrutivo: só o hover o pinta de vermelho, para não competir com
   as outras três ações no estado normal. */
.acao-perigo:hover { color: var(--cancelado-texto); border-color: #e2c0c0; }


/* --- Indicadores -------------------------------------------------------- */

.indicadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.indicador .numero { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--primaria); line-height: 1.1; }
.indicador .rotulo { font-size: 12.5px; color: var(--apagado); margin-top: 3px; }


/* --- Avisos ------------------------------------------------------------- */

.aviso {
  border-radius: var(--raio-botao);
  padding: 12px 15px;
  font-size: 13.5px;
  border: 1px solid;
  display: flex; gap: 10px; align-items: flex-start;
}
.aviso.ambar { background: var(--aviso-fundo); border-color: var(--aviso-borda); color: var(--aviso-texto); }
.aviso.azul  { background: #eaf1fc; border-color: #b7cdee; color: #1f4585; }
.aviso.verde { background: #e9f5ee; border-color: #b3dcc4; color: #245e3d; }

/* Caixa tracejada de "adicionar" */
.adicionar {
  width: 100%;
  border: 1px dashed #d4b8c1;
  background: transparent;
  border-radius: var(--raio-botao);
  padding: 13px;
  color: var(--primaria);
  font-family: var(--sans);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}
.adicionar:hover { background: var(--tinta-clara); }


/* --- Formulários -------------------------------------------------------- */

label.campo { display: block; margin-bottom: 13px; }
label.campo > span {
  display: block;
  font-size: 12px; font-weight: 600; color: var(--texto-2);
  margin-bottom: 5px;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="search"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-botao);
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--texto);
  background: var(--superficie);
  min-height: 44px;
}
textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #a8949c; }


/* --- Responsivo ---------------------------------------------------------
   O layout iOS fornecido é esta faixa: a barra lateral vira barra inferior de
   navegação, o conteúdo ocupa a largura toda, e os alvos continuam com 44px. */

@media (max-width: 900px) {
  .aplicacao { flex-direction: column; }
  .barra-lateral {
    width: 100%; flex: none; height: auto; position: fixed;
    bottom: 0; top: auto; z-index: 20;
    flex-direction: row;
    /* Respeita a área da barra de gestos do iPhone. */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .barra-lateral .marca, .barra-lateral .rodape-perfil,
  .barra-lateral .rodape-sistema { display: none; }
  .menu { flex-direction: row; padding: 6px; gap: 0; align-items: stretch; }
  .menu a { flex: 1; text-align: center; font-size: 11.5px; padding: 9px 4px; }
  /* Sair vira mais um item da barra de baixo, do mesmo tamanho dos outros. */
  .sair-mobile { display: flex; flex: 1; }
  .sair-mobile button {
    flex: 1; background: transparent; border: 0; cursor: pointer;
    color: #e4d0d7; font-family: var(--sans); font-weight: 500;
    font-size: 11.5px; padding: 9px 4px; border-radius: var(--raio-botao);
  }
  .sair-mobile button:active { background: #431625; }
  .conteudo { padding: 20px 16px 96px; }
  .indicadores { grid-template-columns: repeat(2, 1fr); }
}


/* --- Tela de entrada -----------------------------------------------------
   Fora do molde .aplicacao: aqui não há barra lateral, porque não há sessão. */

body.tela-entrada {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
}
.cartao-entrada {
  width: 100%; max-width: 380px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  padding: 30px 28px;
}
.marca-entrada { text-align: center; margin-bottom: 24px; }
.marca-entrada .logo { font-family: var(--serif); font-size: 25px; font-weight: 700; color: var(--texto); }
.marca-entrada .logo em { font-style: normal; color: var(--primaria); }
.marca-entrada .subtitulo { font-size: 12.5px; color: var(--apagado); margin-top: 3px; }
.cartao-entrada .aviso { margin-bottom: 16px; }
.rodape-entrada {
  margin: 18px 0 0; font-size: 12.5px; color: var(--apagado); text-align: center; line-height: 1.45;
}


/* --- Detalhe do paciente ------------------------------------------------- */

.colunas-paciente { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.colunas-paciente .cartao + .cartao { margin-top: 0; }

dl.cadastro { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: 8px 12px; }
dl.cadastro dt { font-size: 12.5px; color: var(--apagado); }
dl.cadastro dd { margin: 0; font-size: 14.5px; }

@media (max-width: 900px) {
  .colunas-paciente { grid-template-columns: 1fr; }
}


/* --- Catálogo de medicações --------------------------------------------- */

/* Abas dos receituários — os MESMOS chips do Passo 2 da emissão.
   Reaproveitar o padrão que já existe é melhor que inventar um estilo novo:
   quem aprendeu a escolher o tipo de documento na emissão já sabe operar aqui. */
.abas { margin-bottom: 18px; }
.abas .chip .contagem {
  font-size: 11px; font-weight: 700;
  background: var(--tinta-clara); color: var(--apagado);
  border-radius: 20px; padding: 0 6px; min-width: 18px; text-align: center;
}
.abas .chip[aria-pressed="true"] .contagem {
  background: rgba(255, 255, 255, 0.22); color: #fff;
}
.abas .chip[aria-pressed="true"] .marcador-tipo {
  background: #fff;
}

.painel-aba[hidden] { display: none; }

.cabecalho-grupo { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.cabecalho-grupo h3 { font-size: 15.5px; }
.cabecalho-grupo .base-legal {
  font-size: 11.5px; color: var(--apagado);
  background: var(--tinta-clara); border-radius: 20px; padding: 2px 10px;
}

.etiqueta-lista {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: var(--tinta-clara); color: var(--primaria);
  border-radius: 4px; padding: 1px 6px; margin-left: 6px;
}

details > summary.adicionar { list-style: none; text-align: left; margin-top: 10px; }
details > summary.adicionar::-webkit-details-marker { display: none; }
details[open] > summary.adicionar { border-style: solid; background: var(--tinta-clara); }


/* --- Tela de emissão -----------------------------------------------------
   Coluna única. O Resumo fecha a sequência, embaixo do Passo 3, em vez de ficar
   numa lateral longe do último campo preenchido. */

.emissao { max-width: 780px; }
.emissao .resumo { margin-top: 16px; }

.linha-paciente { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.linha-paciente .trocar { margin-left: auto; font-size: 13.5px; }

.modalidade { padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--borda-interna); }
.nota-modalidade { font-size: 12.5px; color: var(--texto-2); margin: 10px 0 0; line-height: 1.45; }

ol.itens { list-style: none; counter-reset: item; margin: 0 0 14px; padding: 0; }
ol.itens li {
  counter-increment: item;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--borda-interna);
}
ol.itens li::before {
  content: counter(item);
  flex: 0 0 24px; height: 24px;
  background: var(--tinta-clara); color: var(--primaria);
  border-radius: 50%; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700;
}
ol.itens li > div { flex: 1; }
ol.itens .remover {
  background: none; border: none; color: var(--apagado);
  font-family: var(--sans); font-size: 12.5px; cursor: pointer; padding: 4px 6px;
}
ol.itens .remover:hover { color: var(--cancelado-texto); text-decoration: underline; }

.sugestoes { border: 1px solid var(--borda); border-radius: var(--raio-botao); overflow: hidden; margin-bottom: 12px; }
.sugestoes button {
  display: block; width: 100%; text-align: left;
  background: var(--superficie); border: none; border-bottom: 1px solid var(--borda-interna);
  padding: 10px 12px; font-family: var(--sans); font-size: 14px; cursor: pointer;
}
.sugestoes button:last-child { border-bottom: none; }
.sugestoes button:hover { background: var(--hover-linha); }
.sugestoes .grupo { font-size: 11.5px; color: var(--apagado); }

@media (max-width: 900px) {
  .colunas-emissao { grid-template-columns: 1fr; }
  .colunas-emissao .resumo { position: static; }
}


/* --- Documento assinado --------------------------------------------------- */

.codigo-grande {
  font-family: var(--serif); font-size: 26px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--primaria); margin: 0;
}
.hash {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px; line-height: 1.5; word-break: break-all;
  color: var(--texto-2); background: var(--tinta-clara);
  border-radius: 6px; padding: 8px 10px; margin: 0;
}


/* --- Página pública de validação ------------------------------------------ */

body.tela-publica {
  display: flex; align-items: flex-start; justify-content: center;
  min-height: 100vh; padding: 40px 20px;
}
.cartao-publico {
  width: 100%; max-width: 460px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  padding: 28px 26px;
}
.faixa-publica {
  border-radius: var(--raio-botao);
  padding: 12px 15px; font-size: 13.5px; font-weight: 600;
  line-height: 1.4; margin-bottom: 14px;
}
.faixa-publica.autentica { background: var(--primaria); color: #fff; }
.faixa-publica.cancelada { background: var(--cancelado-fundo); color: var(--cancelado-texto); }
.faixa-publica.recusada  { background: var(--tinta-clara); color: var(--texto-2); }
.cartao-publico dl.cadastro { grid-template-columns: 92px 1fr; }

/* O rodapé do perfil é link — ver partes/barra_lateral.html */
a.rodape-perfil { text-decoration: none; color: inherit; }
a.rodape-perfil:hover { background: #431625; text-decoration: none; }

.rodape-sistema { padding: 12px 16px 16px; }
.botao-sair {
  width: 100%; background: transparent; border: 1px solid #5a2434;
  color: #e6cdd5; border-radius: var(--raio-botao); padding: 9px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; cursor: pointer;
  min-height: 40px;
}
.botao-sair:hover { background: #431625; color: #fff; }
.rodape-sistema .credito {
  margin-top: 12px; text-align: center; line-height: 1.5;
  font-size: 11px; color: #8a6b76;
}
.rodape-sistema .credito strong { color: #b99aa5; font-weight: 600; }

/* "Sair" na navegação: só existe no celular (ver a media query). No desktop
   o Sair mora no rodapé da barra. */
.sair-mobile { display: none; }


/* --- Escolha do receituário na tela do paciente ---------------------------
   Chip com radio dentro: o input fica escondido, e o :has() pinta a pílula.
   É o mesmo visual dos outros chips do sistema, mas com semântica de escolha
   única — que é o que a emissão precisa. */

.escolha-de-tipo .chips { gap: 10px; }
.escolha-de-tipo .chip {
  position: relative;
  padding: 10px 16px;
  border: 1.5px solid var(--borda);
  transition: background .12s, border-color .12s, color .12s;
}
.escolha-de-tipo .chip input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
/* O chip marcado se tinge da COR DO TIPO — um fundo claro dela, borda e texto na
   cor cheia. Cada tipo fica com a própria identidade, e nenhum deles é o vinho
   sólido do botão de ação: a seleção e o "Começar" nunca mais se confundem.
   `color-mix` tem retaguarda — se o navegador não o entender, cai no fundo
   claro do tema. */
.escolha-de-tipo .chip:has(input:checked) {
  background: var(--tinta-clara);
  background: color-mix(in srgb, var(--cor-tipo) 12%, #fff);
  border-color: var(--cor-tipo);
  color: var(--cor-tipo);
  font-weight: 600;
}
.escolha-de-tipo .chip:has(input:checked) .marcador-tipo {
  background: var(--cor-tipo);
}
.escolha-de-tipo .chip:has(input:focus-visible) {
  outline: 2px solid var(--cor-tipo); outline-offset: 2px;
}

/* "Começar documento": a ação da tela. Vinho ESCURO da barra lateral, para
   destacar-se do vinho médio de um chip "Receita simples" marcado, e reservar
   ao botão o papel de elemento mais forte. */
.botao-comecar {
  background: var(--sidebar); color: #fff; margin-top: 16px;
}
.botao-comecar:hover { background: #23090f; text-decoration: none; }
.botao-comecar span { transition: transform .12s; }
.botao-comecar:hover span { transform: translateX(3px); }
.escolha-de-tipo .chip .contagem {
  font-size: 11px; font-weight: 700;
  background: var(--tinta-clara); color: var(--apagado);
  border-radius: 20px; padding: 0 6px; min-width: 18px; text-align: center;
}
.escolha-de-tipo .chip:has(input:checked) .contagem {
  background: rgba(255, 255, 255, 0.22); color: #fff;
}
/* Faixa de Notificação B esgotada: o chip fica visível mas não clicável, para
   que a ausência seja explicada em vez de silenciosa. */
.escolha-de-tipo .chip.indisponivel { opacity: 0.45; cursor: not-allowed; }
.escolha-de-tipo .chip.indisponivel:hover { background: var(--superficie); }

.rodape-sugestoes {
  font-size: 11.5px; color: var(--apagado);
  padding: 7px 12px; background: var(--tinta-clara);
  border-top: 1px solid var(--borda-interna);
}

/* --- Cadastro rápido de medicação, sem sair da emissão -------------------- */

/* Especificidade acima de `label.campo > span { display: block }`, senão o
   botão (+) cai numa linha própria embaixo do rótulo. */
label.campo > span.rotulo-com-acao {
  display: flex; align-items: center; gap: 8px;
}
.botao-mais {
  width: 20px; height: 20px; line-height: 1;
  border: 1px solid var(--borda); border-radius: 50%;
  background: var(--superficie); color: var(--primaria);
  font-size: 15px; font-weight: 700; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.botao-mais:hover { background: var(--primaria); border-color: var(--primaria); color: #fff; }

.sugestoes.vazio { padding: 12px; text-align: center; }
.sugestoes.vazio p { margin: 0 0 10px; font-size: 13.5px; color: var(--apagado); }

.cadastro-rapido {
  border: 1px solid var(--borda); border-radius: var(--raio-botao);
  background: var(--tinta-clara); padding: 14px; margin-bottom: 12px;
}
.cadastro-rapido .cabecalho-rapido {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; font-size: 13.5px;
}
.cadastro-rapido .fechar {
  background: none; border: none; font-size: 20px; line-height: 1;
  color: var(--apagado); cursor: pointer; padding: 0 4px;
}
.cadastro-rapido .fechar:hover { color: var(--texto); }
.cadastro-rapido .campo input, .cadastro-rapido .campo select { min-height: 38px; }