/* Cores e fontes: ver 06 - Identidade visual.md */
:root {
  --bg: #FFFCF7;
  --ink: #3D5666;
  --ink-2: #4F6373;
  --ink-3: #6F8798;
  --blue: #D7EAF9;
  --baby: #DCEEF8;
  --sand: #EDE2D5;
  --line: #E3D5C5;
  --peach: #F5D9CC;
  --on-peach: #3D5666; /* texto sobre o pêssego */
  --on-peach-2: #4F6373;
  --blue-line: #BCD6EA;
  --off: #C9D6DF;
  --nap: #B87A5E;
  --night: #3D5666;
  --danger: #A4473A;
  --night-bg: #D7EAF9; /* fundo do Ritual e da Massagem */
  --moon: #F2C2A6; /* lua da ilustração */
  --star: #E3B59A;
  --on-danger: #FFFFFF;
  --tabbar: 72px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

/* Modo escuro: escolhido pela mãe (data-theme="dark") ou automático, seguindo o celular */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141C22; --ink: #E6EDF2; --ink-2: #AFC0CB; --ink-3: #7F929E;
    --blue: #2B4558; --baby: #1E3141; --sand: #222C33; --line: #34424C; --peach: #E8D0C1; --on-peach: #2E2723; --on-peach-2: #5B4A40;
    --blue-line: #33495A; --off: #4A5A65; --nap: #C98E70; --night: #8FB3CF; --danger: #E08A7C;
    --night-bg: #0F161B; --on-danger: #141C22; --moon: #F1D3B3; --star: #C9B39C;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141C22; --ink: #E6EDF2; --ink-2: #AFC0CB; --ink-3: #7F929E;
  --blue: #2B4558; --baby: #1E3141; --sand: #222C33; --line: #34424C; --peach: #E8D0C1; --on-peach: #2E2723; --on-peach-2: #5B4A40;
  --blue-line: #33495A; --off: #4A5A65; --nap: #C98E70; --night: #8FB3CF; --danger: #E08A7C;
  --night-bg: #0F161B; --on-danger: #141C22; --moon: #F1D3B3; --star: #C9B39C;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
h1, h2, h3 { font-family: Outfit, system-ui, sans-serif; font-weight: 500; margin: 0; line-height: 1.2; }
h1 { font-size: 24px; letter-spacing: -.01em; }
h2 { font-size: 16px; }
h3 { font-size: 15px; }
p { margin: 0; }
a { color: var(--ink); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.screen { min-height: 100vh; min-height: 100dvh; }
.screen-ritual, .screen-massagem { background: var(--night-bg); }
body:has(.screen-ritual), body:has(.screen-massagem) { background: var(--night-bg); }
.page { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; padding: calc(env(safe-area-inset-top, 0px) + 28px) 22px 28px; display: flex; flex-direction: column; gap: 20px; }
.page.with-tabs { padding-bottom: calc(var(--tabbar) + var(--safe-b) + 24px); }

.stack { display: flex; flex-direction: column; gap: 18px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.intro { display: flex; flex-direction: column; gap: 8px; }
.lead { font-size: 15px; color: var(--ink-2); }
.body { font-size: 15px; }
.small { font-size: 13px; color: var(--ink-2); }
.center { text-align: center; }
.kicker { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.error { color: var(--danger); font-weight: 600; font-size: 13px; }
.note { padding: 10px 14px; border-radius: 12px; background: var(--sand); font-size: 13px; color: var(--ink-2); }
.tip { font-size: 14px; color: var(--ink-2); }
.foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grid2, .grid3, .grid4 { display: grid; gap: 8px; }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.list { display: flex; flex-direction: column; gap: 8px; }
.link { font-weight: 600; font-size: 14px; }

/* Campos */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
input[type=text], input[type=email], input[type=date], input[type=time] {
  width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg); font-size: 16px; -webkit-appearance: none; appearance: none;
}
input::placeholder { color: var(--ink-3); }
input.input-time { width: 120px; flex-shrink: 0; } /* "input." para ganhar da largura 100% dos campos */
input.input-time-big { min-height: 52px; font-family: Outfit, sans-serif; font-size: 22px; font-weight: 500; text-align: center; }

/* Escolhas */
.choice {
  min-height: 42px; padding: 6px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: transparent; font-weight: 500; font-size: 14px;
}
.choice.on { background: var(--baby); border-color: var(--ink-3); font-weight: 600; }
.screen-ritual .choice, .screen-massagem .choice { background: transparent; border-color: var(--blue-line); }
.screen-ritual .choice.on, .screen-massagem .choice.on { background: var(--peach); border-color: var(--ink); }

/* Botões */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border-radius: 14px; border: none; background: var(--blue); color: var(--ink);
  font-family: Outfit, sans-serif; font-size: 15px; font-weight: 500; text-decoration: none; text-align: center;
}
.btn.sm { min-height: 38px; font-size: 14px; padding: 0 16px; border-radius: 12px; flex-shrink: 0; }
.btn.big { min-height: 50px; font-size: 15px; }
.btn.peach { background: var(--peach); }
.btn.soft { background: var(--baby); }
.btn.muted { background: var(--sand); color: var(--ink-3); }
.btn.ghost { background: transparent; border: 1px solid var(--line); font-size: 14px; min-height: 44px; }
.btn.dashed { background: transparent; border: 1px dashed var(--off); font-family: 'Nunito Sans', sans-serif; font-size: 14px; font-weight: 600; min-height: 44px; }
.btn.danger { background: transparent; border: 1px solid var(--line); color: var(--danger); font-size: 14px; min-height: 44px; }
.btn.danger.armed { background: var(--danger); color: var(--on-danger); border-color: var(--danger); }
.icon-btn {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 20px; border: 1px solid var(--line); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink);
}
.icon-btn:disabled { opacity: .35; }
.screen-ritual .icon-btn, .screen-massagem .icon-btn { background: var(--bg); }

/* Interruptor */
.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 0 14px;
  border-radius: 12px; border: 1px solid var(--line); background: transparent; font-weight: 500; font-size: 14px; text-align: left;
}
.switch { flex-shrink: 0; width: 40px; height: 24px; border-radius: 12px; background: var(--off); display: flex; align-items: center; padding: 0 3px; }
.switch span { width: 18px; height: 18px; border-radius: 9px; background: var(--bg); border: 1px solid var(--off); }
.switch.on { background: var(--ink-2); justify-content: flex-end; }

