/* ===== tokens.css ===== */
/* ============================================================================
   tokens.css — os valores do guia NutriEla 2026, e nada além deles.
   Fonte: Guia_Identidade_Visual_NutriEla_CONTINUO.pdf e o canvas de design.
   Nenhuma cor nova é inventada aqui. Precisando de um tom, deriva-se dos que
   já existem, sempre por opacidade.
   ========================================================================== */

:root {
  /* --- paleta oficial, com a proporção de uso do guia --- */
  --marfim:       #FFF9F6;   /* 55% — fundo, respiro e luminosidade */
  --blush:        #F7E7E4;   /* 20% — cards e áreas de apoio */
  --salvia:       #A9B69A;   /* 12% — ícones, faixas de referência */
  --rose:         #D96F8F;   /*  8% — títulos, ação, série principal */
  --ameixa:       #4B233C;   /*  5% — capas, acento raro */
  --cinza-quente: #8E8E8E;   /*       informação e neutralidade */

  /* --- derivados, todos vindos dos seis acima --- */
  --tinta:          #40353A;  /* texto principal */
  --tinta-suave:    #6E6265;  /* texto secundário */
  --tinta-apagada:  #A79B98;  /* legendas, notas de rodapé */
  --linha:          #EADFDC;  /* divisórias */
  --linha-fina:     #F2E8E5;  /* divisórias dentro de um card */
  --papel:          #FFFFFF;  /* fundo de card sobre o marfim */
  --papel-morno:    #FDF6F3;  /* fundo de campo calculado */
  --rose-fundo:     #FBEEF1;  /* realce de linha selecionada */
  --ameixa-clara:   #C9A9BB;  /* texto sobre ameixa */

  /* --- semânticos --- */
  --ok-tinta:    #4F5D45;  --ok-fundo:    #E8EDE3;
  --aten-tinta:  #8A5A20;  --aten-fundo:  #F6EBDC;
  --alto-tinta:  #8E3A50;  --alto-fundo:  #F7E1E7;
  --nulo-tinta:  #8E8E8E;  --nulo-fundo:  #F1E9E7;
  --alerta:      #B8563F;

  /* --- tipografia ---
     Nimbus Roman e Nimbus Sans, do guia. Como não há Nimbus em servidor de
     fontes, a pilha cai em Tinos e Arimo — substitutos de métrica idêntica a
     Times e Arial — e depois nas do sistema. O desenho não muda de máquina
     para máquina nem na exportação em PDF. */
  --serifada: 'Nimbus Roman', 'Nimbus Roman No9 L', Tinos, 'Times New Roman', Times, serif;
  --sem-serifa: 'Nimbus Sans', 'Nimbus Sans L', Arimo, Helvetica, Arial, sans-serif;

  --t-titulo-g: 34px;  --t-titulo:   26px;  --t-secao:  19px;
  --t-corpo:    13px;  --t-apoio:  11.5px;  --t-nota:   10.5px;
  --t-rotulo:   10px;

  /* --- espaço, raio, sombra ---
     A escala é de 4 px. O raio acompanha os arcos do símbolo: suave, nunca
     quadrado, nunca bolha. */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px;  --e-4: 16px;
  --e-5: 20px; --e-6: 24px; --e-7: 32px;  --e-8: 40px;

  --r-campo: 8px;  --r-card: 12px;  --r-pilula: 999px;
  --foco: 0 0 0 3px rgba(217, 111, 143, 0.14);

  --largura-trilho: 214px;
  --topo: 64px;
}


/* ===== base.css ===== */
/* ============================================================================
   base.css — reset curto e o esqueleto da aplicação.
   ========================================================================== */

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sem-serifa);
  font-size: var(--t-corpo);
  line-height: 1.55;
  color: var(--tinta);
  background: var(--marfim);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serifada); font-weight: 400; margin: 0; color: var(--ameixa); }
h1 { font-size: var(--t-titulo-g); line-height: 1.1; }
h2 { font-size: var(--t-titulo);   line-height: 1.15; }
h3 { font-size: var(--t-secao);    line-height: 1.2; }

p { margin: 0 0 var(--e-3); }
a { color: var(--rose); }
a:hover { color: var(--ameixa); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

/* números sempre tabulares: a coluna não pode dançar entre consultas */
.num { font-variant-numeric: tabular-nums; }

.rotulo {
  font-size: var(--t-rotulo); letter-spacing: .14em; text-transform: uppercase;
  color: var(--cinza-quente); font-weight: 600;
}

.serifada { font-family: var(--serifada); }
.oculto { display: none !important; }
.crescer { flex-grow: 1; min-width: 0; }

/* ---------- esqueleto ---------- */
#app { display: flex; flex-direction: column; min-height: 100%; }

.topo {
  height: var(--topo); flex-shrink: 0; background: var(--papel);
  border-bottom: 1px solid var(--linha);
  display: flex; align-items: center; gap: var(--e-6); padding: 0 var(--e-6);
}

.corpo { display: flex; flex-grow: 1; min-height: 0; }

.trilho {
  width: var(--largura-trilho); flex-shrink: 0; background: var(--papel-morno);
  border-right: 1px solid var(--linha);
  padding: var(--e-5) 14px; display: flex; flex-direction: column; gap: 2px;
}

.conteudo { flex-grow: 1; min-width: 0; padding: var(--e-6) 28px; }

/* ---------- marca no topo ---------- */
.marca { display: flex; align-items: center; gap: var(--e-2); }
.marca-arte {
  width: clamp(58px, 8vw, 72px); height: clamp(42px, calc(var(--topo) - 8px), 58px);
  flex: 0 0 auto; position: relative; overflow: visible; display: block;
}
.marca-arte img {
  width: 100%; height: 100%; object-fit: contain; object-position: left center;
  display: block;
}

.divisoria-v { width: 1px; height: 30px; background: var(--linha); }

@media (max-width: 760px) {
  .topo { gap: var(--e-3); padding-left: var(--e-3); padding-right: var(--e-3); }
  .divisoria-v { height: 26px; }
}


/* ===== componentes.css ===== */
/* ============================================================================
   componentes.css — o vocabulário da ferramenta, tirado do canvas de design.
   ========================================================================== */

/* ---------- cards ---------- */
.card {
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--r-card); padding: 18px var(--e-5);
}
.card-blush { background: var(--blush); border: none; border-radius: var(--r-card); padding: 18px var(--e-5); }
.card-ameixa { background: var(--ameixa); border-radius: var(--r-card); padding: var(--e-5) 22px; color: var(--marfim); }
.card-ameixa .rotulo { color: var(--ameixa-clara); }

.card-cabeca { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-3); }
.card-cabeca::before {
  content: ""; width: 5px; height: 5px; border-radius: var(--r-pilula);
  background: var(--rose); flex-shrink: 0;
}
.card-cabeca .rotulo { color: var(--ameixa); }

