/* Lucas · Edición familiar — tema pastel claro (siempre claro) */
:root{
  --azul:#5aa9e6; --azul-osc:#2f7fb8; --azul-claro:#e3f3fe;
  --melocoton:#ffe6cb; --melocoton-osc:#c97e2e;
  --menta:#d9f5e3; --menta-osc:#1e8a52;
  --lila:#eae4fc; --lila-osc:#6a5acd;
  --rosa:#ffe4ec; --rosa-osc:#c24a6d;
  --card:#ffffff; --ink:#33475c; --muted:#7d93a8;
  --linea:#e7f0f8; --ok:#3ebb7a; --warn:#f0a03c; --rojo:#ef6b6b;
  --radio:20px; --sombra:0 6px 20px rgba(90,169,230,.13);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{color-scheme:light}
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,#fff8ee 0%,#eef7ff 60%,#e9f4ff 100%);
  background-attachment:fixed;
  color:var(--ink);
  padding-bottom:calc(78px + env(safe-area-inset-bottom));
}
/* ---- cielo animado ---- */
.cielo{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sol{position:absolute;top:64px;right:-24px;font-size:92px;opacity:.5;animation:girasol 48s linear infinite}
@keyframes girasol{to{transform:rotate(360deg)}}
.nube{position:absolute;font-size:64px;opacity:.45;animation:deriva linear infinite;will-change:transform}
.n1{top:110px;animation-duration:80s;font-size:72px}
.n2{top:230px;animation-duration:115s;font-size:46px;animation-delay:-45s;opacity:.35}
.n3{top:40px;animation-duration:98s;font-size:54px;animation-delay:-70s;opacity:.4}
@keyframes deriva{from{transform:translateX(-140px)}to{transform:translateX(115vw)}}
main{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:14px 14px 8px}
.appbar{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(135deg,#8ecdf3,#b9a7f2);
  color:#fff; padding:calc(10px + env(safe-area-inset-top)) 16px 14px;
  display:flex; align-items:center; gap:12px;
  border-radius:0 0 24px 24px; box-shadow:var(--sombra);
}
.appbar img{width:46px;height:46px;border-radius:14px;background:#fff}
.appbar h1{font-size:19px;margin:0}
.appbar p{margin:2px 0 0;font-size:12.5px;opacity:.95}
.syncpill{
  font-size:11px;font-weight:700;padding:5px 10px;border-radius:99px;white-space:nowrap;
  background:rgba(255,255,255,.35);color:#fff;
}
.syncpill.ok{background:#d9f5e3;color:#1e8a52}
.syncpill.off{background:rgba(255,255,255,.35);color:#fff}
.syncpill.sync{background:#fff3d6;color:#a35c00;animation:parpadeo 1.2s ease infinite}
@keyframes parpadeo{50%{opacity:.5}}
.view{display:none;animation:aparece .25s ease}
.view.active{display:block}
@keyframes aparece{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card{
  background:var(--card);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:16px;margin-bottom:12px;border:1px solid #eef4fb;
  animation:aparece .3s ease;
}
.card h2{font-size:16px;margin:0 0 10px;color:var(--azul-osc)}
.card h3{font-size:14px;margin:14px 0 8px;color:var(--azul-osc)}
.muted{color:var(--muted);font-size:13px}
.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.crece{flex:1}
/* ---- de un vistazo ---- */
.vistazo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vtarjeta{
  border:0;border-radius:16px;padding:14px 12px;text-align:left;cursor:pointer;
  font-family:inherit;display:flex;flex-direction:column;gap:4px;
  transition:transform .15s ease; animation:aparece .35s ease;
}
.vtarjeta:active{transform:scale(.96)}
.vtarjeta .ve{font-size:26px}
.vtarjeta b{font-size:15px;color:var(--ink)}
.vtarjeta span{font-size:11.5px;color:var(--muted)}
.vtarjeta.c1{background:var(--azul-claro)}
.vtarjeta.c2{background:var(--melocoton)}
.vtarjeta.c3{background:var(--menta)}
.vtarjeta.c4{background:var(--lila)}
.vtarjeta.c5{background:var(--rosa);grid-column:1/-1;flex-direction:row;align-items:center;gap:12px}
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--linea);
  display:flex;padding:6px 2px calc(8px + env(safe-area-inset-bottom));
}
.tabbar button{
  flex:1;border:0;background:none;color:var(--muted);
  font-size:10.5px;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 0;cursor:pointer;font-family:inherit;min-width:0;
}
.tabbar button .ico{font-size:21px}
.tabbar button.active{color:var(--azul-osc);font-weight:700}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--azul);color:#fff;border:0;border-radius:14px;
  padding:13px 18px;font-size:15px;font-weight:700;cursor:pointer;
  font-family:inherit;width:100%;
}
.btn:active{transform:scale(.98);background:var(--azul-osc)}
.btn.sec{background:var(--azul-claro);color:var(--azul-osc)}
.btn.warn{background:var(--melocoton);color:var(--melocoton-osc)}
.btn.danger{background:#fdecec;color:var(--rojo)}
.btn.sm{width:auto;padding:9px 14px;font-size:13.5px;border-radius:12px}
.anillo{position:relative;width:120px;height:120px;margin:4px 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:20px;color:var(--azul-osc)}
.anillo .txt span{font-size:11px;color:var(--muted)}
.kpi{display:flex;gap:10px;margin-top:10px}
.kpi .k{flex:1;background:var(--azul-claro);border-radius:14px;padding:10px;text-align:center}
.kpi .k b{display:block;font-size:16px;color:var(--azul-osc)}
.kpi .k span{font-size:11px;color:var(--muted)}
.item{
  display:flex;gap:12px;align-items:center;padding:11px 4px;
  border-bottom:1px solid var(--linea);
}
.item:last-child{border-bottom:0}
.item .emoji{font-size:26px}
.item .t{flex:1}
.item .t b{display:block;font-size:14.5px}
.item .t span{font-size:12.5px;color:var(--muted)}
.pill{
  font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;
  background:var(--azul-claro);color:var(--azul-osc);white-space:nowrap;
}
.pill.ok{background:var(--menta);color:var(--menta-osc)}
.pill.warn{background:#fff1d9;color:#a35c00}
.pill.rojo{background:#fde7e7;color:#b4232a}
label.f{display:block;margin:10px 0 4px;font-size:13px;font-weight:600;color:var(--azul-osc)}
input,select,textarea{
  width:100%;padding:12px;border:1.5px solid var(--linea);border-radius:12px;
  font-size:15px;font-family:inherit;background:#fdfeff;color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul)}
textarea{resize:vertical;min-height:64px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stepper{display:flex;align-items:center;gap:14px;justify-content:center;margin:8px 0}
.stepper button{
  width:48px;height:48px;border-radius:50%;border:0;background:var(--azul-claro);
  color:var(--azul-osc);font-size:24px;font-weight:700;cursor:pointer;
}
.stepper b{font-size:26px;color:var(--azul-osc);min-width:110px;text-align:center}
.stepper b small{font-size:14px;color:var(--muted);font-weight:400}
/* interruptor oz / ml */
.seg{display:inline-flex;background:var(--azul-claro);border-radius:99px;padding:3px;gap:2px}
.seg button{
  border:0;background:transparent;color:var(--azul-osc);font-weight:700;font-size:13px;
  padding:7px 16px;border-radius:99px;cursor:pointer;font-family:inherit;
}
.seg button.on{background:#fff;box-shadow:0 2px 6px rgba(47,127,184,.18)}
.sheet-back{
  position:fixed;inset:0;background:rgba(60,80,110,.4);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:24px 24px 0 0;padding:18px 18px calc(20px + 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 6px;font-size:18px;color:var(--azul-osc)}
#toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(90px + env(safe-area-inset-bottom));z-index:60;
  background:#33475c;color:#fff;padding:12px 18px;border-radius:14px;
  font-size:14px;opacity:0;pointer-events:none;transition:opacity .3s;
  max-width:90%;text-align:center;
}
#toast.show{opacity:1}
.alerta{background:#fff8e8;border:1px solid #ffe1a8}
.alerta h2{color:#a35c00}
.check{
  width:30px;height:30px;border-radius:50%;border:2px solid var(--linea);
  display:flex;align-items:center;justify-content:center;font-size:16px;
  cursor:pointer;flex:none;background:#fff;
}
.check.hecho{background:var(--ok);border-color:var(--ok);color:#fff}
.graf{width:100%;height:150px;background:#fdfeff;border:1px solid var(--linea);border-radius:12px}
.consejo{border-left:4px solid var(--azul);padding:4px 0 4px 12px;margin:12px 0}
.consejo b{display:block;font-size:14px;color:var(--azul-osc);margin-bottom:3px}
.consejo p{margin:0;font-size:13.5px;color:var(--ink);line-height:1.5}
.aviso{
  background:var(--azul-claro);border:1px solid #c9e6fb;border-radius:14px;
  padding:12px;font-size:12.5px;color:#34507a;line-height:1.5;margin-bottom:12px;
}
.doc-card{border:1px solid var(--linea);border-radius:14px;padding:12px;margin-bottom:10px;background:#fdfeff}
.doc-card b{font-size:15px;color:var(--azul-osc)}
.doc-card .esp{font-size:12.5px;color:var(--muted);margin:2px 0 8px}
.doc-card a{color:var(--azul-osc);text-decoration:none;font-weight:600}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.vacio{text-align:center;color:var(--muted);padding:22px 10px;font-size:14px}
.vacio .big{font-size:40px;display:block;margin-bottom:8px}
.mini{font-size:12px;color:var(--muted)}
.mt{margin-top:10px}.mb{margin-bottom:10px}
/* fotos de notas del pediatra */
.fotos{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.fotos img{width:76px;height:76px;object-fit:cover;border-radius:12px;border:1px solid var(--linea);cursor:pointer}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 2px;border-bottom:1px solid var(--linea);font-size:13.5px}
.stat-row:last-child{border-bottom:0}
.stat-row b{color:var(--azul-osc)}
.barra{height:8px;border-radius:99px;background:var(--azul-claro);overflow:hidden;margin-top:4px}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--azul),#9fd0f5);border-radius:99px}