/* Puerícia · identidade visual (Frente 8, pedidos do Diretor Técnico de 23/10/2026).
   Carregado DEPOIS de app.css: só troca o visual (tokens, tipografia, cantos, sombras) e padroniza as abas.
   - Três paletas, à escolha de cada médico em "Cores do app" (js/paletas.js): A · Sálvia e coral (padrão),
     B · Ameixa e pêssego, C · Petróleo e terracota. Cada uma em modo claro e noturno; contraste do texto conferido
     (WCAG AA, 4,5:1) em site/testes/identidade.test.mjs.
   - As cores de SEGURANÇA não mudam com a paleta e não são tocadas aqui: vermelho de "não usar" (--red*), âmbar/laranja
     do MAV (--mav*, --amber*), as cores da fita de Broselow (faixa da criança, js/faixas.js) e o modo PCR escuro (.pcr).
   - Tipografia: Fraunces (Google Fonts, liberada pela CSP) nos títulos e no nome; IBM Plex Sans no texto; números de dose
     continuam em IBM Plex Sans Condensed.
   - Tokens novos: --p-primaria, --p-destaque, --p-tom, --destaque, --destaque-texto, --destaque-bg, --tom, --sombra, --raio.
     As telas da Frente 7B (Emergência, PCR, Condutas) herdam os tokens; Condutas ganha cor por categoria pelas classes. */

