/* Painel de saúde — visual "instrumento técnico" */
:root {
  --bg: #0f0f0d;
  --bg-2: #141412;
  --superficie: #1a1a17;
  --linha: #2a2924;
  --linha-2: #3a3832;
  --texto: #edebe3;
  --suave: #9a978c;
  --apagado: #5f5d55;
  --destaque: #ff6b1a;
  --verde: #7ccf86;
  --amarelo: #f0b43c;
  --vermelho: #ef5b4b;
  --display: 'Archivo', 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--texto); }
body { font-family: var(--display); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
strong { font-weight: 600; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--linha); }
.oculto { display: none !important; }

/* ---------- Tipografia utilitária ---------- */
.rotulo { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.num { font-family: var(--display); font-stretch: 75%; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.suave { color: var(--suave); }
.verde { color: var(--verde); } .amarelo { color: var(--amarelo); } .vermelho { color: var(--vermelho); }

/* ---------- Estrutura ---------- */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

.trilho {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--linha); background: var(--bg-2);
  padding: 28px 20px 20px;
}
.marca { margin-bottom: 40px; }
.marca .nome { font-weight: 800; font-stretch: 112%; font-size: 19px; letter-spacing: -.01em; }
.marca .nome em { font-style: normal; color: var(--destaque); }
.marca .rotulo { margin-top: 4px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-left: 2px solid transparent;
  color: var(--suave); text-align: left; font-size: 15px;
}
.nav button:hover { color: var(--texto); }
.nav button.ativo { color: var(--texto); border-left-color: var(--destaque); background: linear-gradient(90deg, #ff6b1a14, transparent); }
.nav .contador { font-family: var(--mono); font-size: 11px; color: var(--bg); background: var(--amarelo); padding: 1px 6px; }
.nav .contador:empty { display: none; }

.trilho-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.btn-relatorio {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--linha-2); color: var(--texto); font-size: 14px; text-align: left;
}
.btn-relatorio:hover { border-color: var(--texto); }
.btn-relatorio svg { flex: none; }

.status { font-family: var(--mono); font-size: 11px; color: var(--suave); line-height: 1.6; }
.status .ponto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--apagado); margin-right: 6px; }
.status.ligado .ponto { background: var(--verde); box-shadow: 0 0 0 3px #7ccf8622; }

.btn-conectar {
  position: relative; overflow: hidden;
  background: var(--destaque); color: #160800;
  font-weight: 800; font-stretch: 112%; letter-spacing: .06em; font-size: 15px;
  padding: 16px 12px; text-align: center;
}
.btn-conectar:hover { filter: brightness(1.08); }
.btn-conectar:disabled { cursor: default; }
.btn-conectar .barra { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #160800; transition: width .5s; }

.conteudo { padding: 36px 48px 40px; max-width: 1320px; width: 100%; }

/* ---------- Cabeçalho de tela ---------- */
.topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--linha); margin-bottom: 28px; flex-wrap: wrap; }
.topo h1 { font-size: 40px; font-weight: 800; font-stretch: 85%; letter-spacing: -.02em; line-height: 1; }
.topo .rotulo { margin-bottom: 10px; }
.topo p.suave { margin-top: 8px; max-width: 560px; }

/* Abas de texto (período / comparação / faixa) */
.abas-texto { display: flex; gap: 18px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.abas-texto button { color: var(--apagado); padding: 4px 0; border-bottom: 2px solid transparent; }
.abas-texto button:hover { color: var(--suave); }
.abas-texto button.ativo { color: var(--texto); border-bottom-color: var(--destaque); }
.controles { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

/* ---------- Seções ---------- */
.secao { margin-bottom: 36px; }
.secao-cab { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 16px; }
.secao-cab .dica { font-size: 13px; color: var(--apagado); }

/* ---------- Hoje: leitura geral ---------- */
.leitura-geral { display: grid; grid-template-columns: 1fr 300px; gap: 48px; margin-bottom: 40px; }
.manchete { font-size: 30px; font-weight: 600; font-stretch: 90%; line-height: 1.15; letter-spacing: -.015em; max-width: 720px; }
.manchete-linhas { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; color: var(--suave); font-size: 16px; }
.manchete-linhas .marcador { display: inline-block; width: 18px; font-family: var(--mono); }

.placar { border-left: 1px solid var(--linha); padding-left: 28px; }
.placar-linha { display: grid; grid-template-columns: 44px 1fr 60px; align-items: center; gap: 12px; padding: 7px 0; }
.placar-linha .num { font-size: 34px; line-height: 1; }
.placar-linha .trilha { height: 4px; background: var(--linha); }
.placar-linha .trilha div { height: 100%; }
.placar-linha .rotulo { text-align: right; }

.tipo-hoje { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linha); }
.tipo-hoje .rotulo { margin-bottom: 10px; }

/* Seletor de tipo de dia */
.tipos { display: flex; flex-wrap: wrap; gap: 6px; }
.tipo-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--linha-2); font-size: 13px; color: var(--suave); }
.tipo-btn:hover { color: var(--texto); border-color: var(--suave); }
.tipo-btn .q { width: 8px; height: 8px; display: inline-block; }
.tipo-btn.ativo { color: var(--bg); font-weight: 600; }

/* Agenda */
.agenda { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.agenda-dia { padding: 14px 14px 16px; background: var(--bg); text-align: left; display: flex; flex-direction: column; gap: 4px; min-height: 112px; }
.agenda-dia:hover { background: var(--superficie); }
.agenda-dia .dia-num { font-size: 30px; line-height: 1; }
.agenda-dia .bloco { height: 6px; margin-top: auto; }
.agenda-dia .tipo-nome { font-size: 13px; }
.agenda-dia.vazio .bloco { background: repeating-linear-gradient(90deg, var(--linha-2) 0 6px, transparent 6px 10px); }
.agenda-dia.vazio .tipo-nome { color: var(--apagado); }
/* Calendário do mês inteiro */
.cal-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-nav button { font-family: var(--mono); color: var(--suave); padding: 6px 12px; border: 1px solid var(--linha-2); }
.cal-nav button:hover:not(:disabled) { color: var(--texto); border-color: var(--suave); }
.cal-nav button:disabled { opacity: .3; cursor: default; }
.cal-nav .cal-titulo { min-width: 150px; text-align: center; font-weight: 700; font-size: 16px; }
.cal-falta { font-size: 13px; color: var(--amarelo); }
.cal-falta.ok { color: var(--verde); }
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 4px; }
.cal-semana span { font-family: var(--mono); font-size: 10.5px; color: var(--apagado); text-transform: uppercase; letter-spacing: .06em; padding-left: 6px; }
.agenda-dia.fora { pointer-events: none; }
.agenda-dia.fora:hover { background: var(--bg); }
.agenda-dia.hoje { box-shadow: inset 0 0 0 2px var(--destaque); }
.agenda-dia.esqueceu .bloco { background: repeating-linear-gradient(90deg, var(--amarelo) 0 6px, transparent 6px 10px); opacity: .7; }
.agenda-dia.esqueceu .tipo-nome { color: var(--amarelo); }
.agenda-dia.antes { opacity: .35; pointer-events: none; }
.btn-limpar-dia { margin-top: 14px; }

