/* ==========================================================
   BEM-TE-VI — design system
   Reconstruído sobre o mockup aprovado (design/mockup-fiel.html, 24/08).
   Direção: mesh pastel, cards de vidro, coral+lilás, fita das 12h,
   medidor radial. Troca a direção anterior (Noite Calma/escura).

   Os seletores usados pelo JS de cada tela (js/telas/*.js) não mudaram —
   só os VALORES visuais. Onde o mockup não previa um componente que o
   app de verdade precisa (cronômetro em curso, formulário de perfil,
   gráfico de crescimento, abas), a seção fica marcada "NOVO" e usa os
   mesmos tokens/sombras/raios do resto — nunca um valor inventado.
   ========================================================== */
:root{
  --coral:#F87A6C;
  --coral-2:#FCA07F;
  --coral-deep:#F26B5E;
  --lilac:#B08FD4;
  --violet:#A374D5;
  --violet-2:#8E5FD1;
  --coral-ink:#C4402F;
  --violet-ink:#7B4BC0;
  --amber:#F9A03F;
  --amber-2:#FBBE5E;
  --mint:#4FAE84;
  --mint-2:#DFF3EA;
  --rose:#7C2436;
  --rose-2:#FBDFE2;

  --ink:#2A2830;
  --ink-2:#5F5C68;
  --ink-3:#7E7A88;
  --white:#fff;
  --dark:#1A181D;
  --line:rgba(60,30,40,.08);
  --line-2:rgba(60,30,40,.14);

  --ui:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --t-micro:11px; --t-cap:12px; --t-sm:13px; --t-base:14px;
  --t-lg:16px; --t-xl:20px; --t-2xl:26px; --t-num:36px;

  --gut:22px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:48px;
  --gutter:var(--gut);
  --gap-in:var(--s2);
  --gap:12px;
  --gap-group:var(--s5);
  --pad-card:var(--s4);
  --pad-card-sm:13px;
  --pad-sheet:var(--gut);
  --run-y:var(--s3);

  --r-card:24px;
  --r-pill:999px;
  --tap:48px;
  --ease:cubic-bezier(.32,.72,0,1);
  --z-nav:10; --z-scrim:30; --z-sheet:31; --z-drawer:40; --z-toast:50;

  --sh-card:0 10px 26px -14px rgba(120,80,80,.3);
  --sh-lift:0 14px 34px -16px rgba(110,70,80,.4);
  --sh-coral:0 12px 26px -12px rgba(242,107,94,.85);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* em PWA instalada no iOS é o html (não o body) que pinta as áreas de safe-area */
html{background:#FCF4F1;height:100%;height:-webkit-fill-available;}
html,body{margin:0;height:100%;}
body{
  background:#E9E3E0;color:var(--ink);font-family:var(--ui);
  font-size:var(--t-base);line-height:1.5;-webkit-font-smoothing:antialiased;
  display:flex;align-items:center;justify-content:center;touch-action:manipulation;
}
button{font:inherit;color:inherit;border:none;background:none;cursor:pointer;
  font-family:var(--ui);touch-action:manipulation;}
h1,h2,h3{margin:0;letter-spacing:-.022em;}
p{margin:0;}
:focus-visible{outline:3px solid var(--coral-deep);outline-offset:2px;border-radius:12px;}
.press{transition:transform .12s var(--ease),background-color .16s,opacity .16s;}
.press:active{transform:scale(.96);}
[disabled],[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none;}
.num{font-variant-numeric:tabular-nums,'lnum' 1;font-feature-settings:'tnum' 1,'lnum' 1;}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- aparelho ---------- */
#app{position:fixed;inset:0;overflow:hidden;display:flex;
  flex-direction:column;background:#FCF6F3;}
@media (min-width:560px) and (min-height:700px){
  body{padding:var(--s6);}
  #app{position:relative;inset:auto;width:390px;height:min(844px,calc(100dvh - 48px));
    border-radius:44px;box-shadow:0 44px 90px -34px rgba(80,40,50,.55);}
}
.mesh{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(80% 52% at 8% 4%,#FDF1EC 0%,transparent 58%),
    radial-gradient(70% 48% at 96% 16%,#F0E4F4 0%,transparent 60%),
    radial-gradient(92% 58% at 50% 104%,#FBE2E4 0%,transparent 68%),
    linear-gradient(170deg,#FCF4F1 0%,#F7E9EC 48%,#F3E6F0 100%);}

/* ---------- topo ---------- */
#bar{flex:none;z-index:6;position:relative;display:flex;align-items:center;gap:var(--s3);
  padding:calc(var(--s5) + env(safe-area-inset-top)) var(--gut) var(--s3);}
.circ{width:42px;height:42px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--white);box-shadow:var(--sh-card);}
.circ:active{background:#F7F1EF;}
.circ svg{width:17px;height:17px;color:var(--ink-2);}
#bar .mid{flex:1;min-width:0;text-align:center;}
#bar .mid b{font-size:17px;font-weight:600;display:block;}
#bar .mid small{font-size:11px;font-weight:500;color:var(--ink-3);display:block;margin-top:1px;}
#syncDot{width:11px;height:11px;border-radius:50%;background:#5BC49A;display:block;
  box-shadow:0 0 0 4px rgba(91,196,154,.2);transition:background-color .2s;}
#syncInd.off #syncDot{background:var(--ink-3);box-shadow:0 0 0 4px rgba(126,122,136,.16);}

/* ---------- rolagem ---------- */
#view{flex:1;overflow-y:auto;overflow-x:hidden;z-index:2;position:relative;
  transition:opacity .13s ease,transform .13s ease;}
#view::-webkit-scrollbar{width:0;}
#view.leaving{opacity:0;transform:translateY(-6px);}
.screen{padding:0 var(--gut) 116px;display:flex;flex-direction:column;gap:var(--gap);}
.screen.tight{padding-left:16px;padding-right:16px;}

/* título grande de tela (equivalente ao .big-title do mockup) */
.screen-head{padding:var(--s1) 0 var(--s5);}
.screen-head h1{font-size:33px;line-height:1.14;font-weight:500;}
.screen-head .sub{display:block;font-size:14px;font-weight:400;color:var(--ink-2);
  margin-top:var(--s2);letter-spacing:0;}
.big-title{font-size:33px;line-height:1.14;font-weight:500;padding:var(--s1) 0 var(--s5);}
.big-title small{display:block;font-size:14px;font-weight:400;color:var(--ink-2);
  margin-top:var(--s2);letter-spacing:0;}

/* ---------- cartões ---------- */
.card{background:var(--white);border-radius:var(--r-card);padding:var(--pad-card);
  box-shadow:var(--sh-card);}
button.card{width:100%;text-align:left;display:block;}
button.card:active{background:#FBF6F4;}
.card > .rowlist{display:flex;flex-direction:column;}
.card > .rowlist > :first-child{padding-top:0;}
.card > .rowlist > :last-child{padding-bottom:0;border-bottom:none;}
.glass{background:rgba(255,255,255,.58);backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.8);}
.lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600;}
.rowb{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);}
.muted{color:var(--ink-2);font-size:var(--t-sm);}
.stack{display:flex;flex-direction:column;gap:var(--gap);}
.stack-in{display:flex;flex-direction:column;gap:var(--s1);}
.group{display:flex;flex-direction:column;gap:var(--gap-in);}
.group > .lbl{margin-bottom:calc(var(--s1) * -1);}

/* ---------- badge de bebê ---------- */
.bid{width:20px;height:20px;border-radius:7px;flex:none;display:inline-flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:700;
  line-height:1;color:#fff;}
.bid.n1{background:linear-gradient(150deg,var(--coral),var(--coral-deep));}
.bid.n2{background:linear-gradient(150deg,var(--lilac),var(--violet-2));}

/* ---------- cards dos bebês (Hoje) ---------- */
/* stretch (não start): os dois cards ficam da MESMA altura, então as bases
   com os botões alinham entre si. Com "start" cada card media o próprio
   conteúdo e um bebê com uma linha a mais desalinhava os dois rodapés. */
.twins{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch;}
.col{display:flex;flex-direction:column;}

/* ---- base de ações do card (2026-08-25) ----
   Antes eram três círculos com gradiente cheio, soltos ABAIXO do card,
   boiando sobre o fundo. Pedido do dono do produto: trazer pra dentro, e
   que ficasse bonito.
   A escolha: em vez de "linha divisória + três bolas dentro" (que é a
   solução óbvia e fica seca), a fileira vira a PRÓPRIA BASE do card —
   sangra até as bordas com margem negativa, os cantos de baixo acompanham
   o raio do card, e as três ações são faixas contínuas separadas por
   fios de 1px. Fica lendo como um card com rodapé desenhado, não como
   botões apoiados em cima dele.
   Ganho de toque: cada faixa é ~52x48px de área tocável — MAIOR que os
   círculos de 44px que existiam antes. */
.baby .quick{display:grid;grid-template-columns:repeat(3,1fr);
  margin:13px -13px -13px;border-top:1px solid var(--line);
  border-radius:0 0 21px 21px;overflow:hidden;
  background:rgba(255,255,255,.34);}
.qb{width:auto;height:48px;border-radius:0;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:transparent;box-shadow:none;overflow:hidden;}
/* fio separador entre as faixas — só entre elas, nunca nas pontas */
.qb + .qb::before{content:"";position:absolute;left:0;top:10px;bottom:10px;
  width:1px;background:var(--line);z-index:1;}
/* Ícone na cor do bebê, não branco sobre bloco saturado: dois blocos
   coloridos cheios lado a lado pesavam demais numa tela que é toda pastel. */
.qb svg{width:20px;height:20px;position:relative;z-index:2;
  transition:color .18s var(--ease),transform .18s var(--ease);}
.col.n1 .qb svg{color:var(--coral-deep);}
.col.n2 .qb svg{color:var(--violet-2);}
/* O gradiente não sumiu — ele só espera o toque. Floresce de baixo pra
   cima na faixa tocada e o ícone vira branco: a cor aparece como
   RESPOSTA ao gesto, em vez de estar acesa o tempo todo. */
.qb::after{content:"";position:absolute;inset:0;opacity:0;
  transform:translateY(38%);transition:opacity .2s var(--ease),transform .28s var(--ease);}
.col.n1 .qb::after{background:linear-gradient(160deg,var(--coral-2),var(--coral-deep));}
.col.n2 .qb::after{background:linear-gradient(160deg,var(--lilac),var(--violet-2));}
.qb:active::after{opacity:1;transform:none;}
/* Precisa repetir .col.n1/.n2 aqui: `.qb:active svg` sozinho (2 classes)
   PERDE de `.col.n1 .qb svg` (3 classes) na especificidade, e o ícone ficava
   coral sobre fundo coral — praticamente invisível. Pego só ao ampliar o
   canto do card a 6x num teste de toque; a olho nu passava batido. */
.col.n1 .qb:active svg,
.col.n2 .qb:active svg{color:#fff;transform:scale(1.08);}
.baby{position:relative;border-radius:22px;padding:15px 13px 13px;
  box-shadow:var(--sh-lift);display:flex;flex-direction:column;text-align:left;width:100%;
  flex:1;overflow:hidden;
  background:linear-gradient(152deg,rgba(255,255,255,.72),rgba(255,255,255,.5));
  backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.85);}
.baby::before{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;
  background:radial-gradient(88% 46% at 50% 0%,var(--tint),transparent 72%);}
.baby.n1{--tint:rgba(248,122,108,.26);}
.baby.n2{--tint:rgba(160,120,214,.28);}
/* O :active de escala saiu daqui (2026-08-25): .baby é uma <div>, não um
   botão — nunca foi clicável, era resquício do mockup. Com os botões AGORA
   DENTRO do card, ele passou a ser ativamente errado: tocar uma das ações
   encolhia o card inteiro junto. O feedback de toque agora é da faixa
   tocada (.qb:active), que é o que realmente responde ao dedo. */
.baby > *{position:relative;z-index:1;}
.baby .nm{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;}
.baby .big{font-size:30px;font-weight:500;line-height:1;letter-spacing:-.035em;margin-top:14px;}
.baby .big small{font-size:15px;font-weight:500;}
.baby .since{font-size:11px;margin-top:3px;font-weight:500;color:var(--ink-3);}
.baby .rows{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:3px;}
.baby .row{display:flex;justify-content:space-between;font-size:11.5px;font-weight:500;color:var(--ink-3);}
.baby .row b{color:var(--ink);font-weight:600;}
.baby .state{font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:5px;padding-top:5px;}
.baby .state svg{width:13px;height:13px;flex:none;}
.baby.n1 .state{color:var(--coral-ink);}
.baby.n2 .state{color:var(--violet-ink);}
.breathe{animation:breathe 4.6s ease-in-out infinite;}
@keyframes breathe{0%,100%{opacity:.58;}50%{opacity:1;}}

/* ---------- fita das 12 horas ---------- */
.tapecard{position:relative;background:var(--white);border-radius:var(--r-card);
  padding:var(--pad-card);width:100%;text-align:left;box-shadow:var(--sh-card);
  display:flex;flex-direction:column;}
.tapecard:active{background:#FBF6F4;}
.tape{position:relative;height:96px;border-radius:16px;background:#FBF3F1;
  overflow:hidden;margin-top:var(--s3);}
.tape .gl{position:absolute;top:0;bottom:0;width:1px;background:rgba(60,30,40,.06);}
.tape .hr{position:absolute;bottom:5px;font-size:9.5px;color:var(--ink-3);
  transform:translateX(-50%);font-weight:500;}
.tape .tr{position:absolute;left:0;right:0;height:28px;}
.tape .t1{top:13px;} .tape .t2{top:48px;}
.tape .tn{position:absolute;left:8px;top:-10px;font-size:9px;font-weight:700;
  letter-spacing:.05em;display:flex;align-items:center;gap:4px;}
.tape .t1 .tn{color:var(--coral-deep);} .tape .t2 .tn{color:var(--violet-2);}
.tape .ev{position:absolute;top:10px;height:11px;border-radius:6px;}
.tape .t1 .ev{background:linear-gradient(90deg,var(--coral),var(--coral-2));}
.tape .t2 .ev{background:linear-gradient(90deg,var(--violet),var(--lilac));}
.tape .ev.sleep{opacity:.32;height:18px;top:6px;border-radius:9px;}
/* "Nada nas últimas 12h" (2026-08-25): sem isto a trilha vazia era só o
   nome do bebê boiando num retângulo em branco — metade do cartão parecia
   quebrado. A linha pontilhada lê como um monitor em repouso: ocupa o
   espaço e já diz "sem registro", sem fingir um dado que não existe. */
.tape .ev.flat{position:absolute;left:0;right:0;top:15px;height:1.5px;width:auto;
  border-radius:0;background-image:repeating-linear-gradient(90deg,var(--ink-3) 0 7px,transparent 7px 14px);
  opacity:.4;}
.tape .now{position:absolute;top:0;bottom:0;width:1.5px;background:var(--ink);opacity:.45;}
.tape .now::before{content:"";position:absolute;top:0;left:-3px;width:7px;height:7px;
  border-radius:50%;background:var(--ink);}
.pulse{animation:pulse 2.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.35;}50%{opacity:.85;}}
.legend{display:flex;gap:16px;margin-top:10px;font-size:10.5px;color:var(--ink-3);
  font-weight:500;flex-wrap:wrap;}
.legend span{display:flex;align-items:center;gap:6px;}
.legend i{width:13px;height:8px;border-radius:3px;background:var(--ink-3);display:block;flex:none;}
.legend i.s{opacity:.4;height:12px;border-radius:5px;}

/* ---------- nav inferior (pílula flutuante) ---------- */
#nav{position:absolute;left:var(--gut);right:var(--gut);
  bottom:calc(20px + env(safe-area-inset-bottom));z-index:8;
  display:grid;grid-template-columns:repeat(6,1fr);gap:2px;padding:6px;
  border-radius:var(--r-pill);background:rgba(255,255,255,.66);
  backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--sh-lift);}