/* ---------- Paletas (gerado e conferido; não editar à mão sem rodar o teste de contraste) ---------- */
:root, :root[data-paleta="a"] {
  --p-primaria: #2f6b5e; --p-destaque: #e07a5f; --p-tom: #f4e3d7; --p-fundo: #faf6f1; --p-texto: #1f2a33; --bg: #faf6f1; --surface: #ffffff; --surface-2: #fcf7f3; --surface-3: #f8efe8; --border: #dce6e4; --line: #eef3f2; --input: #acc4bf; --input-bg: #ffffff; --text: #1f2a33; --text-2: #3e4850; --muted: #626a70; --heading: #2f6b5e; --primary: #2f6b5e; --primary-forte: #26564b; --on-primary: #ffffff; --link: #295e53; --destaque: #e07a5f; --destaque-texto: #ba4324; --destaque-bg: #fbefec; --destaque-borda: #f1c3b7; --on-destaque: #1f2a33; --tom: #f4e3d7; --tom-forte: #b9bfb3; --blue: #2f6b5e; --blue-dark: #27584d; --blue-bg: #eef3f2; --blue-border: #c1d3cf; --teal: #2f6b5e; --teal-dark: #27584d; --teal-bg: #ecf2f1; --chip-bg: #eaf0ef; --chip-fg: #285b50; --azul-c: #eef3f2; --azul-b: #a1bcb7; --sombra: 0 1px 2px rgba(31,42,51,0.05), 0 8px 24px rgba(47,107,94,0.07); --shadow: 0 1px 2px rgba(31,42,51,0.05), 0 8px 24px rgba(47,107,94,0.07); --foco: #e07a5f;
}
:root[data-tema="noturno"], :root[data-paleta="a"][data-tema="noturno"] {
  --p-primaria: #2f6b5e; --p-destaque: #e07a5f; --p-tom: #f4e3d7; --bg: #101917; --surface: #192422; --surface-2: #212e2b; --surface-3: #212e2b; --border: #354542; --line: #283431; --input: #516762; --input-bg: #212e2b; --text: #eaf0ef; --text-2: #c9d4d2; --muted: #94a8a4; --heading: #afded4; --primary: #32675c; --primary-forte: #285349; --on-primary: #ffffff; --link: #98e1d1; --destaque: #e78469; --destaque-texto: #ea927b; --destaque-bg: #32201b; --destaque-borda: #6e4135; --on-destaque: #14100e; --tom: #3e3128; --tom-forte: #604939; --blue: #7dd4c1; --blue-dark: #b0e8dc; --blue-bg: #1a2e29; --blue-border: #396057; --teal: #7dd4c1; --teal-dark: #b0e8dc; --teal-bg: #1c312c; --chip-bg: #2a413c; --chip-fg: #d4ede7; --azul-c: #1a2e29; --azul-b: #396057; --sombra: 0 1px 2px rgba(0,0,0,.35); --shadow: 0 1px 2px rgba(0,0,0,.35); --foco: #ee8063;
}
:root[data-paleta="b"] {
  --p-primaria: #4e3a63; --p-destaque: #efa27a; --p-tom: #eadcef; --p-fundo: #fbf7f4; --p-texto: #262a33; --bg: #fbf7f4; --surface: #ffffff; --surface-2: #f9f5fa; --surface-3: #f5eef2; --border: #e1dee4; --line: #f1eff3; --input: #b8b0c1; --input-bg: #ffffff; --text: #262a33; --text-2: #444850; --muted: #676a70; --heading: #4e3a63; --primary: #4e3a63; --primary-forte: #3e2e4f; --on-primary: #ffffff; --link: #453357; --destaque: #efa27a; --destaque-texto: #b74d16; --destaque-bg: #fdf4ef; --destaque-borda: #f8d5c3; --on-destaque: #262a33; --tom: #eadcef; --tom-forte: #bbabc5; --blue: #4e3a63; --blue-dark: #403051; --blue-bg: #f1eff3; --blue-border: #cac4d0; --teal: #4e3a63; --teal-dark: #403051; --teal-bg: #efedf1; --chip-bg: #edebef; --chip-fg: #423154; --azul-c: #f1eff3; --azul-b: #afa6b9; --sombra: 0 1px 2px rgba(38,42,51,0.05), 0 8px 24px rgba(78,58,99,0.07); --shadow: 0 1px 2px rgba(38,42,51,0.05), 0 8px 24px rgba(78,58,99,0.07); --foco: #efa27a;
}
:root[data-paleta="b"][data-tema="noturno"] {
  --p-primaria: #4e3a63; --p-destaque: #efa27a; --p-tom: #eadcef; --bg: #141019; --surface: #1e1924; --surface-2: #27212e; --surface-3: #27212e; --border: #3d3545; --line: #2e2834; --input: #5c5167; --input-bg: #27212e; --text: #edeaf0; --text-2: #cec9d4; --muted: #9e94a8; --heading: #c6afde; --primary: #4c3b5e; --primary-forte: #3d2f4c; --on-primary: #ffffff; --link: #bc98e1; --destaque: #f19160; --destaque-texto: #f29e73; --destaque-bg: #32231b; --destaque-borda: #6e4935; --on-destaque: #14100e; --tom: #38283e; --tom-forte: #563960; --blue: #a77dd4; --blue-dark: #cbb0e8; --blue-bg: #231a2e; --blue-border: #4c3960; --teal: #a77dd4; --teal-dark: #cbb0e8; --teal-bg: #261c31; --chip-bg: #352a41; --chip-fg: #e0d4ed; --azul-c: #231a2e; --azul-b: #4c3960; --sombra: 0 1px 2px rgba(0,0,0,.35); --shadow: 0 1px 2px rgba(0,0,0,.35); --foco: #ee9263;
}
:root[data-paleta="c"] {
  --p-primaria: #0f5c6e; --p-destaque: #c8643b; --p-tom: #e9d8b9; --p-fundo: #fbf8f2; --p-texto: #1d2b30; --bg: #fbf8f2; --surface: #ffffff; --surface-2: #f8f3ea; --surface-3: #f5edde; --border: #d6e3e6; --line: #ecf2f3; --input: #9fbec5; --input-bg: #ffffff; --text: #1d2b30; --text-2: #3d494d; --muted: #616b6e; --heading: #0f5c6e; --primary: #0f5c6e; --primary-forte: #0c4a58; --on-primary: #ffffff; --link: #0d5161; --destaque: #c8643b; --destaque-texto: #a4512e; --destaque-bg: #f8ece7; --destaque-borda: #e6b9a7; --on-destaque: #ffffff; --tom: #e9d8b9; --tom-forte: #a8b3a3; --blue: #0f5c6e; --blue-dark: #0c4b5a; --blue-bg: #ecf2f3; --blue-border: #b7ced4; --teal: #0f5c6e; --teal-dark: #0c4b5a; --teal-bg: #e9f0f2; --chip-bg: #e7eff1; --chip-fg: #0d4e5e; --azul-c: #ecf2f3; --azul-b: #93b6be; --sombra: 0 1px 2px rgba(29,43,48,0.05), 0 8px 24px rgba(15,92,110,0.07); --shadow: 0 1px 2px rgba(29,43,48,0.05), 0 8px 24px rgba(15,92,110,0.07); --foco: #c8643b;
}
:root[data-paleta="c"][data-tema="noturno"] {
  --p-primaria: #0f5c6e; --p-destaque: #c8643b; --p-tom: #e9d8b9; --bg: #101719; --surface: #192224; --surface-2: #212b2e; --surface-3: #212b2e; --border: #354245; --line: #283234; --input: #516367; --input-bg: #212b2e; --text: #eaeff0; --text-2: #c9d2d4; --muted: #94a4a8; --heading: #afd6de; --primary: #186d81; --primary-forte: #135767; --on-primary: #ffffff; --link: #98d3e1; --destaque: #dd9273; --destaque-texto: #e19f84; --destaque-bg: #32211b; --destaque-borda: #6e4635; --on-destaque: #14100e; --tom: #3e3628; --tom-forte: #605239; --blue: #7dc3d4; --blue-dark: #b0dde8; --blue-bg: #1a2a2e; --blue-border: #395860; --teal: #7dc3d4; --teal-dark: #b0dde8; --teal-bg: #1c2d31; --chip-bg: #2a3d41; --chip-fg: #d4e8ed; --azul-c: #1a2a2e; --azul-b: #395860; --sombra: 0 1px 2px rgba(0,0,0,.35); --shadow: 0 1px 2px rgba(0,0,0,.35); --foco: #ee8b63;
}

