:root {
  /* Identidade do Instituto É Hora de Curar o Mundo (manual 2024): verde #2ECC71, azul #2C3E50, cinza #ECF0F1 */
  --marca: #2ecc71; --marca-escura: #1a7a43; --marca-f: #e3f7eb;
  --fundo: #ffffff;
  --cartao: #ffffff;
  --texto: #2c3e50;
  --suave: #5d6d7e;
  --borda: #e2e7ea;
  --destaque: #2c3e50;
  --destaque-texto: #ffffff;
  --link: #1a7a43;
  --fonte-titulo: "Outfit", system-ui, sans-serif;
  --fonte-texto: "Open Sans", system-ui, sans-serif;
  --alerta-fundo: #fdf0e3;
  --alerta: #9a4d0c;
  --ok-fundo: #e5f3ea;
  --ok: #1f6b3a;
  --perigo: #b3261e;
  --raio: 12px;
  /* tríade e gráficos */
  --c-cerebro: #6a55c9; --c-cerebro-f: #efebfb;
  --c-sintoma: #c2571a; --c-sintoma-f: #fbeee4;
  --c-comport: #12806f; --c-comport-f: #e2f4f0;
  --pos: #c2571a; --neg: #2f6fb3; --neutro: #eeebe7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --marca: #58d68d; --marca-escura: #58d68d; --marca-f: #1b3a2a;
    --fundo: #16212b;
    --cartao: #1e2b37;
    --texto: #e8eef0;
    --suave: #9fb0be;
    --borda: #2f3f4d;
    --destaque: #58d68d;
    --destaque-texto: #16212b;
    --link: #58d68d;
    --alerta-fundo: #3b2a18;
    --alerta: #f2b77c;
    --ok-fundo: #1c3325;
    --ok: #8fd6a8;
    --perigo: #f28b82;
    --c-cerebro: #a597f2; --c-cerebro-f: #2c2742;
    --c-sintoma: #f0a070; --c-sintoma-f: #3a2a1e;
    --c-comport: #6fd1bf; --c-comport-f: #1b332e;
    --pos: #e8834a; --neg: #5b9be0; --neutro: #34312d;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.55 var(--fonte-texto);
}
h1, h2, h3, h4, .marca-nome { font-family: var(--fonte-titulo); font-weight: 600; letter-spacing: -0.01em; }
#app { max-width: 920px; margin: 0 auto; padding: 16px 16px 64px; }
h1 { font-size: 1.6rem; margin: 0.2em 0; }
h2 { font-size: 1.1rem; margin: 0 0 0.6em; }
a { color: var(--link); }
.sub, .meta, .dica { color: var(--suave); }
.meta { font-size: 0.85rem; }
.dica { font-size: 0.9rem; margin-top: 0; }
.vazio { color: var(--suave); font-style: italic; }

.topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.topo .sub { margin: 0; }
.voltar { text-decoration: none; font-size: 0.9rem; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  margin-bottom: 14px;
}
details.cartao summary { cursor: pointer; list-style: none; }
details.cartao summary::-webkit-details-marker { display: none; }
details.cartao summary h2 { display: inline; }
details.cartao summary::before { content: "▸ "; color: var(--suave); }
details[open].cartao summary::before { content: "▾ "; }
details[open].cartao summary { margin-bottom: 10px; }
.titulo-secao { margin: 24px 0 10px; }

label { display: block; margin-bottom: 10px; font-size: 0.92rem; }
input, select, textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  font: inherit;
  color: var(--texto);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 8px;
}
input[type="checkbox"], input[type="radio"] { display: inline-block; width: auto; margin: 0 6px 0 0; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--destaque); outline-offset: 1px; }

button, .botao {
  display: inline-block;
  padding: 9px 16px;
  font: inherit;
  font-weight: 600;
  color: var(--destaque-texto);
  background: var(--destaque);
  border: 1px solid var(--destaque);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
button.sec, .botao.sec { background: transparent; color: var(--destaque); }
button.perigo { background: transparent; color: var(--perigo); border-color: var(--perigo); }
button.link { background: none; border: none; color: var(--suave); padding: 0; font-weight: 400; text-decoration: underline; }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; align-items: end; }
.grade button { margin-bottom: 10px; }
.grade .largo, .grade .grupo { grid-column: 1 / -1; }
.grupo { border: 1px solid var(--borda); border-radius: 8px; padding: 8px 12px 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 12px; }
.grupo legend { font-weight: 600; padding: 0 4px; }

.lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.paciente { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; margin: 0; }
.paciente:hover { border-color: var(--destaque); }

.selo { display: inline-block; font-size: 0.78rem; padding: 2px 8px; border-radius: 99px; background: var(--fundo); border: 1px solid var(--borda); color: var(--suave); }
.selo.alerta { background: var(--alerta-fundo); color: var(--alerta); border-color: transparent; align-self: flex-start; }
.selo.ok { background: var(--ok-fundo); color: var(--ok); border-color: transparent; }