#nav button{min-height:44px;border-radius:var(--r-pill);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;font-size:9.5px;font-weight:600;
  color:var(--ink-3);transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);}
#nav button svg{width:19px;height:19px;}
#nav button[aria-current="page"]{color:#fff;
  background:linear-gradient(140deg,var(--coral),var(--coral-deep));
  box-shadow:0 8px 18px -9px rgba(242,107,94,.9);}
.screen{padding-bottom:calc(96px + env(safe-area-inset-bottom));}

/* ---------- abas segmentadas (usado por Saúde/Relatório) ---------- */
.tabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;}
.tabs button{flex:1;min-height:40px;padding:0 var(--s3);border-radius:var(--r-pill);
  font-size:13px;font-weight:500;color:var(--ink-2);background:#fff;white-space:nowrap;
  box-shadow:0 5px 14px -9px rgba(120,80,80,.4);}
.tabs button[aria-selected="true"]{background:linear-gradient(140deg,var(--coral),var(--coral-deep));
  color:#fff;box-shadow:0 9px 20px -10px rgba(242,107,94,.8);}

/* ---------- listas ---------- */
.rowlist{display:flex;flex-direction:column;}
.rowlist > :first-child{padding-top:0;}
.rowlist > :last-child{padding-bottom:0;border-bottom:none;}
.tli{display:flex;gap:12px;padding:12px 0;align-items:center;width:100%;text-align:left;
  min-height:var(--tap);border-bottom:1px solid var(--line);}
.tli:active{background:#FBF5F3;}
.tli .tm{font-size:12px;color:var(--ink-3);width:44px;flex:none;font-weight:500;}
.tli .ic{width:36px;height:36px;border-radius:12px;flex:none;display:flex;
  align-items:center;justify-content:center;}
.tli .ic svg{width:16px;height:16px;color:#fff;}
.tli.n1 .ic{background:linear-gradient(150deg,var(--coral),var(--coral-deep));}
.tli.n2 .ic{background:linear-gradient(150deg,var(--lilac),var(--violet-2));}
.tli .tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.tli .tt b{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px;}
.tli .tt small{font-size:11.5px;color:var(--ink-3);}
.tli .who{font-size:11px;color:var(--ink-3);flex:none;}

.vial{display:flex;align-items:center;gap:12px;padding:12px 0;min-height:var(--tap);
  border-bottom:1px solid var(--line);}
.vial .vv{font-size:17px;font-weight:600;width:66px;flex:none;letter-spacing:-.02em;}
.vial .vd{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.vial .vd b{font-size:13px;font-weight:500;}
.vial .vd small{font-size:11.5px;color:var(--ink-3);}

.field{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--line);min-height:44px;}
.field .fl{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:8px;}
.field .fv{font-size:13px;font-weight:600;text-align:right;}
.field .fv.vazio,.field .fv.empty2{color:var(--ink-3);font-weight:400;}

/* ---------- pill/etiqueta (mesmo vocabulário visual do .tag do mockup) ---------- */
.pill{font-size:11px;font-weight:600;padding:5px 11px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:5px;letter-spacing:0;}
.pill svg{width:12px;height:12px;}
.pill.ok{background:var(--mint-2);color:#1F7A53;}
.pill.warn{background:#FDEBD5;color:#7A4A08;}
.pill.bad{background:var(--rose-2);color:var(--rose);}
.pill.n1{background:#FDE2DC;color:#7C3226;}
.pill.n2{background:#EBE1F7;color:#3D2760;}

.meter{height:7px;border-radius:99px;background:#F2E8E6;overflow:hidden;}
.meter i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--coral),var(--coral-2));}
.meter.n2 i{background:linear-gradient(90deg,var(--lilac),var(--violet-2));}

.btn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:var(--tap);
  padding:14px 20px;border-radius:var(--r-pill);font-weight:600;font-size:14px;width:100%;
  background:#fff;box-shadow:var(--sh-card);}
.btn:active{background:#FBF5F3;}
.btn.primary{background:linear-gradient(140deg,var(--coral),var(--coral-deep));color:#fff;
  box-shadow:var(--sh-coral);}
.btn.dark{background:var(--dark);color:#fff;}
.btn svg{width:19px;height:19px;}
.sep{height:1px;background:var(--line-2);border:0;margin:14px 0;}

.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  padding:20px 12px;}
.empty svg{width:28px;height:28px;color:var(--ink-3);}
.empty .et{display:flex;flex-direction:column;gap:4px;}
.empty b{font-size:14px;}
.empty p{font-size:13px;color:var(--ink-3);}
.disclaimer,.note{font-size:11.5px;color:var(--ink-3);line-height:1.6;
  border-left:2px solid var(--line-2);padding-left:12px;}

/* gráfico simples (curva de crescimento) */
.chart{height:154px;width:100%;}
.chart .gridline{stroke:rgba(60,30,40,.07);stroke-width:1;}
.chart .ln{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.chart .ln1{stroke:var(--coral-deep);}
.chart .ln2{stroke:var(--violet-2);stroke-dasharray:7 5;}
.chart .pt1{fill:var(--coral-deep);} .chart .pt2{fill:var(--violet-2);}

/* ---------- folha (sheet) ---------- */
#scrim{position:absolute;inset:0;background:rgba(40,22,28,.5);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .25s;z-index:var(--z-scrim);}
#scrim.on{opacity:1;pointer-events:auto;}
#sheet{position:absolute;left:0;right:0;bottom:0;z-index:var(--z-sheet);background:#FDF8F6;
  border-radius:30px 30px 0 0;transform:translateY(102%);
  transition:transform .3s var(--ease);max-height:88%;overflow-y:auto;
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -20px 50px -24px rgba(60,30,40,.45);}
#sheet.on{transform:translateY(0);}
.sheet-top{position:sticky;top:0;background:#FDF8F6;z-index:2;padding:12px var(--gut) 0;}
.grab{width:40px;height:4px;border-radius:99px;background:rgba(60,30,40,.16);margin:0 auto;}
.sheet-close{position:absolute;top:8px;right:12px;width:var(--tap);height:var(--tap);
  border-radius:50%;display:flex;align-items:center;justify-content:center;}
.sheet-close:active{background:rgba(60,30,40,.06);}
.sheet-close svg{width:17px;height:17px;color:var(--ink-3);}
.sheet-in{display:flex;flex-direction:column;gap:var(--gap);padding:16px var(--gut) 32px;}
.sheet-head{display:flex;flex-direction:column;gap:4px;padding-right:36px;margin-bottom:4px;}
.sheet-h{font-size:20px;font-weight:600;}
.sheet-s{font-size:13px;color:var(--ink-2);}
.choices{display:grid;gap:9px;}
.choices.two{grid-template-columns:1fr 1fr;}
.choices.three{grid-template-columns:repeat(3,1fr);}
.choice{min-height:92px;padding:16px 8px;border-radius:18px;background:#fff;
  box-shadow:var(--sh-card);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;font-size:13px;font-weight:600;text-align:center;}
.choice:active{background:#FBF6F4;}
.choice svg{width:24px;height:24px;color:var(--ink-2);}
.choice .cs{font-size:11px;color:var(--ink-3);font-weight:500;min-height:14px;}
.choice[aria-pressed="true"]{background:linear-gradient(145deg,var(--coral),var(--coral-2));
  color:#fff;box-shadow:0 12px 26px -14px rgba(242,107,94,.85);}
.choice[aria-pressed="true"] svg{color:#fff;}
.choice[aria-pressed="true"] .cs{color:rgba(255,255,255,.9);}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{min-height:var(--tap);padding:12px 20px;border-radius:var(--r-pill);background:#fff;
  font-size:16px;font-weight:600;box-shadow:var(--sh-card);}
.chip[aria-pressed="true"]{background:linear-gradient(140deg,var(--coral),var(--coral-deep));
  color:#fff;box-shadow:var(--sh-coral);}

/* ---------- toast ---------- */
#toast{position:absolute;left:var(--gut);right:var(--gut);
  bottom:calc(88px + env(safe-area-inset-bottom));z-index:var(--z-toast);
  background:var(--dark);color:#fff;border-radius:18px;padding:13px 13px 13px 17px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  transform:translateY(240px);visibility:hidden;
  transition:transform .3s var(--ease),visibility 0s .3s;
  box-shadow:0 18px 40px -16px rgba(26,24,29,.7);}
/* visibility (não só transform) garante zero pintura no estado escondido —
   um card aberto (folha) pode reflowar o layout de formas que deixam a
   transformação sozinha insuficiente; visibility:hidden nunca falha. */
#toast.on{transform:translateY(0);visibility:visible;transition:transform .3s var(--ease),visibility 0s;}
#toast .tx{font-size:13px;font-weight:600;min-width:0;display:flex;flex-direction:column;gap:1px;}
#toast .tx small{font-weight:400;font-size:11.5px;opacity:.72;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
#toast button{min-height:44px;padding:0 12px;border-radius:var(--r-pill);font-size:13px;
  font-weight:700;color:var(--coral-2);flex:none;}

/* ---------- drawer ---------- */
#drawer{position:absolute;top:0;bottom:0;left:0;width:272px;z-index:var(--z-drawer);
  background:#FDF8F6;transform:translateX(-102%);transition:transform .3s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:calc(24px + env(safe-area-inset-top)) 0 env(safe-area-inset-bottom);
  box-shadow:14px 0 40px -22px rgba(60,30,40,.4);}
#drawer.on{transform:translateX(0);}
#drawer .dh{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
  padding:0 20px 16px;}
#drawer .dh b{font-size:20px;font-weight:600;display:block;}
#drawer .dh small{font-size:12px;color:var(--ink-3);}
#drawer .dclose{width:var(--tap);height:var(--tap);flex:none;border-radius:50%;
  margin:-8px -8px 0 0;display:flex;align-items:center;justify-content:center;}
#drawer .dclose:active{background:rgba(60,30,40,.06);}
#drawer .dclose svg{width:17px;height:17px;color:var(--ink-3);}
#drawer .grp{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;padding:18px 20px 8px;}
#drawer .di{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:12px 20px;min-height:var(--tap);font-size:14px;font-weight:500;color:var(--ink-2);}
#drawer .di svg{width:19px;height:19px;flex:none;}
#drawer .di:active{background:#F7EFEC;}
#drawer .di[aria-current="page"]{color:var(--ink);background:#F7EFEC;
  box-shadow:inset 3px 0 0 var(--coral);}
#drawer .foot{margin-top:auto;padding:16px 20px;font-size:11px;color:var(--ink-3);
  line-height:1.55;border-top:1px solid var(--line);}

/* ==========================================================
   NOVO — cronômetro de mamada em curso (RF-024).
   O mockup mostrava só o registro instantâneo; aqui o tempo
   decorrido É o próprio dado, e precisa sobreviver a fechar o app.
   Reaproveita o mesmo cartão/sombra/pill do resto do sistema.
   ========================================================== */
.cronometro{display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:24px 16px;text-align:center;}
.cronometro .decorrido{font-size:44px;font-weight:500;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--ink);}
.cronometro .rotulo{font-size:13px;color:var(--ink-2);}
.cronometro .pill{font-size:12px;padding:8px 16px;}

/* ==========================================================
   NOVO — formulário real de perfil e medidas.
   O mockup só exibia <span> estáticos (dado de exemplo). Estes
   inputs usam a mesma tipografia/cor de .field, com foco coral.
   ========================================================== */
.campo{display:flex;flex-direction:column;gap:4px;padding:var(--run-y) 0;
  border-bottom:1px solid var(--line);}
.campo:last-child{border-bottom:none;}
.campo label{font-size:13px;color:var(--ink-2);}
.campo input,.campo select{
  background:transparent;border:none;color:var(--ink);
  font-family:var(--ui);font-size:13px;font-weight:500;padding:4px 0;width:100%;}
.campo input::placeholder{color:var(--ink-3);font-weight:400;}
.campo input:focus,.campo select:focus{outline:none;}
.campo.obrigatorio label::after{content:" *";color:var(--coral-deep);}
.campo select{appearance:none;-webkit-appearance:none;}

/* ==========================================================
   MOVIMENTO — só na troca de tela ([data-anim]) e ao abrir a
   folha. Entrada mais lenta que saída: sair rápido parece
   responsivo, entrar em cascata parece vivo (não "seco").
   ========================================================== */
@keyframes rise{from{opacity:0;transform:translateY(15px);}to{opacity:1;transform:none;}}
@keyframes popin{from{opacity:0;transform:scale(.94) translateY(12px);}to{opacity:1;transform:none;}}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}
@keyframes growx{from{transform:scaleX(0);}to{transform:scaleX(1);}}

#view[data-anim] .screen > *{animation:rise .42s var(--ease) both;}
#view[data-anim] .screen > :nth-child(1){animation-delay:.01s}
#view[data-anim] .screen > :nth-child(2){animation-delay:.06s}
#view[data-anim] .screen > :nth-child(3){animation-delay:.11s}
#view[data-anim] .screen > :nth-child(4){animation-delay:.16s}
#view[data-anim] .screen > :nth-child(5){animation-delay:.21s}
#view[data-anim] .screen > :nth-child(6){animation-delay:.26s}
#view[data-anim] .screen > :nth-child(7){animation-delay:.31s}
#view[data-anim] .col{animation:popin .5s var(--ease) both;}
#view[data-anim] .col:nth-child(1){animation-delay:.08s}
#view[data-anim] .col:nth-child(2){animation-delay:.15s}
/* Os ícones entram em cascata, não as faixas (2026-08-25): as faixas agora
   sangram até a borda do card, dentro de um container com overflow:hidden —
   escalar a faixa (popin) recortava as vizinhas. Animar só o ícone mantém a
   cascata que o card sempre teve, sem artefato de corte. */
#view[data-anim] .qb svg{animation:popin .38s var(--ease) both;}
#view[data-anim] .col:nth-child(1) .qb:nth-child(1) svg{animation-delay:.24s}
#view[data-anim] .col:nth-child(1) .qb:nth-child(2) svg{animation-delay:.30s}
#view[data-anim] .col:nth-child(1) .qb:nth-child(3) svg{animation-delay:.36s}
#view[data-anim] .col:nth-child(2) .qb:nth-child(1) svg{animation-delay:.30s}
#view[data-anim] .col:nth-child(2) .qb:nth-child(2) svg{animation-delay:.36s}
#view[data-anim] .col:nth-child(2) .qb:nth-child(3) svg{animation-delay:.42s}
#view[data-anim] .tape .ev{transform-origin:left center;animation:growx .55s var(--ease) both;
  animation-delay:.18s;}
#view[data-anim] .tape .now{animation:fadein .4s .7s both;}
#sheet.on .sheet-in > *{animation:rise .34s var(--ease) both;}
#sheet.on .sheet-in > :nth-child(1){animation-delay:.06s}
#sheet.on .sheet-in > :nth-child(2){animation-delay:.11s}
#sheet.on .sheet-in > :nth-child(3){animation-delay:.16s}
#sheet.on .sheet-in > :nth-child(4){animation-delay:.21s}
#sheet.on .sheet-in > :nth-child(5){animation-delay:.26s}
#toast.on .tx{animation:fadein .3s .12s both;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .press:active{transform:none;}
  #view.leaving{opacity:1;transform:none;}
}