/* ---------- Tokens comuns às 3 paletas ---------- */
:root {
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --raio: 14px; --raio-p: 10px; --raio-g: 18px;
  --logo-primaria: var(--p-primaria); --logo-destaque: var(--p-destaque); --logo-fundo: var(--p-tom);
  --esp: 18px;
}
/* Categorias de Condutas: uma cor sutil para cada uma (só organização visual; não é cor de segurança) */
:root {
  --cat-respiratorio: #2f6690; --cat-respiratorio-f: #e8f1f8;
  --cat-infeccao: #a24a1f; --cat-infeccao-f: #fbeee6;
  --cat-gastro: #2a6b60; --cat-gastro-f: #e6f2ef;
  --cat-neuro: #5d4a8a; --cat-neuro-f: #efecf7;
  --cat-alergia: #9a3b66; --cat-alergia-f: #f9ebf1;
  --cat-trauma: #7f5b14; --cat-trauma-f: #f7f0df;
  --cat-emergencia: #a8323b; --cat-emergencia-f: #f9e9ea;
  --cat-outros: #4c5966; --cat-outros-f: #eef1f4;
}
:root[data-tema="noturno"] {
  --cat-respiratorio: #8cc0e8; --cat-respiratorio-f: #172634;
  --cat-infeccao: #f0a983; --cat-infeccao-f: #2e1d15;
  --cat-gastro: #84cdbf; --cat-gastro-f: #142a26;
  --cat-neuro: #bfaeea; --cat-neuro-f: #221d33;
  --cat-alergia: #eba2c3; --cat-alergia-f: #2e1823;
  --cat-trauma: #e3c27a; --cat-trauma-f: #2b2414;
  --cat-emergencia: #f0979d; --cat-emergencia-f: #301719;
  --cat-outros: #b6c1cc; --cat-outros-f: #1f252b;
}

/* ---------- Base e tipografia ---------- */
body { background: var(--bg); color: var(--text); }
:focus-visible { outline: 3px solid var(--destaque-texto); outline-offset: 2px; }
.busca label:focus-within { outline-color: var(--destaque-texto); }
h1, h2, h3 { color: var(--heading); }
a { color: var(--link); }
a:hover { color: var(--primary-forte); }
:root[data-tema="noturno"] a:hover { color: var(--heading); }

/* ---------- Topo: logo novo e nome em fonte elegante ---------- */
.topo { box-shadow: 0 1px 0 var(--line); }
.marca { gap: 10px; color: inherit; }
.marca .logo-puericia { flex: none; }
.marca-nome b { font-family: var(--serif); font-weight: 600; font-size: 25px; letter-spacing: -.2px; color: var(--heading); line-height: 1; }
.marca-nome small { letter-spacing: 2.2px; color: var(--muted); }
.btn-pilula, .btn-cores { border-color: var(--border); color: var(--heading); background: var(--surface); }
.btn-pilula:hover, .btn-cores:hover { border-color: var(--primary); }
.btn-cores { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; border: 1.5px solid var(--border); border-radius: 999px; padding: 5px 12px; min-height: 36px; }
.btn-cores .bolinhas { display: inline-flex; }
.btn-cores .bolinhas i { width: 10px; height: 10px; border-radius: 50%; display: block; border: 1.5px solid var(--surface); margin-left: -3px; }
.btn-cores .bolinhas i:first-child { margin-left: 0; background: var(--p-primaria); }
.btn-cores .bolinhas i:last-child { background: var(--p-destaque); }
.tema { border-color: var(--border); }
.tema button { color: var(--heading); }
.tema button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.icone-btn { background: var(--surface-2); color: var(--heading); border: 1px solid var(--line); }
.menu-cel { border-radius: var(--raio); box-shadow: 0 18px 44px rgba(20, 24, 28, .18); }
.menu-cel .menu-sep { height: 1px; background: var(--line); margin: 4px 8px; }
.menu-cel button svg, .menu-cel a svg { vertical-align: -4px; margin-right: 8px; color: var(--muted); }
.busca label { background: var(--surface-2); border-color: var(--border); border-radius: 12px; }
.busca-res { border-radius: var(--raio); }
.busca-res a:hover, .busca-res a.ativo { background: var(--tom); }
:root[data-tema="noturno"] .busca-res a:hover, :root[data-tema="noturno"] .busca-res a.ativo { background: var(--surface-2); }

/* ---------- Abas: a mesma cor de destaque em todas (sem cor própria por aba) ---------- */
.abas { box-shadow: 0 1px 0 var(--line); gap: 2px; }
.abas a[data-aba] { --aba-cor: var(--destaque); }
.abas a { color: var(--muted); font-weight: 600; gap: 8px; border-bottom-width: 3px; }
.abas a:hover { color: var(--heading); }
.abas a svg { display: inline; width: 20px; height: 20px; flex: none; }
.abas a[aria-current="page"] { color: var(--heading); font-weight: 700; border-bottom-color: var(--destaque); }
.subabas { background: var(--surface-2); border-bottom-color: var(--line); }
.subabas a { border-color: var(--border); color: var(--heading); background: var(--surface); }
.subabas a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.subabas a .n-sub { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; align-items: center; justify-content: center; border-radius: 999px; font-size: 12px; background: var(--destaque-bg); color: var(--destaque-texto); }
.subabas a[aria-current="page"] .n-sub { background: rgba(255, 255, 255, .2); color: var(--on-primary); }