.abas { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 16px; border-bottom: 1px solid var(--borda); }
.abas a { padding: 8px 12px; white-space: nowrap; text-decoration: none; color: var(--suave); border-bottom: 2px solid transparent; }
.abas a.ativa { color: var(--destaque); border-bottom-color: var(--destaque); font-weight: 600; }

.ponto { border-left: 3px solid var(--alerta); background: var(--alerta-fundo); padding: 8px 12px; border-radius: 0 8px 8px 0; margin-bottom: 10px; }
.ponto p { margin: 4px 0; }
.investigar { font-size: 0.88rem; }

.dominios, .checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.dominio, .sugestao {
  display: flex; align-items: flex-start; gap: 4px;
  padding: 10px; border: 1px solid var(--borda); border-radius: 8px; margin: 0; cursor: pointer;
}
.dominio:has(input:checked), .sugestao:has(input:checked) { border-color: var(--destaque); }
.dominio input, .sugestao input { margin-top: 4px; }
.dominio small, .sugestao small { display: block; color: var(--suave); font-size: 0.82rem; margin-top: 2px; }
.sugestao { margin-bottom: 8px; }
.sugestao .selo { margin-left: 6px; }
.check { display: flex; align-items: center; margin: 0; }

.plano { list-style: none; padding: 0; margin: 0; }
.plano li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.perguntas { color: var(--suave); font-size: 0.9rem; margin-top: 0; }

.item { border: none; border-bottom: 1px solid var(--borda); padding: 12px 0; margin: 0; }
.item legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
.opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.opcoes label { margin: 0; }
.opcoes input { position: absolute; opacity: 0; }
.opcoes span { display: inline-block; padding: 6px 12px; border: 1px solid var(--borda); border-radius: 99px; cursor: pointer; font-size: 0.9rem; }
.opcoes input:checked + span { background: var(--destaque); color: var(--destaque-texto); border-color: var(--destaque); }
.opcoes input:focus-visible + span { outline: 2px solid var(--destaque); }
.data-aplicacao { max-width: 220px; }
.resultado { margin: 16px 0; }

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { color: var(--suave); font-weight: 600; font-size: 0.82rem; }
.rolagem { overflow-x: auto; }