/* Eventos da agenda Google */
.evento-ag { display: grid; grid-template-columns: 190px 1fr auto; gap: 24px; align-items: center; padding: 16px 0 16px 14px; border-bottom: 1px solid var(--linha); border-left: 2px solid transparent; }
.evento-ag:first-child { border-top: 1px solid var(--linha); }
.evento-ag.pendente { border-left-color: var(--destaque); background: linear-gradient(90deg, #ff6b1a0d, transparent 40%); }
.evento-ag.provavel .ev-titulo { color: var(--suave); }
.evento-ag.recusado { opacity: .45; }
.ev-titulo { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ev-info { font-size: 13.5px; color: var(--suave); margin-top: 2px; }
.ev-previa { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-family: var(--mono); font-size: 11px; color: var(--suave); }
.ev-previa .prev { display: inline-flex; align-items: center; gap: 6px; }
.ev-previa i { display: inline-block; width: 14px; height: 4px; }
.ev-acoes { display: flex; align-items: center; gap: 8px; }
.btn-peq { padding: 8px 16px; font-size: 13px; }
.btn-texto { font-family: var(--mono); font-size: 11px; color: var(--apagado); text-decoration: underline; }
.btn-texto:hover { color: var(--texto); }
.resp { font-size: 14px; color: var(--suave); }
.resp.ok { color: var(--verde); }

/* ---------- Leituras (métricas) ---------- */
.leituras { border-top: 1px solid var(--linha); }
.leitura {
  display: grid; grid-template-columns: minmax(220px, 1.5fr) 150px minmax(220px, 1.5fr) 150px 120px 28px;
  align-items: center; gap: 28px; padding: 18px 0; border-bottom: 1px solid var(--linha);
}
.leitura:hover { background: linear-gradient(90deg, transparent, #ffffff05 20%, #ffffff05 80%, transparent); }
.l-nome { display: flex; gap: 14px; align-items: flex-start; }
.l-nome .idx { font-family: var(--mono); font-size: 11px; color: var(--apagado); padding-top: 4px; }
.l-nome .nome { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.l-nome .frase { font-size: 13.5px; color: var(--suave); margin-top: 3px; line-height: 1.4; }
.selo { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border: 1px solid currentColor; font-weight: 500; }

.l-valor .num { font-size: 44px; line-height: .95; display: block; }
.l-valor .un { font-family: var(--mono); font-size: 11px; color: var(--suave); }

.regua { position: relative; height: 34px; }
.regua .zonas { position: absolute; left: 0; right: 0; top: 12px; height: 6px; display: flex; }
.regua .zonas div { height: 100%; opacity: .32; }
.regua .marca-atual { position: absolute; top: 4px; width: 3px; height: 22px; background: var(--texto); transform: translateX(-50%); }
.regua .marca-base { position: absolute; top: 9px; width: 9px; height: 12px; border: 1.5px solid var(--suave); transform: translateX(-50%); }
.regua .escala { position: absolute; left: 0; right: 0; bottom: -6px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--apagado); }

.l-delta { font-size: 14px; }
.l-delta .d { font-weight: 600; font-variant-numeric: tabular-nums; }
.l-delta small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--apagado); margin-top: 2px; }
.l-delta.melhorou .d { color: var(--verde); }
.l-delta.piorou .d { color: var(--vermelho); }
.l-delta.estavel .d, .l-delta.semdados .d { color: var(--suave); }

.l-spark { height: 36px; }
.btn-info { width: 26px; height: 26px; border: 1px solid var(--linha-2); font-family: var(--mono); font-size: 12px; color: var(--suave); }
.btn-info:hover { color: var(--destaque); border-color: var(--destaque); }

.legenda-regua { display: flex; gap: 20px; font-family: var(--mono); font-size: 10.5px; color: var(--apagado); }
.legenda-regua span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-regua i { display: inline-block; }

/* ---------- Tendências ---------- */
.filtros { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.filtro-linha { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.filtro-linha > .rotulo { width: 110px; flex: none; }
.chips-metrica { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.chips-metrica button { color: var(--apagado); font-size: 14px; padding: 3px 0; border-bottom: 2px solid transparent; }
.chips-metrica button:hover { color: var(--suave); }
.chips-metrica button.ativo { color: var(--texto); border-bottom-color: var(--destaque); }

.painel { border: 1px solid var(--linha); background: var(--bg-2); padding: 24px; }
.painel-cab { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; gap: 20px; }
.painel-cab h2 { font-size: 22px; font-weight: 700; font-stretch: 90%; }
.legenda { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px; font-family: var(--mono); font-size: 10.5px; color: var(--suave); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { display: inline-block; width: 14px; }
.grafico { height: 320px; }

.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { font-weight: 400; text-align: center; padding: 10px 12px; border-bottom: 1px solid var(--linha-2); }
.tabela th:first-child, .tabela td:first-child { text-align: left; }
.tabela td { padding: 11px 12px; border-bottom: 1px solid var(--linha); text-align: center; font-variant-numeric: tabular-nums; }
.tabela td .pt { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.tabela th .q { display: inline-block; width: 8px; height: 8px; margin-right: 6px; }

.conclusoes { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.conclusoes div { display: flex; gap: 10px; }
.conclusoes .q { flex: none; width: 8px; height: 8px; margin-top: 7px; }

/* Comparar */
.comparador { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.comp-lado { display: flex; align-items: center; gap: 10px; }
.comp-x { font-family: var(--mono); color: var(--apagado); }
.comparador .dica { margin-left: auto; font-size: 13px; color: var(--apagado); }
.lado { display: inline-grid; place-items: center; width: 22px; height: 22px; background: var(--destaque); color: #160800; font-family: var(--mono); font-size: 11px; font-weight: 500; margin-right: 6px; }
.seletor { background: var(--bg-2); border: 1px solid var(--linha-2); padding: 9px 12px; font-size: 14px; min-width: 250px; outline: none; cursor: pointer; }
.seletor:focus { border-color: var(--destaque); }
.seletor option { background: var(--bg-2); color: var(--texto); }
.tabela-comp td:nth-child(4) { text-align: left; }
.tabela-comp th { text-align: left; vertical-align: bottom; }
.tabela-comp td { text-align: left; }

.chips-metrica button.sem-curva { color: #3f3d37; }
.chips-metrica button.sem-curva.ativo { color: var(--suave); }
.lado-b { background: #7fb0f5; }
.lado-mini { display: inline-grid; place-items: center; width: 17px; height: 17px; color: #160800; font-family: var(--mono); font-size: 10px; font-weight: 500; margin: 0 6px 0 4px; flex: none; }
.filtro-linha .comparador { flex: 1; min-width: 0; margin: 0; }
#seletorComparar { align-items: flex-start; }
#seletorComparar > .rotulo { padding-top: 12px; }
.atalhos { display: flex; gap: 14px; margin-left: 8px; }
.atalhos .btn-texto.ativo { color: var(--destaque); }
.grafico { position: relative; }
.grafico-vazio { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; text-align: center; color: var(--suave); font-size: 15px; }
.leitura-curva { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; font-size: 14.5px; }
.leitura-curva:empty { display: none; }
.leitura-curva > div { display: flex; align-items: baseline; gap: 4px; }
.leitura-curva .conclusao-ab { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--linha); display: block; }

/* ---------- Atenção ---------- */
.preparo { display: grid; grid-template-columns: 120px 1fr; border: 1px solid var(--linha); margin-bottom: 14px; }
.preparo .contagem { padding: 22px 18px; border-right: 1px solid var(--linha); display: flex; flex-direction: column; justify-content: space-between; }
.preparo .contagem .num { font-size: 72px; line-height: .85; }
.preparo .corpo { padding: 22px 26px; }
.preparo h3 { font-size: 21px; font-weight: 700; font-stretch: 92%; }
.sequencia { display: flex; gap: 3px; margin: 12px 0 14px; }
.sequencia div { flex: 1; max-width: 140px; }
.sequencia .bloco { height: 6px; }
.sequencia .t { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; margin-top: 5px; color: var(--suave); }
.alerta-extra { margin-top: 10px; color: var(--vermelho); font-size: 14px; }

.plano { margin-top: 18px; border-top: 1px solid var(--linha); padding-top: 16px; }
.plano ol { list-style: none; position: relative; margin-top: 12px; }
.plano ol::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--linha-2); }
.plano li { display: grid; grid-template-columns: 22px 150px 1fr; gap: 6px; padding: 6px 0; font-size: 14.5px; position: relative; }
.plano li::before { content: ''; width: 9px; height: 9px; background: var(--bg); border: 1.5px solid var(--destaque); margin-top: 5px; position: relative; z-index: 1; }
.plano li .quando { font-family: var(--mono); font-size: 11.5px; color: var(--suave); padding-top: 2px; text-transform: uppercase; letter-spacing: .04em; }

.aviso-info { border: 1px dashed var(--linha-2); padding: 14px 18px; color: var(--suave); font-size: 14px; }

.alerta { display: grid; grid-template-columns: 6px 1fr auto; gap: 22px; padding: 20px 0; border-bottom: 1px solid var(--linha); }
.alerta:first-child { border-top: 1px solid var(--linha); }
.alerta .faixa-cor { align-self: stretch; }
.alerta h3 { font-size: 18px; font-weight: 600; }
.alerta p { color: var(--suave); margin-top: 4px; }
.alerta .fazer { margin-top: 10px; font-size: 14.5px; }
.alerta .fazer b { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--destaque); font-weight: 500; margin-right: 8px; }
.btn-linha { border: 1px solid var(--linha-2); padding: 8px 12px; font-size: 13px; white-space: nowrap; align-self: start; }
.btn-linha:hover { border-color: var(--destaque); color: var(--destaque); }


/* ---------- Sono e energia ---------- */
.navegador-dia { display: flex; align-items: center; gap: 12px; }
.btn-seta { width: 34px; height: 34px; border: 1px solid var(--linha-2); font-size: 20px; line-height: 1; color: var(--suave); }
.btn-seta:hover:not(:disabled) { border-color: var(--destaque); color: var(--destaque); }
.btn-seta:disabled { opacity: .3; cursor: default; }
.nd-data { font-size: 17px; font-weight: 600; min-width: 250px; text-align: center; }

.sono-grade { display: grid; grid-template-columns: minmax(340px, 1fr) 1.6fr; gap: 16px; }
.nota-sono { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.nota-num .num { font-size: 76px; line-height: .85; }
.nota-num small, .en-grande small { font-family: var(--mono); font-size: 12px; color: var(--suave); margin-left: 2px; }
.nota-sono h3 { font-size: 20px; font-weight: 700; font-stretch: 92%; margin: 6px 0 2px; line-height: 1.2; }
.nota-sono .selo { display: inline-block; }

.dormiu { margin-top: 26px; }
.dormiu-cab { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.dormiu-trilha { position: relative; height: 14px; background: var(--linha); }
.dormiu-feito { height: 100%; opacity: .85; }
.dormiu-meta { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--texto); }
.dormiu-meta span { position: absolute; top: 26px; right: 0; white-space: nowrap; font-family: var(--mono); font-size: 10.5px; color: var(--suave); }

.proxima { margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--linha); }
.proxima-linha { display: flex; gap: 32px; margin: 8px 0 6px; flex-wrap: wrap; }
.proxima-linha .num { font-size: 30px; line-height: 1; display: block; color: var(--destaque); }
.proxima-linha small { font-size: 12.5px; color: var(--suave); }
.proxima p { font-size: 13.5px; }

.hipnograma { display: flex; flex-direction: column; gap: 4px; }
.hip-faixa { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 10px; }
.hip-nome { font-family: var(--mono); font-size: 11px; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }
.hip-trilha { position: relative; height: 34px; background: var(--bg); border-top: 1px solid var(--linha); }
.hip-trilha div { position: absolute; top: 3px; bottom: 3px; }
.hip-eixo { margin-left: 82px; }
.eixo-horas { position: relative; height: 18px; font-family: var(--mono); font-size: 10.5px; color: var(--apagado); }
.eixo-horas span { position: absolute; transform: translateX(-50%); top: 3px; }
.hip-pontas { display: flex; justify-content: space-between; margin: 6px 0 0 82px; font-family: var(--mono); font-size: 11px; color: var(--suave); }

.fatores { border-top: 1px solid var(--linha); }
.fator { display: grid; grid-template-columns: minmax(260px, 1.4fr) 120px minmax(200px, 1.4fr) 100px; gap: 28px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.fator-nome { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.fator-nome .q, .q { display: inline-block; width: 9px; height: 9px; flex: none; }
.fator-explica { font-size: 13px; color: var(--suave); margin-top: 2px; }
.fator-valor { font-size: 24px; font-weight: 700; font-stretch: 80%; font-variant-numeric: tabular-nums; }
.fator-valor small { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--suave); margin-left: 8px; }
.fator-qual { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; text-align: right; }
.regua-ideal { position: relative; height: 10px; background: var(--linha); }
.ri-faixa { position: absolute; top: -4px; bottom: -4px; border: 1px dashed #7ccf8699; background: #7ccf861c; }
.ri-valor { position: absolute; left: 0; top: 2px; bottom: 2px; opacity: .9; }

.numeros-noite { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.numero-noite { background: var(--bg); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.nn-topo { display: flex; justify-content: space-between; align-items: center; }
.nn-topo i { width: 8px; height: 8px; border-radius: 50%; }
.numero-noite .num { font-size: 36px; line-height: 1; }
.numero-noite .un { font-family: var(--mono); font-size: 11px; color: var(--suave); }
.nn-dica { font-size: 12.5px; color: var(--suave); line-height: 1.35; }

.un-cab, .un-linha { display: grid; grid-template-columns: 96px 108px 1fr 52px 60px 84px 36px; gap: 14px; align-items: center; }
.un-cab { padding-bottom: 6px; border-bottom: 1px solid var(--linha-2); }
.un-cab .rotulo { font-size: 10px; }
.un-eixo .eixo-horas { height: 14px; }
.un-linha { width: 100%; text-align: left; padding: 5px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.un-linha:hover { background: #ffffff06; }
.un-linha.atual { background: #ff6b1a12; box-shadow: inset 2px 0 0 var(--destaque); }
.un-data .num { font-size: 17px; padding-left: 8px; }
.un-tipo { font-size: 12.5px; color: var(--suave); display: flex; align-items: center; gap: 6px; }
.un-tipo i { width: 8px; height: 8px; }
.un-trilha { position: relative; height: 18px; }
.un-ideal { position: absolute; top: -6px; bottom: -6px; background: #7ccf8614; border-left: 1px dashed #7ccf8680; border-right: 1px dashed #7ccf8680; }
.un-fase { position: absolute; top: 2px; bottom: 2px; }
.un-vazio { font-family: var(--mono); font-size: 11px; color: var(--apagado); }
.un-hora, .un-dur { font-variant-numeric: tabular-nums; }
.un-falta { font-family: var(--mono); font-size: 12px; }
.un-falta.suave { color: var(--apagado); }
.un-nota { font-weight: 700; font-stretch: 80%; font-size: 16px; text-align: right; padding-right: 8px; }
.un-legenda { justify-content: flex-start; margin-top: 12px; }
.leg-ideal { width: 14px; height: 10px; background: #7ccf8622; border: 1px dashed #7ccf86aa; }

.energia-grade { display: grid; grid-template-columns: 300px 1fr; gap: 16px; }
.energia-numeros { border: 1px solid var(--linha); padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.en-grande .num { font-size: 64px; line-height: .9; }
.en-grande .rotulo { margin-bottom: 6px; }
.en-linhas { display: flex; flex-direction: column; }
.en-linhas div { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.en-linhas b { font-variant-numeric: tabular-nums; font-size: 16px; }
.en-barra { display: flex; height: 10px; margin: 8px 0 10px; gap: 1px; }
.en-leg { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--suave); }
.en-leg span { display: flex; align-items: center; gap: 8px; }
.en-leg i { width: 8px; height: 8px; flex: none; }
.en-leg b { margin-left: auto; color: var(--texto); font-weight: 500; font-variant-numeric: tabular-nums; }
.grafico-energia { height: 340px; }

/* ---------- Relógio ---------- */
.aviso-rascunho { border-left: 2px solid var(--amarelo); padding: 8px 14px; color: var(--amarelo); font-size: 13.5px; margin-bottom: 22px; }
.funcao { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--linha); transition: background .3s; }
.funcao:first-child { border-top: 1px solid var(--linha); }
.funcao.realce { background: #ff6b1a10; }
.funcao .idx { font-family: var(--mono); color: var(--apagado); font-size: 12px; padding-top: 4px; }
.funcao h3 { font-size: 18px; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.funcao p { color: var(--suave); margin-top: 4px; max-width: 640px; }
.funcao details { margin-top: 12px; }
.funcao summary { cursor: pointer; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--destaque); list-style: none; }
.funcao summary::before { content: '+ '; }
.funcao details[open] summary::before { content: '– '; }
.funcao ol { margin-top: 12px; list-style: none; counter-reset: p; display: flex; flex-direction: column; gap: 8px; }
.funcao ol li { counter-increment: p; display: flex; gap: 12px; }
.funcao ol li::before { content: counter(p, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--apagado); padding-top: 3px; }

/* ---------- Glossário ---------- */
.busca { background: transparent; border: 0; border-bottom: 1px solid var(--linha-2); padding: 8px 0; width: 280px; outline: none; font-size: 15px; }
.busca:focus { border-bottom-color: var(--destaque); }
.glossario { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.termo { padding: 18px 0; border-bottom: 1px solid var(--linha); }
.termo .rotulo { color: var(--apagado); }
.termo h3 { font-size: 19px; font-weight: 600; margin: 3px 0 4px; }
.termo p { color: var(--suave); font-size: 14.5px; }

/* ---------- Rodapé ---------- */
.rodape { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--linha); display: flex; justify-content: space-between; gap: 20px; font-family: var(--mono); font-size: 11px; color: var(--apagado); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 38; background: #000000b3; display: grid; place-items: center; padding: 24px; }
.modal-caixa { background: var(--bg-2); border: 1px solid var(--linha-2); width: 100%; max-width: 560px; padding: 30px; position: relative; max-height: 90vh; overflow: auto; }
.modal-caixa.larga { max-width: 640px; }
.modal-fechar { position: absolute; top: 16px; right: 18px; font-family: var(--mono); color: var(--suave); font-size: 13px; }
.modal-fechar:hover { color: var(--texto); }
.modal h2 { font-size: 26px; font-weight: 800; font-stretch: 88%; letter-spacing: -.01em; margin: 6px 0 4px; }
.modal .bloco-texto { margin-top: 18px; }
.modal .bloco-texto p { margin-top: 4px; }
.escolhas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 22px; }
.escolha { border: 1px solid var(--linha-2); padding: 16px 8px 12px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; text-align: left; }
.escolha:hover { border-color: var(--suave); }
.escolha .bloco { height: 6px; width: 100%; }
.escolha span { font-size: 14px; }

.form { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }
.campo label { display: block; margin-bottom: 6px; }
.campo input, .campo textarea { width: 100%; background: var(--bg); border: 1px solid var(--linha-2); padding: 10px 12px; outline: none; font-size: 14.5px; }
.campo input:focus, .campo textarea:focus { border-color: var(--destaque); }
.campo textarea { min-height: 84px; resize: vertical; }
.campo-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.opcoes { display: flex; gap: 6px; }
.opcoes button { flex: 1; border: 1px solid var(--linha-2); padding: 10px; font-size: 14px; color: var(--suave); }
.opcoes button.ativo { border-color: var(--destaque); color: var(--texto); background: #ff6b1a14; }
.btn-primario { background: var(--destaque); color: #160800; font-weight: 700; padding: 13px 18px; letter-spacing: .03em; }
.btn-primario:hover { filter: brightness(1.08); }

/* ---------- Aviso flutuante ---------- */
.toast.erro { border-left-color: var(--vermelho); }
.toast { position: fixed; bottom: 24px; right: 24px; z-index: 40; background: var(--superficie); border: 1px solid var(--linha-2); border-left: 3px solid var(--verde); padding: 12px 18px; font-size: 14px; }

/* =========================================================================
   RELATÓRIO MÉDICO — folha clara, pensada para impressão / PDF
   ========================================================================= */
.relatorio-fundo { position: fixed; inset: 0; z-index: 50; background: #2b2a27; overflow: auto; }
.relatorio-barra { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background: #1a1a17; border-bottom: 1px solid var(--linha-2); }
.relatorio-barra .acoes { display: flex; gap: 8px; }
.folha {
  --tinta: #1b1b19; --tinta-2: #55534c; --tinta-3: #8c8a82; --fio: #d9d6cc; --papel: #fbfaf6;
  width: 210mm; min-height: 297mm; margin: 28px auto 60px; background: var(--papel); color: var(--tinta);
  padding: 16mm 16mm 14mm; font-size: 10pt; line-height: 1.45; box-shadow: 0 10px 40px #0007;
}
.folha .rotulo { color: var(--tinta-3); font-size: 7.5pt; }
.folha-cab { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--tinta); }
.folha-cab h1 { font-size: 20pt; font-weight: 800; font-stretch: 88%; letter-spacing: -.01em; line-height: 1.05; }
.folha-cab .sub { color: var(--tinta-2); margin-top: 4px; }
.folha-cab .direita { text-align: right; font-family: var(--mono); font-size: 8pt; color: var(--tinta-2); line-height: 1.6; }
.ficha { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--fio); }
.ficha div { padding: 8px 10px 8px 0; }
.ficha b { display: block; font-weight: 600; font-size: 10pt; margin-top: 1px; }
.folha section { margin-top: 18px; break-inside: avoid; }
.folha h2 { font-size: 11pt; font-weight: 700; display: flex; gap: 10px; align-items: baseline; padding-bottom: 5px; border-bottom: 1px solid var(--tinta); margin-bottom: 8px; }
.folha h2 span { font-family: var(--mono); font-size: 8pt; color: var(--tinta-3); font-weight: 400; }
.folha table { width: 100%; border-collapse: collapse; font-size: 9pt; }
.folha th { text-align: right; font-weight: 500; font-family: var(--mono); font-size: 7pt; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); padding: 4px 6px; border-bottom: 1px solid var(--fio); }
.folha td { white-space: nowrap; text-align: right; padding: 5px 6px; border-bottom: 1px solid var(--fio); font-variant-numeric: tabular-nums; }
.folha th:first-child, .folha td:first-child { text-align: left; padding-left: 0; white-space: normal; }
.folha td.ref { white-space: normal; }
.folha td.ref { color: var(--tinta-3); font-size: 8.5pt; }
.folha .var-pior { color: #b3261e; } .folha .var-melhor { color: #2e7d32; }
.graficos-rel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.graficos-rel .g { break-inside: avoid; }
.graficos-rel .g .rotulo { margin-bottom: 2px; }
.graficos-rel .g .area { height: 120px; }
.achados { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.achados li { padding-left: 14px; position: relative; }
.achados li::before { content: ''; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; background: var(--tinta); }
.nota-paciente { border: 1px solid var(--fio); padding: 10px 12px; white-space: pre-wrap; min-height: 40px; }
.folha-rodape { margin-top: 22px; padding-top: 8px; border-top: 1px solid var(--fio); font-size: 7.5pt; color: var(--tinta-3); line-height: 1.5; }

/* ---------- Tendências · sono colorido (Dia) ---------- */
.branco { color: var(--texto); }
.sono-colorido { display: flex; flex-direction: column; gap: 22px; }
.hc-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.hc-filtros, .hc-alinhar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hc-filtros .rotulo, .hc-alinhar .rotulo { margin-right: 6px; }
.hc-filtros button, .hc-alinhar button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--linha-2); font-size: 13.5px; color: var(--suave); }
.hc-filtros button:hover, .hc-alinhar button:hover { color: var(--texto); }
.hc-filtros button.ativo, .hc-alinhar button.ativo { color: var(--texto); border-color: var(--texto); background: #ffffff0a; }
.hc-filtros i { width: 10px; height: 10px; }
.hc-dia { display: flex; flex-direction: column; gap: 3px; }
.hc-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14.5px; margin-bottom: 6px; }
.hc-foco { margin-left: auto; font-family: var(--mono); font-size: 12.5px; }
.hc-faixa { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 10px; }
.hc-trilha { position: relative; height: 28px; background: var(--bg); border-top: 1px solid var(--linha); }
.hc-trilha div { position: absolute; top: 2px; bottom: 2px; transition: opacity .15s; }
.hc-faixa.apagada .hc-trilha div { opacity: .1; }
.hc-faixa.apagada .hip-nome { color: var(--apagado); }
.hc-faixa.foco .hc-trilha { background: #ffffff0b; }
.hc-faixa.foco .hip-nome { color: var(--texto); }
.hc-vazio { font-family: var(--mono); font-size: 12px; color: var(--apagado); padding: 16px 0 16px 82px; }
.hc-eixo { margin: -12px 0 0 82px; }
.hc-eixo-nome { font-size: 10px; color: var(--apagado); text-align: center; margin-top: 2px; }

.etapas-grade { display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; }
.et-linha { display: flex; flex-direction: column; gap: 9px; padding: 16px 0 18px; border-bottom: 1px solid var(--linha); }
.et-linha:first-child { border-top: 1px solid var(--linha); }
.et-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; }
.et-nome .fator-explica { flex-basis: 100%; font-weight: 400; }
.et-barra { display: grid; grid-template-columns: 24px 1fr 96px 70px; gap: 10px; align-items: center; }
.et-num { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.et-num small { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--suave); margin-left: 6px; }
.et-marca { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; text-align: right; }
.et-dif { font-size: 13.5px; color: var(--suave); padding-left: 34px; }
.et-quando { margin-top: 12px; }
.et-tercos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 12px 0 10px; }
.et-colunas { display: flex; justify-content: center; align-items: flex-end; gap: 14px; height: 120px; border-bottom: 1px solid var(--linha-2); }
.et-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; width: 56px; height: 100%; }
.et-col div { width: 100%; min-height: 1px; }
.et-col span { font-family: var(--mono); font-size: 10.5px; color: var(--suave); white-space: nowrap; }
.et-terco-nome { text-align: center; margin-top: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--apagado); }
@media (max-width: 1250px) { .etapas-grade { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Conectar ao servidor (app do celular) ---------- */
.servidor-fundo { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: grid; place-items: center; padding: 24px 16px; overflow: auto; }
.servidor-caixa { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.servidor-caixa .marca { margin-bottom: 18px; }
.servidor-caixa h2 { font-size: 28px; font-weight: 800; font-stretch: 88%; }
.srv-campo { display: flex; flex-direction: column; gap: 6px; }
.srv-campo input { background: var(--bg-2); border: 1px solid var(--linha-2); padding: 13px 14px; font-size: 16px; outline: none; width: 100%; }
.srv-campo input:focus { border-color: var(--destaque); }
.srv-erro { min-height: 20px; font-size: 14px; color: var(--amarelo); }
.servidor-caixa .btn-texto { align-self: center; margin-top: 6px; }

/* ---------- Lembretes (remédios e água) ---------- */
.lb-botoes-item { display: flex; align-items: center; gap: 14px; flex: none; }
.lb-atrasado { font-size: 12.5px; margin-top: 2px; }
.f-flex { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 13.5px; color: var(--suave); cursor: pointer; }
.f-flex input { margin-top: 3px; accent-color: var(--destaque); width: 16px; height: 16px; flex: none; }
.lb-grade { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }
.lb-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 16px; margin-bottom: 10px; border: 1px solid #f0b43c66; border-left: 3px solid var(--amarelo); background: #f0b43c0d; }
.lb-aviso b { font-size: 15px; }
.lb-aviso span { color: var(--suave); font-size: 14px; flex: 1; min-width: 180px; }
#lbAvisos:not(:empty) { margin-bottom: 26px; }
.lb-bloco { border: 1px solid var(--linha); background: var(--bg-2); padding: 14px 16px 16px; margin-bottom: 12px; border-left: 3px solid var(--linha-2); }
.lb-bloco.atrasado { border-left-color: var(--vermelho); }
.lb-bloco.feito { border-left-color: var(--verde); opacity: .75; }
.lb-bloco-cab { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; font-family: var(--mono); font-size: 12px; }
.lb-bloco-cab .num { font-size: 26px; font-family: var(--display); font-weight: 800; font-stretch: 85%; }
.lb-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linha); font-size: 15px; }
.lb-item.feito b { color: var(--suave); font-weight: 500; }
.lb-item .btn-linha { padding: 8px 16px; font-size: 14px; }
.lb-ok { font-family: var(--mono); font-size: 12px; color: var(--verde); display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.lb-todos { width: 100%; margin-top: 10px; }
.lb-agua { border: 1px solid var(--linha); background: var(--bg-2); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.lb-agua-num .num { font-size: 56px; line-height: .9; color: #7fb0f5; }
.lb-agua-num small { font-family: var(--mono); font-size: 13px; color: var(--suave); }
.lb-agua-barra { height: 8px; background: var(--linha); }
.lb-agua-barra div { height: 100%; background: #7fb0f5; transition: width .3s; }
.lb-agua-botoes { display: flex; align-items: center; gap: 14px; margin: 4px 0; }
.lb-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; }
.lb-horas span { font-family: var(--mono); font-size: 10.5px; text-align: center; padding: 6px 0; border: 1px solid var(--linha-2); color: var(--apagado); }
.lb-horas span.ok { background: #7fb0f533; border-color: #7fb0f5; color: var(--texto); }
.lb-horas span.falta { border-color: #ef5b4b66; color: var(--vermelho); }
.lb-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--mono); font-size: 10.5px; color: var(--apagado); }
.lb-leg span { display: inline-flex; align-items: center; gap: 6px; }
.lb-leg i { width: 10px; height: 10px; border: 1px solid var(--linha-2); }
.lb-leg i.ok { background: #7fb0f533; border-color: #7fb0f5; }
.lb-leg i.falta { border-color: #ef5b4b66; }
.lb-tabela td, .lb-tabela th { text-align: left; vertical-align: top; }
.lb-acoes { text-align: right !important; white-space: nowrap; }
.lb-acoes .btn-texto { margin-left: 12px; }
.lb-hist { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.lb-dia { background: var(--bg); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-variant-numeric: tabular-nums; }
.lb-dia small { color: var(--apagado); font-size: 11px; }
.lb-dia .pt { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.f-horarios { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.f-horarios input { width: auto !important; }
.f-dias button { padding: 9px 4px; }
.f-botoes { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.campo .seletor { width: 100%; min-width: 0; }
@media (max-width: 1000px) { .lb-grade { grid-template-columns: 1fr; gap: 8px; } }
@media (max-width: 760px) {
  .lb-hist { grid-template-columns: repeat(4, 1fr); }
  .lb-tabela, .lb-tabela tbody, .lb-tabela tr, .lb-tabela td { display: block; width: 100%; white-space: normal; }
  .lb-tabela thead { display: none; }
  .lb-tabela tr { padding: 12px 0; border-bottom: 1px solid var(--linha); }
  .lb-tabela td { border: 0; padding: 2px 0; }
  .lb-acoes { text-align: left !important; padding-top: 8px !important; }
  .lb-acoes .btn-texto { margin: 0 18px 0 0; font-size: 12px; }
  .f-dias { flex-wrap: wrap; }
  .f-dias button { flex: 1 0 12%; }
}

/* ---------- Celular (tela estreita) ---------- */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .so-largo { display: none; }
  .app { display: block; min-height: 100vh; }
  .trilho { display: contents; }
  .marca { margin: 0; padding: calc(14px + env(safe-area-inset-top)) 16px 0; }
  .marca .rotulo { display: none; }
  .trilho-rodape { flex-direction: row; align-items: center; gap: 12px; margin: 0; padding: 8px 16px 12px; border-bottom: 1px solid var(--linha); }
  .trilho-rodape { flex-wrap: wrap; }
  .btn-relatorio { order: 3; width: 100%; justify-content: center; padding: 9px 12px; font-size: 13.5px; }
  .relatorio-barra { padding: calc(10px + env(safe-area-inset-top)) 12px 10px; gap: 10px; }
  .relatorio-barra > .rotulo { display: none; }
  .relatorio-barra .acoes { width: 100%; }
  .relatorio-barra .acoes button { flex: 1; }
  .relatorio-fundo { overflow-x: hidden; }
  .folha { margin: 12px 0 40px; transform-origin: top left; }
  .status { flex: 1; min-width: 0; font-size: 10.5px; line-height: 1.5; }
  .status > div:nth-child(3) { display: none; }
  .btn-conectar { flex: none; padding: 11px 14px; font-size: 12.5px; }
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; flex-direction: row; gap: 0; overflow-x: auto;
         background: var(--bg-2); border-top: 1px solid var(--linha-2); padding-bottom: env(safe-area-inset-bottom); scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav button { flex: 1 0 auto; justify-content: center; gap: 6px; padding: 15px 13px; font-size: 13.5px; white-space: nowrap; border-left: 0; border-top: 2px solid transparent; }
  .nav button.ativo { border-top-color: var(--destaque); background: linear-gradient(180deg, #ff6b1a14, transparent); }

  .conteudo { padding: 20px 16px calc(84px + env(safe-area-inset-bottom)); }
  .topo { flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 16px; margin-bottom: 20px; }
  .topo h1 { font-size: 30px; }
  .controles { align-items: flex-start; }
  .abas-texto { gap: 16px; flex-wrap: wrap; }
  .secao-cab { flex-wrap: wrap; gap: 4px 16px; }

  /* Hoje */
  .leitura-geral { grid-template-columns: 1fr; gap: 24px; margin-bottom: 28px; }
  .manchete { font-size: 22px; }
  .placar { border-left: 0; padding-left: 0; border-top: 1px solid var(--linha); padding-top: 16px; }
  .agenda { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .agenda-dia { padding: 8px 5px 10px; min-height: 84px; overflow: hidden; }
  .agenda-dia .dia-num { font-size: 20px; }
  .agenda-dia .rotulo { font-size: 9px; letter-spacing: .02em; }
  .agenda-dia .tipo-nome { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .evento-ag { grid-template-columns: 1fr; gap: 10px; padding-left: 10px; }
  .leitura { grid-template-columns: 1fr auto; gap: 10px 14px; padding: 16px 0; }
  .leitura .regua { grid-column: 1 / -1; }
  .l-spark { display: none; }
  .leitura .btn-info { grid-column: 2; justify-self: end; }
  .l-valor { text-align: right; }
  .l-valor .num { font-size: 34px; }
  .legenda-regua { flex-wrap: wrap; gap: 8px 16px; }

  /* Tendências */
  .filtro-linha { gap: 8px; }
  .filtro-linha > .rotulo { width: 100%; }
  #seletorComparar > .rotulo { padding-top: 0; }
  .comparador { flex-direction: column; align-items: stretch; gap: 8px; }
  .comp-lado { width: 100%; }
  .seletor { min-width: 0; flex: 1; }
  .atalhos { margin-left: 0; flex-wrap: wrap; gap: 8px 14px; }
  .painel { padding: 16px 14px; }
  .painel-cab { flex-direction: column; gap: 10px; }
  .legenda { justify-content: flex-start; }
  .grafico { height: 260px; }
  .tabela { display: block; overflow-x: auto; white-space: nowrap; }
  .hc-topo { flex-direction: column; align-items: flex-start; }
  .hc-filtros button, .hc-alinhar button { padding: 6px 9px; font-size: 12.5px; }
  .hc-faixa { grid-template-columns: 58px 1fr; gap: 6px; }
  .hc-faixa .hip-nome { font-size: 9.5px; }
  .hc-eixo { margin-left: 64px; }
  .hc-foco { margin-left: 0; width: 100%; }
  .hc-vazio { padding-left: 64px; }
  .et-barra { grid-template-columns: 20px 1fr 86px 52px; gap: 8px; }
  .et-num { font-size: 15px; }
  .et-num small { margin-left: 4px; }
  .et-dif { padding-left: 28px; }
  .et-tercos { gap: 6px; }
  .et-colunas { gap: 6px; height: 100px; }
  .et-col { width: 44px; }
  .et-col span { font-size: 9.5px; white-space: normal; text-align: center; line-height: 1.25; }

  /* Atenção */
  .preparo { grid-template-columns: 1fr; }
  .preparo .contagem { border-right: 0; border-bottom: 1px solid var(--linha); flex-direction: row; align-items: baseline; gap: 12px; padding: 14px 16px; }
  .preparo .contagem .num { font-size: 48px; }
  .preparo .corpo { padding: 16px; }
  .plano li { grid-template-columns: 22px 1fr; }
  .plano li > :nth-child(2) { grid-column: 2; }
  .alerta { grid-template-columns: 4px 1fr; gap: 14px; }
  .alerta > :nth-child(3) { grid-column: 2; }

  /* Sono e energia */
  .navegador-dia { width: 100%; justify-content: space-between; gap: 8px; }
  .nd-data { min-width: 0; font-size: 15px; }
  .sono-grade, .energia-grade { grid-template-columns: 1fr; }
  .nota-num .num { font-size: 60px; }
  .hip-faixa { grid-template-columns: 58px 1fr; gap: 6px; }
  .hip-nome { font-size: 9.5px; }
  .hip-eixo, .hip-pontas { margin-left: 64px; }
  .fator { grid-template-columns: 1fr auto; gap: 8px 14px; }
  .fator > :nth-child(3) { grid-column: 1 / -1; }
  .fator > :nth-child(4) { grid-column: 1 / -1; text-align: left; }
  .numeros-noite { grid-template-columns: repeat(2, 1fr); }
  .numero-noite .num { font-size: 28px; }
  .un-cab, .un-linha { grid-template-columns: 62px 1fr 46px 30px; gap: 8px; }
  .un-cab > :nth-child(2), .un-cab > :nth-child(4), .un-cab > :nth-child(6),
  .un-tipo, .un-hora, .un-falta { display: none; }
  .un-data .num { font-size: 15px; padding-left: 2px; }
  .un-data .suave { display: none; }
  .grafico-energia { height: 260px; }
  .en-grande .num { font-size: 48px; }

  /* Relógio / Glossário */
  .funcao { grid-template-columns: 32px 1fr; gap: 12px; }
  .glossario { grid-template-columns: 1fr; }
  .busca { width: 100%; }

  .rodape { flex-direction: column; gap: 6px; margin-top: 32px; }
  /* janela por cima do menu de baixo, com rolagem se não couber */
  .modal { padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); align-items: end; }
  .modal-caixa { padding: 22px 18px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .modal h2 { font-size: 23px; padding-right: 70px; }
  .escolhas { grid-template-columns: 1fr; gap: 6px; margin-top: 16px; }
  .escolha { flex-direction: row; align-items: center; gap: 14px; padding: 15px 14px; }
  .escolha .bloco { width: 6px; height: 22px; flex: none; }
  .escolha span { font-size: 16px; }
  .cal-mes .agenda-dia { min-height: 64px; padding: 6px 4px 8px; }
  .cal-mes .agenda-dia .dia-num { font-size: 17px; }
  .cal-mes .agenda-dia .tipo-nome { font-size: 9.5px; }
  .campo-duplo { grid-template-columns: 1fr; }
  .toast { left: 16px; right: 16px; bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* =========================================================================
   EXAMES — laudos de laboratório
   ========================================================================= */
.ex-vazio { border: 1px dashed var(--linha-2); padding: 28px; max-width: 640px; }
.ex-vazio h2 { font-size: 22px; font-weight: 800; font-stretch: 88%; margin-bottom: 8px; }
.ex-resumo { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--linha); }
.ex-resumo-data { font-size: 30px; font-weight: 800; font-stretch: 88%; margin: 4px 0 2px; }
.ex-contas { display: flex; gap: 28px; }
.ex-contas > div { display: flex; flex-direction: column; gap: 2px; }
.ex-contas .num { font-size: 40px; line-height: 1; }
.ex-comparar { display: flex; align-items: center; gap: 10px; }
.ex-comparar select { background: var(--bg-2); border: 1px solid var(--linha-2); color: var(--texto); padding: 7px 10px; font-size: 13px; }
.ex-mudancas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ex-mud { text-align: left; border: 1px solid var(--linha); border-left: 3px solid var(--linha-2); background: var(--bg-2); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ex-mud:hover { border-color: var(--suave); }
.ex-mud.pior { border-left-color: var(--vermelho); }
.ex-mud.melhor { border-left-color: var(--verde); }
.ex-mud-nome { font-weight: 600; font-size: 14.5px; }
.ex-mud-val { font-variant-numeric: tabular-nums; font-size: 15px; }
.ex-mud-val small { color: var(--apagado); font-size: 11px; }
.ex-mud-frase { font-family: var(--mono); font-size: 11.5px; color: var(--suave); }
.ex-mud.pior .ex-mud-frase { color: var(--vermelho); }
.ex-mud.melhor .ex-mud-frase { color: var(--verde); }
.ex-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.ex-filtros button { border: 1px solid var(--linha-2); padding: 7px 12px; font-size: 13px; color: var(--suave); }
.ex-filtros button.ativo { border-color: var(--destaque); color: var(--texto); background: #ff6b1a14; }
.ex-grupo { margin-bottom: 22px; }
.ex-grupo-nome { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--destaque); margin: 4px 0 8px; }
.ex-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.ex-cartao { text-align: left; border: 1px solid var(--linha); background: var(--bg-2); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.ex-cartao:hover { border-color: var(--suave); }
.ex-cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ex-nome { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.ex-cartao .selo { white-space: nowrap; }
.ex-valor .num { font-size: 30px; line-height: 1.1; }
.ex-valor small { color: var(--apagado); font-family: var(--mono); font-size: 11px; }
.ex-regua { height: 26px; margin-top: 2px; }
.ex-regua .zonas { top: 10px; }
.ex-regua .marca-atual { top: 2px; }
.ex-regua .marca-base { top: 7px; }
.ex-faixa { font-family: var(--mono); font-size: 10.5px; color: var(--apagado); }
.ex-comp { font-size: 12.5px; color: var(--suave); min-height: 17px; }
.ex-comp.pior { color: var(--vermelho); }
.ex-comp.melhor { color: var(--verde); }
.ex-lista { border-top: 1px solid var(--linha); }
.ex-lista-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.ex-nota { margin-top: 14px; font-size: 12.5px; color: var(--apagado); }
.ex-grafico { height: 220px; margin: 16px 0; }
.ex-tabela td, .ex-tabela th { text-align: left; }
.ex-botoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.ex-botoes-fixos { position: sticky; bottom: -30px; background: var(--bg-2); padding: 14px 0; margin-bottom: -14px; border-top: 1px solid var(--linha); }
.ex-carregando { height: 3px; background: var(--linha); margin-top: 18px; overflow: hidden; }
.ex-carregando span { display: block; height: 100%; width: 35%; background: var(--destaque); animation: exCarrega 1.1s ease-in-out infinite; }
@keyframes exCarrega { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.ex-cab-form { margin: 16px 0 10px; }
.ex-cab-form input[type=date] { color-scheme: dark; }
.ex-anterior { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linha-2); margin: 8px 0; font-size: 13.5px; cursor: pointer; }
.ex-anterior input { margin-top: 3px; accent-color: var(--destaque); }
.ex-conferir { margin-top: 10px; }
.ex-linha { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.ex-linha input[type=checkbox] { accent-color: var(--destaque); width: 16px; height: 16px; }
.ex-linha-nome { font-size: 14px; line-height: 1.3; min-width: 0; }
.ex-linha-nome .rotulo { font-size: 9.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-linha-campos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ex-in { width: 78px; background: var(--bg); border: 1px solid var(--linha-2); padding: 6px 8px; font-size: 14px; color: var(--texto); text-align: right; font-variant-numeric: tabular-nums; }
.ex-in:focus { border-color: var(--destaque); outline: none; }
.ex-in-texto { width: 130px; text-align: left; }
.ex-in-ref { width: 62px; font-size: 12.5px; padding: 5px 6px; }
.ex-un { font-family: var(--mono); font-size: 11px; color: var(--apagado); min-width: 64px; }
.ex-ref { font-family: var(--mono); font-size: 11px; color: var(--apagado); display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 760px) {
  .ex-resumo { align-items: flex-start; flex-direction: column; gap: 14px; }
  .ex-contas { gap: 22px; }
  .ex-contas .num { font-size: 32px; }
  #tela-exames .topo > div:last-child { width: 100%; }
  #exAdicionar { width: 100%; }
  .ex-comparar { flex-wrap: wrap; }
  .ex-comparar select { flex: 1; }
  .ex-cartoes, .ex-mudancas { grid-template-columns: 1fr; }
  .ex-linha { grid-template-columns: 20px 1fr; }
  .ex-linha-campos { grid-column: 2; justify-content: flex-start; }
  .ex-un { min-width: 0; }
  .ex-botoes-fixos { bottom: -22px; }
}

@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff; }
  .app, .modal, .toast, .relatorio-barra { display: none !important; }
  .relatorio-fundo { position: static; background: #fff; overflow: visible; }
  .folha { margin: 0; box-shadow: none; width: auto; min-height: 0; }
}