/* ==========================================================
   NOVO — CONTA (login, cadastro, recuperação de senha).
   O mockup aprovado não tinha porta de entrada: o app era local e
   abria direto. Com o Supabase (2026-08-25) o login virou a primeira
   tela que a pessoa vê, então ela usa os MESMOS tokens do resto
   (coral, raios, sombras) — nada inventado aqui.
   ========================================================== */

/* Sem sessão não há o que navegar: a barra de cima abriria um menu
   vazio e a nav de baixo ficaria como uma faixa morta. */
body.sem-sessao #bar,
body.sem-sessao #nav{display:none;}

.conta-tela{max-width:420px;margin:0 auto;width:100%;
  padding-top:calc(24px + env(safe-area-inset-top));}

.conta-marca{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:6px;padding:12px 4px 4px;}
.conta-marca img{border-radius:22px;box-shadow:var(--sh-card);}
.conta-marca h1{font-size:27px;font-weight:500;line-height:1.15;margin-top:6px;}
.conta-marca p{font-size:13.5px;color:var(--ink-2);line-height:1.5;max-width:32ch;}

.erro-box{font-size:13px;line-height:1.5;color:var(--coral-ink);background:#FDE9E5;
  border-radius:var(--r-card);padding:12px 14px;}

/* Enter/"Ir" do teclado precisa de um <form> de verdade — e o form não pode
   introduzir espaçamento próprio, o .stack do .screen já cuida disso. */
.conta-tela form{display:flex;flex-direction:column;gap:var(--gap);}