/* Boas-vindas */
.steps { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.dots { flex-grow: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.dot { height: 4px; border-radius: 2px; background: var(--line); }
.dot.on { background: var(--ink); }
.ready { padding-top: 16px; }
.badge-moon { width: 60px; height: 60px; border-radius: 30px; background: var(--peach); display: flex; align-items: center; justify-content: center; }
.badge-moon svg { width: 28px; height: 28px; }
.summary { margin: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); font-size: 14px; }
.summary div { display: flex; justify-content: space-between; gap: 12px; }
.summary dt { color: var(--ink-2); }
.summary dd { margin: 0; font-weight: 600; text-align: right; }
.baby-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 18px; background: var(--baby); font-size: 13px; font-weight: 600; }
.avatar { width: 40px; height: 40px; border-radius: 20px; background: var(--peach); display: flex; align-items: center; justify-content: center; font-family: Outfit, sans-serif; font-weight: 500; font-size: 16px; text-decoration: none; flex-shrink: 0; }
.avatar.sm { width: 26px; height: 26px; font-size: 13px; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.theme-btn { background: var(--sand); }

/* Seletor de idioma */
.grow { flex-grow: 1; }
.lang {
  position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px;
  border-radius: 20px; border: 1.5px solid var(--line); background: var(--bg); flex-shrink: 0;
}
.lang select {
  border: none; background: transparent; font-size: 14px; font-weight: 700; color: var(--ink);
  max-width: 96px; padding: 0; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.lang:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.lang select:focus-visible { outline: none; }

/* Hoje */
.hello { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hello > div:first-child { min-width: 0; }
.hello-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.h-hello { font-size: 22px; }
.banner { display: block; padding: 10px 14px; border-radius: 12px; background: var(--peach); font-weight: 600; font-size: 13px; text-decoration: none; }
.strip { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--baby); text-decoration: none; }
.strip strong { font-family: Outfit, sans-serif; font-weight: 500; font-size: 16px; }
.strip-go { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-weight: 600; font-size: 13px; }

/* Texto da semana */
.reading { display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.6; }
.action-box { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 18px; background: var(--peach); }
.action-box p { font-family: Outfit, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.4; }
.card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.line { position: relative; height: 30px; border-radius: 8px; background: var(--baby); }
.seg { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; }
.seg.noite { background: var(--night); }
.seg.soneca { background: var(--nap); }
.seg.open { opacity: .7; }
.seg.next { border: 2px dashed var(--nap); }
.now { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); }
.ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); }
.bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; height: 124px; border-bottom: 1px solid var(--line); }
.bar { height: 100%; padding: 0; border: none; background: transparent; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; opacity: .55; }
.bar.on { opacity: 1; }
.bar span { width: 70%; display: block; }
.bar .nap { background: var(--nap); border-radius: 4px 4px 0 0; }
.bar .night { background: var(--night); }
.bar .nap + .night { border-radius: 0; }
.bar .night:first-child { border-radius: 4px 4px 0 0; }
.bar-names { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; text-align: center; font-size: 12px; color: var(--ink-2); }
.bar-names .on { font-weight: 700; color: var(--ink); }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--ink-2); }
.legend span { display: flex; align-items: center; gap: 6px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw.night { background: var(--night); }
.sw.nap { background: var(--nap); }
.ritual-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); }
.ritual-card > div { display: flex; flex-direction: column; gap: 2px; }
.ritual-card strong { font-family: Outfit, sans-serif; font-weight: 500; }

