/* Mi Ritmo · estilos. Colores de la guía de marca (03-colores). Temas en [data-color], modo en [data-theme], efectos 3D en .fx */
@font-face{font-family:"Fredoka";font-weight:500;font-display:swap;src:url(fonts/fredoka-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:600;font-display:swap;src:url(fonts/fredoka-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:700;font-display:swap;src:url(fonts/fredoka-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:400;font-display:swap;src:url(fonts/nunito-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:600;font-display:swap;src:url(fonts/nunito-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:700;font-display:swap;src:url(fonts/nunito-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:800;font-display:swap;src:url(fonts/nunito-latin-800-normal.woff2) format("woff2")}

:root{
  --bg:#F7F5FF; --surface:#FFFFFF; --ink:#1D1733; --muted:#6B6488; --line:#E6E1F5; --shadow:rgba(29,23,51,.10);
  /* color de marca del tema (violeta por defecto) */
  --brand:#4A33D6; --brand-edge:#33209E; --brand-soft:#ECE8FF; --on-brand:#FFFFFF;
  /* acción, hecho y recompensa: cada color tiene un solo trabajo */
  --accent:#FF5A47; --accent-edge:#D2392A; --on-accent:#FFFFFF;
  --done:#14C29F; --done-edge:#0B917A; --star:#FFC21A; --star-edge:#D69B00; --star-ink:#1D1733;
  --agua:#2E8BFF; --agua-edge:#1B66C9;
  /* categorías (guía, sección 06) */
  --c-rutina:#4A33D6; --c-rutina-bg:#ECE8FF;
  --c-estudio:#E0402E; --c-estudio-bg:#FFE7E3;
  --c-agua:#2E8BFF; --c-agua-bg:#E2F0FF;
  --c-cuidado:#E0402E; --c-cuidado-bg:#FFE7E3;
  --c-libre:#0FA284; --c-libre-bg:#DDF7F1;
  --display:"Fredoka","Nunito",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --r-s:12px; --r-m:20px; --r-l:28px;
}
:root[data-color="coral"]{--brand:#FF5A47;--brand-edge:#D2392A;--brand-soft:#FFE7E3;--on-brand:#1D1733;--accent:#4A33D6;--accent-edge:#33209E}
:root[data-color="menta"]{--brand:#14C29F;--brand-edge:#0B917A;--brand-soft:#DDF7F1;--on-brand:#1D1733}
:root[data-color="agua"]{--brand:#1B66C9;--brand-edge:#124C99;--brand-soft:#E2F0FF;--on-brand:#FFFFFF}
:root[data-color="tinta"]{--brand:#1D1733;--brand-edge:#000000;--brand-soft:#E6E1F5;--on-brand:#FFFFFF}

@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#14102A; --surface:#221B42; --ink:#F4F1FF; --muted:#A9A2C9; --line:#352C5E; --shadow:rgba(0,0,0,.35);
  --brand:#8A78FF; --brand-edge:#5A47D6; --brand-soft:#2E2560; --on-brand:#14102A;
  --accent:#FF7563; --accent-edge:#C9473A; --on-accent:#1D1733;
  --done:#3DD9B5; --done-edge:#1E9C80; --star:#FFCE45; --star-edge:#C99A10;
  --c-rutina:#A396FF; --c-rutina-bg:#2E2560; --c-estudio:#FF8A7A; --c-estudio-bg:#3D2230;
  --c-agua:#5EA6FF; --c-agua-bg:#1C2E55; --c-cuidado:#FF8A7A; --c-cuidado-bg:#3D2230; --c-libre:#3DD9B5; --c-libre-bg:#16393A;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#14102A; --surface:#221B42; --ink:#F4F1FF; --muted:#A9A2C9; --line:#352C5E; --shadow:rgba(0,0,0,.35);
  --brand:#8A78FF; --brand-edge:#5A47D6; --brand-soft:#2E2560; --on-brand:#14102A;
  --accent:#FF7563; --accent-edge:#C9473A; --on-accent:#1D1733;
  --done:#3DD9B5; --done-edge:#1E9C80; --star:#FFCE45; --star-edge:#C99A10;
  --c-rutina:#A396FF; --c-rutina-bg:#2E2560; --c-estudio:#FF8A7A; --c-estudio-bg:#3D2230;
  --c-agua:#5EA6FF; --c-agua-bg:#1C2E55; --c-cuidado:#FF8A7A; --c-cuidado-bg:#3D2230; --c-libre:#3DD9B5; --c-libre-bg:#16393A;
  color-scheme:dark}
/* temas en modo oscuro: versiones más claras del color para que se lean sobre fondo oscuro */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"])[data-color="coral"]{--brand:#FF7563;--brand-edge:#C9473A;--brand-soft:#3D2230;--accent:#8A78FF;--accent-edge:#5A47D6}
  :root:not([data-theme="light"])[data-color="menta"]{--brand:#3DD9B5;--brand-edge:#1E9C80;--brand-soft:#16393A}
  :root:not([data-theme="light"])[data-color="agua"]{--brand:#5EA6FF;--brand-edge:#2E73CC;--brand-soft:#1C2E55}
  :root:not([data-theme="light"])[data-color="tinta"]{--brand:#E6E1F5;--brand-edge:#A9A2C9;--brand-soft:#352C5E}}
:root[data-theme="dark"][data-color="coral"]{--brand:#FF7563;--brand-edge:#C9473A;--brand-soft:#3D2230;--accent:#8A78FF;--accent-edge:#5A47D6}
:root[data-theme="dark"][data-color="menta"]{--brand:#3DD9B5;--brand-edge:#1E9C80;--brand-soft:#16393A}
:root[data-theme="dark"][data-color="agua"]{--brand:#5EA6FF;--brand-edge:#2E73CC;--brand-soft:#1C2E55}
:root[data-theme="dark"][data-color="tinta"]{--brand:#E6E1F5;--brand-edge:#A9A2C9;--brand-soft:#352C5E}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45;
  padding:max(12px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 150px max(16px,env(safe-area-inset-left,0px))}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,label:focus-within{outline:3px solid var(--brand);outline-offset:2px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.15}
.wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.starico{width:22px;height:22px;fill:var(--star);stroke:var(--star);stroke-width:1.5;stroke-linejoin:round;flex:none}
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- botones 3D: un canto inferior que se hunde al tocar ---------- */
.b3d{border:0;border-radius:999px;font-weight:800;padding:14px 22px;min-height:48px;background:var(--accent);color:var(--on-accent);
  box-shadow:0 5px 0 var(--accent-edge);transition:transform .08s,box-shadow .08s}
.b3d:active{transform:translateY(4px);box-shadow:0 1px 0 var(--accent-edge)}
.b3d.brand{background:var(--brand);color:var(--on-brand);box-shadow:0 5px 0 var(--brand-edge)}
.b3d.brand:active{box-shadow:0 1px 0 var(--brand-edge)}
.b3d.soft{background:var(--surface);color:var(--ink);box-shadow:0 0 0 2px var(--line) inset,0 5px 0 var(--line)}
.b3d.soft:active{box-shadow:0 0 0 2px var(--line) inset,0 1px 0 var(--line)}
.b3d.done{background:var(--done);color:#1D1733;box-shadow:0 5px 0 var(--done-edge)}
.b3d.done:active{box-shadow:0 1px 0 var(--done-edge)}
.b3d.full{width:100%}
.b3d.sm{min-height:40px;padding:9px 16px;font-size:.9rem}

/* ---------- cabecera ---------- */
.top{display:flex;align-items:center;gap:12px;padding-top:4px}
.avatar{width:54px;height:54px;border-radius:50%;flex:none;border:0;padding:0;background:var(--brand);color:var(--on-brand);
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.4rem;overflow:hidden;
  box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--brand),0 6px 14px var(--shadow)}
.avatar img{width:100%;height:100%;object-fit:cover}
.top .txt{flex:1;min-width:0}
.date{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:800}
.top h1{font-size:1.35rem;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.coinchip{display:flex;align-items:center;gap:6px;border:0;background:var(--surface);border-radius:999px;padding:6px 14px 6px 6px;
  font-family:var(--display);font-weight:700;font-size:1.15rem;box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line);flex:none;min-height:44px}
.lockbtn{width:44px;height:44px;border-radius:50%;border:0;background:var(--surface);color:var(--muted);display:grid;place-items:center;flex:none;
  box-shadow:0 0 0 2px var(--line) inset,0 4px 0 var(--line)}
.lockbtn .ico{width:20px;height:20px}

/* moneda estrella 3D: dos caras que giran */
.coin{width:32px;height:32px;position:relative;transform-style:preserve-3d;flex:none}
.coin i{position:absolute;inset:0;border-radius:50%;background:var(--star);display:grid;place-items:center;backface-visibility:hidden;
  box-shadow:inset 0 -3px 0 var(--star-edge),inset 0 2px 0 rgba(255,255,255,.5)}
.coin i:last-child{transform:rotateY(180deg)}
.coin svg{width:18px;height:18px;fill:#fff;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.fx .coin{animation:spin 6s cubic-bezier(.6,0,.4,1) infinite}
.coin.big{width:64px;height:64px}.coin.big svg{width:36px;height:36px}
@keyframes spin{0%,70%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}

/* ---------- alarmas ---------- */
.arm{display:flex;gap:12px;align-items:center;text-align:left;border-radius:var(--r-m)!important;padding:12px 16px!important}
.arm small{display:block;font-weight:600;opacity:.9;font-size:.85rem}
.arm .bell{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;flex:none}
.armed{font-size:.85rem;color:var(--done-edge);font-weight:800;display:flex;gap:6px;align-items:center}
:root[data-theme="dark"] .armed{color:var(--done)}

/* ---------- tarjeta principal con inclinación 3D ---------- */
.tilt{transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
.hero{position:relative;background:var(--brand);color:var(--on-brand);border-radius:var(--r-l);padding:22px;display:flex;gap:16px;align-items:center;
  box-shadow:0 8px 0 var(--brand-edge),0 18px 30px var(--shadow);overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.09);pointer-events:none}
.hero::before{width:220px;height:220px;right:-70px;top:-110px}
.hero::after{width:140px;height:140px;left:-50px;bottom:-80px}
.hero .txt{flex:1;min-width:0;position:relative}
.fx .hero .txt{transform:translateZ(30px)}
.hero .lbl{font-weight:800;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.hero h2{font-size:1.6rem;font-weight:700;margin:4px 0 6px}
.hero .when{font-weight:700;opacity:.9;font-size:.95rem}
.ring{width:84px;height:84px;flex:none;position:relative}
.fx .ring{transform:translateZ(50px)}
.ring svg{transform:rotate(-90deg);display:block}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:1.25rem;font-variant-numeric:tabular-nums}

/* ---------- agua ---------- */
.card{background:var(--surface);border-radius:var(--r-m);padding:16px;box-shadow:0 0 0 1.5px var(--line) inset,0 5px 0 var(--line)}
.water{display:flex;align-items:center;gap:12px}
.water .info{flex:1;min-width:0}
.water b{display:block;font-weight:800}
.glasses{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.glasses i{width:16px;height:22px;border-radius:3px 3px 7px 7px;border:2px solid var(--agua);background:transparent;transition:background .2s,transform .2s}
.glasses i.full{background:var(--agua)}
.fx .glasses i.full{animation:pop .35s}
.wbtn{width:48px;height:48px;border-radius:50%;border:0;font-size:1.6rem;font-weight:800;line-height:1;flex:none;background:var(--c-agua-bg);color:var(--agua);
  box-shadow:0 4px 0 color-mix(in srgb,var(--agua) 35%,transparent);transition:transform .08s,box-shadow .08s}
.wbtn.plus{background:var(--agua);color:#fff;box-shadow:0 4px 0 var(--agua-edge)}
.wbtn:active{transform:translateY(3px);box-shadow:none}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.2)}100%{transform:scale(1)}}

/* ---------- tareas ---------- */
.list{display:flex;flex-direction:column;gap:12px}
.task{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border:0;border-radius:var(--r-m);padding:12px 14px;min-height:68px;
  box-shadow:0 0 0 1.5px var(--line) inset,0 5px 0 var(--line);transition:transform .1s,box-shadow .1s}
.task:active{transform:translateY(3px);box-shadow:0 0 0 1.5px var(--line) inset,0 2px 0 var(--line)}
.task .cat{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:none}
.task .body{flex:1;min-width:0;display:flex;flex-direction:column}
.task .title{font-weight:800;font-size:1.02rem}
.task .meta{font-size:.82rem;color:var(--muted);font-weight:700;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.task .time{font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.task.late{box-shadow:0 0 0 2px var(--accent) inset,0 5px 0 var(--accent-edge)}
.task.late .time{color:var(--accent)}
.task.done .title{text-decoration:line-through;color:var(--muted)}
.task.done{opacity:.85}
.pill{padding:1px 8px;border-radius:999px;background:var(--brand-soft);color:var(--ink);font-size:.72rem}
.task .edit{font-weight:800;font-size:.85rem;color:var(--brand)}
/* casilla que gira en 3D al marcarla */
.check{width:40px;height:40px;flex:none;position:relative;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.check i{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;backface-visibility:hidden}
.check i:first-child{border:3px solid var(--line)}
.check i:last-child{background:var(--done);transform:rotateY(180deg);box-shadow:inset 0 -3px 0 var(--done-edge)}
.check svg{width:22px;height:22px;stroke:#1D1733;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.task.done .check{transform:rotateY(180deg)}
:root:not(.fx) .check{transition:none}
.group h3{font-size:1rem;color:var(--muted);margin:4px 2px 10px}
.empty{text-align:center;color:var(--muted);padding:28px 10px;font-weight:700}
.note{background:var(--brand-soft);border-radius:var(--r-s);padding:12px 14px;font-size:.9rem;font-weight:600}
.note button{background:none;border:0;padding:0;font-weight:800;text-decoration:underline;color:var(--ink)}
.locked{display:flex;gap:10px;align-items:center;font-size:.9rem;color:var(--muted);font-weight:700;background:var(--surface);border-radius:var(--r-s);padding:12px 14px;box-shadow:0 0 0 1.5px var(--line) inset}

/* ---------- escalera 3D (premios) ---------- */
.stage{position:relative;height:230px;perspective:900px;display:grid;place-items:center;background:var(--brand);border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 8px 0 var(--brand-edge),0 18px 30px var(--shadow)}
.stage::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08);right:-80px;top:-120px}
.stairs{position:relative;width:180px;height:120px;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(-32deg);margin-top:40px}
.fx .stairs{animation:sway 7s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotateX(-18deg) rotateY(-36deg)}50%{transform:rotateX(-14deg) rotateY(-14deg)}}
.step{position:absolute;bottom:0;width:60px;transform-style:preserve-3d;--d:60px}
.step .f,.step .t,.step .s{position:absolute;border-radius:6px;transition:background .4s}
.step .f{inset:0;transform:translateZ(calc(var(--d)/2));background:rgba(255,255,255,.28)}
.step .t{left:0;right:0;top:calc(var(--d)/-2);height:var(--d);transform:rotateX(90deg);background:rgba(255,255,255,.4)}
.step .s{top:0;bottom:0;left:calc(100% - var(--d)/2);width:var(--d);transform:rotateY(90deg);background:rgba(255,255,255,.16)}
.step.on .f{background:#FFFFFF}.step.on .t{background:#F7F5FF}.step.on .s{background:#D9D3F2}
.step:nth-child(1){left:0;height:40px}.step:nth-child(2){left:60px;height:80px}.step:nth-child(3){left:120px;height:120px}
.topstar{position:absolute;left:150px;bottom:136px;transform:translateX(-50%) translateZ(0);width:52px;height:52px;transform-style:preserve-3d}
.topstar svg{width:52px;height:52px;fill:var(--star);stroke:var(--star);stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 4px 0 var(--star-edge))}
.topstar.dim svg{fill:rgba(255,255,255,.35);stroke:rgba(255,255,255,.6);filter:none}
.fx .topstar{animation:float 2.6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateX(-50%) translateY(0) rotateY(0)}50%{transform:translateX(-50%) translateY(-10px) rotateY(180deg)}}
.stage .cap{position:absolute;left:18px;top:16px;color:var(--on-brand);display:flex;flex-direction:column}
.stage .cap b{font-family:var(--display);font-size:2.4rem;line-height:1}
.stage .cap span{font-weight:800;font-size:.85rem;opacity:.9}

.prize{background:var(--surface);border-radius:var(--r-l);padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 0 0 1.5px var(--line) inset,0 6px 0 var(--line)}
.prize .head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.prize .lbl{font-weight:800;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.badge{background:var(--star);color:var(--star-ink);font-weight:800;font-size:.8rem;padding:4px 10px;border-radius:999px}
.gift{display:flex;gap:12px;align-items:center}
.gift .gi{width:52px;height:52px;border-radius:16px;background:#FFF3CC;color:#C99300;display:grid;place-items:center;flex:none}
.gift h2{font-size:1.25rem}
.won .gift .gi{background:var(--star);color:#1D1733}
.bar{height:16px;border-radius:999px;background:var(--line);overflow:hidden;box-shadow:inset 0 2px 0 rgba(0,0,0,.06)}
.bar i{display:block;height:100%;background:var(--star);border-radius:999px;box-shadow:inset 0 -4px 0 var(--star-edge);transition:width .6s cubic-bezier(.3,1.3,.5,1)}
.nums{display:flex;justify-content:space-between;font-size:.85rem;font-weight:800;color:var(--muted);gap:8px;flex-wrap:wrap}
.help{font-size:.82rem;color:var(--muted);font-weight:600}
.strip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;font-size:.75rem;font-weight:800;color:var(--muted)}
.strip div{display:flex;flex-direction:column;align-items:center;gap:4px}
.strip .col{width:100%;max-width:30px;height:56px;border-radius:8px;background:var(--line);display:flex;align-items:flex-end;overflow:hidden}
.strip .col i{display:block;width:100%;background:var(--done);border-radius:8px 8px 0 0}
.strip .today{color:var(--ink)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:.78rem;font-weight:700}
.cal span{aspect-ratio:1;display:grid;place-items:center;border-radius:10px;background:var(--bg)}
.cal .h{background:none;color:var(--muted);font-weight:800;aspect-ratio:auto}
.cal .b{background:none}
.cal .l1{background:color-mix(in srgb,var(--done) 30%,var(--surface))}
.cal .l2{background:color-mix(in srgb,var(--done) 60%,var(--surface))}
.cal .l3{background:var(--done);color:#1D1733}
.cal .t{box-shadow:0 0 0 2px var(--ink) inset}
.cal .f{color:var(--muted);opacity:.6}
.trophies{display:flex;flex-direction:column;gap:8px}
.trophy{display:flex;gap:10px;align-items:center;font-weight:700;font-size:.92rem}
.trophy .starico{width:20px;height:20px}
.trophy small{color:var(--muted);font-weight:700;margin-left:auto;white-space:nowrap}

/* ---------- perfil ---------- */
.me{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:22px}
.photo{position:relative;width:120px;height:120px}
.photo .avatar{width:120px;height:120px;font-size:3rem;box-shadow:0 0 0 4px var(--surface),0 0 0 8px var(--brand),0 12px 24px var(--shadow)}
.fx .photo{animation:bob 4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.photo .cam{position:absolute;right:-2px;bottom:-2px;width:42px;height:42px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;
  box-shadow:0 0 0 3px var(--surface),0 4px 0 var(--accent-edge);cursor:pointer}
.photo .cam input{position:absolute;width:1px;height:1px;opacity:0}
.field{display:flex;flex-direction:column;gap:6px;text-align:left;width:100%}
.field label,.lab{font-weight:800;font-size:.9rem}
input[type=text],input[type=time],input[type=date],input[type=number],input:not([type]){font:inherit;font-weight:700;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:14px;padding:12px 14px;min-height:48px;width:100%}
input:focus{border-color:var(--brand);outline:none}
.swatches{display:flex;gap:12px;flex-wrap:wrap}
.sw{width:52px;height:52px;border-radius:50%;border:0;position:relative;box-shadow:0 0 0 2px var(--line),0 4px 0 rgba(0,0,0,.18)}
.sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--ink)}
.sw[aria-pressed="true"]::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-8.5'/%3E%3C/svg%3E") center/26px no-repeat}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{border:0;border-radius:999px;padding:10px 14px;min-height:44px;font-weight:800;font-size:.9rem;background:var(--bg);box-shadow:0 0 0 2px var(--line) inset,0 3px 0 var(--line);display:flex;gap:6px;align-items:center}
.seg button[aria-pressed="true"]{background:var(--brand);color:var(--on-brand);box-shadow:0 3px 0 var(--brand-edge)}
.seg.days button{width:44px;justify-content:center;padding:0}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;font-weight:800;text-align:left;cursor:pointer}
.switch small{display:block;color:var(--muted);font-weight:600}
.switch input{appearance:none;width:56px;height:32px;border-radius:999px;background:var(--line);position:relative;flex:none;transition:background .2s;cursor:pointer;margin:0}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.2);transition:transform .2s}
.switch input:checked{background:var(--done)}
.switch input:checked::after{transform:translateX(24px)}
.stack{display:flex;flex-direction:column;gap:16px}
.card h3{font-size:1.1rem;margin-bottom:12px}

/* ---------- barra inferior ---------- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:8px max(12px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom,0px));background:var(--surface);
  box-shadow:0 -1.5px 0 var(--line),0 -8px 24px var(--shadow)}
.nav .in{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.nav button{border:0;background:none;border-radius:16px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:800;font-size:.75rem;color:var(--muted);min-height:54px}
.nav button[aria-selected="true"]{color:var(--brand);background:var(--brand-soft)}
:root[data-color="tinta"] .nav button[aria-selected="true"]{color:var(--ink)}
.fx .nav button[aria-selected="true"] .ico{animation:pop .35s}
.fab{position:fixed;z-index:19;right:max(16px,calc(50% - 264px));bottom:calc(86px + env(safe-area-inset-bottom,0px));font-size:1.05rem}

/* ---------- hojas, alarma, avisos ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(20,16,42,.55);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);width:100%;max-width:560px;border-radius:28px 28px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:16px;max-height:92vh;overflow:auto;animation:up .3s cubic-bezier(.3,1.2,.5,1)}
.sheet h2{font-size:1.5rem}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.row{display:flex;gap:10px}.row>*{flex:1}
.err{color:var(--accent);font-weight:800}
.danger{background:none;border:0;color:var(--accent);font-weight:800;padding:10px}
.confirm{background:var(--bg);border-radius:var(--r-m);padding:14px;font-weight:800;display:flex;flex-direction:column;gap:12px}

.alarm{position:fixed;inset:0;z-index:80;background:var(--accent);color:var(--on-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}
.alarm .ring-ico{width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;animation:shake .5s infinite}
@keyframes shake{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
.alarm .big-time{font-family:var(--display);font-size:4rem;font-weight:700;line-height:1}
.alarm h2{font-size:2rem}
.alarm .acts{display:flex;flex-direction:column;gap:14px;width:100%;max-width:340px;margin-top:10px}
.alarm .b3d.soft{color:#1D1733;background:#fff;box-shadow:0 5px 0 rgba(0,0,0,.2)}
.alarm .x{background:none;border:0;color:inherit;font-weight:800;padding:10px;opacity:.9}

#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:90}
.toast{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);opacity:0;z-index:85;background:#1D1733;color:#fff;border-radius:18px;padding:12px 18px;font-weight:800;
  display:flex;gap:10px;align-items:center;pointer-events:none;transition:.3s cubic-bezier(.3,1.4,.5,1);max-width:calc(100vw - 32px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.big{flex-direction:column;text-align:center;font-size:1.05rem;padding:18px 22px;bottom:40%}
.toast.big .starico{width:44px;height:44px}

/* ---------- pantalla de inicio ---------- */
.splash{position:fixed;inset:0;z-index:100;background:#4A33D6;display:grid;place-items:center;transition:opacity .4s}
.splash img{width:180px}
.fx .splash img{animation:intro .8s cubic-bezier(.3,1.5,.5,1)}
@keyframes intro{from{transform:perspective(600px) rotateY(-70deg) scale(.6);opacity:0}}
.splash.out{opacity:0;pointer-events:none}

/* ---------- zona de padres ---------- */
.parent{position:fixed;inset:0;z-index:50;background:var(--bg);overflow:auto;padding:max(14px,env(safe-area-inset-top)) 16px 40px}
.parent .wrap{max-width:760px}
.ptop{display:flex;align-items:center;gap:12px}
.ptop .t{flex:1;min-width:0}
.ptop .t span{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--accent)}
.ptop h1{font-size:1.5rem}
.ptop .avatar{width:46px;height:46px;font-size:1.1rem}
.pin{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding-top:6vh}
.pin img{width:200px}
.logo-d{display:none!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-l{display:none!important}:root:not([data-theme="light"]) .logo-d{display:block!important}}
:root[data-theme="dark"] .logo-l{display:none!important}:root[data-theme="dark"] .logo-d{display:block!important}
.pin h2{font-size:1.6rem}
.pin p{margin:0;color:var(--muted);font-weight:700;max-width:30ch}
.dots{display:flex;gap:14px;height:22px}
.dots i{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 3px var(--line) inset;transition:.15s}
.dots i.on{background:var(--brand);box-shadow:0 3px 0 var(--brand-edge);transform:scale(1.1)}
.dots.bad{animation:no .4s}
@keyframes no{25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}
.keys{display:grid;grid-template-columns:repeat(3,76px);gap:14px}
.keys button{height:66px;border-radius:22px;border:0;background:var(--surface);font-family:var(--display);font-weight:700;font-size:1.6rem;box-shadow:0 0 0 2px var(--line) inset,0 5px 0 var(--line);transition:transform .06s,box-shadow .06s}
.keys button:active{transform:translateY(4px);box-shadow:0 0 0 2px var(--line) inset,0 1px 0 var(--line)}
.keys .ghost{background:none;box-shadow:none;font-family:var(--body);font-size:.85rem;color:var(--muted)}
.linkbtn{background:none;border:0;color:var(--brand);font-weight:800;text-decoration:underline;padding:8px}
.grid{display:grid;gap:12px}
.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:640px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--surface);border-radius:var(--r-m);padding:14px 16px;box-shadow:0 0 0 1.5px var(--line) inset,0 5px 0 var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi span{font-size:.78rem;font-weight:800;color:var(--muted)}
.kpi b{font-family:var(--display);font-size:2rem;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi small{font-size:.78rem;color:var(--muted);font-weight:700}
.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.two{grid-template-columns:1fr}}
.chart{position:relative}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .tip{position:absolute;pointer-events:none;background:#1D1733;color:#fff;font-size:.8rem;font-weight:700;padding:6px 10px;border-radius:10px;transform:translate(-50%,-110%);white-space:nowrap;opacity:0;transition:opacity .1s}
.chart .tip.show{opacity:1}
.hbars{display:flex;flex-direction:column;gap:10px}
.hbar{display:grid;grid-template-columns:110px 1fr 44px;align-items:center;gap:10px;font-weight:700;font-size:.88rem}
.hbar .tr{height:12px;border-radius:999px;background:var(--line);overflow:hidden}
.hbar .tr i{display:block;height:100%;background:var(--brand);border-radius:0 4px 4px 0}
.hbar b{text-align:right;font-variant-numeric:tabular-nums}
.miss{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.miss li{display:flex;justify-content:space-between;gap:10px;font-weight:700;font-size:.92rem}
.miss li span:last-child{color:var(--muted);white-space:nowrap}
.alert{background:#FFE7E3;color:#1D1733;border-radius:var(--r-s);padding:12px 14px;font-weight:700;font-size:.9rem}
.wonrow{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1.5px solid var(--line);font-weight:700}
.wonrow:first-child{border-top:0}
.wonrow small{display:block;color:var(--muted)}
.ptasks .task{min-height:56px}

/* ---------- modo padres (teléfono de mamá o papá): solo el panel ---------- */
body.pmode>.wrap,body.pmode>.nav,body.pmode>.fab{display:none!important}
body.pmode .parent{padding-bottom:40px}
.syncline{display:flex;gap:8px;align-items:center;font-size:.85rem;font-weight:700;color:var(--muted)}
.syncline .ico{width:18px;height:18px;color:var(--done)}
.bigcode{font-family:var(--display);font-weight:700;font-size:2.6rem;letter-spacing:.08em;text-align:center;background:var(--brand-soft);border-radius:var(--r-m);padding:12px 16px;font-variant-numeric:tabular-nums}
.bigcode.sm{font-size:1.9rem;text-align:left;display:inline-block;margin-top:6px}
.famrow{display:flex;gap:12px;align-items:center;text-align:left}
.famrow .ico{width:40px;height:40px;padding:8px;border-radius:14px;background:var(--brand-soft);color:var(--brand);flex:none}
.famrow small{display:block;color:var(--muted);font-weight:600}
:root[data-color="tinta"] .famrow .ico{color:var(--ink)}

/* ---------- bienvenida ---------- */
.welcome{position:fixed;inset:0;z-index:70;background:var(--bg);overflow:auto;padding:max(24px,env(safe-area-inset-top)) 16px 32px;display:grid;place-items:center}
.wcard{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.wcard h2{font-size:1.6rem}
.wcard p{margin:0;color:var(--muted);font-weight:600;max-width:34ch}
.wlogo{width:150px;margin-bottom:4px}
.fx .wlogo{animation:intro .8s cubic-bezier(.3,1.5,.5,1)}
.who{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;background:var(--surface);border-radius:var(--r-l);padding:18px;
  box-shadow:0 0 0 2px var(--line) inset,0 6px 0 var(--line);transition:transform .08s,box-shadow .08s}
.who:active{transform:translateY(4px);box-shadow:0 0 0 2px var(--line) inset,0 2px 0 var(--line)}
.who b{display:block;font-family:var(--display);font-size:1.25rem}
.who small{color:var(--muted);font-weight:700}
.wi{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;flex:none}
.wi .ico{width:30px;height:30px}
.wi.kid{background:#FFF3CC;color:#C99300}
.wi.par{background:var(--c-rutina-bg);color:var(--c-rutina)}
.wi.big{width:76px;height:76px;border-radius:24px}.wi.big .ico{width:40px;height:40px}
.fx .wi.big{animation:bob 4s ease-in-out infinite}
.codein{text-align:center;font-family:var(--display)!important;font-size:1.8rem!important;letter-spacing:.15em}
.pinin{text-align:center;font-size:1.6rem!important;letter-spacing:.4em}
.wcard .coin.big{animation:spin 3s cubic-bezier(.6,0,.4,1) infinite}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}