.senha-linha{display:flex;align-items:center;gap:6px;}
.senha-linha input{flex:1;min-width:0;}
.olho{flex:none;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:transparent;color:var(--ink-3);}
.olho svg{width:19px;height:19px;}
.olho:active{background:#F6EDEA;}
.olho[aria-pressed="true"]{color:var(--coral-deep);}

.campo-ajuda{font-size:11.5px;color:var(--ink-3);line-height:1.5;margin-top:2px;}

/* Ação secundária: existe, mas não compete com o botão principal. */
.btn.ghost{background:transparent;box-shadow:none;color:var(--ink-2);font-weight:500;}
.btn.ghost:active{background:#F6EDEA;}

/* Ícone discreto em cabeçalho de card (editar/excluir) — achado 2026-08-30:
   usar .btn (retangular, sombra, texto) pra um X sozinho ficava enorme e
   deslocado. Mesmo espírito do #drawer .dclose, só que não preso ao drawer. */
.icon-mini{width:36px;height:36px;flex:none;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:transparent;}
.icon-mini:active{background:rgba(60,30,40,.07);}
.icon-mini svg{width:17px;height:17px;color:var(--ink-3);}
.icon-mini.bad svg{color:var(--rose);}
.icon-mini.bad:active{background:var(--rose-2);}

/* Enquanto a chamada corre. Antes dava pra tocar cinco vezes seguidas
   e disparar cinco logins. */
.btn[aria-disabled="true"]{opacity:.6;pointer-events:none;}

.conta-rodape{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding-top:4px;}
.conta-rodape span{font-size:13px;color:var(--ink-3);}

/* Aviso do código de convite: sem código o app começa uma família NOVA.
   Precisa ser lido, não ignorado — por isso card âmbar, não texto miúdo. */
.aviso-convite{display:flex;flex-direction:column;gap:12px;
  background:#FEF3E2;border-radius:var(--r-card);padding:14px;}
.aviso-convite p{font-size:12.5px;line-height:1.55;color:#7A4A12;}
.aviso-convite .btn{min-height:44px;padding:10px 16px;font-size:13.5px;}

/* ==========================================================
   NOVO — travas de "app nativo" (2026-08-25): sem zoom, sem girar.
   ========================================================== */

/* Zoom: o viewport meta (maximum-scale=1, user-scalable=no) já barra a
   maioria; touch-action reforça contra pinça e duplo-toque nos navegadores
   que ignoram o viewport. "pan-x pan-y" (não "manipulation") é o que
   exclui pinch-zoom explicitamente — manipulation ainda permite pinça. */
html,body{touch-action:pan-x pan-y;}

/* "Gire o celular": cobre o app inteiro, fixo e FORA do fluxo do flex de
   #app (é isso que faltou na primeira tentativa — sem position:fixed aqui,
   o div entra como mais um item da coluna flex e empurra a barra de cima
   pra fora da tela). Escondido por padrão; a media query é a única coisa
   que decide quando aparece — não depende de JS rodar.
   `hover:none` + `pointer:coarse` restringe a toque (celular/tablet), pra
   não acionar num monitor de mesa mais largo que alto. */
#giraTela{position:fixed;inset:0;z-index:60;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:linear-gradient(170deg,#FCF4F1 0%,#F7E9EC 48%,#F3E6F0 100%);
  padding:24px;text-align:center;}
#giraTela svg{width:56px;height:56px;color:var(--coral-deep);}
#giraTela p{font-size:15px;font-weight:500;color:var(--ink);max-width:26ch;line-height:1.5;}
@media (orientation:landscape) and (pointer:coarse) and (hover:none){
  #giraTela{display:flex;}
}

/* ==========================================================
   NOVO — slider de ml na extração (2026-08-25). Pedido do dono do produto:
   os chips (60/90/120/150) só cobriam valores redondos. `background` do
   próprio <input type="range"> vira o preenchimento (JS recalcula o
   gradiente a cada mudança) — mais simples e mais leve que desenhar uma
   segunda barra por cima com posicionamento absoluto.
   ========================================================== */
.slider-card{display:flex;flex-direction:column;gap:18px;padding-top:22px;}
input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:var(--line);outline:none;margin:0;touch-action:pan-y;}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;
  background:#fff;box-shadow:var(--sh-coral),0 0 0 5px var(--coral-deep) inset;
  cursor:pointer;}
input[type="range"]::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;border:none;
  background:#fff;box-shadow:var(--sh-coral),0 0 0 5px var(--coral-deep) inset;
  cursor:pointer;}
input[type="range"]::-moz-range-track{height:6px;border-radius:99px;background:transparent;}

/* ==========================================================
   NOVO — PADRÕES (26/08). Os componentes que os indicadores exigem.
   Nenhum valor de cor novo: tudo sai dos tokens do topo do arquivo.

   Regra de cor que vale para todos eles: coral e lilás identificam os
   DOIS BEBÊS no app inteiro (.bid.n1/.n2, .baby.n1/.n2, .tli.n1/.n2).
   Nenhuma série que não seja um bebê pode usá-las — uma barra
   coral+lilás dentro do card do Henrique faria metade dele ler como
   Levi. Séries neutras usam cinza; entrada de estoque usa menta.
   ========================================================== */

/* --- procedência: a linha que impede o app de mentir --- */
/* Vai ao pé de TODO número calculado: de quantos registros, em que
   janela, com quantas lacunas. É ela que faz o número ser confiável. */
.proc{font-size:10.5px;color:var(--ink-3);font-weight:500;line-height:1.5;
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:var(--s2);}
.proc::before{content:"";width:11px;height:1px;background:var(--line-2);flex:none;}

/* --- falta base: o indicador não aparece "em cinza", ele diz o que falta --- */
.semdado{font-size:12px;color:var(--ink-3);line-height:1.55;padding:var(--s2) 0;}