/* ---------- Cabeçalho de tela: título, uma linha do que é e a busca, no mesmo lugar em todas as abas ---------- */
.titulo { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; }
.titulo h1 { font-family: var(--serif); font-weight: 600; font-size: 34px; letter-spacing: -.3px; line-height: 1.12; color: var(--heading); }
.titulo .sub { flex-basis: 100%; font-size: 15px; line-height: 1.45; color: var(--muted); }
.titulo .sub b { color: var(--text); }
.titulo + .busca-aba { margin-top: 2px; }
.tela-cab { display: flex; flex-direction: column; gap: 12px; }
.busca-aba { border-radius: var(--raio); border: 1.5px solid var(--border); background: var(--surface); box-shadow: var(--sombra); }
.busca-aba:focus-within { border-color: var(--primary); }

/* ---------- Os mesmos cartões, cantos, espaçamentos e sombras sutis ---------- */
main.conteudo { gap: var(--esp); }
.cartao, .grupo-doses, .tabela, .cat-cond, details.gaveta, .calc-cartao, .lista-az, .apres-barra, .cartao-via, .legenda,
.crianca-cartao, .atalho, details.guia-extra, .guia .tema, .gav-menu, .menu-calc, .cartoes-via > *, .indicadores > div, .login-form,
.calc-embutida, .perguntas, .mav-cheio, .sugestao, .nao-usar {
  border-radius: var(--raio);
}
.cartao, .grupo-doses, .tabela, .cat-cond, details.gaveta, .calc-cartao, .lista-az, .cartao-via, .atalho, .crianca-cartao, .indicadores > div, details.guia-extra, .guia .tema {
  border-color: var(--border); box-shadow: var(--sombra);
}
.cartao { padding: 16px 18px; }
.cartao > h2, .cartao-tit { font-size: 16px; letter-spacing: .1px; }
.grupo-doses > h2, .tabela .cab, .tabela h2.grupo-med { background: var(--surface-2); }
.aviso { border-radius: var(--raio-p); }
.botao { border-radius: 12px; }
.botao:hover { filter: none; background: var(--primary-forte); }
.botao.sec:hover, .botao.perigo:hover, .botao.peq.contorno:hover, .botao.peq.ambar:hover, .botao.peq.vermelho:hover, .botao.peq.verde-c:hover { background: var(--surface-2); }
.botao.sec { border-color: var(--border); }
.botao.destaque { background: var(--destaque); color: var(--on-destaque); }
.campo input, .campo select, .campo textarea { border-color: var(--input); border-radius: 12px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.mem { background: var(--surface-2); border: 1px solid var(--line); }
.chip { background: var(--chip-bg); color: var(--chip-fg); }
.kg { background: var(--chip-bg); color: var(--chip-fg); }
.check input, .ciente input, .sp-item input { accent-color: var(--primary); }
.caixa { border-radius: var(--raio-g); border-top: 5px solid var(--destaque); }
.caixa h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.2px; }
.toast { background: var(--primary-forte); color: #fff; border-radius: 12px; }
.rodape { background: var(--surface); border-top-color: var(--line); color: var(--muted); }
.vitais > div { background: var(--primary); color: var(--on-primary); }
.nota-diretor { border-radius: 8px; }
.resumo { border-top-color: var(--destaque); }
.resumo h2, .outras-contas > h2, .calc-cab h2 { font-family: var(--serif); font-weight: 600; }
.res-barra span { background: var(--primary); }
.lista-az a[aria-current="page"] { background: var(--tom); color: var(--heading); }
:root[data-tema="noturno"] .lista-az a[aria-current="page"] { background: var(--surface-2); }
.recentes a { background: var(--surface-2); }
.seg { border-color: var(--primary); }

/* ---------- Ícones: o mesmo estilo e o mesmo tamanho nas caixas de ícone ---------- */
.atalho .ico svg, .calc-ic svg, .cat-cond > summary .cat-ic svg, .cat-atalho .cat-ic svg { width: 24px; height: 24px; }
.atalho .ico, .calc-ic, .cat-cond > summary .cat-ic { width: 48px; height: 48px; border-radius: 14px; }

/* ---------- Nova criança: os 5 atalhos iguais (sem a cor própria de cada aba) ---------- */
.crianca-cartao { border: 1px solid var(--border); }
#app .atalho { border: 1px solid var(--border); background: var(--surface); transition: transform .12s, box-shadow .12s, border-color .12s; }
#app .atalho:hover { transform: translateY(-1px); border-color: var(--primary); box-shadow: 0 2px 4px rgba(20, 24, 28, .06), 0 12px 28px color-mix(in srgb, var(--primary) 14%, transparent); }
#app .atalho .ico { background: var(--tom); color: var(--heading); }
:root[data-tema="noturno"] #app .atalho .ico { background: var(--surface-2); }
#app .atalho b { font-family: var(--serif); font-weight: 600; color: var(--heading); letter-spacing: -.2px; }
#app .atalho .desc { color: var(--text-2); }
#app .atalho .pe { background: var(--surface-2); color: var(--link); border-top: 1px solid var(--line); }
#app .atalho .pe::after { color: var(--destaque-texto); }
.ciente { background: var(--surface-2); border: 2px solid var(--primary); }
.previa-faixa { border-radius: var(--raio); }
.crianca-titulo-sec { margin: 6px 0 0; font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--heading); }

