:root {
  --bg: #fff8f0; --card: #ffffff; --ink: #2b2a33; --muted: #6f6b78; --line: #ece4da;
  --pai: #2f7de1; --pai-t: #e4efff; --pai-d: #1d5bb0;
  --mae: #e0457f; --mae-t: #fde5ee; --mae-d: #a92a5a;
  --ok: #1fa463; --alerta: #f2a20c; --fim: #d93636; --sol: #ffc53d;
  --r: 18px; --sombra: 0 4px 16px rgba(60, 40, 20, .08);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Nunito', system-ui, sans-serif; background: var(--bg); color: var(--ink); -webkit-tap-highlight-color: transparent; }
#app { max-width: 560px; margin: 0 auto; padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }
body.modo-kid #app { max-width: none; padding: 0; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
h2 { font-size: 1.35rem; font-weight: 900; }
h3 { font-size: 1rem; font-weight: 800; margin: 22px 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
p { margin: 8px 0; }
.carregando { text-align: center; padding: 40vh 0; color: var(--muted); }
.muted, .vazio { color: var(--muted); font-size: .92rem; }
.t-pai { color: var(--pai-d); } .t-mae { color: var(--mae-d); }

/* topo */
.top { display: flex; align-items: center; justify-content: space-between; padding: calc(18px + env(safe-area-inset-top)) 0 10px; }
.kicker { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.top h1 { font-size: 1.7rem; font-weight: 900; }
.chip { padding: 6px 12px; border-radius: 99px; font-weight: 800; font-size: .9rem; }
.chip.pai { background: var(--pai-t); color: var(--pai-d); } .chip.mae { background: var(--mae-t); color: var(--mae-d); }
.demo { background: #fff3c4; border: 1px dashed #e0b400; border-radius: 12px; padding: 8px 12px; font-size: .85rem; margin-bottom: 8px; }

/* botões */
.btn { appearance: none; border: 0; border-radius: 14px; padding: 12px 18px; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer;
  background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; min-height: 46px; }
.btn.sec { background: var(--card); color: var(--ink); border: 2px solid var(--line); }
.btn.ok { background: var(--ok); color: #fff; } .btn.perigo { background: var(--fim); color: #fff; }
.btn.sec.perigo { background: var(--card); color: var(--fim); border-color: #f3c9c9; }
.btn.sm { padding: 6px 12px; min-height: 36px; font-size: .88rem; border-radius: 11px; }
.btn:disabled { opacity: .45; cursor: default; }
.btn:active:not(:disabled) { transform: scale(.97); }
.link { background: none; border: 0; color: var(--pai-d); font: inherit; font-weight: 700; cursor: pointer; padding: 4px 0; }
.link.perigo { color: var(--fim); }
.row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.row > .btn { flex: 1 1 140px; }
.row.sm { margin-top: 8px; gap: 6px; } .row.sm > .btn { flex: 0 0 auto; }
.row.inline input { flex: 0 0 90px; }
.kid-btn { width: 100%; margin-top: 18px; background: linear-gradient(135deg, var(--sol), #ff8a3d); color: #3a2200; font-size: 1.1rem; min-height: 56px; }

/* hero */
.hero { display: flex; gap: 14px; align-items: center; border-radius: var(--r); padding: 18px; margin-top: 8px; color: #fff; box-shadow: var(--sombra); }
.hero.pai { background: linear-gradient(135deg, var(--pai), var(--pai-d)); } .hero.mae { background: linear-gradient(135deg, var(--mae), var(--mae-d)); }
.hero-emoji { font-size: 2.6rem; line-height: 1; white-space: nowrap; }
.hero-k { font-size: .82rem; font-weight: 700; opacity: .85; text-transform: uppercase; letter-spacing: .05em; }
.hero h2 { font-size: 1.35rem; margin: 2px 0 4px; }
.origem { font-size: .88rem; opacity: .92; }
.hero.sm { padding: 12px 14px; margin: 10px 0; } .hero.sm .hero-emoji { font-size: 1.8rem; }
.amanha { margin: 10px 2px 0; font-weight: 600; }

/* pendências */
.pend { background: #fff3d6; border: 2px solid var(--sol); border-radius: var(--r); padding: 14px; margin: 10px 0; }
.aviso { background: #fff3d6; border-radius: 12px; padding: 8px 12px; font-size: .9rem; }

/* semana */
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sd { border: 0; border-radius: 14px; padding: 8px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; cursor: pointer; min-height: 92px; }
.sd small { font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.sd b { font-size: 1.05rem; } .sd span { font-size: 1.3rem; } .sd i { font-style: normal; font-size: .7rem; min-height: 1em; }
.sd.pai { background: var(--pai-t); color: var(--pai-d); } .sd.mae { background: var(--mae-t); color: var(--mae-d); }
.sd.acordo { outline: 2px dashed currentColor; outline-offset: -3px; }

/* listas */
.lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ev { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 14px; padding: 12px; box-shadow: var(--sombra); cursor: pointer; }
.ev.col { flex-direction: column; align-items: stretch; cursor: default; }
.ev-l { display: flex; gap: 12px; }
.ev-i { font-size: 1.6rem; width: 2rem; text-align: center; flex: none; }
.ev b { display: block; } .ev small { display: block; color: var(--muted); font-size: .84rem; }
.ev .quando { margin-left: auto; font-size: .8rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
.nota { background: var(--bg); border-radius: 8px; padding: 6px 8px; font-size: .88rem; margin: 6px 0; }
.ac { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--card); border-radius: 14px; padding: 12px 14px; border-left: 6px solid; box-shadow: var(--sombra); }
.ac.pai { border-color: var(--pai); } .ac.mae { border-color: var(--mae); }
.ac small { color: var(--muted); display: block; font-size: .84rem; } .st { font-size: .82rem; font-weight: 800; white-space: nowrap; }
.lista.mini li { font-size: .9rem; padding: 4px 0; }

/* calendário */
.mes-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; }
.dh { text-align: center; font-size: .75rem; font-weight: 800; color: var(--muted); padding: 4px 0; }
.dia { border: 0; border-radius: 10px; aspect-ratio: 1 / 1.15; padding: 4px 2px; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden; }
.dia.pai { background: var(--pai-t); color: var(--pai-d); } .dia.mae { background: var(--mae-t); color: var(--mae-d); }
.dia .n { font-weight: 800; font-size: .9rem; } .dia .e { font-size: 1rem; line-height: 1; } .dia .dots { font-size: .6rem; min-height: .8rem; letter-spacing: -1px; }
.dia.fora { opacity: .35; } .dia.hoje { box-shadow: inset 0 0 0 3px var(--ink); }
.dia.acordo { outline: 2px dashed currentColor; outline-offset: -3px; }
.legenda { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.lg { padding: 5px 10px; border-radius: 99px; font-size: .85rem; font-weight: 700; }
.lg.pai { background: var(--pai-t); color: var(--pai-d); } .lg.mae { background: var(--mae-t); color: var(--mae-d); }

/* tela */
.tela-box { display: flex; align-items: center; gap: 18px; background: var(--card); border-radius: var(--r); padding: 16px; box-shadow: var(--sombra); margin-top: 10px; }
.tela-box > div:first-child { flex: 0 0 132px; }
.ring { width: 100%; display: block; }
.ring .trilho { fill: none; stroke: var(--line); stroke-width: 12; }
.ring .valor { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .6s; }
.ring .rt { text-anchor: middle; font-weight: 900; font-size: 26px; fill: var(--ink); font-family: Nunito, sans-serif; }
.ring .rs { text-anchor: middle; font-weight: 700; font-size: 10px; fill: var(--muted); font-family: Nunito, sans-serif; }
.barras { position: relative; display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; height: 150px; align-items: end; padding-bottom: 18px; }
.barras::after { content: ''; position: absolute; left: 0; right: 0; border-top: 2px dashed var(--fim); opacity: .5; pointer-events: none;
  bottom: calc(18px + (100% - 18px) * var(--lim-n, 0)); }
.bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.bar .b { width: 100%; border-radius: 6px 6px 2px 2px; min-height: 2px; }
.bar .b.pai { background: var(--pai); } .bar .b.mae { background: var(--mae); }
.bar .b.passou { box-shadow: inset 0 3px 0 var(--fim); }
.bar small { position: absolute; bottom: -18px; font-size: .68rem; color: var(--muted); }
.dica { background: var(--card); border-radius: 14px; padding: 12px; font-size: .9rem; border: 2px dashed var(--line); }

/* formulários */
.card { background: var(--card); border-radius: var(--r); padding: 16px; box-shadow: var(--sombra); margin-top: 12px; }
.card h3 { margin-top: 0; }
form { display: flex; flex-direction: column; gap: 12px; }
form.row { flex-direction: row; }
label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: .9rem; }
input, select, textarea { font: inherit; font-weight: 600; padding: 11px 12px; border-radius: 12px; border: 2px solid var(--line); background: #fff; color: var(--ink); width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pai); }
label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; } label.check input { width: auto; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* navegação */
.tabs { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 5; }
.tabs button { flex: 1; max-width: 112px; border: 0; background: none; font: inherit; font-size: .72rem; font-weight: 700; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; cursor: pointer; position: relative; border-radius: 12px; }
.tabs .ti { font-size: 1.35rem; filter: grayscale(1); opacity: .7; }
.tabs button.on { color: var(--ink); background: var(--bg); } .tabs button.on .ti { filter: none; opacity: 1; }
.badge { position: absolute; top: 2px; right: 22%; background: var(--fim); color: #fff; font-size: .68rem; border-radius: 99px; padding: 1px 6px; }

/* modal */
dialog { border: 0; border-radius: 22px; padding: 22px 18px 18px; width: min(520px, calc(100vw - 24px)); max-height: 88vh; overflow: auto; background: var(--bg); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(30, 20, 10, .45); }
dialog h2 { padding-right: 36px; }
.x { position: absolute; top: 12px; right: 12px; border: 0; background: var(--card); width: 36px; height: 36px; border-radius: 50%; font-size: 1rem; cursor: pointer; }

#toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 16px;
  border-radius: 14px; font-weight: 700; font-size: .92rem; opacity: 0; pointer-events: none; transition: .25s; z-index: 50; max-width: calc(100vw - 32px); text-align: center; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

.login { text-align: center; padding-top: 12vh; } .login h1 { font-weight: 900; margin: 10px 0 16px; } .login form { text-align: left; }

/* ===== Entrada ===== */
.login { text-align: center; padding-top: calc(8vh + env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.login > .link { align-self: flex-start; }
.login h1 { font-weight: 900; font-size: 1.8rem; }
.login-logo { font-size: 3.4rem; animation: pula 2.4s ease-in-out infinite; }
.login .card { text-align: left; }
.perfis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.perfil { border: 0; border-radius: 22px; padding: 18px 6px; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: var(--sombra); transition: transform .15s; }
.perfil:active { transform: scale(.95); }
.perfil span { font-size: 2.8rem; } .perfil b { font-size: 1.05rem; } .perfil small { font-size: .74rem; font-weight: 700; opacity: .75; }
.perfil.pai { background: var(--pai-t); color: var(--pai-d); } .perfil.mae { background: var(--mae-t); color: var(--mae-d); }
.perfil.filho { background: linear-gradient(135deg, #fff1b8, #ffd59e); color: #7a4a00; }
.login-av { font-size: 4rem; width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; animation: pula 2.4s ease-in-out infinite; }
.login-av.pai { background: var(--pai-t); } .login-av.mae { background: var(--mae-t); } .login-av.filho { background: #ffe9a8; }
.bichos-tit { font-weight: 800; text-align: center; font-size: 1.05rem; }
.slots { display: flex; justify-content: center; gap: 10px; margin: 10px 0 14px; }
.slots span { width: 56px; height: 56px; border-radius: 16px; border: 3px dashed var(--line); display: grid; place-items: center; font-size: 2rem; }
.slots span.cheio { border-style: solid; border-color: var(--sol); background: #fff6d6; animation: surge .3s ease-out; }
.bichos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bichos button { font-size: 2.6rem; border: 0; border-radius: 20px; background: var(--bg); padding: 12px 0; cursor: pointer; box-shadow: 0 4px 0 #e8dccd; transition: transform .1s; }
.bichos button:active { transform: translateY(3px) scale(.95); box-shadow: 0 1px 0 #e8dccd; }
#bichos { text-align: center; }
.treme { animation: treme .4s; }
.codigo-grande { font-size: 2.6rem; font-weight: 900; letter-spacing: .2em; text-align: center; background: #fff6d6; border-radius: 16px; padding: 14px; }
@keyframes surge { from { transform: scale(.3); } to { transform: scale(1); } }
@keyframes treme { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-10px); } 40%,80% { transform: translateX(10px); } }

/* ===== Tela do Augusto: joguinho ===== */
.kid { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; padding: calc(14px + env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px; align-items: center; }
.kid.ceu-dia { background: linear-gradient(180deg, #8fd3ff 0%, #c9ecff 45%, #fff6e0 100%); }
.kid.ceu-tarde { background: linear-gradient(180deg, #ff9f6b 0%, #ffd29a 45%, #fff2df 100%); }
.kid.ceu-noite { background: linear-gradient(180deg, #1b2350 0%, #3b3f8f 50%, #6c5fb0 100%); }
.kid > section, .kid-top { width: 100%; max-width: 620px; position: relative; z-index: 1; }
.ceu { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.astro { position: absolute; top: 56px; right: 18px; font-size: 3.4rem; animation: gira 30s linear infinite; }
.nuvem { position: absolute; font-size: 3.4rem; opacity: .85; animation: nuvem linear infinite; }
.n1 { top: 70px; animation-duration: 38s; } .n2 { top: 230px; font-size: 2.4rem; animation-duration: 52s; animation-delay: -20s; } .n3 { top: 470px; animation-duration: 45s; animation-delay: -34s; }
.ceu-noite .nuvem { opacity: .25; }
.pisca { position: absolute; color: #fff7c2; font-style: normal; font-size: 14px; animation: pisca 2s ease-in-out infinite; }
@keyframes nuvem { from { transform: translateX(-120px); left: 0; } to { transform: translateX(110vw); left: 0; } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes pisca { 50% { opacity: .2; transform: scale(.6); } }
@keyframes pula { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.kid-top { display: flex; justify-content: space-between; align-items: center; }
.ola { font-weight: 900; font-size: 1.3rem; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.placar { background: #fff; border-radius: 99px; padding: 6px 14px; font-weight: 900; color: #7a4a00; box-shadow: 0 4px 0 rgba(0,0,0,.12); }

.kid-hoje { text-align: center; border-radius: 30px; padding: 18px 16px 16px; color: #fff; cursor: pointer; border: 4px solid rgba(255,255,255,.6);
  box-shadow: 0 8px 0 rgba(0,0,0,.15); animation: entra .6s cubic-bezier(.2,1.6,.4,1) both; }
.kid.pai .kid-hoje { background: linear-gradient(135deg, #4b97f2, var(--pai-d)); } .kid.mae .kid-hoje { background: linear-gradient(135deg, #f0679b, var(--mae-d)); }
.palco { display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: 120px; }
.casa-g { font-size: 6rem; line-height: 1; animation: respira 3s ease-in-out infinite; }
.pessoa { font-size: 3.4rem; line-height: 1; animation: acena 1.6s ease-in-out infinite; transform-origin: bottom center; }
.eu-kid { font-size: 2.8rem; line-height: 1; animation: pula 1.2s ease-in-out infinite; }
.kid-hoje h1 { font-size: clamp(1.4rem, 6vw, 2.1rem); font-weight: 900; margin-top: 10px; text-shadow: 0 3px 0 rgba(0,0,0,.15); }
.kid-hoje h1 span { display: inline-block; background: #fff; color: var(--ink); padding: 2px 14px; border-radius: 14px; margin-top: 6px; transform: rotate(-2deg); }
.kid.pai .kid-hoje h1 span { color: var(--pai-d); } .kid.mae .kid-hoje h1 span { color: var(--mae-d); }
.kid-am { font-size: 1.05rem; font-weight: 800; opacity: .95; margin: 10px 0 2px; }
.toque { font-weight: 800; opacity: .8; animation: pisca 2.4s ease-in-out infinite; display: inline-block; }
@keyframes entra { from { transform: scale(.6) translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes respira { 50% { transform: scale(1.06); } }
@keyframes acena { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

.painel { background: #fff; border-radius: 26px; padding: 14px 16px; box-shadow: 0 6px 0 rgba(0,0,0,.1); animation: entra .6s cubic-bezier(.2,1.6,.4,1) both; }
.painel:nth-of-type(3) { animation-delay: .1s; } .painel:nth-of-type(4) { animation-delay: .2s; } .painel:nth-of-type(5) { animation-delay: .3s; } .painel:nth-of-type(6) { animation-delay: .4s; }
.painel h2 { font-size: 1.15rem; font-weight: 900; margin-bottom: 10px; text-align: center; }
.trilha { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 4px 0; }
.trilha::before { content: ''; position: absolute; left: 7%; right: 7%; top: 30px; border-top: 4px dotted #e3d6c4; }
.fase { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.fase:nth-child(even) { transform: translateY(14px); }
.fase { min-width: 0; }
.fase .bola { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; border: 3px solid #fff; box-shadow: 0 4px 0 rgba(0,0,0,.12);
  animation: entra .5s cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(var(--i) * .07s + .2s); }
.fase.pai .bola { background: var(--pai-t); } .fase.mae .bola { background: var(--mae-t); }
.fase.atual .bola { width: 48px; height: 48px; font-size: 1.7rem; background: var(--sol); animation: pula 1s ease-in-out infinite; }
.fase small { font-weight: 900; font-size: .7rem; text-transform: uppercase; color: var(--muted); }
.fase.pai small { color: var(--pai-d); } .fase.mae small { color: var(--mae-d); }
.trilha-box { padding-bottom: 26px; }

.kid-card { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.k-ic { font-size: 2.8rem; flex: none; }
.kid-card b { font-size: 1.3rem; display: block; font-weight: 900; } .kid-card small { font-size: .9rem; font-weight: 700; color: var(--muted); display: block; }
.kid-card small.tag { text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; color: #c27a00; }
.grow { flex: 1; }
.barra { height: 14px; background: #f1e8dc; border-radius: 99px; overflow: hidden; margin-top: 6px; }
.barra i { display: block; height: 100%; background: linear-gradient(90deg, #ffb020, #ff6f91); border-radius: 99px; }
.baloes { font-size: 2.2rem; animation: flutua 3s ease-in-out infinite; }
.balanca { animation: acena 2.2s ease-in-out infinite; display: inline-block; }
.gira { animation: gira 6s linear infinite; display: inline-block; }
.fila-estrelas { letter-spacing: 2px; }
@keyframes flutua { 50% { transform: translateY(-14px) rotate(6deg); } }
.pulou { animation: boing .45s cubic-bezier(.2,1.8,.4,1) !important; }
@keyframes boing { 0% { transform: scale(1); } 40% { transform: scale(1.12) rotate(-2deg); } 100% { transform: scale(1); } }

.kid-tela { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.foguete-area { position: relative; height: 110px; display: flex; flex-direction: column; align-items: center; }
.foguete { font-size: 4.4rem; transform: rotate(-45deg); transition: transform .3s; }
.chama { font-size: 1.8rem; margin-top: -18px; opacity: 0; transform: rotate(180deg); }
.voando .foguete { animation: treme-foguete .25s linear infinite; }
.voando .chama { opacity: 1; animation: chama .2s ease-in-out infinite alternate; }
@keyframes treme-foguete { 0%,100% { transform: rotate(-45deg) translate(0,0); } 50% { transform: rotate(-45deg) translate(1px,-2px); } }
@keyframes chama { from { transform: rotate(180deg) scale(.8); } to { transform: rotate(180deg) scale(1.2); } }
.bateria { position: relative; width: 100%; max-width: 320px; height: 46px; border-radius: 16px; border: 4px solid var(--ink); background: #f3eee6; overflow: hidden; }
.bateria::after { content: ''; position: absolute; right: -12px; top: 10px; width: 8px; height: 18px; background: var(--ink); border-radius: 0 4px 4px 0; }
.bateria i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #2ecc71, #7be495); transition: width .6s; }
.bateria.baixo i { background: linear-gradient(90deg, #ff7a45, #ffb020); animation: pisca 1s ease-in-out infinite; }
.bateria b { position: relative; z-index: 1; display: grid; place-items: center; height: 100%; font-size: 1.4rem; font-weight: 900; }
.lua-fim { font-size: 4.4rem; animation: flutua 3s ease-in-out infinite; text-align: center; }
.fim-txt { text-align: center; font-weight: 900; font-size: 1.2rem; }
.btn.big { font-size: 1.4rem; min-height: 64px; padding: 14px 30px; border-radius: 22px; width: 100%; max-width: 320px; box-shadow: 0 6px 0 rgba(0,0,0,.2); }
.btn.big:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.btn.big.ok { background: linear-gradient(135deg, #2ecc71, #1fa463); }

.kid-sair { position: relative; z-index: 1; margin-top: auto; border: 0; background: rgba(255,255,255,.6); color: var(--muted); font: inherit; font-weight: 700; font-size: .8rem; padding: 8px 14px; border-radius: 99px; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
.kid-sair.segurando::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.15); transform-origin: left; animation: enche 1.5s linear forwards; }
@keyframes enche { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.conf { position: fixed; pointer-events: none; font-size: 26px; z-index: 60; animation: voa 1.2s cubic-bezier(.2,.8,.4,1) forwards; }
@keyframes voa { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.6); opacity: 0; } }
body.modo-kid #toast { font-size: 1.3rem; padding: 14px 22px; border-radius: 22px; bottom: 30px; background: #fff; color: var(--ink); box-shadow: 0 8px 0 rgba(0,0,0,.15); }
@media (prefers-reduced-motion: reduce) { .kid *, .login * { animation: none !important; } }

.kid.ja .painel, .kid.ja .kid-hoje, .kid.ja .fase:not(.atual) .bola { animation: none; }

/* ===== Topo: avisos e ajustes ===== */
.top-acoes { display: flex; align-items: center; gap: 6px; }
.ic-btn { position: relative; border: 0; background: var(--card); width: 42px; height: 42px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; box-shadow: var(--sombra); }
.ic-btn.on { background: var(--ink); }
.ic-btn .badge { top: -4px; right: -4px; }
.top-acoes .chip { margin-left: 2px; }
@media (max-width: 380px) { .top-acoes .chip { display: none; } }

/* ===== Avisos ===== */
.novidades { background: #fff3d6; border: 2px solid var(--sol); border-radius: var(--r); padding: 12px; margin: 8px 0 4px; }
.nov-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.av { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border-radius: 14px; padding: 10px 12px; box-shadow: var(--sombra); cursor: pointer; }
.av b { display: block; font-size: .95rem; } .av small { display: block; color: var(--muted); font-size: .84rem; }
.av.novo { border-left: 5px solid var(--sol); }
.quando-av { font-size: .75rem !important; margin-top: 2px; }

/* ===== Saúde ===== */
.dose { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 14px; padding: 10px 12px; box-shadow: var(--sombra); flex-wrap: wrap; }
.dose .hora { font-weight: 900; font-size: 1.05rem; min-width: 3.2em; }
.dose b { display: block; } .dose small { display: block; color: var(--muted); font-size: .84rem; }
.dose.ok { opacity: .75; } .dose.atrasada { border-left: 5px solid var(--fim); }
.dose .dada { font-size: .82rem; font-weight: 800; color: var(--ok); }
.rem { background: var(--card); border-radius: 14px; padding: 12px; box-shadow: var(--sombra); border-left: 6px solid #8b5cf6; }
.rem.vitamina { border-left-color: #f59e0b; }
.rem b { display: block; font-size: 1.05rem; } .rem small { display: block; color: var(--muted); font-size: .85rem; }
.horas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hora-chip { background: var(--bg); border: 2px solid var(--line); border-radius: 99px; padding: 4px 10px; font-weight: 800; font-size: .88rem; color: var(--ink); text-decoration: none; }
.horarios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: -6px; }
.horarios input { padding: 10px 4px; text-align: center; }
.encerrados { margin-top: 18px; } .encerrados summary { cursor: pointer; font-weight: 800; color: var(--muted); margin-bottom: 8px; }
.ac.cancelada { opacity: .55; }
.ac.cancelada b { text-decoration: line-through; }

/* ===== Augusto: remédio e tela ===== */
.kid-status { font-weight: 900; font-size: 1.05rem; text-align: center; background: var(--bg); border-radius: 16px; padding: 10px 16px; margin: 0; }
.remedio-kid { border: 4px solid #ffd59e; }
.remedio-kid .tomei { font-size: 1.1rem; min-height: 54px; border-radius: 18px; box-shadow: 0 5px 0 rgba(0,0,0,.18); animation: respira 1.6s ease-in-out infinite; }
.remedio-kid { flex-wrap: wrap; } .remedio-kid .tomei { width: 100%; }