/* Diário */
.daynav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status { background: var(--baby); border-color: var(--blue-line); }
.status-text { font-family: Outfit, sans-serif; font-size: 18px; font-weight: 500; }
.entries { display: flex; flex-direction: column; }
.entry { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.entry-main { flex-grow: 1; display: flex; flex-direction: column; }
.entry-main span { font-size: 14px; color: var(--ink-2); }
.dur { font-weight: 600; font-size: 14px; }
.dot-kind { width: 10px; height: 10px; border-radius: 5px; flex-shrink: 0; }
.dot-kind.noite { background: var(--night); }
.dot-kind.soneca { background: var(--nap); }
.editor { display: flex; flex-direction: column; gap: 10px; padding: 14px; margin: 8px 0; border-radius: 16px; background: var(--sand); }
.editor input[type=time] { background: var(--bg); }
.editor .choice { background: var(--bg); }
.editor .choice.on { background: var(--blue); }

/* Ritual */
.progress-wrap { display: flex; flex-direction: column; gap: 8px; }
.progress { height: 8px; border-radius: 4px; background: var(--blue-line); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: 4px; background: var(--ink-2); }
.steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.step { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: var(--bg); border: 1px solid var(--blue-line); }
.step.warm { border-color: var(--peach); }
.step-row { display: flex; gap: 14px; align-items: center; }
.step-row > div { display: flex; flex-direction: column; gap: 2px; }
.step-row strong { font-family: Outfit, sans-serif; font-weight: 500; font-size: 16px; }
.tick { flex-shrink: 0; width: 38px; height: 38px; border-radius: 19px; border: 1.5px solid var(--ink-3); background: transparent; color: transparent; display: flex; align-items: center; justify-content: center; }
.tick.on { border-color: var(--ink-2); background: var(--peach); color: var(--ink); }

/* Massagem: um passo por vez, letra grande para ler com o bebê na frente */
.mstep { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 20px; background: var(--bg); }
.mstep-title { font-size: 21px; }
.mstep-text { font-family: Lora, Georgia, serif; font-size: 20px; line-height: 1.55; }
.screen-massagem .btn.ghost { background: var(--bg); border-color: var(--blue-line); }
.btn:disabled { opacity: .4; }
.parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.part { width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1px solid var(--blue-line); background: transparent; text-align: left; }
.part > span:last-child { display: flex; flex-direction: column; }
.part.on { background: var(--bg); border-color: var(--ink); }
.part:disabled { color: inherit; }
.part-at { font-weight: 600; font-size: 14px; min-width: 40px; }

/* Leitura */
.story { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; border-radius: 20px; background: var(--baby); }
.story-title { font-size: 20px; }
.story-text { font-family: Lora, Georgia, serif; font-size: 20px; line-height: 1.6; }

/* Próxima trilha */
.offer h2 { font-size: 21px; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.checks li { display: flex; gap: 8px; align-items: flex-start; }
.checks svg { flex-shrink: 0; margin-top: 2px; }
.price { font-family: Outfit, sans-serif; font-size: 22px; }

/* Rodapé */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; height: calc(var(--tabbar) + var(--safe-b)); padding: 8px 8px var(--safe-b);
  display: flex; justify-content: space-around; align-items: flex-start; background: var(--bg); border-top: 1px solid var(--line);
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; min-height: 44px; text-decoration: none; color: var(--ink-3); font-size: 11px; font-weight: 500; }
.tab.on { color: var(--ink); font-weight: 600; }
.screen-ritual .tabbar { border-top-color: var(--blue-line); }

@media (prefers-reduced-motion: no-preference) {
  .btn, .choice, .tick, .bar { transition: background-color .15s, opacity .15s; }
}

/* Login e boas-vindas: ilustração da noite */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero { display: flex; justify-content: center; padding: 28px 12px 10px; border-radius: 28px; background: linear-gradient(180deg, var(--baby), var(--bg)); }
.hero .sky { width: 100%; max-width: 320px; height: auto; display: block; }
.hero.sm { padding: 16px 12px 4px; border-radius: 24px; }
.hero.sm .sky { max-width: 210px; }
.twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .twinkle { animation: none; } }

