/* Lucas · Seguimiento del bebé — diseño profesional v17
   Sistema sobrio en azules: jerarquía clara, iconos consistentes,
   tarjetas limpias. Mantiene todos los hooks que usa app.js. */
:root{
  --p500:#2379e2; --p600:#1c63c4; --p700:#1753a6;
  --p100:#e7f1fd; --p050:#f3f8fe;
  --ink:#172a4d; --muted:#64748f; --line:#e2eaf4;
  --card:#ffffff; --bg1:#f8fbfe; --bg2:#edf3fa;
  --ok:#1f9d66; --ok-bg:#e2f5ec;
  --warn:#c97a1b; --warn-bg:#fdf0dc;
  --bad:#d95353; --bad-bg:#fdecec;
  --lila:#6a5acd; --lila-bg:#eceafd;
  --rosa:#c24a6d; --rosa-bg:#fbe7ee;
  --radio:18px;
  --sombra:0 2px 10px rgba(23,42,77,.06), 0 10px 28px rgba(23,42,77,.06);
  --sombra-sm:0 1px 4px rgba(23,42,77,.08);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{color-scheme:light dark}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-size:15px; line-height:1.45;
  padding-bottom:calc(84px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
/* ---------- cabecera ---------- */
.appbar{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(135deg,#1753a6 0%,#2379e6 100%);
  color:#fff; padding:calc(12px + env(safe-area-inset-top)) 16px 16px;
  display:flex; align-items:center; gap:12px;
  border-radius:0 0 22px 22px;
  box-shadow:0 4px 18px rgba(23,83,166,.28);
}
.appbar .logo{
  width:46px;height:46px;border-radius:14px;background:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.appbar .logo img{width:100%;height:100%;object-fit:cover}
.appbar h1{font-size:19px;margin:0;font-weight:700;letter-spacing:.1px}
.appbar p{margin:2px 0 0;font-size:12px;opacity:.85;font-weight:500}
.crece{flex:1;min-width:0}
.syncpill{
  font-size:11px;font-weight:700;padding:6px 11px;border-radius:99px;white-space:nowrap;
  background:rgba(255,255,255,.22);color:#fff;letter-spacing:.2px;
}
.syncpill.ok{background:#dcf5e7;color:#0d6b41}
.syncpill.off{background:rgba(255,255,255,.22);color:#fff}
.syncpill.sync{background:#fff3d1;color:#8a5a00;animation:parpadeo 1.2s ease infinite}
@keyframes parpadeo{50%{opacity:.55}}
.hbtn{
  width:38px;height:38px;border-radius:12px;border:0;flex:none;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.hbtn:active{transform:scale(.94);background:rgba(255,255,255,.3)}
.hbtn svg{width:20px;height:20px}
/* ---------- contenido ---------- */
main{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:14px 14px 8px}
.view{display:none;animation:aparece .22s ease}
.view.active{display:block}
@keyframes aparece{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.card{
  background:var(--card);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:18px;margin-bottom:12px;border:1px solid var(--line);
}
.card h2{font-size:15.5px;margin:0 0 12px;color:var(--ink);font-weight:700;letter-spacing:.1px}
.card h3{font-size:13.5px;margin:16px 0 8px;color:var(--p700);font-weight:700}
.muted{color:var(--muted);font-size:13px}
.mini{font-size:12px;color:var(--muted);line-height:1.5}
.mt{margin-top:12px}.mb{margin-bottom:10px}
.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
/* ---------- de un vistazo ---------- */
.vistazo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vtarjeta{
  border:1px solid var(--line);border-radius:16px;padding:14px 12px;text-align:left;cursor:pointer;
  font-family:inherit;display:flex;flex-direction:column;gap:5px;background:#fff;
  transition:transform .15s ease, box-shadow .15s ease;
}
.vtarjeta:active{transform:scale(.97)}
.vtarjeta .ve{
  width:40px;height:40px;border-radius:12px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:21px;
  background:var(--p100);
}
.vtarjeta b{font-size:14px;color:var(--ink);font-weight:700}
.vtarjeta span{font-size:11.5px;color:var(--muted)}
.vtarjeta.c1 .ve{background:var(--p100)}
.vtarjeta.c2 .ve{background:var(--warn-bg)}
.vtarjeta.c3 .ve{background:var(--ok-bg)}
.vtarjeta.c4 .ve{background:var(--lila-bg)}
.vtarjeta.c5{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px}
.vtarjeta.c5 .ve{background:var(--rosa-bg)}
.vtarjeta.c5 div b{display:block}
/* ---------- barra de pestañas ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  display:flex;padding:8px 4px calc(10px + env(safe-area-inset-bottom));
}
.tabbar button{
  flex:1;border:0;background:none;color:var(--muted);
  font-size:10.5px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 0;cursor:pointer;font-family:inherit;min-width:0;border-radius:12px;
}
.tabbar button svg{width:23px;height:23px}
.tabbar button.active{color:var(--p600)}
.tabbar button.active svg{background:var(--p100);border-radius:10px;padding:2px;width:27px;height:27px}
/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--p500);color:#fff;border:0;border-radius:14px;
  padding:13px 18px;font-size:15px;font-weight:700;cursor:pointer;
  font-family:inherit;width:100%;letter-spacing:.1px;
  box-shadow:0 2px 8px rgba(35,121,226,.25);
}
.btn:active{transform:scale(.98);background:var(--p600)}
.btn.sec{background:var(--p100);color:var(--p700);box-shadow:none}
.btn.sec:active{background:#d8e8fb}
.btn.warn{background:var(--warn-bg);color:var(--warn);box-shadow:none}
.btn.danger{background:var(--bad-bg);color:var(--bad);box-shadow:none}
.btn.sm{width:auto;padding:9px 14px;font-size:13.5px;border-radius:11px;box-shadow:none}
.btn:disabled{opacity:.55}
/* ---------- meta del día ---------- */
.anillo{position:relative;width:128px;height:128px;margin:6px auto}
.anillo svg{transform:rotate(-90deg)}
.anillo .txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.anillo .txt b{font-size:22px;color:var(--ink);font-weight:800}
.anillo .txt span{font-size:11px;color:var(--muted)}
.kpi{display:flex;gap:10px;margin-top:12px}
.kpi .k{flex:1;background:var(--p050);border:1px solid var(--line);border-radius:14px;padding:10px 6px;text-align:center}
.kpi .k b{display:block;font-size:15.5px;color:var(--ink);font-weight:800}
.kpi .k span{font-size:10.5px;color:var(--muted);font-weight:600}
/* ---------- listas ---------- */
.item{display:flex;gap:12px;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item .emoji{
  width:42px;height:42px;border-radius:13px;flex:none;font-size:21px;
  background:var(--p100);display:flex;align-items:center;justify-content:center;
}
.item .t{flex:1;min-width:0}
.item .t b{display:block;font-size:14.5px;font-weight:600}
.item .t span{font-size:12.5px;color:var(--muted)}
.pill{font-size:11px;font-weight:700;padding:5px 11px;border-radius:99px;background:var(--p100);color:var(--p700);white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.rojo{background:var(--bad-bg);color:var(--bad)}
.check{
  width:30px;height:30px;border-radius:50%;border:2px solid var(--line);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;
  cursor:pointer;background:#fff;color:transparent;transition:all .15s ease;
}
.check.hecho{background:var(--ok);border-color:var(--ok);color:#fff}
/* ---------- formularios ---------- */
label.f{display:block;margin:12px 0 5px;font-size:13px;font-weight:700;color:var(--ink)}
input,select,textarea{
  width:100%;padding:12px;border:1.5px solid var(--line);border-radius:12px;
  font-size:15px;font-family:inherit;background:#fff;color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--p500);box-shadow:0 0 0 3px rgba(35,121,226,.12)}
textarea{resize:vertical;min-height:70px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2>*{min-width:0}
.grid2 input{max-width:100%}
.stepper{display:flex;align-items:center;gap:16px;justify-content:center;margin:10px 0}
.stepper button{
  width:50px;height:50px;border-radius:50%;border:0;background:var(--p100);
  color:var(--p700);font-size:24px;font-weight:700;cursor:pointer;
}
.stepper button:active{transform:scale(.94)}
.stepper b{font-size:27px;color:var(--ink);min-width:112px;text-align:center;font-weight:800}
.stepper b[onclick]{border-bottom:2px dashed var(--p500);padding-bottom:2px;cursor:pointer}
.stepper b small{font-size:14px;color:var(--muted);font-weight:500}
.seg{display:inline-flex;background:var(--p050);border:1px solid var(--line);border-radius:99px;padding:3px;gap:2px}
.seg button{
  border:0;background:transparent;color:var(--muted);font-weight:700;font-size:13px;
  padding:7px 16px;border-radius:99px;cursor:pointer;font-family:inherit;
}
.seg button.on{background:#fff;color:var(--p700);box-shadow:var(--sombra-sm)}
/* ---------- hoja inferior ---------- */
.sheet-back{position:fixed;inset:0;background:rgba(23,42,77,.45);z-index:50;display:none;align-items:flex-end;justify-content:center}
.sheet-back.open{display:flex}
.sheet{
  background:#fff;width:100%;max-width:560px;max-height:88vh;overflow:auto;
  border-radius:22px 22px 0 0;padding:20px 18px calc(22px + env(safe-area-inset-bottom));
  animation:sube .25s ease;
}
@keyframes sube{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet h2{margin:0 0 8px;font-size:18px;color:var(--ink);font-weight:800}
/* ---------- avisos ---------- */
#toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(92px + env(safe-area-inset-bottom));z-index:60;
  background:#172a4d;color:#fff;padding:12px 20px;border-radius:14px;
  font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .3s;
  max-width:90%;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25);
}
#toast.show{opacity:1}
.aviso{background:var(--p050);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:12.5px;color:#3c5a86;line-height:1.55;margin-bottom:12px}
.alerta{background:#fff8ea;border:1px solid #f3ddae}
.alerta h2{color:#8a5a00}
.vacio{text-align:center;color:var(--muted);padding:24px 10px;font-size:14px}
.vacio .big{font-size:38px;display:block;margin-bottom:8px;opacity:.85}
/* ---------- gráficas ---------- */
.graf{width:100%;height:150px;background:var(--p050);border:1px solid var(--line);border-radius:12px}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 2px;border-bottom:1px solid var(--line);font-size:13.5px;gap:8px}
.stat-row:last-child{border-bottom:0}
.stat-row b{color:var(--p700);font-weight:700;white-space:nowrap}
.barra{height:8px;border-radius:99px;background:var(--p100);overflow:hidden;margin-top:5px}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--p600),#7db4f2);border-radius:99px}
/* ---------- tarjetas de doctor ---------- */
.doc-card{border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px;background:#fff}
.doc-card b{font-size:15px;color:var(--ink);font-weight:700}
.doc-card .esp{font-size:12.5px;color:var(--muted);margin:3px 0 8px}
.doc-card a{color:var(--p600);text-decoration:none;font-weight:700}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
/* ---------- consejos ---------- */
.consejo{border-left:3px solid var(--p500);padding:2px 0 2px 12px;margin:14px 0}
.consejo b{display:block;font-size:14px;color:var(--ink);margin-bottom:3px;font-weight:700}
.consejo p{margin:0;font-size:13.5px;color:var(--ink);line-height:1.55}
/* ---------- fotos ---------- */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gfoto{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--p100)}
.gfoto img{width:100%;aspect-ratio:1;object-fit:cover;display:block;cursor:pointer}
.gfoto .et{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 7px;font-size:10.5px;font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(10,20,40,.72));text-align:center}
.gfoto .x{position:absolute;top:5px;right:5px;width:27px;height:27px;border-radius:50%;border:0;background:rgba(10,20,40,.55);color:#fff;font-size:13px;cursor:pointer;line-height:1}
/* fotos dentro de las notas del pediatra */
.fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.fotos>div{position:relative}
.fotos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--line);cursor:pointer;display:block;background:var(--p050)}
.fotos .x{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(10,20,40,.55);color:#fff;font-size:13px;cursor:pointer;line-height:1}
/* ---------- festejo de meta ---------- */
#fiesta{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:0;transition:opacity .4s;display:flex;align-items:center;justify-content:center;background:rgba(23,42,77,.22)}
#fiesta.show{opacity:1;pointer-events:auto}
#fiesta canvas{position:absolute;inset:0}
#fiesta .cohete{font-size:88px;z-index:2;animation:despega 3.8s ease-in forwards;filter:drop-shadow(0 10px 14px rgba(0,0,0,.25))}
@keyframes despega{0%{transform:translateY(58vh) rotate(-10deg)}60%{transform:translateY(-6vh) rotate(8deg)}100%{transform:translateY(-72vh) rotate(-6deg);opacity:0}}
#fiesta .msg{position:absolute;z-index:3;top:34%;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sombra);padding:18px 26px;text-align:center;font-size:21px;font-weight:800;animation:rebote .6s ease}
#fiesta .msg span{display:block;font-size:14px;font-weight:400;color:var(--muted);margin-top:6px}
@keyframes rebote{0%{transform:scale(.5)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
/* ---------- modo oscuro ---------- */
body.noche{
  color-scheme:dark;
  --p500:#5ea1f2; --p600:#7db4f7; --p700:#bcd7ff;
  --p100:#22345f; --p050:#1a2547;
  --ink:#e9eefb; --muted:#96a2c6; --line:#2a3763;
  --card:#17203d; --bg1:#0c1330; --bg2:#0a0f28;
  --ok:#4fd68d; --ok-bg:#1d4433;
  --warn:#f0b45e; --warn-bg:#4a3a1e;
  --bad:#ff8f8f; --bad-bg:#4e2b30;
  --lila:#a89cff; --lila-bg:#2e2a5e;
  --rosa:#f09ab8; --rosa-bg:#4c2a3c;
  --sombra:0 2px 10px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.3);
  --sombra-sm:0 1px 4px rgba(0,0,0,.4);
}
body.noche .appbar{background:linear-gradient(135deg,#12295e 0%,#1d4a9e 100%);box-shadow:0 4px 18px rgba(0,0,0,.4)}
body.noche .tabbar{background:rgba(14,20,44,.96)}
body.noche .vtarjeta{background:var(--card)}
body.noche .seg button.on{background:#2c3a6b;color:#fff;box-shadow:none}
body.noche .kpi .k{background:var(--p050)}
body.noche .stepper button{background:var(--p100);color:var(--p700)}
body.noche .btn.sec{background:var(--p100)}
body.noche .btn.sec:active{background:#2a3c6e}
body.noche .sheet{background:#17203d}
body.noche .sheet-back{background:rgba(4,7,18,.7)}
body.noche #toast{background:#e9eefb;color:#17203d}
body.noche input,body.noche select,body.noche textarea{background:#1f2a52;border-color:var(--line);color:var(--ink)}
body.noche .check{background:#1f2a52}
body.noche .graf{background:var(--p050)}
body.noche .doc-card{background:var(--card)}
body.noche .aviso{background:var(--p050);color:#b9c6ea}
body.noche .anillo circle:first-child{stroke:#22345f}

/* ===== versión mejorada (copia de prueba): percentiles OMS, saltos, juegos, hitos ===== */
.tabbar button{font-size:10px}
.copiapill{display:inline-block;background:#fde68a;color:#92400e;border-radius:999px;padding:4px 12px;font-weight:800;font-size:12.5px}
.pctpill{display:inline-block;background:#e8f2fe;color:#1753a6;border-radius:999px;padding:5px 12px;font-weight:700;font-size:13px;margin-top:8px}
.pctnota{font-size:12px;color:var(--muted);margin-top:4px}
.bandas{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px;-webkit-overflow-scrolling:touch}
.bandas button{flex:0 0 auto;border:1px solid var(--line);background:var(--card);color:inherit;border-radius:999px;padding:8px 13px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.bandas button.on{background:var(--p500);border-color:var(--p500);color:#fff}
.bandas button small{display:block;font-size:10.5px;font-weight:600;opacity:.8}
.ejer{border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-top:10px}
.ejer h3{margin:0 0 2px;font-size:15.5px}
.ejer .dur{font-size:12.5px;color:var(--p600);font-weight:700}
.ejer p{margin:6px 0 0;font-size:14px;line-height:1.45}
.ejer .para{color:var(--muted);font-size:13px}
.hitosgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hitocard{border:1px solid var(--line);border-radius:16px;padding:10px;background:var(--card);position:relative}
.hitocard img.foto{width:100%;height:110px;object-fit:cover;border-radius:12px;display:block;cursor:pointer}
.hitocard .ph{height:110px;border-radius:12px;background:var(--p050);display:flex;align-items:center;justify-content:center;font-size:34px}
.hitocard b{display:block;margin-top:8px;font-size:14.5px;line-height:1.3}
.hitocard .fec{font-size:12.5px;color:var(--muted)}
.hitocard .nota{font-size:13px;margin-top:4px;line-height:1.4}
.hitocard.pend{opacity:.8;border-style:dashed}
.hitocard .x{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;font-size:12px;cursor:pointer}
.tlrow{display:flex;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line)}
.tlrow:last-child{border-bottom:0}
.tldot{flex:0 0 auto;width:14px;height:14px;border-radius:50%;margin-top:3px;background:#cbd5e1}
.tldot.pasado{background:#3ebb7a}
.tldot.actual{background:var(--p500);box-shadow:0 0 0 4px var(--p100)}
.tldot.proximo{background:#f0a03c}
.salto-bloque{margin-top:8px;font-size:14px;line-height:1.5}
.salto-bloque b{color:var(--p600)}
.etag{display:inline-block;font-size:11px;font-weight:800;border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:middle}
.etag.pasado{background:#dcf5e5;color:#157347}
.etag.actual{background:var(--p500);color:#fff}
.etag.proximo{background:#fdeeda;color:#9a6206}
body.noche .pctpill{background:#22305a;color:#bcd7fb}
body.noche .copiapill{background:#57451a;color:#fde68a}
body.noche .hitocard .ph{background:#22305a}
body.noche .ejer .dur{color:#9cc2f5}
body.noche .salto-bloque b{color:#9cc2f5}
body.noche .etag.pasado{background:#173d2a;color:#7fe0a8}
body.noche .etag.proximo{background:#4d3a12;color:#ffd166}