/* ---------- Medicamentos e Doses rápidas: filtros e grupos no mesmo padrão ---------- */
.filtros button, .dr-grupos button, .classes-med a, .apres-barra button { border: 1.5px solid var(--border); background: var(--surface); color: var(--heading); border-radius: 999px; }
.filtros button:hover, .dr-grupos button:hover, .classes-med a:hover { border-color: var(--primary); }
.filtros button[aria-pressed="true"], .apres-barra button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.dr-rotulo { background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--amber-border); box-shadow: var(--sombra); }
.dr-rotulo b { color: var(--amber); }
.dr-conta-grupo { background: var(--surface-2); color: var(--link); }
.conta-link { border-left-color: var(--destaque); }
.conta-link b { color: var(--heading); }

/* ---------- Calculadoras: cartões iguais, ícone no tom da paleta ---------- */
#app .calc-cartao { border: 1px solid var(--border); border-left: 1px solid var(--border); }
#app .calc-cartao:hover { border-color: var(--primary); }
#app .calc-ic { background: var(--tom); color: var(--heading); }
:root[data-tema="noturno"] #app .calc-ic { background: var(--surface-2); }
.calc-grupo > h2 { color: var(--muted); letter-spacing: 1.4px; }
.calc-abrir:hover { background: var(--surface-2); }
.calc-seta { color: var(--destaque-texto); }
.menu-calc a[aria-current="page"] { background: var(--tom); }
:root[data-tema="noturno"] .menu-calc a[aria-current="page"] { background: var(--surface-2); }
.menu-calc a[aria-current="page"] span { color: var(--heading); }
.calc-embutida { background: var(--surface-2); border: 1px solid var(--border); }
.calc-cab .calc-rot { color: var(--destaque-texto); }

/* ---------- Condutas: mais respiro; cada categoria com uma cor sutil e o ícone destacado ----------
   Funciona pelas classes que a tela já usa (cat-cond, cat-atalho, cond-cartao, data-cat / data-ir-cat). */
[data-cat="respiratorio"], [data-ir-cat="respiratorio"], [data-cor-cat="respiratorio"] { --cat-cor: var(--cat-respiratorio); --cat-fundo: var(--cat-respiratorio-f); }
[data-cat="infeccao_febre"], [data-ir-cat="infeccao_febre"], [data-cor-cat="infeccao_febre"] { --cat-cor: var(--cat-infeccao); --cat-fundo: var(--cat-infeccao-f); }
[data-cat="gastro_hidratacao"], [data-ir-cat="gastro_hidratacao"], [data-cor-cat="gastro_hidratacao"] { --cat-cor: var(--cat-gastro); --cat-fundo: var(--cat-gastro-f); }
[data-cat="neurologico"], [data-ir-cat="neurologico"], [data-cor-cat="neurologico"] { --cat-cor: var(--cat-neuro); --cat-fundo: var(--cat-neuro-f); }
[data-cat="alergia_pele"], [data-ir-cat="alergia_pele"], [data-cor-cat="alergia_pele"] { --cat-cor: var(--cat-alergia); --cat-fundo: var(--cat-alergia-f); }
[data-cat="trauma_dor_cirurgico"], [data-ir-cat="trauma_dor_cirurgico"], [data-cor-cat="trauma_dor_cirurgico"] { --cat-cor: var(--cat-trauma); --cat-fundo: var(--cat-trauma-f); }
[data-cat="emergencia_choque"], [data-ir-cat="emergencia_choque"], [data-cor-cat="emergencia_choque"] { --cat-cor: var(--cat-emergencia); --cat-fundo: var(--cat-emergencia-f); }
[data-cat="outros"], [data-ir-cat="outros"], [data-cor-cat="outros"] { --cat-cor: var(--cat-outros); --cat-fundo: var(--cat-outros-f); }
.cat-ic { color: var(--cat-cor, var(--heading)); }
/* respiro: título → busca → dica → atalhos → subcategorias, sempre com o mesmo espaço */
.condutas-inicio { display: flex; flex-direction: column; gap: 18px; }
.condutas-inicio > .titulo { margin-bottom: -4px; }
.cond-dica { margin: -6px 2px 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.cond-dica b { color: var(--text-2); font-weight: 600; }
.cat-atalhos { gap: 12px; margin-bottom: 6px; }
.cat-atalho { position: relative; border-radius: var(--raio); border: 1px solid var(--border); background: var(--surface); padding: 12px 14px; min-height: 64px; box-shadow: var(--sombra); color: var(--text); font-weight: 600; transition: border-color .12s, transform .12s, background .12s; }
.cat-atalho:hover { border-color: var(--cat-cor, var(--primary)); background: color-mix(in srgb, var(--cat-fundo, var(--surface-2)) 55%, var(--surface)); color: var(--text); transform: translateY(-1px); }
.cat-atalho small { color: var(--cat-cor, var(--muted)); background: var(--cat-fundo, var(--surface-2)); }
.cat-atalho .cat-ic, .cat-cond > summary .cat-ic, .cat-lat-cab .cat-ic { background: var(--cat-fundo, var(--tom)); color: var(--cat-cor, var(--heading)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat-cor, var(--border)) 22%, transparent); }
.cat-atalho .cat-ic { width: 42px; height: 42px; border-radius: 12px; }
/* cada subcategoria: um cartão com faixa de cor sutil no cabeçalho e o ícone em destaque */
.cat-cond { border: 1px solid var(--border); border-radius: var(--raio-g); box-shadow: var(--sombra); overflow: hidden; background: var(--surface); }
.cat-cond + .cat-cond { margin-top: 0; }
.cat-cond > summary { padding: 16px 20px; gap: 16px; min-height: 76px; background: linear-gradient(90deg, var(--cat-fundo, var(--surface-2)) 0%, color-mix(in srgb, var(--cat-fundo, var(--surface-2)) 35%, var(--surface)) 55%, var(--surface) 100%); border-left: 5px solid var(--cat-cor, var(--primary)); }
.cat-cond[open] > summary { border-bottom: 1px solid var(--line); }
.cat-cond > summary .cat-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--surface); }
.cat-cond > summary .cat-ic svg { width: 28px; height: 28px; }
.cat-cond .cat-tit { gap: 3px; }
.cat-cond .cat-tit b { font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: -.2px; color: var(--heading); }
.cat-cond .cat-tit small { font-size: 13.5px; color: var(--text-2); }
.cat-cond .cat-n { color: var(--cat-cor, var(--heading)); background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat-cor, var(--border)) 30%, transparent); }
.cat-grade { gap: 14px; padding: 18px 20px 20px; }
.cond-cartao { position: relative; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--cat-cor, var(--primary)); border-radius: 12px; padding: 13px 34px 13px 16px; gap: 4px; min-height: 66px; justify-content: center; transition: border-color .12s, background .12s, box-shadow .12s; }
.cond-cartao::after { content: '›'; position: absolute; right: 14px; top: 50%; transform: translateY(-52%); font-size: 22px; font-weight: 600; color: var(--cat-cor, var(--muted)); opacity: .7; }
.cond-cartao b { color: var(--text); font-size: 15.5px; font-weight: 650; line-height: 1.3; }
.cond-cartao small { color: var(--muted); font-size: 12.5px; }
.cond-cartao:hover { background: color-mix(in srgb, var(--cat-fundo, var(--surface-2)) 60%, var(--surface)); border-color: var(--cat-cor, var(--primary)); box-shadow: var(--sombra); }
.cond-cartao:hover b { color: var(--heading); }
.cat-lat + .cat-lat { margin-top: 12px; }
.cat-lat-cab { border-bottom-color: var(--cat-fundo, var(--line)); color: var(--cat-cor, var(--heading)); }
.cat-lat-cab .cat-ic { width: 26px; height: 26px; border-radius: 8px; }
.trilha-cat { background: var(--cat-fundo, var(--tom)); color: var(--cat-cor, var(--heading)); }
.lista-condutas a[aria-current="page"] { background: var(--tom); color: var(--heading); }
:root[data-tema="noturno"] .lista-condutas a[aria-current="page"] { background: var(--surface-2); }
:root[data-tema="noturno"] .cat-cond > summary .cat-ic, :root[data-tema="noturno"] .cat-cond .cat-n { background: var(--surface-2); }