.login { gap: 26px; padding-top: calc(env(safe-area-inset-top, 0px) + 20px); }
.login h1 { font-size: 26px; text-wrap: balance; }
.login .intro { gap: 10px; }
.login form { gap: 14px; }
.input-icon { position: relative; }
.input-icon > svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.input-icon input { padding-left: 46px; min-height: 48px; }
input[aria-invalid="true"] { border-color: var(--danger); }
.btn svg { flex-shrink: 0; }
.btn:disabled { opacity: .75; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--blue-line); border-top-color: var(--ink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }
.secure { margin: auto auto 0; max-width: 300px; display: flex; align-items: flex-start; gap: 8px; text-wrap: balance; }
.secure svg { flex-shrink: 0; margin-top: 2px; }

/* Superfícies pêssego: texto próprio (no escuro o pêssego é um nude claro, então o texto fica escuro) */
.btn.peach, .badge-moon, .avatar, .banner, .action-box, .tick.on,
.screen-ritual .choice.on, .screen-massagem .choice.on {
  --ink: var(--on-peach); --ink-2: var(--on-peach-2); color: var(--ink);
}

/* Lista de opções (idioma, aparência, o que mais pesa): linhas finas com ✓ discreto */
.options { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 10px 16px;
  border: none; border-bottom: 1px solid var(--line); background: transparent; font-size: 15px; text-align: left;
}
.option:last-child { border-bottom: none; }
.option svg { flex-shrink: 0; color: var(--ink); }
.option.on { font-weight: 600; background: color-mix(in srgb, var(--baby) 55%, transparent); }
.section-label { font-family: 'Nunito Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-left: 4px; }

/* Modo escuro: tudo o que é tocável e está em destaque fica nude claro, com texto escuro (pedido da Camys) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn:not(.ghost):not(.danger):not(.dashed):not(.muted),
  :root:not([data-theme="light"]) .option.on,
  :root:not([data-theme="light"]) .choice.on,
  :root:not([data-theme="light"]) .switch.on {
    background: var(--peach); border-color: var(--peach);
    --ink: var(--on-peach); --ink-2: var(--on-peach-2); color: var(--ink);
  }
  :root:not([data-theme="light"]) .switch.on span { border-color: var(--peach); }
}
:root[data-theme="dark"] .btn:not(.ghost):not(.danger):not(.dashed):not(.muted),
:root[data-theme="dark"] .option.on,
:root[data-theme="dark"] .choice.on,
:root[data-theme="dark"] .switch.on {
  background: var(--peach); border-color: var(--peach);
  --ink: var(--on-peach); --ink-2: var(--on-peach-2); color: var(--ink);
}
:root[data-theme="dark"] .switch.on span { border-color: var(--peach); }

/* Preferências: sair da conta, pequeno e discreto no fim da tela */
.logout { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.logout .btn { min-width: 140px; }