/* ---------- ações ---------- */
.btn {
  font-family: var(--sem-serifa); font-size: 12.5px; font-weight: 600;
  border-radius: var(--r-pilula); padding: 10px var(--e-5);
  border: none; transition: background .18s ease, color .18s ease;
}
.btn-principal  { color: var(--marfim); background: var(--rose); }
.btn-principal:hover  { background: #C85F80; }
.btn-secundario { color: var(--ameixa); background: transparent; border: 1px solid #D8C2C6; padding: 9px 19px; }
.btn-secundario:hover { background: var(--blush); }
.btn-adicao {
  color: var(--ameixa); background: transparent; border: 1px solid #D8C2C6;
  border-radius: var(--r-pilula); padding: 6px 10px; font-size: 11.5px; font-weight: 600;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-adicao:hover { color: var(--ameixa); background: var(--blush); border-color: var(--rose); }
.btn-escuro     { color: var(--marfim); background: var(--ameixa); }
.btn-discreto   {
  color: var(--cinza-quente); background: transparent; border: none; padding: 8px 0;
  font-family: var(--sem-serifa); font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.btn-discreto:hover { color: var(--ameixa); }
.btn-perigo     { color: var(--marfim); background: var(--alerta); }
.btn:disabled   { opacity: .45; cursor: not-allowed; }
.btn:focus-visible, .btn-discreto:focus-visible, .opcao:focus-visible,
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--rose); outline-offset: 2px;
}

/* ---------- campos ---------- */
.campo { display: block; }
.campo-rotulo { font-size: var(--t-apoio); color: var(--tinta-suave); margin-bottom: 5px; font-weight: 500; }
.campo-caixa {
  display: flex; align-items: center; gap: var(--e-2);
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--r-campo); padding: 0 var(--e-3); height: 40px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo-caixa:focus-within { border-color: var(--rose); box-shadow: var(--foco); }
.campo-caixa input, .campo-caixa select {
  border: none; outline: none; background: transparent; width: 100%; padding: 0;
  font-size: 14px; color: var(--tinta);
}
.campo-unidade { font-size: 12px; color: var(--cinza-quente); flex-shrink: 0; }
.campo-calculado { background: var(--papel-morno); }
.campo-vazio { background: var(--papel-morno); border-style: dashed; border-color: #E0D2CE; color: #B5A9A6; }

textarea.campo-area {
  width: 100%; border: 1px solid var(--linha); border-radius: var(--r-campo);
  background: var(--papel); padding: var(--e-3); font-size: 13px; line-height: 1.6;
  resize: vertical; min-height: 90px; outline: none;
}
textarea.campo-area:focus { border-color: var(--rose); box-shadow: var(--foco); }

/* ---------- pastilhas ---------- */
.pastilha {
  font-size: var(--t-apoio); font-weight: 600; border-radius: var(--r-pilula);
  padding: 5px var(--e-3); display: inline-block;
}
.pastilha-ok    { color: var(--ok-tinta);   background: var(--ok-fundo); }
.pastilha-aten  { color: var(--aten-tinta); background: var(--aten-fundo); }
.pastilha-alto  { color: var(--alto-tinta); background: var(--alto-fundo); }
.pastilha-nulo  { color: var(--nulo-tinta);  background: var(--nulo-fundo); }
.pastilha-fase  { color: var(--marfim); background: var(--ameixa); }

.opcao {
  font-size: 12.5px; color: var(--tinta-suave); background: var(--papel);
  border: 1px solid #E9DDDA; border-radius: var(--r-pilula); padding: 7px 15px;
  transition: background .15s ease, border-color .15s ease;
}
.opcao:hover { background: var(--blush); }
.opcao[aria-pressed="true"] {
  color: var(--ameixa); font-weight: 600; border-color: var(--rose); background: var(--rose-fundo);
}

/* ---------- navegação do trilho ---------- */
.nav-item {
  display: flex; align-items: center; gap: var(--e-2) 10px;
  padding: 9px 10px; border-radius: var(--r-campo);
  font-size: var(--t-corpo); color: var(--tinta-suave);
  background: none; border: none; width: 100%; text-align: left;
  transition: background .15s ease;
}
.nav-item:hover { background: var(--blush); }
.nav-item[aria-current="page"] { background: var(--blush); color: var(--ameixa); font-weight: 600; }
.nav-item svg { flex-shrink: 0; stroke: var(--salvia); }
.nav-item[aria-current="page"] svg { stroke: var(--rose); }
.nav-marca { margin-left: auto; font-size: 9.5px; font-weight: 600; border-radius: var(--r-pilula); padding: 3px 7px; }

/* ---------- avisos ---------- */
.aviso { border-radius: var(--r-campo); padding: var(--e-3) 14px; display: flex; gap: 10px; align-items: flex-start; }
.aviso svg { flex-shrink: 0; margin-top: 1px; }
.aviso-titulo { font-size: 12px; font-weight: 600; }
.aviso-texto { font-size: 12px; line-height: 1.6; color: var(--tinta-suave); margin-top: 3px; }
.aviso-ok    { background: var(--ok-fundo); }    .aviso-ok .aviso-titulo    { color: var(--ok-tinta); }
.aviso-aten  { background: var(--aten-fundo); }  .aviso-aten .aviso-titulo  { color: var(--aten-tinta); }
.aviso-alto  { background: var(--alto-fundo); }  .aviso-alto .aviso-titulo  { color: var(--alto-tinta); }
.aviso-neutro{ background: var(--blush); }       .aviso-neutro .aviso-titulo{ color: var(--ameixa); }

/* ---------- barra de progresso ---------- */
.barra { height: 6px; border-radius: var(--r-pilula); background: var(--linha-fina); position: relative; overflow: hidden; }
.barra > i { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pilula); background: var(--rose); display: block; }
.barra-ok > i { background: var(--salvia); }
.barra-alerta > i { background: var(--alerta); }
/* ausência de dado é hachura, nunca zero */
.barra-sem-dado {
  background: repeating-linear-gradient(115deg, var(--linha-fina), var(--linha-fina) 3px, var(--papel-morno) 3px, var(--papel-morno) 6px);
}


/* ---------- caixa de diálogo ---------- */
.modal-fundo {
  position: fixed; inset: 0; z-index: 90; background: rgba(75, 35, 60, .34);
  display: flex; align-items: center; justify-content: center; padding: var(--e-6);
}
.modal {
  background: var(--marfim); border-radius: var(--r-card); padding: var(--e-6) 28px;
  width: 100%; max-width: 520px; max-height: 88vh; overflow: auto;
}
.modal h3 { margin-bottom: var(--e-2); }
.modal-acoes { display: flex; gap: var(--e-2); justify-content: flex-end; margin-top: var(--e-6); }

/* ---------- estado vazio ---------- */
.vazio {
  border: 1px dashed #E9DDDA; border-radius: var(--r-card); background: var(--papel-morno);
  padding: var(--e-8) var(--e-6); text-align: center; color: var(--tinta-apagada);
}
.vazio h3 { color: var(--ameixa); margin-bottom: var(--e-2); }
.vazio p { font-size: 12.5px; line-height: 1.65; max-width: 46ch; margin: 0 auto; }

/* ---------- recado passageiro ---------- */
.recado {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 95; border-radius: var(--r-pilula); padding: 11px var(--e-5);
  font-size: 12.5px; font-weight: 600; box-shadow: 0 6px 20px rgba(75, 35, 60, .16);
  max-width: 70ch;
}
.recado.ok     { background: var(--ok-fundo);   color: var(--ok-tinta); }
.recado.alerta { background: var(--alto-fundo); color: var(--alto-tinta); }

/* ---------- grade de campos do formulário ---------- */
.grade-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.dica-campo {
  font-size: var(--t-nota); color: var(--tinta-suave); line-height: 1.55;
  background: var(--blush); border-radius: 6px; padding: 7px 10px; margin-top: 6px;
}

/* ---------- tabela dentro do formulário ---------- */
.tabela-campo { width: 100%; border-collapse: collapse; }
.tabela-campo th {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza-quente);
  font-weight: 700; text-align: left; padding: 0 8px 6px; border-bottom: 1px solid var(--linha);
}
.tabela-campo td { padding: 0; border-bottom: 1px solid var(--linha-fina); }
.entrada-tabela {
  width: 100%; border: none; outline: none; background: transparent;
  padding: 9px 8px; font-size: 12.5px; color: var(--tinta);
}
.entrada-tabela:focus { background: var(--rose-fundo); }

/* ---------- antropometria: linha de medida ---------- */
.linha-medida {
  display: grid; grid-template-columns: 1fr 96px 108px; gap: 10px;
  align-items: center; padding: 7px 0; border-bottom: 1px solid var(--linha-fina);
}
.linha-medida:last-child { border-bottom: none; }
.linha-medida-nome { font-size: 12.5px; color: var(--tinta); }
.campo-medida { height: 32px; padding: 0 10px; }
.campo-medida input { text-align: right; }
.campo-caixa.campo-alerta { border-color: var(--alerta); }
.linha-medida-unidade { display: block; font-size: 10.5px; color: var(--cinza-quente); text-align: right; }
.linha-medida-dica { display: block; font-size: 9.5px; color: var(--tinta-apagada); line-height: 1.35; text-align: right; }
.dica-medida { font-size: 10px; color: var(--alerta); line-height: 1.4; margin: -3px 0 8px; }

/* ---------- antropometria: seletor de consultas ---------- */
.seletor-consultas { display: flex; gap: 4px; background: var(--blush); border-radius: var(--r-pilula); padding: 4px; }
.pilula-consulta {
  font-size: 11.5px; font-weight: 600; color: var(--cinza-quente);
  background: none; border: none; padding: 6px 14px; border-radius: var(--r-pilula);
  transition: background .15s ease, color .15s ease;
}
.pilula-consulta:hover { color: var(--ameixa); }
.pilula-consulta-atual { color: var(--ameixa); background: var(--papel); }
.pilula-consulta-nova { font-weight: 500; color: var(--tinta-apagada); padding: 6px 12px; }

/* ---------- linha da lista de pacientes ---------- */
.linha-paciente {
  display: grid; grid-template-columns: 1fr 168px 128px 132px; gap: var(--e-4);
  align-items: center; width: 100%; text-align: left;
  padding: 13px var(--e-5); background: none; border: none;
  border-bottom: 1px solid var(--linha-fina); transition: background .15s ease;
}
.linha-paciente:hover { background: var(--rose-fundo); }
.linha-paciente:last-child { border-bottom: none; }
.linha-paciente.cabecalho {
  background: var(--papel-morno); padding-top: 9px; padding-bottom: 9px;
  cursor: default; border-bottom: 1px solid var(--linha);
}
.linha-paciente.cabecalho:hover { background: var(--papel-morno); }
.data-br { display:flex; align-items:center; gap:6px; }
.data-br input { width:5ch; text-align:center; }
.data-br input[data-data-parte="ano"] { width:7ch; }
.recordatorio-scroll { width:100%; max-width:100%; overflow-x:auto; overflow-y:visible; margin-inline:auto; }
.tabela-recordatorio { min-width:760px; table-layout:fixed; }
.tabela-recordatorio th:nth-child(1), .tabela-recordatorio td:nth-child(1) { width:80px; }
.tabela-recordatorio th:nth-child(2), .tabela-recordatorio td:nth-child(2) { width:105px; }
.tabela-recordatorio th:nth-child(3), .tabela-recordatorio td:nth-child(3) { width:215px; }
.tabela-recordatorio th:nth-child(4), .tabela-recordatorio td:nth-child(4) { width:145px; }
.tabela-recordatorio th:nth-child(5), .tabela-recordatorio td:nth-child(5) { width:80px; }
.tabela-recordatorio th:nth-child(6), .tabela-recordatorio td:nth-child(6) { width:70px; }
.tabela-recordatorio th:nth-child(7), .tabela-recordatorio td:nth-child(7) { width:65px; }
.tabela-recordatorio input, .tabela-recordatorio select {
  width:100%; min-width:0; height:35px; box-sizing:border-box; border:0; outline:0;
  border-radius:0; background:transparent; padding:7px 8px; font-size:12.5px;
}
.modal:focus { outline: none; }
.tabela-recordatorio input:focus, .tabela-recordatorio select:focus {
  background:var(--rose-fundo); box-shadow:inset 0 0 0 1px var(--rose);
}
.tabela-recordatorio input:disabled, .tabela-recordatorio select:disabled,
.recordatorio-gramas[readonly] { background:var(--papel-morno); color:var(--tinta-apagada); }
.tabela-recordatorio .recordatorio-kcal { padding:0 8px; white-space:nowrap; }
.recordatorio-alimento { position:relative; min-width:215px; }
.recordatorio-sugestoes { position:absolute; z-index:20; left:0; right:0; max-height:360px; overflow-y:auto; overflow-x:hidden; background:var(--papel, #fff); border:1px solid var(--linha); box-shadow:0 8px 22px rgba(75,35,60,.16); }
.recordatorio-sugestoes[hidden] { display:none; }
.recordatorio-resultados-contagem { position:sticky; top:0; z-index:1; padding:7px 8px; background:var(--papel, #fff); }
.recordatorio-sugestao { display:block; width:100%; padding:6px 8px; border:0; background:transparent; text-align:left; cursor:pointer; }
.recordatorio-sugestao:hover, .recordatorio-sugestao:focus-visible { background:var(--rosa-palida, #f7eef0); outline:2px solid var(--rose); outline-offset:-2px; }
.recordatorio-sugestao span, .recordatorio-vinculo { color:var(--tinta-apagada); font-size:10px; }
.recordatorio-total { margin-top:10px; text-align:right; color:var(--ameixa); }

.anamnese-layout { display:flex; gap:24px; align-items:flex-start; min-width:0; }
.anamnese-trilho { width:236px; flex-shrink:0; }
.anamnese-formulario { flex:1 1 auto; min-width:0; }
.anamnese-painel { width:300px; flex-shrink:0; }
.anamnese-layout-recordatorio {
  display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; align-items:start;
}
.anamnese-layout-recordatorio .anamnese-trilho { grid-column:1; grid-row:1 / span 2; width:220px; }
.anamnese-layout-recordatorio .anamnese-formulario { grid-column:2; }
.anamnese-layout-recordatorio .anamnese-painel { grid-column:2; width:100%; }
@media (max-width:1100px) {
  .anamnese-layout { display:grid; grid-template-columns:236px minmax(0,1fr); }
  .anamnese-painel { grid-column:1/-1; width:100%; }
}
@media (max-width:700px) {
  .anamnese-layout { grid-template-columns:minmax(0,1fr); }
  .anamnese-trilho, .anamnese-formulario, .anamnese-painel { grid-column:1; width:100%; }
  .anamnese-layout-recordatorio .anamnese-trilho,
  .anamnese-layout-recordatorio .anamnese-formulario,
  .anamnese-layout-recordatorio .anamnese-painel { grid-column:1; width:100%; }
  .anamnese-layout-recordatorio .anamnese-trilho { grid-row:auto; }
}


/* ===== graficos.css ===== */
/* ============================================================================
   graficos.css — a barra de indicadores e o gráfico de evolução.
   Portado do devolutiva-amanda-com-grafico.html, com a paleta NutriEla.
   ========================================================================== */

/* ---------- barra de indicadores ---------- */
.metricas {
  display: flex; flex-wrap: wrap;
  border: 1px solid #EFDBD7; border-radius: var(--r-campo);
  overflow: hidden; background: #FFFCFB;
}
.metrica {
  flex: 1 1 0; min-width: 104px; padding: 13px 11px 11px; position: relative;
  background: none; border: none; border-right: 1px solid var(--linha-fina);
  font-family: inherit; text-align: left; transition: background .22s ease;
}
.metrica:last-child { border-right: none; }
.metrica:hover { background: rgba(247, 231, 228, .55); }
.metrica-on { background: var(--blush); }
.metrica-on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--rose);
}
.metrica .lbl {
  font-size: 9px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--tinta-suave); display: block;
}
.metrica .val {
  font-family: var(--serifada); font-size: 23px; color: var(--tinta);
  line-height: 1.2; display: block; margin-top: 2px;
}
.metrica .val small {
  font-size: 10px; font-family: var(--sem-serifa);
  color: var(--tinta-suave); margin-left: 2px;
}
.metrica .delta { font-size: 10px; font-weight: 600; display: block; margin-top: 1px; }
/* a direção é do indicador, não do sinal: em sintomas, descer é vitória */
.metrica .up   { color: #6B7D5E; }
.metrica .down { color: var(--alerta); }
.metrica .flat { color: var(--cinza-quente); }

/* ---------- moldura do gráfico ---------- */
.chart-wrap {
  background: linear-gradient(178deg, #FFFCFB 0%, #FBEEE9 100%);
  border: 1px solid #EFDBD7; border-radius: var(--r-campo);
  padding: 32px 28px 22px; position: relative; overflow: hidden; margin-top: 14px;
}
/* eco do círculo do símbolo, bem ao fundo */
.chart-wrap::before {
  content: ""; position: absolute; top: -140px; right: -120px;
  width: 340px; height: 340px; border: 1px solid rgba(217, 111, 143, .16);
  border-radius: 50%; pointer-events: none;
}

.chart-say { position: relative; max-width: 26ch; margin: 0 0 22px; }
.chart-say .frase {
  font-family: var(--serifada); font-size: 28px; font-weight: 400;
  line-height: 1.28; color: var(--ameixa); margin: 0; letter-spacing: -.005em;
}
.chart-say .frase em { font-style: italic; color: var(--rose); }
.chart-say .quando {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #6B7D5E; margin: 10px 0 0;
}

svg.gr { width: 100%; height: auto; display: block; overflow: visible; position: relative; }

.grafico-vazio {
  text-align: center; padding: 44px 16px; color: var(--tinta-suave);
  font-size: 14px; font-style: italic; font-family: var(--serifada);
}
.grafico-nota {
  font-size: 11px; color: var(--tinta-apagada); margin: 12px 0 0; text-align: center;
}

/* ---------- as duas animações ----------
   A linha se desenha; o resto aparece depois dela. Refazem a cada troca de
   indicador porque o SVG é reconstruído do zero. O dasharray vai inline, no
   elemento, porque depende do comprimento real daquela curva. */
.traco { animation: tracar 1.4s cubic-bezier(.16, 1, .3, 1) forwards; }
.aparece { opacity: 0; animation: surgir .7s ease-out forwards; animation-delay: 1s; }
@keyframes tracar { to { stroke-dashoffset: 0 } }
@keyframes surgir { from { opacity: 0 } to { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .traco { animation: none; stroke-dashoffset: 0 !important; }
  .aparece { animation: none; opacity: 1; }
}
@media print {
  .traco { animation: none !important; stroke-dashoffset: 0 !important; }
  .aparece { animation: none !important; opacity: 1 !important; }
  .chart-wrap { background: var(--marfim) !important; }
}


/* ===== cardapio.css ===== */
/* ============================================================================
   cardapio.css — o montador de plano alimentar.
   Reaproveita o vocabulário de componentes.css (card, opcao, pastilha, barra,
   dica-campo, seletor-consultas); só o que é específico desta tela mora aqui.
   As cores das pílulas de fonte (TACO/POF/TBCA/MEUS) são as mesmas cores
   semânticas já usadas em pastilhas de classificação — nenhuma cor nova.
   ========================================================================== */

/* ---------- busca ---------- */
.lista-busca { display: flex; flex-direction: column; max-height: 480px; overflow-y: auto; }
.resultado-busca {
  display:block; width:100%; box-sizing:border-box; text-align:left; font:inherit;
  padding: 10px 0; border:0; border-bottom: 1px solid var(--linha-fina); background:transparent; cursor: pointer;
  transition: background .15s ease;
}
.resultado-busca:last-child { border-bottom: none; }
.resultado-busca:hover { background: var(--rose-fundo); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 7px; }
.resultado-busca:focus-visible { outline:2px solid var(--rose); outline-offset:2px; border-radius:7px; }
.resultado-busca-info { font-size: 10.5px; color: var(--cinza-quente); margin-top: 3px; }
.resultado-busca-contagem { padding: 5px 0 7px; color: var(--tinta-suave); font-size: 10px; border-bottom: 1px solid var(--linha-fina); }

.pilula-fonte {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; border-radius: 4px;
  padding: 2px 5px; flex-shrink: 0;
}
.pilula-fonte-taco    { color: var(--ok-tinta);   background: var(--ok-fundo); }
.pilula-fonte-pof     { color: var(--aten-tinta); background: var(--aten-fundo); }
.pilula-fonte-tbca    { color: var(--alto-tinta); background: var(--alto-fundo); }
.pilula-fonte-propria { color: var(--marfim);     background: var(--ameixa); }

/* ---------- refeições ---------- */
.horario-refeicao {
  width: 92px; border: 1px solid var(--linha-fina); border-radius: 7px;
  padding: 6px 8px; background: var(--papel); color: var(--tinta); font: inherit; font-size: 11.5px;
}
.refeicao-alvo { box-shadow: 0 0 0 2px var(--rose) inset; }

.item-refeicao {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "info kcal" "medida acoes"; gap: 7px var(--e-3);
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linha-fina);
}
.card > .item-refeicao:last-of-type { border-bottom: none; }
.item-refeicao-alerta { background: var(--rose-fundo); margin: 0 -10px; padding: 9px 10px; border-radius: 7px; border-bottom-color: transparent; }
.item-refeicao-info { grid-area: info; display: flex; align-items: center; gap: 7px; min-width: 0; }
.item-refeicao-nome { font-size: 12.5px; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-refeicao-medida { grid-area: medida; display: flex; align-items: center; gap: 4px; min-width: 0; }
.item-refeicao-medida select { flex: 1.4; min-width: 0; padding: 6px 8px; font-size: 11.5px; }
.campo-quantidade {
  width: 46px; text-align: right; border: 1px solid #E9DDDA; border-radius: 6px;
  padding: 6px 6px; font-size: 11.5px; background: var(--papel);
}
.item-refeicao-kcal { grid-area: kcal; font-size: 12px; color: var(--tinta); text-align: right; }
.item-refeicao-kcal small { display:block; margin-top:2px; color:var(--tinta-apagada); font-size:9px; font-family:var(--sem-serifa); }
.item-refeicao-acoes { grid-area: acoes; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.item-refeicao-acoes .btn-discreto { font-size: 11px; }
.campo-ig { width: 42px; padding: 6px 4px; font-size: 11px; border: 1px solid #E9DDDA; border-radius: 6px; }
.refeicao-distribuicao { font-size: 10px; color: var(--tinta-suave); white-space: nowrap; }
.refeicao-cabecalho { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:5px; }
.refeicao-titulo { display:flex; align-items:baseline; gap:10px; min-width:0; }
.refeicao-nome { width:min(250px, 42vw); min-width:120px; border:0; border-bottom:1px solid transparent; border-radius:0; padding:2px 0; background:transparent; color:var(--ameixa); font:600 19px var(--serifa); }
.refeicao-nome:hover, .refeicao-nome:focus { border-bottom-color:var(--rose); outline:none; }
.refeicao-ferramentas { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
.refeicao-ferramentas .btn-discreto { font-size:10.5px; padding:5px 0; }
.refeicao-resumo { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.refeicao-sem-itens {
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px;
  border:1px dashed #E0D2CE; border-radius:var(--r-campo); padding:12px 14px;
  color:var(--tinta-apagada); font-size:11.5px; background:var(--papel-morno);
}
.refeicao-caixa-texto { margin:10px 0 12px; }
.refeicao-caixa-cabeca { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:5px; }
.refeicao-caixa-cabeca .campo-rotulo { margin:0; }
.refeicao-caixa-ajuda, .refeicao-manual-cabeca small { display:block; margin-top:3px; color:var(--tinta-suave); font-size:10px; line-height:1.4; }
.texto-automatico-refeicao { margin:8px 0 12px; padding:9px 10px; border:1px solid var(--linha-fina); border-radius:var(--r-campo); background:var(--papel-morno); }
.texto-automatico-conteudo { margin-top:5px; color:var(--tinta); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.texto-automatico-vazio { color:var(--tinta-apagada); font-style:italic; }
.refeicao-manual-cabeca { margin:0 0 5px; }
.cardapio-refeicoes-vazio { min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:28px; border:1px dashed #E0D2CE; border-radius:var(--r-campo); background:var(--papel-morno); text-align:center; color:var(--tinta-suave); }
.cardapio-refeicoes-vazio h3 { color:var(--ameixa); }
.cardapio-refeicoes-vazio p { font-size:12px; }
.cg-linha { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--linha-fina); display:flex; justify-content:space-between; font-size:11px; }
.cg-baixa { color: var(--ok-tinta); } .cg-moderada { color: var(--rose); } .cg-alta { color: var(--ameixa); }
.cg-parcial { color: var(--tinta-suave); background: repeating-linear-gradient(135deg, transparent, transparent 4px, var(--linha-fina) 4px, var(--linha-fina) 6px); }
.hidratacao-grid, .comparacao-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hidratacao-grid strong { display:block; font-size:16px; color:var(--ameixa); } .hidratacao-grid small { display:block; color:var(--tinta-suave); font-size:10px; margin-top:3px; }
.comparacao-grid > div { font-size:11px; color:var(--tinta); } .comparacao-conteudo { margin-top:6px; line-height:1.55; color:var(--tinta-suave); }

/* ---------- editor de texto formatado ---------- */
.sr-only {
  position:absolute !important; width:1px !important; height:1px !important; padding:0 !important;
  margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
.editor-rico { grid-column:1 / -1; border:1px solid var(--linha); border-radius:var(--r-campo); overflow:hidden; background:var(--papel); }
.editor-rico:focus-within { border-color:var(--rose); box-shadow:var(--foco); }
.editor-rico-barra {
  display:flex; align-items:center; gap:4px; padding:5px 7px; border-bottom:1px solid var(--linha-fina);
  background:var(--papel-morno); flex-wrap:wrap;
}
.editor-rico-botao {
  width:30px; height:28px; border:1px solid transparent; border-radius:6px; background:transparent;
  color:var(--tinta); font-family:var(--sem-serifa); cursor:pointer;
}
.editor-rico-botao:hover, .editor-rico-botao:focus-visible { background:var(--blush); border-color:#E9DDDA; outline:none; }
.editor-rico-tamanho select {
  height:28px; border:1px solid #E9DDDA; border-radius:6px; background:var(--papel); color:var(--tinta);
  font:10.5px var(--sem-serifa); padding:0 5px;
}
.editor-rico-cor input { width:30px; height:28px; border:1px solid #E9DDDA; border-radius:6px; padding:3px; background:var(--papel); cursor:pointer; }
.editor-rico-conteudo {
  min-height:66px; padding:9px 10px; color:var(--tinta); font-size:14px; line-height:1.55;
  outline:none; overflow-wrap:anywhere; white-space:normal;
}
.editor-rico-conteudo:empty::before { content:attr(data-placeholder); color:var(--tinta-apagada); pointer-events:none; }
.editor-rico-compacto .editor-rico-conteudo { min-height:42px; padding:7px 8px; font-size:11.5px; }
.editor-rico-compacto .editor-rico-barra { padding:3px 5px; }
.editor-rico-compacto .editor-rico-botao, .editor-rico-compacto .editor-rico-cor input { width:27px; height:25px; }
.editor-rico-compacto .editor-rico-tamanho select { height:25px; }
.modelo-horario { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:12px; color:var(--tinta-suave); }

/* ---------- substituições ---------- */
.substituicoes {
  display:flex; flex-direction:column; gap:8px; padding:12px; margin:5px 0 10px;
  background:var(--papel-morno); border:1px solid var(--linha-fina); border-radius:var(--r-campo);
}
.substituicoes-cabeca { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.substituicoes-cabeca strong { font-size:11.5px; color:var(--ameixa); }
.substituicoes-cabeca span { font-size:9.5px; color:var(--tinta-apagada); }
.substituicoes-filtros { display:flex; gap:5px; flex-wrap:wrap; }
.substituicoes-filtros .opcao { padding:4px 9px; font-size:10px; }
.lista-substituicoes-livres { display:flex; flex-direction:column; max-height:320px; overflow:auto; }
.opcao-substituicao {
  display:grid; grid-template-columns:46px minmax(0,1fr) 108px 58px; gap:8px; align-items:center;
  width:100%; padding:7px 5px; border:0; border-bottom:1px solid var(--linha-fina); border-radius:6px;
  cursor:pointer; transition:background .15s ease; background:transparent; text-align:left; font-family:var(--sem-serifa);
}
.opcao-substituicao:hover { background: var(--rose-fundo); }
.opcao-substituicao-nome { font-size: 11.5px; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opcao-substituicao-diff { font-size: 11px; text-align: right; color: var(--tinta-suave); }
.opcao-substituicao-adicionar { font-size:10.5px; color:var(--rose); text-align:right; }
.alternativas-selecionadas { margin: 5px 0 9px; padding: 9px 10px; background: var(--blush); border-radius: 8px; }
.alternativa-selecionada {
  display:grid; grid-template-columns:46px minmax(0,1fr) auto 24px; gap:7px; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--linha);
}
.alternativa-selecionada:last-child { border-bottom:0; }
.alternativa-nome { font-size:11.5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.alternativa-kcal { font-size:10.5px; color:var(--tinta-suave); }
.alternativa-medida { grid-column:2 / -1; display:flex; align-items:center; gap:6px; min-width:0; }
.alternativa-medida select { flex:1; min-width:0; padding:5px 7px; font-size:10.5px; }
.alternativa-selecionada > .editor-rico { grid-column:2 / -1; }
.faixa-calorica { margin-top:14px; padding-top:12px; border-top:1px solid var(--linha-fina); }
.faixa-calorica strong, .faixa-calorica span, .faixa-calorica small { display:block; }
.faixa-calorica strong { font-size:11px; color:var(--tinta); }
.faixa-calorica span { margin-top:4px; font-size:15px; color:var(--ameixa); }
.faixa-calorica small { margin-top:4px; color:var(--tinta-suave); line-height:1.45; }

/* ---------- micronutrientes ---------- */
.micro-linha {
  display: grid; grid-template-columns: 88px 1fr 78px; gap: 11px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--linha-fina);
}
.micro-linha:last-of-type { border-bottom: none; }

/* ---------- grupos, geração automática e receitas ---------- */
.cardapio-vazio-acoes { display:flex; justify-content:center; gap:10px; margin-top:18px; flex-wrap:wrap; }
.cardapio-grupo-filtro { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; margin-bottom:12px; }
.cardapio-grupo-filtro select { min-width:0; width:100%; }
.cardapio-grupo-filtro .btn-discreto { font-size:10px; white-space:nowrap; }
.item-fixo-on { color:var(--ok-tinta) !important; background:var(--ok-fundo); border-radius:6px; padding:4px 6px !important; }

.receita-refeicao { margin-top:14px; border-top:1px solid var(--linha-fina); padding-top:12px; }
.receita-refeicao > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; list-style:none; }
.receita-refeicao > summary::-webkit-details-marker { display:none; }
.receita-refeicao > summary > span:first-child { display:flex; flex-direction:column; gap:2px; }
.receita-refeicao > summary strong { color:var(--ameixa); font-size:12.5px; }
.receita-refeicao > summary small { color:var(--tinta-suave); font-size:10px; }
.receita-corpo { display:grid; gap:12px; margin-top:12px; padding:14px; background:var(--papel-morno); border-radius:var(--r-campo); }
.receita-corpo .campo { margin:0; }
.receita-corpo .campo-area { min-height:76px; }
.receita-ingredientes ul { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; margin-top:6px; }
.receita-ingredientes li { display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--linha-fina); font-size:11px; }
.receita-ingredientes li span { color:var(--tinta-suave); text-align:right; }
.receita-acoes { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.receita-aprovacao { color:var(--tinta-suave); font-size:10px; margin-right:auto; }
.receita-vazia { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.receita-vazia > div { display:flex; flex-direction:column; gap:3px; }
.receita-vazia strong { color:var(--ameixa); font-size:12px; }
.receita-vazia span { color:var(--tinta-suave); font-size:10.5px; }

.modal-gerador-plano { max-width:880px; padding:26px 30px; }
.gerador-cabecalho { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.gerador-cabecalho h3 { margin-top:5px; }
.gerador-intro, .gerenciador-grupos > p { max-width:72ch; color:var(--tinta-suave); font-size:12.5px; line-height:1.65; margin:8px 0 14px; }
.gerador-preservar { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--tinta); margin-bottom:10px; }
.gerador-aprovacao { display:flex; align-items:flex-start; gap:8px; margin-top:14px; font-size:12px; line-height:1.5; color:var(--tinta); }
.gerador-resumo { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--linha-fina); border:1px solid var(--linha-fina); border-radius:var(--r-campo); overflow:hidden; margin:16px 0; }
.gerador-resumo > div { display:flex; flex-direction:column; gap:3px; background:var(--papel); padding:13px 15px; }
.gerador-resumo strong { font:600 20px var(--serifa); color:var(--ameixa); }
.gerador-resumo span { font-size:9.5px; color:var(--tinta-suave); }
.gerador-avisos, .gerador-seguro { border-radius:var(--r-campo); padding:11px 13px; margin-bottom:14px; font-size:11px; line-height:1.5; }
.gerador-avisos { color:var(--alto-tinta); background:var(--alto-fundo); }
.gerador-avisos strong { display:block; margin-bottom:3px; }
.gerador-avisos p + p { margin-top:3px; }
.gerador-seguro { color:var(--ok-tinta); background:var(--ok-fundo); }
.gerador-previa-lista { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }
.gerador-previa-refeicao { padding:11px 0; border-bottom:1px solid var(--linha-fina); }
.gerador-previa-refeicao header { display:flex; justify-content:space-between; gap:10px; color:var(--ameixa); font-size:12px; }
.gerador-previa-refeicao header span { color:var(--tinta-suave); }
.gerador-previa-refeicao li { display:flex; justify-content:space-between; gap:8px; margin-top:6px; font-size:10.5px; }
.gerador-previa-refeicao li small { color:var(--tinta-suave); text-align:right; }
.gerador-previa-refeicao p { color:var(--tinta-suave); font-size:10px; margin-top:7px; }
.gerador-fixo { color:var(--ok-tinta); font-size:9px; }
.grupos-padrao { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0 18px; }
.grupos-padrao span { border:1px solid var(--linha); border-radius:var(--r-pilula); padding:5px 9px; font-size:10px; color:var(--tinta-suave); background:var(--papel); }
.grupos-personalizados { display:grid; gap:6px; margin-bottom:16px; }
.grupos-personalizados > strong { color:var(--ameixa); font-size:12px; }
.grupos-personalizados > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--linha-fina); }
.grupos-personalizados span { display:flex; flex-direction:column; gap:2px; font-size:11.5px; }
.grupos-personalizados small, .grupos-personalizados p { color:var(--tinta-suave); font-size:9.5px; }

@media (max-width: 980px) {
  .gerador-previa-lista, .receita-ingredientes ul { grid-template-columns:1fr; }
  .gerador-resumo { grid-template-columns:1fr 1fr; }
}

@media (max-width: 640px) {
  .modal-gerador-plano { padding:20px; }
  .gerador-cabecalho, .receita-vazia { align-items:flex-start; flex-direction:column; }
  .gerador-resumo { grid-template-columns:1fr 1fr; }
  .cardapio-grupo-filtro { grid-template-columns:1fr; }
}


/* ===== suplementos.css ===== */
/* ============================================================================
   suplementos.css — protocolo de suplementação e conferência do receituário.
   Reaproveita o vocabulário de componentes.css (card, campo, campo-caixa,
   opcao, pastilha, aviso, btn, dica-campo, grade-campos) e de cardapio.css
   (resultado-busca, lista-busca, seletor-consultas). Só o selo "não
   revisado" e o aviso inline de campo obrigatório, específicos desta tela,
   moram aqui.
   ========================================================================== */

.selo-nao-revisado {
  font-size: 9.5px; font-weight: 600; color: var(--tinta-apagada);
  border: 1px solid var(--linha); border-radius: 999px; padding: 2px 8px;
  display: inline-block;
}

.campo-obrigatorio-falta {
  font-size: 9.5px; color: var(--alerta); margin-top: 3px; line-height: 1.4;
}


/* ===== gestao.css ===== */
/* ============================================================================
   gestao.css — agenda, prontuário e financeiro.
   Só o que componentes.css ainda não cobre. Cores sempre de tokens.css;
   pastilhas de situação reaproveitam .pastilha de componentes.css.
   ========================================================================== */

/* ---------- agenda: grade da semana ---------- */
.ag-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e-3); align-items: start; }
.ag-dia {
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-card);
  padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 132px;
}
.ag-dia-hoje { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(217, 111, 143, .1); }
.ag-dia-fechado { background: var(--papel-morno); }
.ag-dia-cabeca { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 7px; border-bottom: 1px solid var(--linha-fina); }

.ag-cons {
  border-radius: 9px; padding: 9px 10px; border-left: 3px solid var(--rose); background: var(--papel-morno);
  cursor: pointer; text-align: left; width: 100%; font-family: inherit; display: block;
}
.ag-cons:hover { filter: brightness(0.98); }
.ag-cons-pago   { border-left-color: var(--salvia); }
.ag-cons-aberto { border-left-color: var(--alerta); }
.ag-cons-faltou { border-left-color: var(--tinta-apagada); opacity: .6; }

.ag-vago {
  border: 1px dashed var(--linha); border-radius: 9px; padding: 9px 10px;
  color: var(--tinta-apagada); font-size: 11px; text-align: center; background: none;
  width: 100%; font-family: inherit; cursor: pointer;
}
.ag-vago:hover { background: var(--blush); }

/* ---------- agenda: mês ---------- */
.ag-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ag-mes-cel {
  min-height: 66px; border: 1px solid var(--linha); border-radius: 8px; padding: 6px 7px;
  background: var(--papel); text-align: left; font-family: inherit; cursor: pointer;
}
.ag-mes-cel:hover { background: var(--blush); }
.ag-mes-fora { opacity: .4; }
.ag-mes-hoje { border-color: var(--rose); }

/* ---------- agenda: lista ---------- */
.ag-lin {
  display: grid; grid-template-columns: 1fr 140px 96px 110px 96px; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--linha-fina);
}
.ag-lin:last-child { border-bottom: none; }

/* ---------- prontuário: linha do tempo ---------- */
.pr-ev { position: relative; padding: 0 0 22px 28px; border-left: 1px solid var(--linha); }
.pr-ev:last-child { border-left-color: transparent; padding-bottom: 0; }
.pr-bolinha {
  position: absolute; left: -6.5px; top: 4px; width: 12px; height: 12px; border-radius: 999px;
  background: var(--marfim); border: 2.5px solid var(--rose);
}
.pr-bolinha-antiga { border-color: var(--tinta-apagada); }
.pr-anexo {
  font-size: 11px; color: var(--tinta-suave); border: 1px solid var(--linha); border-radius: 7px;
  padding: 5px 10px; background: var(--papel); display: inline-flex; align-items: center; gap: 6px;
}

/* ---------- financeiro: cobrança ---------- */
.fin-lin {
  display: grid; grid-template-columns: 1fr 120px 92px 104px 92px; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--linha-fina);
}
.fin-lin:last-child { border-bottom: none; }


/* ===== documentos.css ===== */
/* documentos.css — componentes da tela e do conteúdo dos documentos A4.
   O tamanho, margens e rodapé da folha pertencem a impressao.css. */

.documentos-tela { display:flex; gap:20px; align-items:flex-start; }
.documentos-menu { width:220px; flex:0 0 220px; }
.documentos-menu h1 { font-size:27px; margin:0 0 16px; }
.documentos-lista { display:flex; flex-direction:column; gap:5px; }
.documentos-item { border:1px solid transparent; background:transparent; color:var(--tinta-suave);
  text-align:left; padding:10px 12px; border-radius:6px; cursor:pointer; font:inherit; }
.documentos-item:hover, .documentos-item-on { background:var(--blush); color:var(--ameixa); border-color:#EAD8D4; }
.documentos-item small { display:block; margin-top:3px; font-size:10px; color:var(--tinta-apagada); }
.documentos-acoes { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
.documentos-preview { flex:1; min-width:0; overflow:auto; padding-bottom:20px; }
.documentos-editor {
  width:794px; max-width:100%; box-sizing:border-box; margin:0 auto 16px;
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--r-card); padding:18px 20px;
}
.documentos-editor p { margin:0 0 14px; color:var(--tinta-suave); font-size:12px; line-height:1.55; }
.documentos-editor-grade { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:14px; }
.documentos-editor textarea { min-height:118px; }
.documentos-periodo { display:flex; flex-direction:column; gap:5px; color:var(--tinta-suave); font-size:11.5px; }
.documentos-periodo .campo-caixa { width:104px; height:38px; }
.documentos-energia {
  width:794px; max-width:100%; box-sizing:border-box; margin:0 auto 16px;
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  color:var(--ameixa); background:var(--blush); border:1px solid #E8D4D2;
  border-radius:var(--r-card); font-size:12px; font-weight:600;
}
.documentos-energia input { accent-color:var(--rose); }
.documento-corpo { color:var(--tinta); font-size:12px; line-height:1.55; position:relative; z-index:1; }
.documento-corpo h1 { color:var(--ameixa); font-family:var(--serifada); font-size:27px; font-weight:400; letter-spacing:-.02em; margin:0; }
.documento-corpo h2 { color:var(--ameixa); font-family:var(--serifada); font-size:20px; font-weight:400; margin:20px 0 8px; }
.documento-corpo h3 { color:var(--ameixa); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin:14px 0 6px; }
.documento-subtitulo { color:var(--tinta-suave); font-size:11px; margin-top:3px; }
.documento-corpo > .documento-subtitulo { display:block; background:var(--blush); border-radius:999px; padding:5px 12px; max-width:34ch; margin-top:9px; color:var(--ameixa); font-size:9px; letter-spacing:.04em; }
.documento-corpo > .documento-subtitulo strong { font-weight:600; }
.documento-grade { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 18px; }
.documento-campo { background:var(--papel); border:1px solid #E8DCD9; border-radius:8px; min-height:30px; padding:5px 8px 6px; }
.documento-campo-largo { grid-column:1/-1; }
.documento-rotulo { color:var(--tinta-apagada); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.documento-valor { white-space:pre-wrap; overflow-wrap:anywhere; }
.documento-pendente { color:#9B5E6F; font-style:italic; }
.documento-nota { color:var(--tinta-suave); font-size:10.5px; line-height:1.5; }
.documento-texto-rico { overflow-wrap:anywhere; white-space:normal; }
.documento-caixa-refeicao {
  margin:7px 0 9px; padding:8px 10px; border:1px solid #E4D8D5; border-radius:6px;
  background:var(--papel-morno); font-size:11px; line-height:1.5;
}
.documento-alternativa { margin-top:5px; padding-left:8px; break-inside:avoid; }
.documento-alternativa .documento-texto-rico { margin:2px 0 0 11px; }
.documento-receita {
  break-inside:avoid; margin-top:10px; padding:10px 12px; border:1px solid #D6E0CE;
  border-radius:9px; background:#F8FBF6;
}
.documento-receita h3 { color:var(--ok-tinta); margin:0 0 2px; }
.documento-receita ul { margin:7px 0 8px 18px; columns:2; column-gap:24px; }
.documento-receita li { break-inside:avoid; margin:3px 0; font-size:10.5px; }
.documento-receita .documento-campo { background:#FFFFFF; }
.documento-tabela { width:100%; border-collapse:collapse; margin:7px 0 13px; font-size:10.5px; }
.documento-tabela th { background:var(--rose); color:#FFFFFF; text-align:left; font-size:9px; letter-spacing:.05em; text-transform:uppercase; }
.documento-tabela th, .documento-tabela td { border:1px solid #E4D8D5; padding:5px 6px; vertical-align:top; }
.documento-tabela td.pendente { color:#9B5E6F; font-style:italic; background:repeating-linear-gradient(135deg,#fff9f6,#fff9f6 5px,#f5e9e6 5px,#f5e9e6 6px); }
.documento-grupo-medidas { margin-top:12px; }
.documento-grupo-medidas h3 { border-bottom:1px solid #E0D2CE; padding-bottom:4px; }
.documento-medida-nome { width:36%; }
.documento-secao { border-top:1px solid #E0D2CE; padding-top:4px; margin-top:14px; }
.secao-anamnese-8 { margin-top:7px; }
.secao-anamnese-8 h2 { margin:8px 0 4px; }
.secao-anamnese-8 .documento-grade { gap:3px 14px; }
.secao-anamnese-8 .documento-campo { min-height:23px; padding:1px 0 2px; }
.secao-anamnese-8 .documento-rotulo { font-size:8px; }
.secao-anamnese-8 .documento-valor { font-size:10.5px; line-height:1.25; }
.documento-rodape-prof { font-size:10px; color:var(--tinta-suave); line-height:1.45; text-align:right; }
.documento-alerta { background:#FFFBFA; border:1px solid #E9CDD4; border-top:2px solid var(--rose); border-radius:3px; padding:9px 11px; color:var(--ameixa); margin:8px 0 13px; }
.documento-capa { justify-content:space-between; background:#FFFFFF; color:var(--tinta); }
.folha.documento-capa-estruturada-folha { width:794px; height:1123px; min-height:1123px; padding:0 !important; overflow:visible; }
.folha.documento-capa-estruturada-folha::before { content:none !important; }
.documento-capa-arte { position:absolute; inset:0 auto auto 0; width:794px; height:1123px; overflow:hidden; box-sizing:border-box; border:0; background:#FFFDFC; }
.documento-capa-arte::before { content:""; position:absolute; inset:0 auto 0 0; width:12px; background:var(--rose); z-index:5; pointer-events:none; }
.documento-capa-cabecalho { position:absolute; top:35px; left:74px; right:38px; display:flex; align-items:flex-start; justify-content:space-between; }
.documento-capa-titulo { padding-top:17px; position:relative; z-index:2; }
.documento-capa-titulo h1 { margin:0; color:var(--ameixa); font-family:var(--serifada); font-size:34px; line-height:1.05; font-weight:400; letter-spacing:-.025em; }
.documento-capa-subtitulo { margin-top:8px; color:var(--tinta-suave); font-size:14px; line-height:1.2; }
.documento-capa-logo { display:block; width:400px; height:225px; object-fit:contain; object-position:top right; position:relative; z-index:1; }
.documento-capa-paciente { position:absolute; left:74px; top:233px; width:484px; z-index:2; }
.documento-capa-paciente-linha { width:100%; border-top:2px solid var(--rose); }
.documento-capa-paciente-pilula { display:flex; align-items:center; gap:14px; width:max-content; max-width:100%; box-sizing:border-box; margin-top:13px; padding:7px 14px; border-radius:999px; background:#F7E7E4; color:#40353A; font-size:12px; line-height:1.2; }
.documento-capa-paciente-pilula span { font-size:11px; font-weight:700; }
.documento-capa-paciente-pilula strong { overflow-wrap:anywhere; }
.documento-capa-mensagem { position:absolute; top:330px; left:40px; right:40px; text-align:center; z-index:2; }
.documento-capa-kicker { color:#40353A; font-size:11px; font-weight:700; letter-spacing:.23em; }
.documento-capa-frase { margin-top:20px; color:var(--ameixa); font-family:var(--serifada); font-size:29px; line-height:1.12; }
.documento-capa-prato { position:absolute; top:430px; left:50%; width:842px; height:606px; transform:translateX(-50%); z-index:1; display:flex; align-items:center; justify-content:center; overflow:visible; border:0; }
.documento-capa-prato::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(to right, #FFFDFC 0%, rgba(255,253,252,0) 6%, rgba(255,253,252,0) 94%, #FFFDFC 100%), linear-gradient(to bottom, #FFFDFC 0%, rgba(255,253,252,0) 7%, rgba(255,253,252,0) 93%, #FFFDFC 100%); }
.documento-capa-prato-imagem { display:block; width:100%; height:100%; object-fit:contain; object-position:center; -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%); mask-composite:intersect; }
.documento-capa-rodape { position:absolute; left:74px; right:74px; bottom:24px; padding-top:10px; border-top:1px solid var(--rose); display:flex; align-items:flex-end; justify-content:space-between; gap:24px; color:var(--salvia); z-index:3; }
.documento-capa-rodape-assinatura { font-family:var(--serifada); font-size:13px; font-style:italic; font-weight:600; }
.documento-capa-rodape-prof { color:var(--ameixa); font-size:12px; line-height:1.45; text-align:right; }
.documento-capa-pagina { position:absolute; left:50%; bottom:7px; transform:translateX(-50%); color:#8E8E8E; font-size:9px; line-height:1; white-space:nowrap; z-index:6; }
.documento-capa h1, .documento-capa h2 { color:var(--ameixa); }
.documento-capa .folha-topo { border-color:var(--rose); }
.documento-capa .folha-assinatura { color:var(--salvia); }
.documento-lista-compras { columns:2; column-gap:28px; }
.documento-lista-secao { break-inside:avoid; margin-bottom:14px; }
.documento-lista-secao { border:1px solid #E5DDD9; border-radius:10px; overflow:hidden; background:#FFFFFF; }
.documento-lista-secao h3 { margin:0; padding:7px 10px; background:var(--ok-fundo); color:var(--ok-tinta); }
.documento-lista-secao ul { list-style:none; margin:0; padding:7px 10px 9px; }
.documento-lista-secao li { position:relative; break-inside:avoid; margin:4px 0; padding-left:15px; }
.documento-lista-secao li::before { content:""; position:absolute; left:0; top:5px; width:6px; height:6px; border:1px solid var(--rose); }
.documento-grafico { margin-top:10px; break-inside:avoid; }
.documento-grafico .metricas { display:none; }
.documento-grafico .chart-wrap { border:1px solid #E4D8D5; padding:4px; break-inside:avoid; page-break-inside:avoid; }
.documento-grafico .gr { max-width:100%; height:auto; }
.documento-assinaturas { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:28px; }
.documento-assinaturas > div { text-align:center; }
.documento-assinaturas .assinatura-linha { margin:0 auto; }

/* Uma prescrição por folha: compactação isolada para manter cabeçalho,
   campos legais, assinatura e rodapé dentro de uma única página A4. */
.folha.documento-receituario-item-folha,
.folha.documento-receituario-entrega-folha { break-inside:avoid; page-break-inside:avoid; }
.folha.documento-receituario-item-folha { padding:28px 44px 20px; font-size:10.5px; line-height:1.35; }
.documento-receituario-item-folha .folha-topo { gap:14px; padding-bottom:7px; }
.documento-receituario-item-folha .folha-topo::after { right:226px; }
.documento-receituario-item-folha .folha-marca { width:210px; height:118px; flex-basis:210px; }
.documento-receituario-item-folha .folha-marca-arte { width:210px; height:118px; }
.documento-receituario-item-folha h1 { font-size:24px; }
.documento-receituario-item-folha h2 { margin:10px 0 5px; font-size:17px; }
.documento-receituario-item-folha h3 { margin:5px 0 3px; }
.documento-receituario-item-folha .documento-paciente { margin:6px 0 3px; padding:4px 10px; }
.documento-receituario-item-folha .documento-secao { margin-top:8px; padding-top:3px; }
.documento-receituario-item-folha .documento-grade { gap:5px 12px; }
.documento-receituario-item-folha .documento-campo { min-height:0; padding:3px 6px 4px; }
.documento-receituario-item-folha .item-receituario { margin-top:6px; }
.documento-receituario-item-folha .documento-assinaturas { margin-top:14px; }
.documento-receituario-item-folha .folha-rodape { padding-top:6px; }

/* Variações usadas por documentos legados e opcionais: mesma linguagem editorial. */
.documento-paciente {
  display:flex; align-items:center; gap:10px; width:max-content; max-width:70%;
  margin:10px 0 4px; padding:5px 12px; border-radius:999px;
  background:var(--rose-fundo); color:var(--ameixa); font-size:10px;
}
.documento-paciente span { font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.documento-paciente strong { overflow-wrap:anywhere; }
.documento-energia-opcional {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:var(--ok-fundo); border:1px solid #D6E0CE; border-radius:10px;
  padding:10px 12px; color:var(--ok-tinta);
}
.documento-energia-opcional h2 { color:var(--ok-tinta); margin:0; }
.documento-energia-opcional .documento-campo { min-width:120px; }
.documento-paciente .documento-campo,
.documentos-energia .documento-campo,
.documento-energia-opcional .documento-campo { background:var(--papel); }
.documentos-energia .documento-alerta,
.documento-energia-opcional .documento-alerta { background:var(--ok-fundo); border-color:#D6E0CE; color:var(--ok-tinta); }
.documento-paciente .documento-nota,
.documentos-energia .documento-nota,
.documento-energia-opcional .documento-nota { color:var(--tinta-suave); }

@media print {
  .documentos-tela { display:block; }
  .documentos-menu, .documentos-acoes, .documentos-aviso, .documentos-editor, .documentos-energia { display:none !important; }
  .documentos-preview { overflow:visible; padding:0; }
  .documento-capa { background:#FFFFFF; }
  .folha.documento-capa-estruturada-folha {
    page:plano-capa; width:210mm; height:297mm; min-height:297mm;
    padding:0 !important; margin:0; justify-content:flex-start; overflow:visible;
  }
  .documento-capa-estruturada-folha .documento-capa-arte {
    width:210mm; height:297mm;
  }
  .documento-capa-estruturada-folha .documento-capa-cabecalho { top:9.3mm; left:19.6mm; right:10.1mm; }
  .documento-capa-estruturada-folha .documento-capa-titulo { padding-top:4.5mm; }
  .documento-capa-estruturada-folha .documento-capa-titulo h1 { font-size:9mm; }
  .documento-capa-estruturada-folha .documento-capa-subtitulo { margin-top:2.1mm; font-size:3.7mm; }
  .documento-capa-estruturada-folha .documento-capa-logo { width:105.8mm; height:59.5mm; }
  .documento-capa-estruturada-folha .documento-capa-paciente { left:19.6mm; top:61.6mm; width:128.1mm; }
  .documento-capa-estruturada-folha .documento-capa-paciente-pilula { margin-top:3.4mm; padding:1.9mm 3.7mm; font-size:3.2mm; }
  .documento-capa-estruturada-folha .documento-capa-paciente-pilula span { font-size:2.9mm; }
  .documento-capa-estruturada-folha .documento-capa-mensagem { top:87.3mm; left:10.6mm; right:10.6mm; }
  .documento-capa-estruturada-folha .documento-capa-kicker { font-size:2.9mm; }
  .documento-capa-estruturada-folha .documento-capa-frase { margin-top:5.3mm; font-size:7.7mm; }
  .documento-capa-estruturada-folha .documento-capa-prato { top:113.75mm; width:222.7mm; height:160.34mm; }
  .documento-capa-estruturada-folha .documento-capa-rodape { left:19.6mm; right:19.6mm; bottom:6.4mm; padding-top:2.6mm; }
  .documento-capa-estruturada-folha .documento-capa-rodape-assinatura { font-size:3.4mm; }
  .documento-capa-estruturada-folha .documento-capa-rodape-prof { font-size:3.2mm; }
  .documento-capa-estruturada-folha .documento-capa-pagina { bottom:2.5mm; font-size:2.4mm; }
}


/* ===== impressao.css ===== */
/* ============================================================================
   impressao.css — A4 retrato, sem exceção.
   Exigência do projeto: nenhuma página sai em paisagem. As tabelas largas se
   quebram em blocos de colunas em vez de virar a folha.
   ========================================================================== */

@page {
  size: A4 portrait;
  margin: 0 0 8mm 0;
  @bottom-center {
    content: "Página " counter(page) " de " counter(pages);
    font-family: Nimbus Sans, Arial, sans-serif;
    font-size: 9px;
    color: #8E8E8E;
  }
}

/* A capa usa o A4 físico inteiro. Em Chromium, uma página nomeada com
   margem zero pode não materializar sua margin box; a capa traz, por isso,
   o indicador literal "Página 1" no próprio layout. */
@page plano-capa {
  size: A4 portrait;
  margin: 0;
}

@media print {
  /* fora do papel: tudo que é da ferramenta, não do documento */
  .topo, .trilho, .rodape-backup, .tranca, .modal-fundo, .recado, .nao-imprime { display: none !important; }

  body { background: #FFFFFF; }
  #app { display: block; }
  .conteudo { padding: 0; }

  /* as cores da marca precisam sair na impressora */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* animações não fazem sentido no papel */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .traco { stroke-dashoffset: 0 !important; }
  .aparece { opacity: 1 !important; }

  /* uma folha por documento */
  .folha {
    width: 794px; min-height: 1123px; padding: 40px 56px 26px;
    background: #FFFFFF; box-sizing: border-box;
    display: flex; flex-direction: column;
    page-break-after: always; break-after: page;
  }
  .folha.documento-capa-estruturada-folha {
    page: plano-capa;
    width: 210mm; height: 297mm; min-height: 297mm;
    padding: 0; margin: 0; overflow: visible;
  }
  .folha:last-child { page-break-after: auto; break-after: auto; }

  .folha.documento-plano-fluxo {
    display: block; page: auto; width: 210mm; min-height: 0; padding: 40px 56px 26px; margin: 0;
    page-break-after: auto; break-after: auto;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }

  /* nada de grupo partido no meio da página */
  .grupo-medidas, .item-receituario, .secao-anamnese,
  .card, .aviso, table, tr { break-inside: avoid; page-break-inside: avoid; }
  .documento-plano-fluxo .bloco-refeicao { break-inside: auto; page-break-inside: auto; }

  thead { display: table-header-group; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
}

/* pré-visualização na tela, com a mesma caixa do papel */
.folha {
  width: 794px; min-height: 1123px; padding: 40px 56px 26px;
  background: #FFFFFF; box-sizing: border-box;
  display: flex; flex-direction: column;
  margin: 0 auto var(--e-6); border: 1px solid var(--linha); border-radius: 2px;
  position: relative; overflow: hidden;
}
.folha::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 12px;
  background: var(--rose); pointer-events: none;
}
.folha-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e-6); padding-bottom: 11px;
  position: relative; z-index: 1;
}
.folha-topo::after {
  content: ""; position: absolute; left: 0; right: 316px; bottom: 0;
  border-bottom: 1px solid var(--rose); pointer-events: none;
}
.folha-titulo { min-width: 0; flex: 1 1 auto; }
.folha-marca {
  width: 300px; height: 169px; flex: 0 0 300px; position: relative;
  display: flex; align-items: flex-start; justify-content: flex-end;
}
.folha-marca-arte { width: 300px; height: 169px; object-fit: contain; object-position: top right; display: block; }
.folha-rodape {
  border-top: 1px solid #E7D9D7; padding-top: 9px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-6);
  position: relative; z-index: 1;
}
.assinatura-linha { border-bottom: 1px solid var(--cinza-quente); width: 210px; height: 26px; }
.folha-assinatura {
  text-align: center; font-family: var(--serifada); font-style: italic;
  font-size: 11px; color: var(--salvia); margin-top: 10px;
}

/* A regra de pré-visualização acima também vale durante a impressão. Neutraliza
   aqui a margem entre folhas e usa a medida física exata do A4; sem isso o
   último espaçamento pode virar uma página branca em alguns navegadores. */
@media print {
.folha { width:210mm; min-height:calc(297mm - 8mm); margin:0; border:0; border-radius:0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .traco { stroke-dashoffset: 0 !important; }
  .aparece { opacity: 1 !important; }
}


/* ===== online.css ===== */
#auth-gate {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: var(--papel, #f8f6f2);
}
.auth-card {
  width: min(430px, 100%); box-sizing: border-box; background: var(--branco, #fff);
  padding: clamp(24px, 6vw, 36px); border: 1px solid var(--linha, #e5dfd7);
  border-radius: 14px; box-shadow: 0 8px 30px #382c2112;
}
.auth-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
.auth-brand img { width: 30px; height: 30px; object-fit: contain; }
.auth-card h1 { margin: 24px 0 8px; }
.auth-card p { color: var(--tinta-suave, #71685f); }
.auth-card label { display: block; font-weight: 600; margin: 16px 0 6px; }
.auth-card input {
  width: 100%; box-sizing: border-box; padding: 11px; border: 1px solid #cfc6bb;
  border-radius: 7px; font: inherit;
}
.auth-card input:focus { outline: 2px solid var(--destaque, #9b7560); outline-offset: 2px; }
.auth-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
.auth-error { color: #a12a2a; min-height: 1.4em; }
.auth-status { min-height: 1.4em; }
.auth-link { border: 0; background: none; text-decoration: underline; cursor: pointer; padding: 5px; color: inherit; }
.auth-card button:disabled { opacity: .6; cursor: wait; }
.online-status { font-size: 11px; color: var(--tinta-suave); white-space: nowrap; }
.online-logout { white-space: nowrap; }
.auth-card[hidden], #auth-gate[hidden], #app[hidden] { display: none !important; }

.backup-auto-card {
  margin-top: 20px;
  border-color: color-mix(in srgb, var(--salvia) 56%, var(--linha));
  background: color-mix(in srgb, var(--papel) 94%, var(--salvia));
}
.backup-auto-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.backup-auto-cabecalho strong { display: block; margin-top: 4px; font-size: 14px; color: var(--ameixa); }
.backup-auto-card p {
  margin: 12px 0; color: var(--tinta-suave); font-size: 12.5px;
  line-height: 1.6; max-width: 70ch;
}
.backup-auto-senhas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin: 14px 0 8px;
}
.backup-auto-card > .btn { margin-top: 14px; }
.backup-auto-meta { font-size: 11px; color: var(--tinta-apagada); }
.backup-auto-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.backup-auto-codigo {
  margin-top: 18px; padding: 16px; border: 1px solid var(--salvia); border-radius: 8px;
  background: var(--papel-morno); color: var(--ameixa);
  font: 700 17px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .04em; text-align: center; overflow-wrap: anywhere;
  user-select: all;
}

@media (max-width: 560px) {
  .backup-auto-senhas { grid-template-columns: 1fr; }
  .backup-auto-acoes > * { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  #auth-gate { padding: 12px; }
  .auth-actions > * { width: 100%; }
}