/* ---------- Gestão ---------- */
.indicadores > div { border-top-width: 4px; }
.sit.novo { background: var(--blue-bg); color: var(--blue-dark); }
.tipo-rel { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .4px; border-radius: 999px; padding: 2px 9px; background: var(--chip-bg); color: var(--chip-fg); }
.t-sug .cab, .t-sug .lin { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) 110px 200px; }

/* ---------- Entrada (login): logo novo, nome em fonte elegante, painel na cor da paleta ---------- */
.login-marca { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--p-destaque) 22%, transparent), transparent 55%), var(--p-primaria); }
:root[data-tema="noturno"] .login-marca { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--p-destaque) 16%, transparent), transparent 55%), color-mix(in srgb, var(--p-primaria) 70%, #000); }
.login-marca .nome { font-family: var(--serif); font-weight: 600; letter-spacing: -1px; }
.login-marca .traco { width: 72px; height: 4px; border-radius: 999px; background: var(--p-destaque); }
.login-marca .sub { color: rgba(255, 255, 255, .78); }
.login-marca .entrada-titulo { font-family: var(--serif); font-weight: 600; letter-spacing: -.4px; }
.login-marca .entrada-sub, .login-marca p { color: rgba(255, 255, 255, .88); }
.entrada-provas li::before { background: var(--p-destaque); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-destaque) 25%, transparent); }
.login-marca .entrada-faixa { color: rgba(255, 255, 255, .72); }
.login-marca .logo-puericia { filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .18)); }
.login-form { box-shadow: 0 2px 6px rgba(20, 24, 28, .05), 0 18px 48px color-mix(in srgb, var(--p-primaria) 12%, transparent); }
.login-form h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -.3px; color: var(--heading); }

/* ---------- Mostrar a senha (botão de olho acessível) ---------- */
.senha-caixa { position: relative; display: flex; align-items: stretch; }
.senha-caixa input { flex: 1; min-width: 0; padding-right: 108px !important; }
.olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 4px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--link); font-size: 13.5px; font-weight: 700; }
.olho:hover { background: var(--surface-2); }
.olho[aria-pressed="true"] { color: var(--destaque-texto); }