/* --- medidor de cobertura: 24 blocos, uma hora cada --- */
.cover{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;height:26px;margin-top:var(--s3);}
.cover i{border-radius:3px;background:#F2E8E6;display:block;}
.cover i.on{background:linear-gradient(180deg,var(--coral-2),var(--coral));}
.cover-sc{display:flex;justify-content:space-between;font-size:9.5px;color:var(--ink-3);
  font-weight:500;margin-top:5px;}

/* --- faixa de ritmo: mediana + intervalo usual (p25–p75) --- */
.ritmo{position:relative;height:34px;margin-top:var(--s3);}
.ritmo .trilho{position:absolute;left:0;right:0;top:11px;height:8px;border-radius:99px;background:#F5ECEA;}
.ritmo .faixa{position:absolute;top:11px;height:8px;border-radius:99px;}
.ritmo.n1 .faixa{background:linear-gradient(90deg,rgba(248,122,108,.45),rgba(252,160,127,.7));}
.ritmo.n2 .faixa{background:linear-gradient(90deg,rgba(176,143,212,.45),rgba(142,95,209,.6));}
.ritmo .med{position:absolute;top:5px;width:3px;height:20px;border-radius:2px;transform:translateX(-50%);}
.ritmo.n1 .med{background:var(--coral-deep);} .ritmo.n2 .med{background:var(--violet-2);}
.ritmo .mk{position:absolute;top:26px;font-size:9.5px;color:var(--ink-3);font-weight:500;}
.ritmo .mk.ini{left:0;} .ritmo .mk.fim{right:0;}

/* --- balanço de lados --- */
/* Cada barra usa dois tons da cor do PRÓPRIO bebê (ver regra de cor
   acima). A consolidada das duas mamas é neutra: não é de nenhum dos
   dois. O fio do 50% só existe nela — é onde 50/50 é referência; na
   barra de um bebê, preferência de lado é descrição, não alvo, e ali o
   fio branco era lido como um terceiro bloco. */
.lados{display:flex;height:30px;border-radius:12px;overflow:hidden;position:relative;
  background:#F5ECEA;margin-top:var(--s2);}
.lados span{display:flex;align-items:center;justify-content:center;font-size:11.5px;
  font-weight:700;color:#fff;letter-spacing:.02em;}
.lados.n1 .e{background:linear-gradient(120deg,#FDBFA6,#FCA07F);color:#7C3226;}
.lados.n1 .d{background:linear-gradient(120deg,var(--coral),var(--coral-deep));}
.lados.n2 .e{background:linear-gradient(120deg,#D6C4EC,#B08FD4);color:#3D2760;}
.lados.n2 .d{background:linear-gradient(120deg,var(--violet),var(--violet-2));}
.lados.uni .e{background:linear-gradient(120deg,#B9AFC6,#9A93A6);}
.lados.uni .d{background:linear-gradient(120deg,#847D91,#6E6878);}
.lados.uni::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:rgba(255,255,255,.9);transform:translateX(-50%);}
.lados-lg{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-3);
  font-weight:500;margin-top:5px;}

/* --- mapa dia x noite --- */
.mapa{display:grid;grid-template-columns:34px repeat(6,1fr);gap:3px;margin-top:var(--s3);align-items:center;}
.mapa .rh{font-size:9.5px;color:var(--ink-3);font-weight:600;}
.mapa .ch{font-size:9px;color:var(--ink-3);font-weight:500;text-align:center;}
.mapa i{height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;color:#fff;}
.mapa i.z{background:#F5ECEA;color:var(--ink-3);}

/* --- sparkline: série curta por semana --- */
.spark{display:flex;align-items:flex-end;gap:5px;height:64px;margin-top:var(--s3);}
.spark div{flex:1;border-radius:6px 6px 3px 3px;position:relative;min-height:6px;}
.spark.n1 div{background:linear-gradient(180deg,var(--coral-2),var(--coral));}
.spark.n2 div{background:linear-gradient(180deg,var(--lilac),var(--violet-2));}
.spark div.vazio{background:#F2E8E6;}
.spark-lg{display:flex;justify-content:space-between;font-size:9.5px;color:var(--ink-3);
  font-weight:500;margin-top:6px;}

/* --- linha comparativa (os dois bebês, ou séries neutras) --- */
.vs{display:flex;flex-direction:column;gap:9px;margin-top:var(--s3);}
.vs .l{display:flex;align-items:center;gap:9px;}
.vs .l .nome{font-size:12px;font-weight:600;width:78px;flex:none;display:flex;align-items:center;gap:6px;}
.vs .l .bar{flex:1;height:10px;border-radius:99px;background:#F5ECEA;overflow:hidden;}
.vs .l .bar i{display:block;height:100%;border-radius:99px;}
.vs .l.n1 .bar i{background:linear-gradient(90deg,var(--coral),var(--coral-2));}
.vs .l.n2 .bar i{background:linear-gradient(90deg,var(--lilac),var(--violet-2));}
.vs .l.entra .bar i{background:linear-gradient(90deg,#6FC29B,var(--mint));}
.vs .l.neutro .bar i{background:linear-gradient(90deg,#A79FB2,#7E7A88);}
.vs .l .v{font-size:12.5px;font-weight:600;min-width:58px;text-align:right;flex:none;
  white-space:nowrap;}

/* --- aviso de lacuna de registro --- */
/* Âmbar, nunca vermelho: isto é lido às 3h por alguém sem defesa
   emocional nenhuma, e a pergunta é sobre o REGISTRO, não sobre o bebê. */
.lacuna{background:#FEF3E2;border-radius:var(--r-card);padding:14px;display:flex;
  flex-direction:column;gap:11px;}
.lacuna .lt{display:flex;gap:10px;align-items:flex-start;}
.lacuna svg{width:19px;height:19px;color:#B87514;flex:none;margin-top:1px;}
.lacuna b{font-size:13.5px;font-weight:600;color:#7A4A12;display:block;}
.lacuna p{font-size:12px;line-height:1.5;color:#8A5A20;margin-top:2px;}
.lacuna .la{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.lacuna .la button{min-height:44px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;
  background:#fff;color:#7A4A12;box-shadow:0 5px 14px -9px rgba(120,80,80,.4);}
.lacuna .la button.sec{background:transparent;box-shadow:none;color:#9A6B32;font-weight:500;}

/* --- paleta de cocô: cor e textura em toque, sem teclado (Princípio I) --- */
.paleta{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.swatch{aspect-ratio:1;border-radius:14px;position:relative;box-shadow:var(--sh-card);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;
  font-size:9px;font-weight:600;color:rgba(0,0,0,.5);}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--coral-deep),var(--sh-card);}
.swatch.amarelo{background:#F2C94C;} .swatch.mostarda{background:#D9A441;}
.swatch.verde{background:#8FAE6B;} .swatch.marrom{background:#9C6B45;color:rgba(255,255,255,.85);}
.swatch.outra{background:#EDE4E1;color:var(--ink-3);}
.tex{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.tex button{min-height:46px;border-radius:14px;background:#fff;box-shadow:var(--sh-card);
  font-size:13px;font-weight:600;color:var(--ink-2);}
.tex button[aria-pressed="true"]{background:linear-gradient(140deg,var(--coral),var(--coral-deep));color:#fff;}

/* --- valor grande dentro de card --- */
.hero-n{font-size:34px;font-weight:500;letter-spacing:-.035em;line-height:1;}
.hero-n small{font-size:14px;font-weight:500;color:var(--ink-2);letter-spacing:0;}
.delta{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:4px;}
.delta.dn{color:var(--coral-ink);} .delta.up{color:#1F7A53;}

/* SVG solto dentro de .rowb não tem tamanho próprio: sem isto ele herda
   o 100% do viewBox e ocupa metade do cartão. */
.rowb > svg{width:22px;height:22px;flex:none;color:var(--ink-3);}
/* .pill é inline-flex, mas dentro de .stack-in (flex column) o stretch
   padrão a estica de ponta a ponta e ela deixa de ler como etiqueta. */
.stack-in > .pill{align-self:flex-start;}

/* ==========================================================
   NOVO — FOLHA DA NOITE PARA IMPRIMIR (26/08).
   Ideia do dono do produto: às 3h da manhã a melhor interface é papel e
   caneta na cabeceira. A folha vive dentro do próprio documento (PWA no
   iOS bloqueia window.open com frequência) e só existe na impressão.
   ========================================================== */
#folhaImpressao{display:none;}

@media print{
  /* Some com o app inteiro: o navegador imprime só a folha. */
  #app,#toast,#drawer,#scrim,#sheet,#giraTela{display:none!important;}
  html,body{background:#fff!important;height:auto!important;display:block!important;}
  #folhaImpressao{display:block;padding:0;color:#000;font-family:var(--ui);}

  .fh{margin-bottom:14px;}
  .fh h1{font-size:16pt;font-weight:600;margin-bottom:4px;}
  .fh p{font-size:9pt;color:#333;line-height:1.4;}

  .ft{width:100%;border-collapse:collapse;margin-bottom:18px;page-break-inside:avoid;}
  .ft caption{text-align:left;font-size:13pt;font-weight:700;padding:8px 0 6px;}
  /* Sem cor de bebê no papel: impressora de casa é preto e branco, e um
     tom de cinza claro atrás do nome sairia como borrão. A distinção é o
     nome, que é o que a pessoa lê no escuro. */
  .ft th{font-size:8pt;font-weight:600;text-align:left;border-bottom:1.5pt solid #000;
    padding:4px 6px;vertical-align:bottom;}
  .ft th small{display:block;font-weight:400;font-size:7pt;color:#444;}
  .ft td{border-bottom:.5pt solid #999;height:34px;padding:2px 6px;font-size:9pt;color:#666;}
  .ft td.hora{width:14%;}
  .ft td.mam{width:32%;}
  .ft td.fra{width:16%;}
  .ft td.son{width:16%;}
  /* As letras são alvos de círculo, não texto para ler: espaçadas o
     suficiente para circular com caneta no escuro sem pegar a vizinha. */
  .ft td span{display:inline-block;min-width:16px;text-align:center;margin-right:5px;color:#000;}

  .fr{font-size:8pt;color:#555;font-style:italic;margin-top:6px;}

  @page{margin:14mm;}
}

/* ==========================================================
   NOVO — PULSO: o traço que desenha o futuro (26/08).
   Estende o grafismo de ECG que já existia como adorno no título da Hoje
   (js/telas/home.js, beat()) — aqui ele lê dado de verdade
   (js/padroes.js `linhaFutura`, js/telas/linha-tempo.js).

   REESCRITO no mesmo dia: a primeira versão empilhava nomes, etiquetas e
   horas com position:absolute e `top` em pixels sobre um SVG. Bastou uma
   etiqueta quebrar em duas linhas para invadir a trilha de baixo e as
   marcas de hora — virou texto sobreposto no celular. Agora é FLEX: nome
   em coluna fixa, trilha elástica, horas em faixa própria. Sobreposição
   deixa de ser possível por construção.
   ========================================================== */
.pulso{display:flex;flex-direction:column;gap:6px;margin-top:var(--s3);width:100%;}

/* uma linha por bebê: nome (largura fixa) + trilha (ocupa o resto) */
.pulso-linha-bebe{display:flex;align-items:center;gap:8px;width:100%;}
.pulso-nome{flex:0 0 58px;font-size:10px;font-weight:700;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pulso.compacta .pulso-nome{flex-basis:52px;font-size:9.5px;}
.pulso-nome.n1{color:var(--coral-deep);}
.pulso-nome.n2{color:var(--violet-2);}

.pulso-trilha{position:relative;flex:1 1 auto;min-width:0;
  border-left:1.5px solid var(--coral-deep);padding-left:2px;}
.pulso-svg{display:block;width:100%;height:100%;}

/* "ainda não dá pra prever" — texto curto, dentro da própria trilha, sem
   nunca invadir a linha de baixo (é filho da trilha, não um absoluto solto) */
.pulso-falta{position:absolute;left:8px;top:50%;transform:translateY(-50%);
  font-size:10px;color:var(--ink-3);font-weight:500;font-style:italic;
  white-space:nowrap;background:rgba(255,255,255,.7);padding:0 4px;border-radius:6px;}

.pulso-base{stroke:var(--line-2);stroke-width:1;fill:none;}
.pulso-linha{stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.pulso-linha.n1{stroke:var(--coral-deep);}
.pulso-linha.n2{stroke:var(--violet-2);}
/* a batida mais próxima "vive" — mesma pulsação do sono em curso na fita */
.pulso-linha.pulso-viva{animation:pulso-bate 2.2s ease-in-out infinite;}
@keyframes pulso-bate{0%,100%{opacity:1;}50%{opacity:.55;}}
.pulso-onda{stroke-width:1.6;fill:none;stroke-linecap:round;opacity:.55;}
.pulso-onda.n1{stroke:var(--coral);}
.pulso-onda.n2{stroke:var(--violet);}
.pulso-ponto.n1{fill:var(--coral-deep);}
.pulso-ponto.n2{fill:var(--violet-2);}

/* faixa de horas: flex, alinhada com a trilha (mesmo recuo do nome) */
.pulso-horas{display:flex;justify-content:space-between;
  margin-left:66px;font-size:9px;color:var(--ink-3);font-weight:500;}
.pulso.compacta .pulso-horas{margin-left:60px;}
.pulso-horas span:first-child{color:var(--coral-deep);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;}

/* legenda curta, usada só na versão cheia (aba Adiante) */
.pulso-legenda{display:flex;gap:14px;margin-top:var(--s2);font-size:10.5px;
  color:var(--ink-3);font-weight:500;flex-wrap:wrap;}
.pulso-legenda span{display:flex;align-items:center;gap:6px;}
.pulso-legenda i{width:14px;height:2px;background:var(--ink-3);display:block;flex:none;}
.pulso-legenda i.tracejada{background-image:repeating-linear-gradient(90deg,var(--ink-3) 0 3px,transparent 3px 6px);
  background-color:transparent;}
.pulso-legenda i.onda{height:7px;border-radius:4px;background:var(--ink-3);opacity:.5;}

/* Blindagem da fita histórica: ela é um <div> block dentro de um card que,
   dependendo do contexto de layout, pode ser encolhido por um pai flex.
   Declarar largura e box-sizing explicitamente custa nada e tira essa
   classe inteira de bug do caminho (a fita apareceu comprimida a ~50% no
   celular do dono do produto em 26/08). */
.tapecard > .tape{width:100%;box-sizing:border-box;flex:none;align-self:stretch;}

/* ==========================================================
   NOVO — TIRA "POR QUE ELE ACORDOU" (26/08).
   Método em por-que-ele-acordou.html. Aparece por 2 minutos depois de
   marcar "acordou" e some sozinha: é resposta a um gesto, não elemento
   permanente da Hoje (que é a tela dos 3 segundos).
   ========================================================== */
.despertar-tira{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:13px 15px;animation:rise .34s var(--ease) both;}
.despertar-tira .dt-ic{width:30px;height:30px;border-radius:10px;flex:none;display:flex;
  align-items:center;justify-content:center;font-size:15px;}
.despertar-tira.n1 .dt-ic{background:#FDE2DC;}
.despertar-tira.n2 .dt-ic{background:#EBE1F7;}
.despertar-tira .dt-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.despertar-tira .dt-tx b{font-size:13.5px;font-weight:600;}
.despertar-tira .dt-tx small{font-size:11.5px;color:var(--ink-2);}
.despertar-tira .dt-seta{color:var(--ink-3);font-size:18px;flex:none;line-height:1;}

/* detalhe (dentro da folha) */
.dt-barras{display:flex;flex-direction:column;gap:11px;}
.dt-linha{display:flex;align-items:center;gap:10px;}
.dt-rot{font-size:13px;font-weight:600;width:108px;flex:none;}
.dt-bar{flex:1;height:11px;border-radius:99px;background:#F2E8E6;overflow:hidden;min-width:40px;}
.dt-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--coral),var(--coral-2));}
.dt-v{font-size:12px;font-weight:600;flex:none;white-space:nowrap;}
.dt-v small{color:var(--ink-3);font-weight:500;}

/* ==========================================================
   NOVO — splash screen (2026-08-25), quando o logo novo entrou. Cobre a
   tela até a primeira tela real estar pronta (login ou Home) — some
   sozinha via JS (ocultarSplash em js/app.js). Mesmo mesh de fundo do
   resto do app, pra não parecer uma tela solta importada de outro lugar.
   ========================================================== */
#splash{
  position:fixed;inset:0;z-index:999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:
    radial-gradient(80% 52% at 8% 4%,#FDF1EC 0%,transparent 58%),
    radial-gradient(70% 48% at 96% 16%,#F0E4F4 0%,transparent 60%),
    radial-gradient(92% 58% at 50% 104%,#FBE2E4 0%,transparent 68%),
    linear-gradient(170deg,#FCF4F1 0%,#F7E9EC 48%,#F3E6F0 100%);
  transition:opacity .4s var(--ease),visibility 0s .4s;
}
#splash img{width:104px;height:104px;border-radius:28px;box-shadow:var(--sh-lift);}
#splash .wordmark{font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
#splash.oculto{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--ease);}

/* ==========================================================
   NOVO — O RIO DE DUAS MARGENS (26/08). A Linha do dia refeita.

   Era uma lista linear (hora à esquerda, tudo empilhado): respondia "o que
   corrigir", mas não "como foi o dia". Agora o tempo é um EIXO CENTRAL, com
   um bebê em cada margem — o Princípio II virado composição. De relance se
   vê o que a lista escondia: quem dormiu enquanto o outro mamava, quem
   passou horas sem nada, se os dois estão em fase ou em contratempo.

   Sono é o único evento que OCUPA tempo, e o único que cresce: a altura da
   cápsula acompanha a duração real. Ver a noite desenhada explica melhor
   que qualquer número.
   ========================================================== */

/* --- navegação entre dias: o que fez a tela virar consulta --- */
.rio-nav{display:flex;align-items:center;gap:var(--s2);}
.rio-seta{width:44px;height:44px;flex:none;border-radius:50%;background:#fff;
  box-shadow:var(--sh-card);font-size:20px;line-height:1;color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;}
.rio-seta:active{background:#FBF5F3;}
.rio-seta[aria-disabled="true"]{opacity:.3;}
.rio-dia{flex:1;text-align:center;display:flex;flex-direction:column;gap:1px;}
.rio-dia b{font-size:15px;font-weight:600;text-transform:capitalize;}
.rio-dia small{font-size:11px;color:var(--ink-3);font-weight:500;}

/* --- resumo do dia: a resposta rápida de "como foi" --- */
.rio-resumo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:var(--gap);}
.rio-resumo-bebe{background:var(--white);border-radius:18px;padding:13px;
  box-shadow:var(--sh-card);display:flex;flex-direction:column;gap:9px;}
.rrb-nome{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px;}
.rio-resumo-bebe.n1 .rrb-nome{color:var(--coral-ink);}
.rio-resumo-bebe.n2 .rrb-nome{color:var(--violet-ink);}
.rrb-nums{display:flex;flex-direction:column;gap:4px;}
.rrb-nums span{display:flex;align-items:baseline;gap:5px;font-size:11px;color:var(--ink-3);font-weight:500;}
.rrb-nums b{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.02em;}

/* --- o rio --- */
.rio{position:relative;}
.rio-margens{display:flex;justify-content:space-between;padding:0 4px 8px;}
.rio-margem{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.rio-margem.n1{color:var(--coral-deep);}
.rio-margem.n2{color:var(--violet-2);}

/* cabeçalho de período: dá ao dia a estrutura que a lista não tinha */
.rio-periodo{display:flex;align-items:center;gap:10px;margin:var(--s4) 0 var(--s2);}
.rio-periodo span{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);background:var(--white);padding:3px 10px;border-radius:99px;
  box-shadow:0 4px 12px -8px rgba(120,80,80,.5);margin:0 auto;}

/* uma linha do rio: [margem esq] [eixo do tempo] [margem dir] */
.rio-linha{display:grid;grid-template-columns:1fr 56px 1fr;align-items:center;
  min-height:46px;margin-bottom:10px;animation:rioSobe .42s var(--ease) both;}
@keyframes rioSobe{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.rio-lado{display:flex;min-width:0;}
.rio-lado.esq{justify-content:flex-end;}
.rio-lado.dir{justify-content:flex-start;}

/* o eixo: uma linha contínua que atravessa o dia inteiro */
.rio-centro{position:relative;display:flex;align-items:center;justify-content:center;
  align-self:stretch;}
.rio-centro::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;
  transform:translateX(-50%);background:var(--line-2);}
.rio-hora{position:relative;z-index:1;font-size:10.5px;font-weight:600;color:var(--ink-2);
  background:#FCF6F3;padding:2px 4px;border-radius:6px;}

/* a cápsula do evento — cor do bebê, cantos uniformes (sem bico/lâmina) */
.rio-ev{position:relative;max-width:100%;min-height:44px;display:flex;align-items:center;
  gap:9px;padding:9px 12px;border-radius:16px;text-align:left;
  box-shadow:var(--sh-card);background:var(--white);}
.rio-ev:active{transform:scale(.97);}
.rio-ev.n1{border-left:3px solid var(--coral);}
.rio-ev.n2{border-right:3px solid var(--violet);}
.rev-ic{width:26px;height:26px;border-radius:9px;flex:none;display:flex;
  align-items:center;justify-content:center;}
.rev-ic svg{width:14px;height:14px;color:#fff;}
.rio-ev.n1 .rev-ic{background:linear-gradient(150deg,var(--coral),var(--coral-deep));}
.rio-ev.n2 .rev-ic{background:linear-gradient(150deg,var(--lilac),var(--violet-2));}
.rev-tx{min-width:0;display:flex;flex-direction:column;gap:1px;}
.rev-tx b{font-size:12.5px;font-weight:600;}
.rev-tx small{font-size:10.5px;color:var(--ink-3);}

/* Sono cresce: é o único evento que ocupa tempo de verdade — a própria
   altura do card já mostra a duração, e o texto agora diz "Acordou às"
   por extenso, então a faixa lateral de duração virou redundante. */
.rio-ev.tipo-sono{align-items:flex-start;}
.rio-ev.tipo-sono .rev-ic{opacity:.85;}

@media (prefers-reduced-motion:reduce){
  .rio-linha{animation:none!important;}
}

/* ==========================================================
   NOVO — JORNADA DE BOAS-VINDAS (26/08).

   Slides em tela cheia da primeira entrada: acolhida, cadastro básico dos
   bebês e guia das abas. Cobre o app inteiro (inclusive #bar e #nav, que
   ainda não fazem sentido pra quem nunca viu a tela) e sai por fade.

   Mesmo mesh do #splash de propósito: a jornada começa exatamente onde a
   splash termina, então a troca não pisca nem parece outra tela vinda de
   outro lugar. Toda animação é só transform/opacity — nada que force
   layout, porque isto roda no primeiro segundo de vida do app, junto com
   o boot do Supabase.
   ========================================================== */
.jornada{
  position:fixed;inset:0;z-index:998;
  display:flex;flex-direction:column;
  background:
    radial-gradient(80% 52% at 8% 4%,#FDF1EC 0%,transparent 58%),
    radial-gradient(70% 48% at 96% 16%,#F0E4F4 0%,transparent 60%),
    radial-gradient(92% 58% at 50% 104%,#FBE2E4 0%,transparent 68%),
    linear-gradient(170deg,#FCF4F1 0%,#F7E9EC 48%,#F3E6F0 100%);
  padding:calc(env(safe-area-inset-top) + var(--s6)) var(--gut)
          calc(env(safe-area-inset-bottom) + var(--s6));
  transition:opacity .45s var(--ease);
}
.jornada.saindo{opacity:0;pointer-events:none;}
body.em-jornada #bar,body.em-jornada #nav{display:none;}

/* palco: ocupa o que sobra e centraliza o slide; rola sozinho quando o
   teclado do celular abre no passo de cadastro (daí o overflow-y aqui e
   não no .jornada, que precisa manter o rodapé fixo embaixo). */
.jn-palco{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;justify-content:center;
  max-width:460px;width:100%;margin:0 auto;}
.jn-slide{display:flex;flex-direction:column;gap:var(--s5);width:100%;}
.jn-slide > *{animation:jnSobe .5s var(--ease) both;}
.jn-slide > :nth-child(1){animation-delay:.04s}
.jn-slide > :nth-child(2){animation-delay:.11s}
.jn-slide > :nth-child(3){animation-delay:.18s}
.jn-slide > :nth-child(4){animation-delay:.25s}
.jn-slide > :nth-child(5){animation-delay:.32s}
@keyframes jnSobe{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

.jn-tit{font-size:31px;line-height:1.16;font-weight:500;letter-spacing:-.03em;}
.jn-tx{font-size:15.5px;line-height:1.62;color:var(--ink-2);}
.jn-tx b{color:var(--ink);font-weight:600;}
.jn-selo{font-size:var(--t-cap);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--coral-ink);}

/* ---------- palco 1: a marca respirando ---------- */
.jn-marca{display:flex;justify-content:center;padding:var(--s4) 0 var(--s2);}
.jn-marca-in{position:relative;display:grid;place-items:center;}
.jn-marca img{width:112px;height:112px;border-radius:30px;
  box-shadow:var(--sh-lift);position:relative;z-index:1;}
/* halo: só escala/opacidade, nunca box-shadow animado (que repinta caro) */
.jn-halo{position:absolute;width:112px;height:112px;border-radius:34px;
  background:radial-gradient(circle,rgba(248,122,108,.34),transparent 68%);
  animation:jnHalo 3.8s ease-in-out infinite;}
@keyframes jnHalo{0%,100%{transform:scale(1);opacity:.5;}50%{transform:scale(1.5);opacity:0;}}

/* ---------- palco 2: os dois, sempre ---------- */
.jn-dupla{display:flex;gap:var(--s3);justify-content:center;padding:var(--s3) 0;}
.jn-ovo{flex:1;max-width:132px;aspect-ratio:1;border-radius:50% 50% 46% 46%;
  display:flex;align-items:center;justify-content:center;
  font-size:29px;font-weight:600;color:#fff;box-shadow:var(--sh-card);}
.jn-ovo.n1{background:linear-gradient(150deg,var(--coral-2),var(--coral-deep));
  animation:jnPulsa 3.4s ease-in-out infinite;}
.jn-ovo.n2{background:linear-gradient(150deg,var(--lilac),var(--violet-2));
  animation:jnPulsa 3.4s ease-in-out infinite 1.7s;}
@keyframes jnPulsa{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-9px) scale(1.04);}}

/* ---------- palco 3: a troca de turno ---------- */
.jn-turno{position:relative;height:96px;margin:var(--s2) 0;}
.jn-trilho{position:absolute;left:8%;right:8%;top:50%;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--coral),var(--violet));opacity:.28;}
.jn-vaivem{position:absolute;top:calc(50% - 13px);width:26px;height:26px;border-radius:50%;
  background:var(--white);box-shadow:var(--sh-card);display:grid;place-items:center;
  animation:jnVaivem 5s var(--ease) infinite;}
.jn-vaivem svg{width:13px;height:13px;color:var(--coral-deep);}
@keyframes jnVaivem{0%,100%{left:8%;}50%{left:calc(92% - 26px);}}

/* ---------- cadastro dos bebês ---------- */
.jn-form{background:var(--white);border-radius:var(--r-card);padding:var(--s2) var(--pad-card);
  box-shadow:var(--sh-card);}
.jn-quem{display:flex;align-items:center;gap:var(--s3);}
.jn-quem .bid{width:38px;height:38px;font-size:15px;flex:none;}
.jn-quem b{font-size:15px;font-weight:600;}
.jn-quem small{display:block;font-size:12px;color:var(--ink-3);font-weight:400;}
/* sexo: dois alvos grandes lado a lado — no cadastro dá pra digitar, mas
   um <select> nativo pra duas opções é toque a mais sem ganho nenhum. */
.jn-sexo{display:flex;gap:var(--s2);}
.jn-sexo button{flex:1;min-height:var(--tap);border-radius:14px;font-size:14px;font-weight:600;
  background:#FBF3F1;color:var(--ink-2);border:2px solid transparent;}
.jn-sexo button[aria-pressed="true"]{background:var(--white);border-color:var(--coral);
  color:var(--coral-ink);box-shadow:var(--sh-card);}
.jn-erro{background:var(--rose-2);color:var(--rose);border-radius:14px;
  padding:11px var(--s3);font-size:13px;font-weight:500;}

/* ---------- guia das abas ---------- */
.jn-guia{display:flex;flex-direction:column;gap:var(--s2);}
.jn-item{display:flex;align-items:flex-start;gap:var(--s3);background:var(--white);
  border-radius:18px;padding:13px var(--s4);box-shadow:var(--sh-card);}
.jn-item-ic{width:36px;height:36px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--coral-2),var(--coral-deep));}
.jn-item-ic svg{width:18px;height:18px;color:#fff;}
.jn-item:nth-child(2) .jn-item-ic{background:linear-gradient(150deg,var(--amber-2),var(--amber));}
.jn-item:nth-child(3) .jn-item-ic{background:linear-gradient(150deg,var(--lilac),var(--violet-2));}
.jn-item:nth-child(4) .jn-item-ic{background:linear-gradient(150deg,#7FCBA8,var(--mint));}
.jn-item:nth-child(5) .jn-item-ic{background:linear-gradient(150deg,#9C98A8,var(--ink-2));}
.jn-item-tx b{display:block;font-size:14px;font-weight:600;}
.jn-item-tx small{display:block;font-size:12.5px;line-height:1.5;color:var(--ink-2);margin-top:1px;}

/* ---------- rodapé ---------- */
.jn-rodape{flex:none;display:flex;flex-direction:column;gap:var(--s3);align-items:center;
  max-width:460px;width:100%;margin:0 auto;padding-top:var(--s5);}
.jn-dots{display:flex;gap:7px;}
.jn-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);
  transition:width .3s var(--ease),background-color .3s;}
.jn-dots i.on{width:22px;background:var(--coral-deep);}
.jn-rodape .btn{width:100%;}
.jn-pular{font-size:13px;font-weight:500;color:var(--ink-3);min-height:38px;padding:0 var(--s3);}

@media (max-height:680px){
  .jn-tit{font-size:26px;}
  .jn-marca img,.jn-halo{width:88px;height:88px;}
  .jn-ovo{max-width:104px;}
  .jn-turno{height:74px;}
}
@media (prefers-reduced-motion:reduce){
  .jn-slide > *{animation:none;}
  .jn-halo,.jn-ovo,.jn-vaivem{animation:none;}
  .jn-vaivem{left:calc(50% - 13px);}
}

/* ---------- "quantos bebês?" (ADR 003) ---------- */
.jn-quantos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);}
.jn-qopt{display:flex;flex-direction:column;align-items:center;gap:5px;
  background:var(--white);border-radius:20px;padding:var(--s5) var(--s3);
  border:2px solid transparent;box-shadow:var(--sh-card);text-align:center;}
.jn-qopt b{font-size:15px;font-weight:600;}
.jn-qopt small{font-size:11.5px;color:var(--ink-3);line-height:1.35;}
.jn-qopt[aria-pressed="true"]{border-color:var(--coral);box-shadow:var(--sh-coral);}
.jn-qovos{display:flex;gap:5px;height:38px;align-items:flex-end;margin-bottom:var(--s1);}
.jn-qovos i{width:26px;height:34px;border-radius:50% 50% 46% 46%;display:block;}
.jn-qovos i.n1{background:linear-gradient(150deg,var(--coral-2),var(--coral-deep));}
.jn-qovos i.n2{background:linear-gradient(150deg,var(--lilac),var(--violet-2));}

/* ==========================================================
   NOVO — UM BEBÊ (ADR 003, 26/08).

   O app nasceu assumindo gêmeos (Princípio II original). Com um bebê só, os
   layouts pareados não ficam "meio vazios": eles deixam de existir. A regra
   é sempre a mesma — o que existe pra COMPARAR dois some, e o que existe pra
   MOSTRAR um ocupa a largura inteira.

   Marcado com .solo no container, nunca por media query: depende de quantos
   bebês a família tem, não do tamanho da tela.
   ========================================================== */
.twins.solo{grid-template-columns:1fr;}
/* o card sozinho não precisa da altura de coluna dupla; respira mais */
.twins.solo .baby{min-height:0;}
.twins.solo .baby .big{font-size:34px;}

/* Linha do dia: sem a segunda margem, o eixo central perde a função — vira
   lista linear, que é o que o "rio" substituiu justamente por existirem dois
   lados pra comparar. */
.rio-linha.solo{grid-template-columns:44px 1fr;}
.rio-linha.solo .rio-ev{margin-left:0;}
.rio-linha.solo .rio-ev.n1{border-left:3px solid var(--coral);}
.rio-resumo.solo{grid-template-columns:1fr;}
.rio-margens.solo{justify-content:flex-start;}
.rio-margens.solo .rio-margem.n2{display:none;}

/* ==========================================================
   NOVO — Ranking de cuidadores entre famílias (specs/002-ranking-cuidadores).
   Componentes copiados 1:1 do mockup aprovado (design/mockup-ranking.html).
   Cor do avatar é por FAMÍLIA, nunca coral/lilás puros — essas duas cores
   são a identidade dos bebês em todo o app; usá-las aqui confundiria "de
   qual família" com "qual gêmeo".
   ========================================================== */
.foto-up{width:88px;height:88px;border-radius:28px;margin:4px auto 2px;display:flex;
  align-items:center;justify-content:center;border:2px dashed var(--line-2);color:var(--ink-3);
  background:#FBF6F4;flex-direction:column;gap:4px;overflow:hidden;}
.foto-up svg{width:22px;height:22px;}
.foto-up span{font-size:10px;font-weight:600;}
.foto-up img{width:100%;height:100%;object-fit:cover;}

.av{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:700;color:#fff;letter-spacing:-.01em;
  overflow:hidden;}
.av img{width:100%;height:100%;object-fit:cover;}
.av.lg{width:76px;height:76px;font-size:22px;border-radius:26px;}
.av.c1{background:linear-gradient(150deg,var(--amber-2),var(--amber));}
.av.c2{background:linear-gradient(150deg,#8FD1B4,var(--mint));}
.av.c3{background:linear-gradient(150deg,#F0A8B4,var(--rose));}
.av.c4{background:linear-gradient(150deg,#B9AFC6,#847D91);}
.av-stack{display:flex;}
.av-stack .av{width:28px;height:28px;font-size:10px;border:2px solid #fff;margin-left:-9px;}
.av-stack .av:first-child{margin-left:0;}

.liga-card{display:flex;flex-direction:column;gap:12px;}
.liga-nome{font-size:15px;font-weight:600;}

.rk-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  padding:6px 0 2px;}
.rk-hero .n{font-size:36px;font-weight:500;letter-spacing:-.03em;line-height:1;}
.rk-hero .l{font-size:12.5px;color:var(--ink-2);font-weight:500;}
.rk-list{display:flex;flex-direction:column;gap:8px;}
.rk-row{display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;
  padding:10px 14px 10px 10px;box-shadow:var(--sh-card);}
.rk-row.voce{box-shadow:0 0 0 2px var(--coral-deep),var(--sh-card);}
.rk-pos{width:24px;flex:none;text-align:center;font-size:14px;font-weight:700;color:var(--ink-3);}
.rk-crown{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--amber);}
.rk-crown svg{width:20px;height:20px;}
.rk-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:0;}
.rk-info b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rk-info small{font-size:11px;color:var(--ink-3);font-weight:500;}
.rk-n{font-size:17px;font-weight:600;flex:none;}
.rk-n small{font-size:10.5px;font-weight:500;color:var(--ink-3);}

/* ========== Saltos Mentais (Wonder Weeks) — 2026-09-03 ========== */
.salto-card{width:100%;text-align:left;display:block;border-radius:var(--r-card);
  padding:14px 16px;box-shadow:var(--sh-card);border:none;background:#fff;}
.salto-card:active{opacity:.88;}
.salto-card.tempestade{background:linear-gradient(135deg,#F0EDFF,#EBE4FF);}
.salto-card.solar{background:linear-gradient(135deg,#FFFBEB,#FFF3D0);}
.salto-header{display:flex;align-items:center;gap:10px;}
.salto-icone{font-size:22px;flex:none;line-height:1;}
.salto-info{flex:1;min-width:0;}
.salto-titulo{font-size:13.5px;font-weight:600;color:var(--ink);display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.salto-sub{font-size:11.5px;color:var(--ink-3);font-weight:500;display:block;margin-top:2px;}
.salto-barra-wrap{margin-top:10px;height:5px;background:rgba(100,80,160,.12);
  border-radius:99px;overflow:hidden;}
.salto-barra-fill{height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--violet),var(--lilac));transition:width .3s;}

/* Sheet do salto */
.salto-sheet-prog{height:6px;background:rgba(100,80,160,.12);border-radius:99px;overflow:hidden;margin:12px 0 4px;}
.salto-sheet-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--violet),var(--lilac));}
.salto-hab-lista{list-style:none;display:flex;flex-direction:column;gap:7px;margin:8px 0 0;padding:0;}
.salto-hab-lista li{font-size:13px;color:var(--ink-2);padding-left:18px;
  position:relative;line-height:1.5;}
.salto-hab-lista li::before{content:"•";position:absolute;left:4px;color:var(--violet);font-weight:700;}
.salto-insight-box{background:#F6F3FF;border-radius:16px;padding:14px 16px;
  margin-top:4px;font-size:13px;line-height:1.7;color:var(--ink-2);}
.salto-insight-box strong{display:block;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--violet);margin-bottom:8px;font-weight:700;}

/* ===== Tela Dedicada de Saltos Mentais (telas/saltos.js) — 2026-09-04 ===== */
.salto-topo{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--border);background:var(--bg-1);position:sticky;top:0;z-index:2;}
.salto-back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--bg-2);flex-shrink:0;}

.salto-seletor{display:flex;gap:var(--s2);padding:var(--s2) var(--s4) 0;background:var(--bg-1);}
.salto-sel-btn{padding:5px 16px;border-radius:20px;font-size:var(--t-cap);
  background:var(--bg-2);color:var(--ink-2);border:1.5px solid transparent;cursor:pointer;}
.salto-sel-btn.ativo{background:#EDE9FE;color:#7C3AED;border-color:#C4B5FD;font-weight:600;}

/* Hero */
.salto-hero{margin:var(--s4);border-radius:18px;padding:var(--s4);
  display:flex;align-items:center;gap:var(--s4);overflow:hidden;}
.salto-hero-tempestade{background:linear-gradient(135deg,#6D28D9 0%,#4C1D95 100%);
  color:#fff;box-shadow:0 6px 24px rgba(109,40,217,.4);}
.salto-hero-solar{background:linear-gradient(135deg,#F59E0B 0%,#D97706 100%);
  color:#fff;box-shadow:0 6px 24px rgba(245,158,11,.35);}
.sh-deco{font-size:3.2rem;flex-shrink:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.2));
  animation:sh-float 3s ease-in-out infinite;}
@keyframes sh-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.sh-corpo{flex:1;min-width:0;}
.sh-titulo{font-size:var(--t-lg);font-weight:700;line-height:1.2;margin-bottom:2px;}
.sh-semana{font-size:var(--t-cap);opacity:.8;margin-bottom:var(--s3);}
.sh-prog{height:6px;background:rgba(255,255,255,.3);border-radius:3px;overflow:hidden;margin-bottom:5px;}
.sh-prog-fill{height:100%;background:rgba(255,255,255,.9);border-radius:3px;transition:width .5s ease;}
.sh-sub{font-size:var(--t-cap);opacity:.75;}

/* Timeline */
.salto-tl-titulo{font-size:var(--t-sm);font-weight:600;color:var(--ink-2);margin:0 0 var(--s3);}
.stl{display:flex;flex-direction:column;}
.stl-item{display:flex;align-items:flex-start;gap:var(--s3);cursor:pointer;
  -webkit-tap-highlight-color:transparent;}
.stl-esq{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:32px;}
.stl-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;position:relative;z-index:1;}
.stl-dot-passado{background:#DCFCE7;color:#16A34A;}
.stl-dot-atual{background:#7C3AED;color:#fff;animation:stl-pulso 2s ease-in-out infinite;}
@keyframes stl-pulso{
  0%,100%{box-shadow:0 0 0 3px rgba(124,58,237,.2);}
  50%{box-shadow:0 0 0 8px rgba(124,58,237,.1);}
}
.stl-dot-futuro{background:#F1F5F9;color:#94A3B8;border:1.5px solid #E2E8F0;}
.stl-linha{width:2px;flex:1;min-height:20px;background:#E2E8F0;margin:2px 0;}
.stl-linha-cheia{background:#86EFAC;}
.stl-card{flex:1;display:flex;align-items:center;gap:var(--s3);padding:var(--s3);
  border-radius:12px;margin-bottom:var(--s2);border:1.5px solid transparent;transition:opacity .2s;}
.stl-card-atual{background:#F5F3FF;border-color:#DDD6FE;}
.stl-card-passado{background:#F0FDF4;border-color:#BBF7D0;opacity:.85;}
.stl-card-futuro{background:var(--bg-2);opacity:.65;}
.stl-emoji{font-size:1.75rem;flex-shrink:0;line-height:1;}
.stl-info{flex:1;min-width:0;}
.stl-nome{font-size:var(--t-sm);font-weight:600;color:var(--ink-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stl-meta{font-size:var(--t-cap);color:var(--ink-3);display:flex;align-items:center;
  gap:4px;flex-wrap:wrap;margin-top:2px;}
.stl-tag{display:inline-block;padding:1px 7px;border-radius:10px;font-size:10px;font-weight:600;}
.stl-tag-passado{background:#DCFCE7;color:#16A34A;}
.stl-tag-atual{background:#EDE9FE;color:#7C3AED;}
.stl-tag-futuro{background:#F1F5F9;color:#64748B;}
.stl-barra{height:4px;background:#DDD6FE;border-radius:2px;overflow:hidden;margin-top:5px;}
.stl-barra-fill{height:100%;background:#7C3AED;border-radius:2px;}
.stl-seta{color:var(--ink-3);font-size:1.1rem;flex-shrink:0;align-self:center;}

/* Sheet detalhe (salto-det-*) */
.salto-det-status{border-radius:10px;padding:var(--s3);margin:var(--s2) 0 var(--s3);
  font-size:var(--t-sm);display:flex;flex-direction:column;gap:4px;}
.salto-det-tempestade{background:#EDE9FE;color:#5B21B6;}
.salto-det-passado{background:#DCFCE7;color:#166534;}
.salto-det-futuro{background:#F0F9FF;color:#0369A1;}

/* Botão link sutil — "Ver todos os saltos" na Home */
.btn-saltos-ver{display:block;width:100%;text-align:center;padding:8px;
  font-size:var(--t-cap);color:var(--violet);font-weight:600;background:transparent;
  border:none;cursor:pointer;border-radius:var(--r-card);}

/* =====================================================================
   Chat da família (2026-09-09)
   ===================================================================== */

/* Área que segura feed + input — ocupa o restante da tela após os chips */
/* Chat tela cheia — sem padding lateral do .screen */
.screen.chat-tela{padding-left:0;padding-right:0;gap:0;}

/* Cabeçalho do chat com botão voltar */
.chat-head{
  display:flex;align-items:center;gap:10px;
  padding:calc(var(--s3) + env(safe-area-inset-top,0px)) var(--gut) var(--s3);
  position:sticky;top:0;z-index:5;
  background:rgba(252,244,241,.96);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);}
.chat-head h1{flex:1;font-size:20px;font-weight:600;margin:0;}
.chat-back{
  font-size:28px;line-height:1;font-weight:300;color:var(--ink-2);
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;}

.chat-area{display:flex;flex-direction:column;padding:0;
  min-height:calc(100dvh - 80px);}

/* Feed de mensagens + eventos */
.chat-feed{flex:1;display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s3) var(--gut) 80px;}
.chat-empty{text-align:center;color:var(--ink-3);font-size:var(--t-sm);
  padding:var(--s6) 0;line-height:1.6;}

/* Cores de texto por bebê (usadas no evento) */
.n1-txt{color:var(--coral-deep);font-weight:600;}
.n2-txt{color:var(--violet);font-weight:600;}

/* Bolha de mensagem base */
.msg{display:flex;gap:8px;align-items:flex-end;max-width:100%;}

/* Mensagem minha — direita, fundo coral */
.msg.eu{flex-direction:row-reverse;}
.msg.eu .msg-bub{
  background:linear-gradient(135deg,var(--coral) 0%,var(--coral-deep) 100%);
  color:#fff;
  border-radius:18px 18px 4px 18px;
  box-shadow:var(--sh-coral);
}

/* Mensagem do outro — esquerda, glass */
.msg.eles .msg-bub{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(8px);
  color:var(--ink);
  border-radius:18px 18px 18px 4px;
  border:1.5px solid var(--line-2);
}

.msg-bub{padding:10px 14px;font-size:var(--t-base);line-height:1.45;
  word-break:break-word;max-width:76%;}

/* Nome do remetente (só no lado deles) */
.msg-nome{display:block;font-size:var(--t-cap);font-weight:600;
  color:var(--ink-2);margin-bottom:3px;}

/* Timestamp */
.msg-ts{font-size:10px;color:var(--ink-3);flex-shrink:0;margin-bottom:4px;}
.msg.eu .msg-ts{text-align:right;}

/* Body do lado deles (empilha nome + bolha + ts) */
.msg-body{display:flex;flex-direction:column;}

/* Avatar circulado do outro cuidador */
.msg-av{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--lilac) 0%,var(--violet) 100%);
  color:#fff;font-size:var(--t-sm);font-weight:700;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;align-self:flex-end;
}

/* Card de evento — centralizado, neutro */
.msg-evento{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(6px);
  border:1.5px solid var(--line-2);
  border-radius:14px;
  padding:10px 14px;
  font-size:var(--t-sm);
  align-self:center;
  max-width:90%;
}
.mev-emoji{font-size:1.3rem;flex-shrink:0;}
.mev-body{flex:1;min-width:0;line-height:1.35;}
.mev-ts{font-size:10px;color:var(--ink-3);flex-shrink:0;}

/* Barra de input fixa acima do #nav.
   O #nav fica em bottom:calc(20px + safe-area) com altura ~56px.
   Então a borda superior do #nav está em ~76px + safe-area do fundo.
   Usamos 80px como aproximação conservadora (funciona na maioria dos iPhones). */
.chat-input-bar{
  position:fixed;left:0;right:0;
  bottom:calc(80px + env(safe-area-inset-bottom, 0px));
  z-index:15;
  display:flex;align-items:flex-end;gap:8px;
  padding:8px 12px;
  background:rgba(252,244,241,.92);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}

/* Botão "+" */
.chat-mais{
  background:var(--coral);color:#fff;
  width:40px;height:40px;font-size:1.4rem;font-weight:300;line-height:1;
  border-radius:50%;flex-shrink:0;
}

/* Textarea expansível */
.chat-txt{
  flex:1;
  resize:none;overflow:hidden;
  border:1.5px solid var(--line-2);
  border-radius:20px;
  padding:10px 14px;
  font-family:var(--ui);font-size:var(--t-base);
  background:rgba(255,255,255,.85);
  color:var(--ink);
  line-height:1.4;
  min-height:40px;max-height:80px;
  outline:none;
  transition:border-color .15s;
}
.chat-txt:focus{border-color:var(--coral);}

/* Botão enviar */
.chat-send{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--coral);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .15s;
}
.chat-send:disabled{opacity:.35;pointer-events:none;}
.chat-send svg{width:18px;height:18px;}

/* Teclado aberto no chat: input-bar cola no fundo do viewport */
body.chat-teclado .chat-input-bar{bottom:0;}

/* Botão lua no header do chat → abre o Modo Madrugada */
.chat-noturno{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--violet);flex:none;}
.chat-noturno svg{width:20px;height:20px;}

/* ---------- Modo Madrugada (overlay tela cheia escura) ---------- */
/* Tema escuro escopado ao overlay — o resto do app é claro. Ergonomia de
   uma mão no escuro: alto contraste, alvos grandes (>=64px). */
.noturno{
  position:fixed;inset:0;z-index:9999;display:none;
  flex-direction:column;
  background:radial-gradient(120% 90% at 50% 0%,#1e1b2e 0%,#141220 55%,#0d0b14 100%);
  color:#EFEAF6;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 18px calc(env(safe-area-inset-bottom,0px) + 18px);
  -webkit-tap-highlight-color:transparent;
}
.not-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.not-titulo{font-size:15px;font-weight:600;letter-spacing:.02em;color:#C9BEE6;}
.not-fechar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#C9BEE6;background:rgba(255,255,255,.06);}
.not-fechar svg{width:20px;height:20px;}
.not-corpo{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;
  overflow-y:auto;}
.not-rodape{text-align:center;font-size:11.5px;color:#7C7392;margin-top:12px;line-height:1.5;}

/* Botão "Acordou" (estado inicial, por bebê) — enorme */
.not-acordou{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:120px;border-radius:26px;border:2px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);}
.not-acordou .not-nome{font-size:16px;font-weight:600;color:#C9BEE6;}
.not-acordou .not-cta{font-size:30px;font-weight:300;letter-spacing:-.01em;color:#fff;}
.not-acordou.n1{border-color:rgba(248,122,108,.55);}
.not-acordou.n2{border-color:rgba(176,143,212,.6);}
.not-acordou.n1 .not-cta{color:#FFB4A6;}
.not-acordou.n2 .not-cta{color:#D9C2F5;}
.not-acordou:active{background:rgba(255,255,255,.10);}

/* Card de episódio em curso */
.not-card{border-radius:26px;padding:16px 16px 18px;background:rgba(255,255,255,.06);
  border:2px solid rgba(255,255,255,.08);}
.not-card.ativo.n1{border-color:rgba(248,122,108,.5);}
.not-card.ativo.n2{border-color:rgba(176,143,212,.55);}
.not-cab{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;}
.not-cab .not-nome{font-size:17px;font-weight:600;color:#EFEAF6;}
.not-cron{font-size:34px;font-weight:200;letter-spacing:-.02em;color:#fff;
  font-variant-numeric:tabular-nums;}
.not-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.not-chip{min-height:52px;padding:0 18px;border-radius:999px;font-size:15px;font-weight:500;
  color:#D9D2EA;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.12);}
.not-chip.on{background:linear-gradient(140deg,var(--violet),var(--violet-2));color:#fff;
  border-color:transparent;box-shadow:0 8px 20px -10px rgba(142,95,209,.9);}
.not-chip:active{transform:scale(.97);}
.not-dormiu{width:100%;min-height:60px;border-radius:20px;font-size:17px;font-weight:600;
  color:#0d0b14;background:linear-gradient(140deg,#EBD9A8,#E6C98A);}
.not-dormiu:active{filter:brightness(.95);}

/* Oferta de iniciar sono após "Voltou a dormir" */
.not-card.oferta{text-align:center;}
.not-oferta-txt{font-size:15px;color:#C9BEE6;margin:4px 0 14px;line-height:1.5;}
.not-oferta-bts{display:flex;gap:10px;}
.not-sono{flex:1;min-height:56px;border-radius:18px;font-size:16px;font-weight:600;color:#fff;
  background:linear-gradient(140deg,var(--violet),var(--violet-2));}
.not-pular{flex:1;min-height:56px;border-radius:18px;font-size:15px;font-weight:500;
  color:#C9BEE6;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.12);}