.barra-relatorio { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.relatorio { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px; }
.relatorio section { margin-top: 20px; }
.relatorio footer { margin-top: 28px; border-top: 1px solid var(--borda); padding-top: 10px; }
.so-imprimir { display: none; }

#salvo {
  position: fixed; bottom: 16px; right: 16px; padding: 6px 14px; border-radius: 99px;
  background: var(--ok-fundo); color: var(--ok); font-size: 0.85rem;
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
#salvo.visivel { opacity: 1; }

@media print {
  :root { --fundo: #fff; --cartao: #fff; --texto: #000; --suave: #555; --borda: #ccc; --alerta-fundo: #fff; }
  .nao-imprimir, #salvo { display: none !important; }
  .so-imprimir { display: block; white-space: pre-wrap; }
  #app { padding: 0; max-width: none; }
  .relatorio { border: none; padding: 0; }
}

/* Mapa de sintomas */
.escala { margin-bottom: 12px; }
.escala-rotulo, .rotulo-campo { display: block; font-size: 0.92rem; margin: 0 0 6px; }
.escala .opcoes { gap: 4px; }
.escala .opcoes span { min-width: 34px; text-align: center; padding: 6px 8px; }
.bristol { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin-bottom: 12px; }
.bristol label { display: flex; gap: 6px; align-items: flex-start; padding: 8px; border: 1px solid var(--borda); border-radius: 8px; margin: 0; cursor: pointer; }
.bristol label:has(input:checked) { border-color: var(--destaque); }
.bristol small { display: block; color: var(--suave); font-size: 0.82rem; }
.checks { margin-bottom: 12px; }

/* Estratégias */
.estrategia { margin-bottom: 8px; }
.estrategia .sugestao { margin-bottom: 0; }
.estrategia.recomendada .sugestao { border-color: var(--ok); }
.estrategia details { padding: 4px 12px 8px 34px; font-size: 0.92rem; }
.estrategia summary { cursor: pointer; color: var(--destaque); }
.passos { padding-left: 20px; }
.passos li { margin-bottom: 4px; }
.orientacoes { padding-left: 20px; }
.orientacoes li { margin-bottom: 6px; }
.bloco-plano { margin-bottom: 18px; page-break-inside: avoid; }
.bloco-plano h3 { margin-bottom: 4px; }
h3 { font-size: 1rem; margin: 16px 0 8px; }
.nota-clinica { border-left: 3px solid var(--alerta); padding-left: 8px; }

/* Links e página do paciente */
.linha-adicionar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.linha-adicionar select { flex: 1 1 240px; margin: 0; }
.link-box { margin-top: 12px; padding: 12px; border: 1px dashed var(--borda); border-radius: 8px; }
.codigo { font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; word-break: break-all; background: var(--fundo); padding: 8px; border-radius: 6px; }
.config-endereco { margin-top: 12px; }
.plano .acoes { align-items: center; }
.paciente-resp #app { max-width: 640px; }
.opcoes.vertical { flex-direction: column; }
.opcoes.vertical span { display: block; width: 100%; padding: 12px 14px; border-radius: 10px; font-size: 1rem; }
button.grande, .botao.grande { display: block; width: 100%; text-align: center; padding: 14px; font-size: 1.05rem; margin: 12px 0; }
.progresso { height: 6px; background: var(--borda); border-radius: 99px; overflow: hidden; margin-bottom: 12px; }
.progresso div { height: 100%; background: var(--destaque); transition: width 0.2s; }
.item.pendente legend { color: var(--perigo); }

/* IA e relatório montável */
.analise { line-height: 1.6; }
.cit { color: var(--destaque); font-size: 0.72rem; margin-left: 2px; }
.fontes ol { padding-left: 20px; font-size: 0.9rem; }
.fontes li { margin-bottom: 8px; }
.bloco-edit { border: 1px solid var(--borda); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.bloco-edit input, .bloco-edit textarea { margin-bottom: 6px; }
.texto-livre { white-space: pre-wrap; }
#trecho-ia { flex: 1 1 260px; margin: 0; }
.aviso-pedido { background: var(--alerta-fundo); padding: 10px 12px; border-radius: 8px; }

/* 6 eixos */
.eixo { padding: 8px 0; border-bottom: 1px solid var(--borda); }
.eixo small { display: block; color: var(--suave); font-size: 0.85rem; }
.eixo small.falta { color: var(--alerta); }
.tempos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; }
.destaque-eixos { border-color: var(--destaque); }

/* Link e QR code nos documentos */
.link-qr { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.qr { width: 150px; flex: 0 0 150px; background: #fff; padding: 4px; border-radius: 6px; }
.qr svg { width: 100%; height: auto; display: block; }
.bloco-link { page-break-inside: avoid; }
.linha-lembrete { display: grid; grid-template-columns: 2fr 1.2fr 1fr; gap: 0 12px; align-items: end; border-bottom: 1px solid var(--borda); padding-top: 8px; }
@media (max-width: 640px) { .linha-lembrete { grid-template-columns: 1fr; } }
.revisao .opcoes { margin: 10px 0; }

/* Cérebro e corpo */
.cerebro-corpo .grafico { width: 100%; height: auto; display: block; margin: 8px 0; }
.grafico text { font: 12px system-ui, sans-serif; fill: var(--texto); }
.grafico .g-grupo { font-weight: 600; font-size: 12.5px; }
.grafico .g-legenda, .grafico .g-eixo, .grafico .g-semdado { fill: var(--suave); font-size: 11px; }
.grafico .g-semdado { font-style: italic; }
.grafico .g-trilho { fill: var(--borda); opacity: .6; }
.grafico .g-barra { fill: var(--destaque); }
.grafico .g-barra:hover, .grafico .g-ponto:hover { opacity: .8; }
.grafico .g-atencao { stroke: var(--texto); stroke-width: 2; }
.grafico .g-linha { fill: none; stroke: var(--destaque); stroke-width: 2; }
.grafico .g-ponto { fill: var(--destaque); stroke: var(--cartao); stroke-width: 2; }
.multiplos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.multiplos figure { margin: 0; border: 1px solid var(--borda); border-radius: 8px; padding: 6px; }
.multiplos figcaption { font-size: 12px; font-weight: 600; }
.cerebro-corpo .explicacao { background: var(--fundo); border-radius: 8px; padding: 4px 12px; }
.cerebro-corpo .significado { border-left: 3px solid var(--destaque); padding: 2px 0 2px 12px; margin: 12px 0; page-break-inside: avoid; }
.cerebro-corpo .significado h4 { margin: 4px 0; }
.tabela-corr { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.tabela-corr th, .tabela-corr td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--borda); }
.perfil { margin: 8px 0; }
.perfil figcaption { color: var(--suave); font-size: 12px; margin-bottom: 6px; }
.pf-grupo { font-weight: 600; font-size: 13px; margin: 10px 0 2px; }
.pf-linha { display: grid; grid-template-columns: 190px 1fr 150px; gap: 10px; align-items: center; min-height: 28px; font-size: 13px; }
.pf-nome { text-align: right; }
.pf-valor { font-variant-numeric: tabular-nums; }
.pf-trilho { position: relative; height: 14px; background: color-mix(in srgb, var(--borda) 60%, transparent); border-radius: 4px; }
.pf-barra { height: 100%; background: var(--destaque); border-radius: 4px; }
.pf-atencao { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--texto); }
.pf-vazio { background: none; color: var(--suave); font-style: italic; font-size: 12px; height: auto; }
.pf-escala div { display: flex; justify-content: space-between; color: var(--suave); font-size: 11px; }
@media (max-width: 640px) {
  .pf-linha { grid-template-columns: 1fr auto; grid-template-areas: "nome valor" "trilho trilho"; gap: 2px 8px; padding: 4px 0; }
  .pf-nome { grid-area: nome; text-align: left; }
  .pf-valor { grid-area: valor; }
  .pf-trilho { grid-area: trilho; }
  .pf-escala { grid-template-areas: "trilho trilho"; }
  .pf-escala > span { display: none; }
  .pf-escala div { grid-area: trilho; }
}
@media print { .pf-barra, .pf-atencao { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.ciclo-aplic { display: grid; gap: 2px; margin-top: 4px; font-size: 12px; }
.ciclo-aplic input[type="date"] { font-size: 12px; padding: 2px 4px; }
.bloco-ciclo { border: 1px solid var(--borda); border-radius: 8px; padding: 4px 12px 10px; margin: 12px 0; }
.bloco-ciclo label { display: block; margin: 6px 0; }
.semana-de.atual { border-color: var(--destaque); }
.semana-de summary { cursor: pointer; }
.tecnica-de { border-left: 3px solid var(--destaque); padding-left: 12px; margin: 10px 0; page-break-inside: avoid; }
.tecnica-de h4 { margin: 4px 0; }
.tecnica-de ol { margin: 4px 0; padding-left: 20px; }
.protocolo-paciente { page-break-inside: auto; }
.referencias ol { font-size: 13px; padding-left: 20px; }
.referencias li { margin: 4px 0; }
.so-psi { font-size: 12px; color: var(--suave); border-top: 1px dashed var(--borda); padding-top: 4px; }
.divisor-plano { margin-top: 28px; padding-top: 12px; border-top: 2px solid var(--destaque); }
.sintomas-visao .significado h3 { margin: 6px 0 2px; }
/* Diário de sintomas: escala 0 a 10 em uma linha */
.opcoes.escala { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; }
.opcoes.escala span { display: block; padding: 10px 0; text-align: center; border-radius: 8px; min-width: 0; }
.ancoras { display: flex; justify-content: space-between; font-size: 11px; color: var(--suave); margin-top: 2px; }

/* ---------- Tríade cérebro → sintomas → comportamento ---------- */
.triade { display: grid; grid-template-columns: 1fr 26px 1fr 26px 1fr; gap: 6px; align-items: stretch; margin: 10px 0 4px; }
.tri-no { border-radius: 12px; border: 1.5px solid var(--borda); background: var(--cartao); overflow: hidden; page-break-inside: avoid; }
.tri-cab { font-weight: 700; padding: 8px 12px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.tri-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 12px; }
.tri-no.cerebro { border-color: var(--c-cerebro); } .tri-no.cerebro .tri-cab { background: var(--c-cerebro-f); } .tri-no.cerebro .tri-num { background: var(--c-cerebro); }
.tri-no.sintomas { border-color: var(--c-sintoma); } .tri-no.sintomas .tri-cab { background: var(--c-sintoma-f); } .tri-no.sintomas .tri-num { background: var(--c-sintoma); }
.tri-no.comportamento { border-color: var(--c-comport); } .tri-no.comportamento .tri-cab { background: var(--c-comport-f); } .tri-no.comportamento .tri-num { background: var(--c-comport); }
.tri-no ul { margin: 8px 0; padding: 0 12px 0 28px; font-size: 13.5px; }
.tri-no li { margin: 4px 0; }
.tri-no .vazio { padding: 0 12px; font-size: 13px; }
.tag { font-size: 10.5px; border: 1px solid var(--borda); border-radius: 99px; padding: 0 6px; color: var(--suave); white-space: nowrap; }
.tri-seta { display: grid; place-items: center; }
.tri-seta svg { width: 24px; height: 24px; fill: none; stroke: var(--suave); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tri-volta { grid-column: 1 / -1; position: relative; text-align: center; height: 44px; }
.tri-volta svg { position: absolute; inset: 0; width: 100%; height: 40px; fill: none; stroke: var(--c-cerebro); stroke-width: 2; stroke-dasharray: 5 4; }
.tri-volta span { position: relative; top: 22px; background: var(--cartao); padding: 0 8px; font-size: 12px; color: var(--suave); }
.tri-resumo { background: var(--fundo); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
@media (max-width: 760px) {
  .triade { grid-template-columns: 1fr; }
  .tri-seta svg { transform: rotate(90deg); }
  .tri-volta { height: auto; }
  .tri-volta svg { display: none; }
  .tri-volta span { position: static; display: block; border: 1.5px dashed var(--c-cerebro); border-radius: 8px; padding: 6px; }
  .tri-volta span::before { content: "↺ "; }
}

/* ---------- Quadrante mente × corpo ---------- */
.quadrante-grid { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 16px; align-items: center; }
@media (max-width: 640px) { .quadrante-grid { grid-template-columns: 1fr; } }
.quadrante { width: 100%; height: auto; }
.quadrante .q { stroke: var(--cartao); stroke-width: 2; }
.quadrante .q3 { fill: color-mix(in srgb, var(--c-comport) 10%, var(--cartao)); }
.quadrante .q2, .quadrante .q4 { fill: color-mix(in srgb, var(--c-sintoma) 10%, var(--cartao)); }
.quadrante .q1 { fill: color-mix(in srgb, var(--c-sintoma) 24%, var(--cartao)); }
.quadrante .ql { font-size: 10.5px; fill: var(--suave); }
.quadrante .et { font-size: 11px; fill: var(--suave); }
.quadrante .eixo { stroke: var(--suave); stroke-width: 1; }
.quadrante .ponto { fill: var(--c-cerebro); stroke: var(--cartao); stroke-width: 3; }

/* ---------- Sintomas em números ---------- */
.barras { display: grid; gap: 6px; margin-top: 8px; }
.barra-linha { display: grid; grid-template-columns: 210px 1fr 130px; gap: 10px; align-items: center; font-size: 13px; }
@media (max-width: 640px) { .barra-linha { grid-template-columns: 1fr auto; } .barra-linha .b-trilho { grid-column: 1 / -1; } }
.b-trilho { position: relative; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--borda) 60%, transparent); }
.b-fill { height: 100%; border-radius: 4px; background: color-mix(in srgb, var(--c-sintoma) 45%, var(--cartao)); }
.b-fill.alta { background: var(--c-sintoma); }
.b-corte { position: absolute; left: 60%; top: -3px; bottom: -3px; width: 2px; background: var(--texto); }
.b-valor { color: var(--suave); font-variant-numeric: tabular-nums; }

/* ---------- Correlações ---------- */
.matriz-wrap { overflow-x: auto; margin: 10px 0; }
.matriz { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
.matriz th { font-weight: 500; color: var(--suave); text-align: right; padding: 2px 6px; white-space: nowrap; }
.matriz thead th { height: 120px; vertical-align: bottom; text-align: left; padding: 0; }
.matriz thead th span { display: inline-block; transform: rotate(-55deg); transform-origin: left bottom; white-space: nowrap; width: 18px; margin-left: 14px; }
.matriz td { width: 42px; height: 30px; text-align: center; border-radius: 4px; color: var(--texto); font-variant-numeric: tabular-nums; }
.matriz td.vazia { background: transparent; }
.matriz td.sem { color: var(--suave); background: color-mix(in srgb, var(--neutro) 50%, transparent); }
.legenda-matriz { font-size: 12px; color: var(--suave); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.legenda-matriz .sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; }
.legenda-matriz .sw.neg { background: var(--neg); } .legenda-matriz .sw.pos { background: var(--pos); } .legenda-matriz .sw.neu { background: var(--neutro); border: 1px solid var(--borda); }
.achado { border-left: 3px solid var(--c-cerebro); padding: 2px 0 2px 12px; margin: 10px 0; page-break-inside: avoid; }
.achado p { margin: 4px 0; }
.amostra { background: var(--fundo); border-radius: 8px; padding: 6px 14px; margin-top: 10px; font-size: 14px; }
.amostra h4 { margin: 6px 0; }
@media print { .tri-no .tri-cab, .tri-num, .b-fill, .matriz td, .quadrante .q, .legenda-matriz .sw { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ---------- Mapa funcional ---------- */
.mf-form label { display: block; margin: 8px 0; }
.mf-form h4 { margin: 14px 0 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: inline-block; padding: 6px 12px; border: 1px solid var(--borda); border-radius: 99px; cursor: pointer; font-size: 0.9rem; }
.chip input:checked + span { background: var(--c-cerebro-f); border-color: var(--c-cerebro); color: var(--texto); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--destaque); }
.emo-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; }
.emo-linha { display: flex !important; justify-content: space-between; align-items: center; gap: 8px; margin: 0 !important; font-size: 14px; }
.emo-linha select { width: 64px; }
.mf-desenho { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 6px 0 14px; font-size: 13px; page-break-inside: avoid; }
@media (max-width: 760px) { .mf-desenho { grid-template-columns: 1fr 1fr; } }
.mf-passo { border-radius: 10px; padding: 8px 10px; background: var(--fundo); position: relative; }
.mf-tit { font-weight: 700; font-size: 12px; margin-bottom: 4px; }
.mf-passo.emo { background: var(--c-sintoma-f); } .mf-passo.pen { background: var(--c-cerebro-f); }
.mf-passo.faz { background: color-mix(in srgb, var(--c-sintoma-f) 50%, var(--fundo)); } .mf-passo.dif { background: var(--c-comport-f); border: 1.5px solid var(--c-comport); }
.mf-item { border-bottom: 1px solid var(--borda); padding-bottom: 4px; }

/* ---------- Sentir e pensar ---------- */
.emo-barras { display: grid; gap: 5px; margin: 6px 0 10px; }
.emo-barra { display: grid; grid-template-columns: 170px 1fr 40px; gap: 10px; align-items: center; font-size: 13px; }
.emo-barra .et { height: 12px; border-radius: 4px; background: color-mix(in srgb, var(--borda) 60%, transparent); }
.emo-barra .et div { height: 100%; border-radius: 4px; background: var(--c-sintoma); }
.emo-barra.boa .et div { background: var(--c-comport); }
.frase-pessoa { font-style: italic; border-left: 3px solid var(--c-cerebro); padding-left: 12px; }
.reframes { display: grid; gap: 8px; margin: 8px 0; }
.reframe { display: grid; grid-template-columns: 1fr 26px 1fr; gap: 8px; align-items: center; page-break-inside: avoid; }
.rf-pesa { background: var(--c-sintoma-f); border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.rf-cuida { background: var(--c-comport-f); border: 1.5px solid var(--c-comport); border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 600; }
.rf-seta { text-align: center; color: var(--suave); }
@media (max-width: 640px) { .reframe { grid-template-columns: 1fr; } .rf-seta { transform: rotate(90deg); } }

/* ---------- Acolhimento ---------- */
.acolhe.abertura { background: var(--c-cerebro-f); border-radius: 14px; padding: 6px 18px 10px; }
.acolhe.abertura p { font-size: 15.5px; line-height: 1.55; }
.lista-forcas li { margin: 6px 0; }
.lista-forcas li::marker { content: "✦  "; color: var(--c-comport); }
.acolhe.fechamento { background: var(--c-comport-f); border-radius: 14px; padding: 6px 18px 12px; margin-top: 18px; }
.minha-escolha { margin-top: 10px; }
.minha-escolha .linha { display: block; border-bottom: 1px solid var(--suave); height: 26px; }
.corregula li { margin: 6px 0; }
@media print { .acolhe.abertura, .acolhe.fechamento, .rf-pesa, .rf-cuida, .mf-passo, .chip span, .emo-barra .et div { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ---------- Hipóteses diagnósticas (só psicóloga) ---------- */
.hipoteses { margin-top: 14px; border-top: 2px dashed var(--borda); padding-top: 8px; }
.hipotese { border: 1px solid var(--borda); border-left: 4px solid var(--suave); border-radius: 10px; padding: 6px 12px; margin: 8px 0; font-size: 14px; }
.hipotese.avaliar { border-left-color: var(--c-sintoma); } .hipotese.sinais { border-left-color: var(--c-cerebro); }
.hipotese p { margin: 4px 0; }
.hip-cab { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hip-status { font-size: 11px; border-radius: 99px; padding: 1px 8px; background: var(--fundo); border: 1px solid var(--borda); }
.hip-status.avaliar { background: var(--c-sintoma-f); border-color: var(--c-sintoma); }
.hip-status.sinais { background: var(--c-cerebro-f); border-color: var(--c-cerebro); }
.alerta-risco { background: var(--alerta-fundo); border: 1.5px solid var(--alerta); border-radius: 10px; padding: 8px 12px; margin: 8px 0; font-size: 14px; }
.envio-auto { background: var(--fundo); border-radius: 8px; padding: 8px 12px; }
.envio-auto.ok { background: var(--ok-fundo); color: var(--ok); }
.aviso-topo { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); background: var(--ok-fundo); color: var(--ok); border: 1px solid var(--ok); border-radius: 10px; padding: 10px 16px; z-index: 99; box-shadow: 0 4px 16px rgba(0,0,0,.15); max-width: 92vw; }
.opcoes-envio { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .opcoes-envio { grid-template-columns: 1fr; } }
.opcao-envio { border: 1px solid var(--borda); border-radius: 12px; padding: 4px 14px 12px; }
.importar-ficha { display: block; border: 1.5px dashed var(--c-cerebro); border-radius: 10px; padding: 10px; }
.consentimento { background: var(--fundo); border-radius: 10px; padding: 4px 14px 10px; margin: 12px 0; font-size: 14px; }
.login { max-width: 460px; margin: 40px auto; }
.login input { width: 100%; }

/* Área de convites e acessos */
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; display: block; overflow-x: auto; }
.tabela th, .tabela td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela input[type="date"] { min-width: 130px; }

/* Mapa funcional: "Outro" e "Não consigo identificar" */
.mf-outro { display: block; margin: 8px 0 4px; }
.emo-outra { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: end; }
.emo-outra label { margin: 0; }
.chip-nao-id span { border-style: dashed; color: var(--suave); }
.chip-nao-id input:checked + span { color: var(--texto); }

/* Sessões e prontuário */
.sessao { border-left: 3px solid var(--borda); padding: 2px 0 2px 14px; margin: 14px 0; page-break-inside: avoid; }
.sessao h3 { margin: 4px 0 6px; font-size: 1rem; }
.sessao p { margin: 4px 0; }
.sessao-form label { display: block; margin: 8px 0; }
.sessao-form textarea { width: 100%; }
.documento-prontuario section { margin: 18px 0; }
.documento-prontuario h2 { font-size: 1.05rem; border-bottom: 1px solid var(--borda); padding-bottom: 4px; }
.assinatura { margin-top: 48px; text-align: center; }
.linha-assinatura { display: inline-block; min-width: 280px; border-top: 1px solid var(--texto); padding-top: 6px; margin-top: 40px; }
@media print {
  body.imprimindo-prontuario #app > *:not(main), body.imprimindo-prontuario .abas, body.imprimindo-prontuario #conteudo > *:not(#pdf-prontuario) { display: none !important; }
}

/* Check-in da sessão */
.tabela-rolagem { overflow-x: auto; }
.ck-tabela { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.ck-tabela th, .ck-tabela td { padding: 5px 8px; border-bottom: 1px solid var(--borda); text-align: center; white-space: nowrap; }
.ck-tabela td:first-child, .ck-tabela th:first-child { text-align: left; white-space: normal; min-width: 180px; }
.ck-cel { background: color-mix(in srgb, var(--c-cerebro) calc(var(--carga) * 55%), transparent); color: var(--texto); font-weight: 600; }
.ck-vazio { color: var(--suave); }
.ck-melhora { color: #2e7d4f; font-weight: 600; }
.ck-piora { color: #b3261e; font-weight: 600; }
.ck-form .item { margin: 10px 0; }
@media print { .ck-cel { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ---------- Tela de entrada (identidade do Instituto: fundo branco, verde só em detalhes) ---------- */
body.pagina-entrada #app { max-width: 1160px; }
.entrada { display: grid; gap: 64px; padding-top: 4px; }
.entrada-topo { display: flex; align-items: center; gap: 12px; }
.entrada-topo .simbolo { width: 42px; height: auto; }
.entrada-topo div { display: grid; line-height: 1.25; }
.marca-nome { font-size: 1.2rem; color: var(--texto); }
.entrada-hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.selo-marca { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--marca-escura); font-weight: 600; font-size: 0.9rem; }
.selo-marca::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: var(--marca); }
.entrada-hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; margin: 0 0 16px; }
.hero-sub { font-size: 1.1rem; color: var(--suave); margin: 0 0 26px; max-width: 32em; }
.entrada .login { margin: 0; max-width: 440px; padding: 22px; border: 1px solid var(--borda); border-radius: 18px; box-shadow: 0 12px 32px rgba(44, 62, 80, 0.08); }
.entrada .login h2 { margin-bottom: 4px; }
.entrada .login label { display: block; margin: 14px 0 10px; }
.entrada .login input { width: 100%; }
.entrada .login button { width: 100%; padding: 12px; font-size: 1rem; border-radius: 10px; }
.acesso-quem { margin: 12px 0 0; }
.foto { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 24px; background: #f2f4f5; }
.foto.sem-foto { min-height: 220px; }
.hero-foto .foto { aspect-ratio: 5 / 4; object-position: 40% center; }
.entrada-recursos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.recurso { padding: 0; }
.recurso-icone { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--marca-f); color: var(--marca-escura); margin-bottom: 12px; }
.recurso h3 { font-size: 1.05rem; margin: 0 0 6px; }
.recurso p { margin: 0; color: var(--suave); font-size: 0.95rem; }
.entrada-mosaico { display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 14px; }
.entrada-mosaico .m1 { grid-row: span 2; }
.entrada-mosaico .m1 .foto { object-position: 60% center; }
.entrada-mosaico .m3 .foto { object-position: center 30%; }
.entrada-frase { text-align: center; max-width: 760px; margin: 0 auto; }
.entrada-frase blockquote { margin: 0; font-family: var(--fonte-titulo); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.25; color: var(--texto); }
.entrada-frase blockquote::before { content: "“"; display: block; color: var(--marca); font-size: 3.4rem; line-height: 0.6; margin-bottom: 8px; }
.entrada-frase p { color: var(--suave); margin: 14px 0 0; }
.entrada-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.entrada-duas figure { margin: 0; }
.entrada-duas .foto { aspect-ratio: 16 / 10; }
.entrada-duas figcaption { padding: 14px 2px 0; color: var(--suave); }
.entrada-duas figcaption strong { display: block; color: var(--texto); font-family: var(--fonte-titulo); font-size: 1.12rem; margin-bottom: 4px; }
.entrada-rodape { display: flex; align-items: center; gap: 28px; padding: 28px 0 8px; border-top: 1px solid var(--borda); }
.logo-instituto { width: 170px; height: auto; flex: none; }
.entrada-rodape p { margin: 0; }
@media (prefers-color-scheme: dark) { .logo-instituto { content: url("../img/logo-instituto-branco.png"); } .foto { background: #24323f; } }
@media (max-width: 900px) {
  .entrada { gap: 48px; }
  .entrada-hero { grid-template-columns: 1fr; gap: 28px; }
  .hero-foto { order: -1; }
  .hero-foto .foto { aspect-ratio: 16 / 10; }
  .entrada .login { max-width: none; }
  .entrada-recursos { grid-template-columns: 1fr 1fr; }
  .entrada-mosaico { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 160px 160px; }
  .entrada-mosaico .m1 { grid-row: span 1; grid-column: span 2; }
}
@media (max-width: 560px) {
  .entrada-recursos, .entrada-duas { grid-template-columns: 1fr; }
  .entrada-mosaico { grid-template-rows: 180px 130px 130px; gap: 10px; }
  .entrada-rodape { flex-direction: column; align-items: flex-start; gap: 12px; }
}
.abas a.ativa { border-bottom-color: var(--marca); }
.progresso div { background: var(--marca); }
.entrada .login button + button { margin-top: 10px; }
.entrada .login button.link { width: auto; padding: 0; font-size: inherit; }
.entrada .login > button.link:first-child { margin-bottom: 8px; color: var(--suave); }
.entrar-link { margin: 14px 0 0; text-align: center; }
/* Fotos do Laboratório Prático */
.hero-foto .foto { aspect-ratio: 4 / 5; object-position: center 55%; }
.entrada-mosaico { grid-template-columns: repeat(3, 1fr); grid-template-rows: 240px 240px; }
.entrada-mosaico .m1 { grid-row: auto; }
.entrada-mosaico .m1 .foto { object-position: center 30%; }
.entrada-mosaico .m4 .foto { object-position: center 40%; }
.entrada-frase { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: center; text-align: left; max-width: 900px; }
.entrada-frase blockquote::before { margin-left: -2px; }
.frase-foto .foto { aspect-ratio: 3 / 4; object-position: center 30%; }
@media (max-width: 900px) {
  .hero-foto .foto { aspect-ratio: 4 / 3; object-position: center 62%; }
  .entrada-mosaico { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 180px); }
  .entrada-mosaico .m1 { grid-column: auto; }
}
@media (max-width: 560px) {
  .entrada-frase { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .frase-foto { max-width: 220px; margin: 0 auto; }
  .entrada-mosaico { grid-template-rows: repeat(3, 140px); }
}
/* Capa horizontal (P21): psicóloga à esquerda, cliente à direita */
@media (min-width: 901px) { .entrada-hero { grid-template-columns: 1fr 1.25fr; } }
.hero-foto .foto { aspect-ratio: 4 / 3; object-position: 32% center; }
.entrada-mosaico .m3 .foto { object-position: center 45%; }
@media (max-width: 900px) { .hero-foto .foto { aspect-ratio: 16 / 10; object-position: 40% center; } }
/* Números da ciência na capa */
.entrada-ciencia h2 { font-size: 1.35rem; margin: 0 0 18px; }
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.numeros div { padding: 22px 20px; display: grid; gap: 6px; align-content: start; }
.numeros div + div { border-left: 1px solid var(--borda); }
.numeros strong { font-family: var(--fonte-titulo); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1; color: var(--texto); }
.numeros div:last-child strong { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.2; }
.numeros strong::after { content: ""; display: block; width: 28px; height: 3px; border-radius: 3px; background: var(--marca); margin-top: 10px; }
.numeros span { color: var(--suave); font-size: 0.93rem; }
@media (max-width: 900px) { .numeros { grid-template-columns: 1fr 1fr; } .numeros div:nth-child(3) { border-left: none; } .numeros div:nth-child(n+3) { border-top: 1px solid var(--borda); } }
@media (max-width: 480px) { .numeros { grid-template-columns: 1fr; } .numeros div + div { border-left: none; border-top: 1px solid var(--borda); } }
.atualizacao-base { margin: 12px 0 0; }