/* ---------- Cores do app (escolha da paleta) ---------- */
.paletas-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.paleta-op { display: flex; flex-direction: column; gap: 10px; text-align: left; border: 2px solid var(--border); border-radius: var(--raio); padding: 12px; background: var(--surface); color: var(--text); min-height: 44px; }
.paleta-op:hover { border-color: var(--input); }
.paleta-op[aria-pressed="true"] { border-color: var(--destaque-texto); box-shadow: 0 0 0 3px color-mix(in srgb, var(--destaque) 22%, transparent); }
.paleta-op .amostra { border-radius: 12px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .08); }
.paleta-op .amostra-topo { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.paleta-op .amostra-topo b { font-family: var(--serif); font-weight: 600; font-size: 17px; }
.paleta-op .amostra-corpo { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.paleta-op .amostra-linha { height: 7px; border-radius: 999px; opacity: .85; }
.paleta-op .amostra-bt { align-self: flex-start; font-size: 11.5px; font-weight: 700; color: #fff; border-radius: 999px; padding: 3px 10px; }
.paleta-op .cores { display: flex; gap: 4px; }
.paleta-op .cores i { width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .12); }
.paleta-op .nome-p { font-weight: 700; font-size: 15px; color: var(--heading); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.paleta-op .nome-p small { font-size: 11.5px; font-weight: 700; color: var(--destaque-texto); }
.paletas-nota { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }

/* ---------- Calculadoras novas e o padrão de todas as contas ---------- */
.conta-serve { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--destaque); border-radius: var(--raio-p); padding: 10px 14px; }
.conta-serve b { color: var(--heading); }
.conta-crianca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--raio); padding: 10px 14px; font-size: 14.5px; }
.conta-crianca b { color: var(--heading); }
.conta-crianca .botao { margin-left: auto; }
.conta-crianca.rapida { background: var(--destaque-bg); border: 2px dashed var(--destaque-borda); }
.conta-crianca.rapida b { color: var(--destaque-texto); }
.outro-peso { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.campos-grandes { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.campo-g { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; color: var(--heading); }
.campo-g input, .campo-g select { font-family: var(--cond); font-size: 28px; font-weight: 700; color: var(--heading); width: 170px; min-height: 56px; padding: 8px 12px; border: 1.5px solid var(--input); border-radius: 12px; background: var(--input-bg); }
.campo-g select { font-family: var(--sans); font-size: 18px; width: 150px; }
.campo-g small { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.campo-g input:focus, .campo-g select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.conta-res { border-radius: var(--raio); border: 2px solid var(--primary); background: var(--surface); padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--sombra); }
.conta-res .rot { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.conta-res .grande { font-family: var(--cond); font-weight: 700; font-size: 44px; line-height: 1.05; color: var(--heading); }
.conta-res .grande small { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--muted); }
.conta-res .linhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.conta-res .linhas > div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.conta-res .linhas .num { font-size: 30px; }
.conta-res.vazio { border-style: dashed; border-color: var(--border); box-shadow: none; color: var(--muted); }
.conta-res.alerta { border-color: var(--red); }
.conta-res.c0 { border-color: var(--verde-b); background: var(--verde-c); }
.conta-res.c1 { border-color: var(--amar-b); background: var(--amar-c); }
.conta-res.c2 { border-color: var(--verm-b); background: var(--verm-c); }
.conta-res.c0 .grande, .conta-res.c1 .grande, .conta-res.c2 .grande { color: var(--text); }
.conta-como { background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); }
.conta-como > summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--heading); min-height: 44px; }
.conta-como > div { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text-2); }
.aviso-livre { border: 2px solid var(--red); background: var(--red-bg); color: var(--red-dark); border-radius: var(--raio); padding: 12px 16px; font-size: 16px; line-height: 1.45; }
.aviso-livre b { font-size: 17px; letter-spacing: .2px; }
/* TEP: os três lados */
.tep-lados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tep-lado { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); padding: 14px; box-shadow: var(--sombra); }
.tep-lado h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 20px; }
.tep-lado h3 small { display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.tep-lado p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.tep-lado p b { color: var(--text); }
.par-bt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.par-bt button, .avdn-op { min-height: 52px; border-radius: 12px; border: 2px solid var(--border); background: var(--surface); color: var(--heading); font-weight: 700; font-size: 16px; padding: 8px 10px; }
.par-bt button[aria-pressed="true"].normal { border-color: var(--verde-b); background: var(--verde-c); color: var(--text); }
.par-bt button[aria-pressed="true"].alterado { border-color: var(--verm-b); background: var(--verm-c); color: var(--text); }
.avdn-ops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.avdn-op { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 92px; justify-content: center; }
.avdn-op b { font-family: var(--cond); font-size: 40px; line-height: 1; }
.avdn-op span { font-size: 13.5px; font-weight: 600; color: var(--text-2); text-align: center; }
.avdn-op[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.avdn-op[aria-pressed="true"] span { color: var(--on-primary); }
.asma-tab { overflow-x: auto; }

@media (max-width: 1100px) { .tep-lados { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Tutorial: miniaturas das abas no mesmo padrão ---------- */
.tut-aba, .tut-aba-mini { border-color: var(--border); }
.tut-aba.emg, .tut-aba.dos, .tut-aba.con, .tut-aba-mini.emg, .tut-aba-mini.med, .tut-aba-mini.con, .tut-aba-mini.dos, .tut-aba-mini.cal { color: var(--heading); border-color: var(--border); }
:root[data-tema="noturno"] .tut-aba-mini.emg { color: var(--heading); }
.caixa.tutorial { border-top-color: var(--destaque); }
.tut-pontos span.on { background: var(--destaque); }
.tut-marca b { font-family: var(--serif); font-weight: 600; }

/* ---------- Celular (390 px) ---------- */
@media (max-width: 760px) {
  .marca-nome b { font-size: 21px; }
  .titulo h1 { font-size: 27px; }
  .titulo .sub { font-size: 14px; }
  .abas a { border-bottom: 0; }
  .abas a svg { width: 22px; height: 22px; }
  .abas a[aria-current="page"] { border-top-color: var(--destaque); color: var(--heading); }
  .abas a[aria-current="page"] svg { color: var(--destaque-texto); }
  .cartao { padding: 14px; }
  .atalho .ico, .calc-ic { width: 44px; height: 44px; }
  .condutas-inicio { gap: 14px; }
  .cat-cond > summary { padding: 12px 14px; gap: 12px; min-height: 68px; }
  .cat-cond > summary .cat-ic { width: 44px; height: 44px; }
  .cat-cond .cat-tit b { font-size: 19px; }
  .cat-grade { padding: 12px 12px 14px; gap: 10px; }
  .cond-cartao { min-height: 58px; }
  .paletas-grade { grid-template-columns: minmax(0, 1fr); }
  .paleta-op { flex-direction: row; align-items: center; }
  .paleta-op .amostra { flex: 0 0 120px; }
  .paleta-op .info-p { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .tep-lados { grid-template-columns: minmax(0, 1fr); }
  .avdn-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo-g input { width: 140px; font-size: 26px; }
  .conta-res .grande { font-size: 38px; }
  .conta-crianca .botao { margin-left: 0; }
  .login-marca .traco { width: 56px; }
  .btn-cores { display: none; }
}
@media (pointer: coarse) { .olho { min-height: 44px; } }

/* ---------- Topo do computador: conta num menu e botões compactos (nada some nem sai da tela em 1440 px) ---------- */
.topo .busca { flex: 1 1 260px; min-width: 220px; max-width: 520px; }
.topo .espaco { flex: 0 0 0; }
.tema button .rot-btn, .btn-pilula .rot-btn { white-space: nowrap; }
.btn-pilula { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
details.conta { position: relative; flex: none; }
details.conta > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px 4px 6px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--heading); font-weight: 600; font-size: 13.5px; cursor: pointer; }
details.conta > summary::-webkit-details-marker { display: none; }
details.conta > summary:hover, details.conta[open] > summary { border-color: var(--primary); }
details.conta .conta-ic { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--tom); color: var(--heading); }
:root[data-tema="noturno"] details.conta .conta-ic { background: var(--surface-2); }
details.conta .nome-u { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline; }
details.conta .conta-seta { font-size: 11px; color: var(--muted); }
.conta-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); box-shadow: 0 18px 44px rgba(20, 24, 28, .18); padding: 6px; display: flex; flex-direction: column; z-index: 40; }
.conta-menu .conta-quem { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.conta-menu .conta-quem b { color: var(--heading); font-size: 14px; }
.conta-menu .conta-quem small { color: var(--muted); font-size: 12.5px; }
.conta-menu a, .conta-menu button { display: block; text-align: left; padding: 10px 12px; min-height: 40px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--link); background: none; border: 0; text-decoration: none; }
.conta-menu a:hover, .conta-menu button:hover { background: var(--surface-2); }
/* rótulo escondido só da vista (continua para o leitor de tela, com aria-label e title) */
@media (max-width: 1599px) {
  .topo .tema button .rot-btn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topo .tema button { padding: 6px 10px; }
}
@media (max-width: 1399px) {
  .topo .btn-pilula .rot-btn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topo .btn-pilula { padding: 6px 10px; min-width: 40px; justify-content: center; }
}
@media (max-width: 760px) { details.conta { display: none; } }
@media (min-width: 761px) { .topo { gap: 12px; } .topo .busca { min-width: 200px; } }

/* ---------- Gestão: títulos de seção e os 5 indicadores do resumo ---------- */
.titulo h2.h-sec { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 24px; letter-spacing: -.2px; color: var(--heading); }
.grade-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.indicadores > div { background: var(--surface); }
.indicadores .num { font-family: var(--cond); font-weight: 700; line-height: 1.1; }
@media (max-width: 1100px) { .grade-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .indicadores.grade-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .indicadores.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .indicadores.grade-3 > div { padding: 8px 10px; } }
.paleta-op .nome-p { flex-wrap: wrap; font-size: 14.5px; line-height: 1.3; }
.paleta-op .nome-p small { flex-basis: 100%; }
.conta-menu a svg, .conta-menu button svg { vertical-align: -4px; margin-right: 10px; color: var(--muted); }

/* ---------- Sepse: os passos na cor da paleta (como as gavetas da Emergência); o vermelho fica só para alerta ---------- */
.sep-n { background: var(--primary); color: var(--on-primary); font-family: var(--cond); font-weight: 700; }
.sep-sec > h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.2px; }