:root, [data-theme="light"] {
  --bg:#f7f6f2; --card:#ffffff; --border:#e0ded8;
  --primary:#01696f; --primary-dk:#0c4e54; --primary-hi:#eef5f4;
  --text:#262522; --muted:#7a7974; --soft:#f1efea; --soft-2:#faf9f7;
  --warn:#9a5a00; --warn-bg:#fff5e8;
  --error:#8f2d2d; --error-bg:#fef2f2;
  --success:#437a22; --success-bg:#f0f7eb;
  --shadow:0 2px 12px rgba(0,0,0,0.07);
  --radius:14px; --radius-sm:8px;
}
[data-theme="night"] {
  --bg:#06060a; --card:#0d0d14; --border:#1a1a24;
  --primary:#2a6070; --primary-dk:#3a7a8a; --primary-hi:#0f2530;
  --text:#c6c7d4; --muted:#8e90a8; --soft:#0a0a10; --soft-2:#0d0d14;
  --warn:#c79a4e; --warn-bg:#120d02;
  --error:#d98a8a; --error-bg:#120508;
  --success:#7bbf7f; --success-bg:#0a120a;
  --shadow:0 2px 12px rgba(0,0,0,0.6);
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:none; text-size-adjust:none; scroll-behavior:smooth; }
body { font-family:'Inter',system-ui,sans-serif; font-size:15px; background:var(--bg); color:var(--text); min-height:100dvh; transition:background .3s,color .3s; }
input,select,button { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:none; }
table { border-collapse:collapse; width:100%; }

.app { max-width:760px; margin:0 auto; padding:3.2rem 0 5rem; }
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; margin:0 .75rem .85rem; box-shadow:var(--shadow); }
.card-wide {
  max-width:calc(100vw - 1.5rem);
  width:100%;
  margin-left:calc(50% - 50vw + .75rem);
  margin-right:calc(50% - 50vw + .75rem);
}
@media (min-width:768px){
  .card-wide { max-width:calc(760px - 1.5rem); margin-left:auto; margin-right:auto; }
}
.app-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; gap:.5rem;
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:var(--card); border-bottom:1px solid var(--border);
  box-shadow:0 1px 8px rgba(0,0,0,.06);
}
.header-brand { display:flex; align-items:center; gap:.55rem; min-width:0; position:relative; cursor:pointer; }
.header-brand-switchable { cursor:pointer; }
.header-logo { font-size:1.4rem; line-height:1; flex-shrink:0; }
.header-titles { min-width:0; }
.header-switch { font-size:.9rem; color:var(--muted); flex-shrink:0; margin-left:.1rem; transition:transform .2s; }
.header-brand.bebe-menu-open .header-switch { transform:rotate(180deg); }
/* Menú de bebé desplegable */
.bebe-menu { display:none; position:absolute; top:calc(100% + .4rem); left:0; z-index:1002; min-width:200px; max-width:280px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:.4rem 0; animation:dropIn .15s ease; }
.bebe-menu.open { display:block; }
.bebe-menu-list { padding:.2rem 0; border-bottom:1px solid var(--border); }
.bebe-menu-item { display:flex; align-items:center; gap:.55rem; width:100%; padding:.55rem 1rem; border:none; background:none; color:var(--text); font-size:.86rem; font-weight:500; cursor:pointer; text-align:left; }
.bebe-menu-item:hover { background:var(--soft); }
.bebe-menu-item.active { color:var(--primary); font-weight:700; }
.bebe-menu-item.danger { color:var(--error); }
.bebe-menu-item.danger:hover { background:var(--error-bg); }
.bebe-menu-actions { padding:.2rem 0; }
.app-header h1 { font-size:1rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-header p { font-size:.7rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.header-actions { display:flex; align-items:center; gap:.3rem; flex-shrink:0; }

/* ── Botón de tema ── */
.theme-btn {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  font-size:1rem; border-radius:50%; transition:background .2s; color:var(--muted);
  border:1px solid transparent;
}
.theme-btn:hover { background:var(--soft); border-color:var(--border); }

/* ── Avatar + menú ── */
.avatar-wrap { position:relative; }
.avatar-btn {
  width:36px; height:36px; border-radius:50%;
  background:var(--primary); color:#fff;
  font-size:.85rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--primary-dk);
  transition:box-shadow .2s, transform .15s;
  cursor:pointer; flex-shrink:0;
}
.avatar-btn:hover { box-shadow:0 0 0 3px var(--primary-hi); transform:scale(1.05); }
.avatar-btn:active { transform:scale(.96); }

/* ── Dropdown ── */
.avatar-dropdown {
  display:none; position:fixed; right:.75rem; top:60px;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 8px 32px rgba(0,0,0,.18);
  min-width:220px; z-index:1001; overflow:hidden;
  animation:dropIn .18s ease;
}
@keyframes dropIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.avatar-dropdown.open { display:block; }
.dropdown-header {
  padding:.85rem 1rem .6rem; border-bottom:1px solid var(--border);
  background:var(--soft); border-radius:var(--radius) var(--radius) 0 0;
}
.dropdown-email { font-size:.78rem; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dropdown-role { font-size:.68rem; color:var(--muted); margin-top:.1rem; }
.dropdown-section { padding:.4rem 0; border-bottom:1px solid var(--border); }
.dropdown-section:last-child { border-bottom:none; }
.dropdown-item {
  display:flex; align-items:center; gap:.65rem;
  width:100%; padding:.6rem 1rem; text-align:left;
  font-size:.85rem; font-weight:500; color:var(--text);
  background:none; border:none; cursor:pointer;
  transition:background .12s;
}
.dropdown-item:hover { background:var(--soft); }
.dropdown-item .di-icon { font-size:1rem; width:20px; text-align:center; flex-shrink:0; }
.dropdown-item .di-label { flex:1; }
.dropdown-item .di-badge { font-size:.68rem; background:var(--primary-hi); color:var(--primary); padding:.1rem .45rem; border-radius:999px; font-weight:700; }
.dropdown-item.danger { color:var(--error); }
.dropdown-item.danger:hover { background:var(--error-bg); }
.dropdown-theme-row {
  display:flex; align-items:center; padding:.55rem 1rem; gap:.65rem;
  font-size:.85rem; font-weight:500; color:var(--text);
}
.dropdown-theme-row .di-icon { font-size:1rem; width:20px; text-align:center; flex-shrink:0; }
.theme-toggle-pill {
  margin-left:auto; display:flex; background:var(--soft); border-radius:999px;
  border:1px solid var(--border); overflow:hidden;
}
.theme-pill-btn {
  padding:.25rem .55rem; font-size:.78rem; border:none; background:none; cursor:pointer;
  color:var(--muted); transition:background .15s, color .15s; border-radius:999px;
}
.theme-pill-btn.active { background:var(--primary); color:#fff; }

.section-title { font-size:1rem; font-weight:700; margin-bottom:.75rem; }
.toolbar { display:flex; align-items:flex-end; gap:.75rem; flex-wrap:wrap; }
.quick-days { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.4rem; }
.quick-day { font-size:.78rem; padding:.3rem .7rem; border-radius:999px; background:var(--soft); color:var(--muted); font-weight:600; transition:background .15s,color .15s; }
.quick-day:hover { background:var(--primary-hi); color:var(--primary); }
.quick-day.active { background:var(--primary); color:#fff; }
.status-pill { font-size:.73rem; font-weight:700; padding:.2rem .55rem; border-radius:999px; white-space:nowrap; }
.pill-ok    { background:var(--success-bg); color:var(--success); }
.pill-warn  { background:var(--warn-bg); color:var(--warn); }
.pill-error { background:var(--error-bg); color:var(--error); }

.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
/* "Configuración del día": en escritorio, las 4 casillas en una sola línea.
   En móvil (≤600px) sigue la regla de .grid-3 (2 columnas). */
@media (min-width:601px){
  .grid-config { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; }
}
.field label { display:block; font-size:.78rem; font-weight:600; color:var(--muted); margin-bottom:.3rem; }
.field .field-hint { font-size:.7rem; color:var(--muted); margin-top:.2rem; font-style:italic; }
input[type="time"],input[type="number"],input[type="date"],select {
  width:100%; padding:.5rem .6rem; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--card); color:var(--text); font-size:.9rem; -webkit-appearance:none;
}
/* ── Inputs de hora ──
   · En "Configuración del día" (.field) NO se tocan: usan el estilo
     general de arriba (ancho completo, misma altura que selects/números)
     para que todas las casillas de la sección se vean iguales.
   · En tablas (siestas) y filas de tomas son compactos (reglas más abajo).
   · El icono nativo del reloj se muestra en ESCRITORIO; solo se oculta en
     móvil (≤600px), donde además se colapsa el hueco que deja. */
table input[type="time"],
.feeding-row input[type="time"] {
  -webkit-appearance:auto;
  appearance:auto;
}
input:focus,select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-hi); }
.btn { display:inline-flex; align-items:center; gap:.35rem; font-weight:700; font-size:.85rem; padding:.55rem 1.1rem; border-radius:999px; transition:background .15s,transform .1s; }
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dk); }
.btn-secondary { background:var(--soft); color:var(--text); border:1px solid var(--border); }
.btn-group { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem; }
.save-bar { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }

/* Countdown */
.countdown-card { display:flex; align-items:center; gap:.75rem; background:var(--primary-hi); border:1px solid var(--border); border-radius:12px; padding:.85rem 1rem; }
.countdown-icon { font-size:1.4rem; flex-shrink:0; }
.countdown-label { font-size:.72rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.countdown-time { font-size:1.5rem; font-weight:800; color:var(--primary); line-height:1.1; font-variant-numeric:tabular-nums; }
.countdown-time.late { color:var(--error); }
.countdown-time.soon { color:var(--warn); }
.countdown-nap-name { font-size:.8rem; color:var(--text); font-weight:600; margin-top:.1rem; }
.countdown-empty { font-size:.85rem; color:var(--muted); }

/* Anillo de progreso del contador (#12) */
.countdown-ring { position:relative; width:58px; height:58px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.countdown-ring svg { transform:rotate(-90deg); display:block; }
.countdown-ring .ring-bg { fill:none; stroke:var(--border); stroke-width:5; }
.countdown-ring .ring-fg { fill:none; stroke:var(--primary); stroke-width:5; stroke-linecap:round; transition:stroke-dashoffset .5s linear, stroke .3s; }
.countdown-ring.soon .ring-fg { stroke:var(--warn); }
.countdown-ring.late .ring-fg { stroke:var(--error); }
.countdown-ring-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.35rem; }

/* ── Panel principal (hero) · vistazo rápido ──
   Sube la fecha, los días rápidos y los dos temporizadores (siesta y
   última toma) a lo más alto para que el padre lo vea de un golpe,
   sobre todo en móvil. */
.hero-card { padding:.75rem 1rem .85rem; }
.hero-daybar { display:flex; align-items:flex-end; justify-content:space-between; gap:.75rem; }
.hero-date { flex:1; min-width:0; }
.hero-date label { display:block; font-size:.7rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.3rem; }
.hero-date input[type="date"] { width:100%; }
.hero-daybar .status-pill { margin-bottom:.18rem; flex-shrink:0; }

/* Dos temporizadores compactos, siempre uno al lado del otro (también en
   móvil), bien diferenciados por color de fondo + franja de acento. */
.hero-timers { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-top:.55rem; }
/* Si uno de los dos tiles queda vacío (oculto), el visible ocupa todo el
   ancho para no dejar un hueco al lado. */
.hero-timers:has(> .hero-timer:empty) { grid-template-columns:1fr; }
/* Si ambos quedan vacíos, la sección desaparece por completo (sin margen
   ni altura). */
.hero-timers:has(> .hero-timer-sleep:empty):has(> .hero-timer-feed:empty) { display:none; }

.hero-timer {
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:14px;
  padding:.75rem .55rem;
  position:relative; overflow:hidden;
  transition:background .3s;
}
/* Franja de acento a la izquierda: sueño (teal) vs. toma (ámbar). */
.hero-timer::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; }
.hero-timer-sleep { background:var(--primary-hi); }
.hero-timer-sleep::before { background:var(--primary); }
.hero-timer-feed { background:var(--warn-bg); }
.hero-timer-feed::before { background:var(--warn); }

/* La tarjeta interna (la pinta el JS) pasa a disposición vertical y
   centrada para caber en la mitad del ancho incluso en móvil. */
.hero-timer .countdown-card {
  background:transparent; border:none; padding:0; width:100%;
  flex-direction:column; align-items:center; text-align:center; gap:.3rem;
}
.hero-timer .countdown-label { font-size:.62rem; letter-spacing:.03em; }
.hero-timer .countdown-time { font-size:1.3rem; }
.hero-timer .countdown-nap-name { font-size:.7rem; line-height:1.25; margin-top:0; }

/* Indicador "+ toma" en el hero-card de tomas */
.countdown-add-hint {
  font-size:.6rem;
  font-weight:700;
  color:var(--primary);
  opacity:.7;
  margin-top:.15rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
/* Badge de ml del día dentro del hero-card de tomas */
.countdown-ml-badge {
  font-size:.7rem;
  font-weight:800;
  color:var(--warn);
  background:var(--soft-2);
  border:1px solid var(--border);
  border-radius:6px;
  padding:.15rem .45rem;
  margin-top:.1rem;
  white-space:nowrap;
}
.hero-timer-feed { -webkit-tap-highlight-color:transparent; }
.hero-timer .countdown-icon { font-size:1.7rem; line-height:1; }

/* Anillo de progreso compacto dentro del tile. */
.hero-timer .countdown-ring,
.hero-timer .countdown-ring svg { width:48px; height:48px; }
.hero-timer .countdown-ring-icon { font-size:1.05rem; }

/* Detalle secundario: en móvil solo la franja/hora principal; la parte
   extra (referencias) aparece en pantallas más anchas. */
.hero-timer .ct-extra { display:none; }

.hero-timer .countdown-empty { margin:auto; text-align:center; font-size:.78rem; }
/* Al ver un día que no es hoy, el temporizador de tomas se vacía: ocultamos
   el tile para no dejar un recuadro en blanco. */
.hero-timer:empty { display:none; }

@media (min-width:560px){
  .hero-timers { gap:.65rem; }
  .hero-timer { padding:.9rem .8rem; }
  .hero-timer .countdown-label { font-size:.68rem; letter-spacing:.05em; }
  .hero-timer .countdown-time { font-size:1.5rem; }
  .hero-timer .countdown-nap-name { font-size:.76rem; }
  .hero-timer .countdown-icon { font-size:2rem; }
  .hero-timer .countdown-ring,
  .hero-timer .countdown-ring svg { width:56px; height:56px; }
  .hero-timer .countdown-ring-icon { font-size:1.3rem; }
  .hero-timer .ct-extra { display:inline; }
}

.hero-foot { display:flex; justify-content:flex-end; margin-top:.8rem; }

/* Banner de bienvenida para usuarios sin bebé */
.empty-bebe-banner { display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; background:var(--primary-hi); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; margin:0 .75rem .85rem; box-shadow:var(--shadow); }
.empty-bebe-emoji { font-size:2rem; line-height:1; flex-shrink:0; }
.empty-bebe-text { flex:1; min-width:150px; display:flex; flex-direction:column; gap:.15rem; }
.empty-bebe-text strong { font-size:1rem; color:var(--primary); }
.empty-bebe-text span { font-size:.82rem; color:var(--text); line-height:1.35; }
.empty-bebe-banner .btn { flex-shrink:0; }
@media (max-width:600px){ .empty-bebe-banner .btn { width:100%; justify-content:center; } }

/* Table */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-sm); }
table th { font-size:.72rem; font-weight:700; color:var(--muted); padding:.4rem .5rem; text-align:left; border-bottom:2px solid var(--border); white-space:nowrap; text-transform:uppercase; letter-spacing:.04em; }
table td { font-size:.82rem; padding:.45rem .5rem; border-bottom:1px solid var(--border); vertical-align:top; }
table tr:last-child td { border-bottom:none; }
table tr.special-row td { color:var(--muted); font-style:italic; }
/* Inputs de hora dentro de tablas (siestas).
   Escritorio: ancho automático para que quepa "hh:mm" + icono nativo. */
table input[type="time"] {
  font-size:.82rem;
  width:auto;
  min-width:0;
  padding:.3rem .4rem;
}

/* Row colors */
tr.row-ok   { background:rgba(67,122,34,0.07); }
tr.row-warn { background:rgba(154,90,0,0.08); }
tr.row-bad  { background:rgba(143,45,45,0.07); }
[data-theme="night"] tr.row-ok  { background:rgba(42,80,32,0.22); }
[data-theme="night"] tr.row-warn{ background:rgba(138,96,32,0.22); }
[data-theme="night"] tr.row-bad { background:rgba(106,32,48,0.22); }

.cell-main { font-weight:600; }
.status-check { margin-top:.18rem; font-size:.72rem; font-weight:700; display:block; }
.status-check-ok   { color:var(--success); }
.status-check-warn { color:var(--warn); }
.status-check-bad  { color:var(--error); }

/* Summary */
.summary-main { font-size:.98rem; font-weight:700; margin-bottom:.3rem; }
.muted { color:var(--muted); font-size:.88rem; }
.progress-bar-wrap { background:var(--soft); border-radius:999px; height:8px; margin:.5rem 0 .25rem; overflow:hidden; }
.progress-bar-fill { height:100%; border-radius:999px; background:var(--primary); transition:width .4s; }

/* Settings */
.settings-table th { font-size:.72rem; }
.settings-table td { font-size:.8rem; padding:.3rem .4rem; }
.settings-table input { padding:.25rem .35rem; font-size:.78rem; }

/* ── Config de siestas (nap-cfg) — CSS Grid, NO tabla ──────────────
   3 columnas: label flexible + 2 columnas fijas para los inputs.
   minmax(0,1fr) en la 1ª columna → matemáticamente imposible desbordar,
   porque el mínimo es 0 y el contenido se recorta con ellipsis.        */
.nap-cfg {
  margin-top:.6rem;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  border:1px solid var(--border);
  border-radius:var(--radius-sm,6px);
  overflow:hidden;
}

/* Grid compartido por cabecera y filas.
   Padding vertical mínimo → filas compactas, tabla poco alta. */
.nap-cfg-head,
.nap-cfg-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) 4.1rem 4.1rem;
  align-items:center;
  gap:.4rem;
  padding:.12rem .5rem;
  box-sizing:border-box;
}
.nap-cfg-head { padding-top:.3rem; padding-bottom:.3rem; }

/* Cabecera */
.nap-cfg-head {
  background:var(--bg,#f7f6f2);
  border-bottom:1px solid var(--border);
  font-size:.64rem;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.nap-cfg-head > span:not(.nap-cfg-head-label) { text-align:center; }

/* Filas */
.nap-cfg-row + .nap-cfg-row { border-top:1px solid var(--border); }
.nap-cfg-row-edge   { background:var(--bg,#f7f6f2); }
.nap-cfg-row-window { background:color-mix(in oklab, var(--primary) 7%, var(--card)); }
.nap-cfg-row-nap    { background:var(--card); }

/* Celda de etiqueta: etiqueta + valor de referencia en dos líneas */
.nap-cfg-labelcell {
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* Etiqueta: se recorta con ellipsis si no cabe */
.nap-cfg-label {
  font-size:.74rem;
  font-weight:600;
  line-height:1.3;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
}

/* Valor de referencia pediátrico de la fila */
.nap-cfg-ref {
  font-size:.62rem;
  line-height:1.25;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nap-cfg-hideref .nap-cfg-ref { display:none; }

/* Conmutador para mostrar/ocultar la referencia */
.nap-cfg-showref {
  display:flex;
  align-items:center;
  gap:.45rem;
  margin:0 0 .7rem;
  font-size:.75rem;
  color:var(--muted);
  cursor:pointer;
}
.nap-cfg-showref input { width:16px; height:16px; accent-color:var(--primary); flex-shrink:0; }

/* Leyenda de orígenes: muestras con el mismo marco que los inputs */
.nap-cfg-legend {
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .8rem;
  margin-top:.65rem;
  font-size:.68rem;
  color:var(--muted);
}
.nap-cfg-legend > span { display:inline-flex; align-items:center; gap:.3rem; }
.nap-cfg-legend i {
  display:inline-block;
  width:16px; height:12px;
  border-radius:3px;
  border:2px solid var(--border);
  background:var(--card);
  flex-shrink:0;
}
.nap-cfg-legend i.nap-cfg-input-ref {
  border-color:var(--muted);
  background:color-mix(in oklab, var(--muted) 8%, var(--card));
}
.nap-cfg-legend i.nap-cfg-input-auto {
  border-color:var(--primary);
  background:color-mix(in oklab, var(--primary) 10%, var(--card));
}
.nap-cfg-legend i.nap-cfg-input-user {
  border-color:#e67e22;
  background:color-mix(in oklab, #e67e22 10%, var(--card));
}
.nap-cfg-row-window .nap-cfg-label { color:var(--primary); }
.nap-cfg-row-edge   .nap-cfg-label { color:var(--muted); }

/* Inputs numéricos: ocupan exactamente su columna.
   line-height:1.1 + padding reducido → filas bajas. */
.nap-cfg-input {
  display:block;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  text-align:center;
  padding:.22rem .15rem;
  margin:.18rem 0;
  font-size:.76rem;
  line-height:1.15;
  border:1px solid var(--border);
  border-radius:var(--radius-sm,6px);
  background:var(--card);
  color:var(--text);
  -moz-appearance:textfield;
  appearance:textfield;
}
.nap-cfg-input::-webkit-outer-spin-button,
.nap-cfg-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.nap-cfg-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-hi); }

/* ── Origen del valor: marco de color del input ──────────────────────
   Mín y máx se evalúan por separado.

   Tres decisiones defensivas, porque marcar inputs es frágil:
   1. Van DESPUÉS de .nap-cfg-input: esta usa el atajo `border:`, que incluye
      border-color, y con la misma especificidad gana la última del archivo.
   2. Se cualifican con .nap-cfg-row (0,2,0) para no depender solo del orden.
   3. Además del borde se usa un anillo `box-shadow:inset` y un fondo teñido:
      en iOS el appearance nativo de input[type=number] puede ignorar el
      border-color, mientras que box-shadow y background siempre se pintan.  */
.nap-cfg-row .nap-cfg-input-ref,
.nap-cfg-row .nap-cfg-input-auto,
.nap-cfg-row .nap-cfg-input-user { border-style:solid; border-width:2px; }

.nap-cfg-row .nap-cfg-input-ref {
  border-color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--muted);
  background:color-mix(in oklab, var(--muted) 8%, var(--card));
}
.nap-cfg-row .nap-cfg-input-auto {
  border-color:var(--primary);
  box-shadow:inset 0 0 0 1px var(--primary);
  background:color-mix(in oklab, var(--primary) 10%, var(--card));
}
.nap-cfg-row .nap-cfg-input-user {
  border-color:#e67e22;
  box-shadow:inset 0 0 0 1px #e67e22;
  background:color-mix(in oklab, #e67e22 10%, var(--card));
}

/* El foco manda mientras se escribe */
.nap-cfg-row .nap-cfg-input:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 2px var(--primary-hi);
}

.nap-cfg-dash { text-align:center; color:var(--muted); font-size:.72rem; }

/* Selector de grupo dentro del modal */
.nap-cfg-group {
  display:flex;
  flex-direction:column;
  gap:.3rem;
  padding:.7rem .8rem;
  margin-bottom:.85rem;
  background:var(--bg,#f7f6f2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm,6px);
}
.nap-cfg-group > label {
  font-size:.74rem;
  font-weight:600;
  color:var(--muted);
}
.nap-cfg-group > select {
  width:100%;
  box-sizing:border-box;
  padding:.45rem .6rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--text);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm,6px);
}
.nap-cfg-group > select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-hi); }
.nap-cfg-group-note {
  font-size:.68rem;
  color:var(--muted);
  line-height:1.4;
}

/* Hint dentro del modal */
.nap-cfg-hint {
  font-size:.76rem;
  color:var(--muted);
  line-height:1.45;
  margin:0 0 .85rem;
}
.nap-cfg-hint strong { color:var(--text); }

/* Botón de ajustes en la cabecera de la sección de siestas */
.btn-icon-settings {
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  flex-shrink:0;
  padding:.35rem .7rem;
  font-size:.78rem;
  font-weight:600;
  color:var(--muted);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm,6px);
  cursor:pointer;
  transition:border-color .15s, color .15s;
  white-space:nowrap;
}
.btn-icon-settings:hover { border-color:var(--primary); color:var(--primary); }
.btn-icon-settings:active { transform:scale(.97); }
@media (max-width:400px){
  .btn-icon-settings-txt { display:none; }
  .btn-icon-settings { padding:.35rem .5rem; }
}

@media (max-width:360px){
  .nap-cfg-head, .nap-cfg-row { grid-template-columns:minmax(0,1fr) 3.5rem 3.5rem; gap:.3rem; padding:.1rem .4rem; }
  .nap-cfg-head { padding-top:.28rem; padding-bottom:.28rem; }
  .nap-cfg-label { font-size:.7rem; }
  .nap-cfg-input { font-size:.72rem; padding:.2rem .1rem; }
}

/* Nota de siesta */
.nap-note-input{width:100%;min-width:70px;max-width:140px;padding:.25rem .4rem;font-size:.76rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);}
.nap-note-input::placeholder{color:var(--muted);font-style:italic;}

/* Nota del día (#6) */
.day-note-input{width:100%;padding:.6rem .7rem;font-size:.9rem;line-height:1.4;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);resize:vertical;min-height:2.6rem;font-family:inherit;}
.day-note-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-hi);}
.day-note-input::placeholder{color:var(--muted);font-style:italic;}

/* Timeline */
.timeline-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.timeline-svg-container { min-width:300px; width:100%; }
.timeline-legend { display:flex; gap:.85rem; flex-wrap:wrap; font-size:.72rem; color:var(--muted); margin-top:.5rem; }
.timeline-legends-combined { display:flex; flex-direction:column; gap:.35rem; margin-top:.6rem; }
.timeline-legends-combined .timeline-legend { margin-top:0; }
.legend-dot { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:3px; vertical-align:middle; }
/* Muestra de línea discontinua (p.ej. la media diaria de ml) */
.legend-dash { display:inline-block; width:14px; height:0; border-top:2px dashed currentColor; opacity:.6; margin-right:4px; vertical-align:middle; }
.timeline-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.85rem; }
.timeline-head-icon { font-size:1.15rem; width:34px; height:34px; border-radius:10px; background:var(--primary-hi); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.timeline-sub-label { font-size:.76rem; font-weight:700; color:var(--muted); margin:0 0 .3rem; }
.legend-dash { display:inline-block; width:14px; border-bottom:2px dashed var(--muted); margin-right:4px; vertical-align:middle; opacity:.7; }

/* Recent */
.recent-list { display:flex; flex-direction:column; gap:.5rem; }
.recent-item { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.6rem .75rem; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; transition:background .15s; }
.recent-item:hover { background:var(--soft); }
.recent-main { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.recent-title { font-weight:700; font-size:.9rem; }
details summary { cursor:pointer; font-size:.82rem; font-weight:700; color:var(--muted); padding:.3rem 0; user-select:none; }
details[open] summary { color:var(--primary); }

/* ── Esquema explicativo del cálculo de siestas (ajustes avanzados) ── */
.nap-settings-explainer{background:var(--soft-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem .85rem;margin-top:.55rem;}
.nap-settings-explainer-text{font-size:.78rem;color:var(--text);line-height:1.5;margin-bottom:.65rem;}
.nap-settings-explainer-text strong{color:var(--primary);}
.nap-flow{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem;margin-bottom:.65rem;}
.nap-flow-node{background:var(--primary-hi);color:var(--primary-dk);font-weight:700;font-size:.72rem;padding:.28rem .55rem;border-radius:999px;border:1px solid var(--primary);white-space:nowrap;}
.nap-flow-node-bed{background:var(--primary);color:#fff;}
.nap-flow-arrow{font-size:.68rem;color:var(--muted);font-weight:700;white-space:nowrap;}
.nap-settings-explainer-example{font-size:.72rem;color:var(--muted);line-height:1.5;font-style:italic;margin:0;}
.nap-settings-explainer-example strong{color:var(--text);font-style:normal;}
.empty-state { padding:1.1rem; border:1px dashed var(--border); border-radius:var(--radius-sm); color:var(--muted); text-align:center; font-size:.88rem; }
.footer-note { margin-top:.5rem; font-size:.78rem; color:var(--muted); }
.bedtime-estimated { font-size:.75rem; color:var(--primary); font-weight:600; margin-top:.2rem; display:block; }
.bedtime-recommended { font-size:.7rem; color:var(--muted); display:block; margin-top:.15rem; }
.bedtime-recommended.bedtime-warn { color:#e67e22; font-weight:600; }

/* Siestas móvil: tarjetas ocultas por defecto (desktop) */
.naps-cards-mobile { display:none; }

@media (max-width:600px) {
  .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card { margin:0 .4rem .65rem; padding:.85rem; }
  table { min-width:660px; }

  /* Siestas: en móvil ocultar la tabla y mostrar las tarjetas verticales
     (ahora controlado por el @media max-width:1024px más abajo) */

  /* Móvil: ocultar el icono del reloj y colapsar su hueco en tablas
     (siestas) y filas de tomas. En escritorio el icono permanece visible.
     Los inputs de "Configuración del día" (.field) NO se ven afectados. */
  table input[type="time"],
  .feeding-row input[type="time"] {
    -webkit-appearance:none;
    appearance:none;
  }
  table input[type="time"]::-webkit-calendar-picker-indicator,
  .feeding-row input[type="time"]::-webkit-calendar-picker-indicator {
    display:none; -webkit-appearance:none; appearance:none;
    width:0; margin:0; padding:0;
  }
  table input[type="time"]::-webkit-date-and-time-value,
  .feeding-row input[type="time"]::-webkit-date-and-time-value {
    margin:0; min-width:0;
  }
  table input[type="time"]::-webkit-datetime-edit,
  .feeding-row input[type="time"]::-webkit-datetime-edit {
    padding:0;
  }
  /* Tabla de siestas: ancho compacto en móvil (sin icono) */
  table input[type="time"] {
    width:56px; min-width:56px; max-width:56px;
    padding:.3rem .25rem;
  }
}
@media (max-width:380px) {
  h1 { font-size:1.05rem; }
  .btn { font-size:.82rem; padding:.5rem .8rem; }
}

/* ── Auth overlay ──
   FIX (flash de login): empieza OCULTO por defecto. Se muestra solo desde
   JS (js/auth.js) en cuanto se confirma que no hay sesión activa. Antes
   tenía display:flex fijo, así que se veía siempre unos instantes al
   arrancar la PWA, incluso cuando ya había sesión guardada. */
#authOverlay{position:fixed;inset:0;z-index:9999;background:var(--bg);display:none;align-items:center;justify-content:center;padding:1.5rem;}
.auth-box{width:100%;max-width:380px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 1.75rem;box-shadow:var(--shadow);}
.auth-logo{font-size:2rem;text-align:center;margin-bottom:.5rem;}
.auth-title{font-size:1.2rem;font-weight:800;text-align:center;margin-bottom:.25rem;}
.auth-sub{font-size:.8rem;color:var(--muted);text-align:center;margin-bottom:1.5rem;}
.auth-field{margin-bottom:1rem;}
.auth-field label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:.3rem;}
.auth-field input{width:100%;padding:.55rem .7rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font-size:.95rem;}
.auth-field input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-hi);}
.auth-btn{width:100%;padding:.65rem;background:var(--primary);color:#fff;font-weight:700;font-size:.95rem;border-radius:999px;margin-top:.5rem;border:none;cursor:pointer;transition:background .15s;}
.auth-btn:hover{background:var(--primary-dk);}
.auth-msg{font-size:.8rem;text-align:center;margin-top:.75rem;min-height:1.2em;}
.auth-msg.error{color:var(--error);}
.auth-msg.ok{color:var(--success);}
.auth-links{display:flex;justify-content:center;gap:1rem;margin-top:1rem;font-size:.8rem;}
.auth-links button{color:var(--primary);font-size:.8rem;text-decoration:underline;background:none;border:none;cursor:pointer;}

/* ── Splash de carga inicial (evita el flash del login) ──
   Visible desde el primer pintado del HTML (sin depender de JS/CSS
   adicional) y se oculta desde js/auth.js en cuanto se resuelve el
   estado real de sesión (con o sin usuario). */
#appSplash{position:fixed;inset:0;z-index:10001;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.6rem;}
#appSplash .splash-logo{font-size:2.6rem;animation:splashPulse 1.3s ease-in-out infinite;}
@keyframes splashPulse{0%,100%{opacity:.5;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}

/* ── Selector de bebé ── */
.bebe-bar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.65rem 1.1rem;border-bottom:1px solid var(--border);background:var(--soft-2);}
.bebe-select{flex:1;min-width:120px;padding:.4rem .6rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font-size:.85rem;font-weight:600;}
.bebe-select:focus{outline:none;border-color:var(--primary);}
.btn-bebe-new{font-size:.8rem;padding:.35rem .8rem;border-radius:999px;background:var(--primary);color:#fff;font-weight:700;white-space:nowrap;}
.btn-bebe-new:hover{background:var(--primary-dk);}

/* ── Modal base reutilizable ── */
/* Cuando un modal está abierto, bloquear el scroll del body (evita que los
   toques atraviesen al contenido de detrás en móvil). La clase se añade/quita
   desde JS al abrir/cerrar cualquier modal. El JS (en bebes.js) previene
   touchmove en el body cuando hay un modal abierto. */
body.modal-open{overflow:hidden;}
.modal-back{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:1.25rem;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.modal-back.open{display:flex;}
.modal-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;width:100%;max-width:360px;box-shadow:var(--shadow);position:relative;max-height:88vh;max-height:88dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.modal-box.modal-box-nap-cfg { max-width:600px; }
@media (max-width:480px){ .modal-back{padding:.75rem;align-items:center;} .modal-box{padding:1.15rem 1rem;} }
.mas-medidas-scroll{max-height:220px;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:.3rem;padding-right:.15rem;}
.growth-actions{margin-top:.7rem;display:flex;justify-content:center;}
.mas-bebe-info{margin:.2rem 0 .7rem;}
.mas-medir-hint{font-size:.72rem;color:var(--warn);font-weight:600;margin-top:.5rem;line-height:1.4;}
.mas-bebe-name{font-size:1.05rem;font-weight:800;color:var(--text);margin-bottom:.4rem;}
.mas-bebe-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.25rem .6rem;font-size:.8rem;color:var(--muted);}
.mas-bebe-grid2 strong{color:var(--text);font-weight:700;}
.mas-bebe-btns{display:flex;gap:.5rem;flex-wrap:wrap;}
.mas-bebe-btns .btn{flex:1;justify-content:center;min-width:130px;}
.medidas-pager{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:.6rem;font-size:.78rem;color:var(--muted);}
.medidas-pg{width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:var(--soft-2);color:var(--text);font-size:1.1rem;line-height:1;cursor:pointer;}
.medidas-pg:disabled{opacity:.4;cursor:default;}
.growth-sub-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.growth-expand{font-size:.72rem;font-weight:700;color:var(--primary);background:var(--primary-hi);border:none;border-radius:999px;padding:.28rem .7rem;cursor:pointer;white-space:nowrap;}
.growth-zoom-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;width:96vw;max-width:900px;max-height:92vh;overflow:auto;box-shadow:var(--shadow);touch-action:pan-x pan-y;}
.growth-zoom-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.6rem;}
.growth-zoom-tabs{display:flex;gap:.4rem;}
.growth-zoom-tab{padding:.4rem .85rem;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--text);font-size:.82rem;cursor:pointer;}
.growth-zoom-tab.active{border-color:var(--primary);background:var(--primary-hi);color:var(--primary);font-weight:700;}
.growth-zoom-ctrls{display:flex;align-items:center;gap:.4rem;}
.growth-zoom-ctrl{width:42px;height:42px;border:1px solid var(--border);border-radius:10px;background:var(--soft-2);color:var(--text);font-size:1.4rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.growth-zoom-ctrl:hover{background:var(--soft);}
/* Botón ✕ del modal de zoom: igual que los controles +/- pero con aspecto de cierre */
#btnCloseGrowthZoom{position:relative;width:42px;height:42px;border:1px solid var(--border);border-radius:10px;background:var(--soft-2);color:var(--muted);font-size:1.2rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
#btnCloseGrowthZoom:hover{background:var(--error-bg);color:var(--error);border-color:var(--error);}
#btnCloseGrowthZoom::after{content:'';position:absolute;inset:-6px;}
.growth-zoom-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:10px;background:var(--card);}
.growth-zoom-scroll svg{display:block;}
.growth-zoom-hint{font-size:.72rem;color:var(--muted);text-align:center;margin:.5rem 0 0;}
.modal-close{position:absolute;top:.75rem;right:.75rem;font-size:1.2rem;color:var(--muted);background:none;border:none;cursor:pointer;line-height:1;}
.modal-close::after{content:'';position:absolute;inset:-12px;}
.modal-title{font-size:1rem;font-weight:800;color:var(--primary);margin-bottom:1.1rem;}
.modal-form{display:flex;flex-direction:column;gap:.75rem;}
.modal-form input{padding:.5rem .65rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font-size:.88rem;}
.modal-msg{font-size:.8rem;min-height:1.2em;}
.modal-msg.error{color:var(--error);}
.modal-msg.ok{color:var(--success);}

/* ── Lista de miembros ── */
.member-list{display:flex;flex-direction:column;gap:.4rem;margin:.75rem 0;}
.member-item{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:.35rem;font-size:.82rem;padding:.45rem .5rem;border-radius:var(--radius-sm);background:var(--soft);}
.member-name{font-weight:600;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.member-badge{font-size:.72rem;color:var(--muted);white-space:nowrap;}
.member-select{font-size:.72rem;padding:.2rem .3rem;border:1px solid var(--border);border-radius:var(--radius-sm,6px);background:var(--card);color:var(--text);max-width:8rem;}
.member-select:focus{outline:none;border-color:var(--primary);}
.btn-remove{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--error);font-size:.85rem;cursor:pointer;border-radius:50%;flex-shrink:0;}
.btn-remove:hover{background:var(--error-bg);}

/* bebe-bar integrado en dropdown */
.bebe-select-wrap { display:flex; align-items:center; gap:.5rem; }
.bebe-icon { font-size:1rem; }
.bebe-select {
  flex:1; padding:.42rem .65rem; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--soft); color:var(--text); font-size:.84rem; font-weight:600;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%237a7974' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6rem center;
  padding-right:1.8rem; cursor:pointer;
}
.bebe-select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-hi); }

/* ── Scroll fix mobile ── */
.app { padding-bottom:6rem; }
@media (max-width:600px) {
  .app-header { padding:.6rem .85rem; }
  .header-titles h1 { font-size:.92rem; }
  .avatar-dropdown { right:.5rem; min-width:200px; }
  .card { margin:0 .5rem .75rem; padding:.9rem; }
  .bebe-bar { padding:.5rem .85rem; }
}

/* ── Bottom nav / FAB área segura ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .app { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}

/* ── Admin modal ── */
.admin-form { display:flex; flex-direction:column; gap:.75rem; }
.admin-form input { padding:.5rem .65rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); color:var(--text); font-size:.88rem; }
.admin-msg { font-size:.8rem; min-height:1.2em; }
.admin-msg.error { color:var(--error); }
.admin-msg.ok { color:var(--success); }

/* ── Panel de administración ── */
.admin-section-title { font-size:.9rem; font-weight:700; color:var(--text); margin:1.35rem 0 .5rem; display:flex; align-items:center; gap:.4rem; }
.admin-count { font-size:.75rem; font-weight:600; color:var(--muted); }
.admin-empty { color:var(--muted); font-size:.82rem; padding:.3rem 0; }
.admin-error { color:var(--error); font-size:.82rem; padding:.3rem 0; }
.admin-row { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.55rem 0; border-bottom:1px solid var(--border); }
.admin-row:last-child { border-bottom:none; }
.admin-row-main { min-width:0; flex:1; }
.admin-row-title { font-size:.85rem; font-weight:600; color:var(--text); display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; word-break:break-word; }
.admin-row-sub { font-size:.72rem; color:var(--muted); margin-top:.12rem; word-break:break-word; }
.admin-you { font-size:.72rem; color:var(--muted); font-style:italic; }
.admin-badge { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:.1rem .4rem; border-radius:999px; background:var(--primary-hi); color:var(--primary); white-space:nowrap; }
.admin-badge.ok { background:var(--success-bg); color:var(--success); }
.admin-badge.warn { background:var(--warn-bg); color:var(--warn); }
.admin-badge.bad { background:var(--error-bg); color:var(--error); }
.admin-bebe-inactive { opacity:.7; border-left:3px solid var(--error); padding-left:.5rem; }
.admin-actions { display:flex; gap:.35rem; flex-shrink:0; }
.admin-act { font-size:.72rem; font-weight:600; padding:.3rem .55rem; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--soft); color:var(--text); cursor:pointer; white-space:nowrap; min-height:32px; }
.admin-act:hover { background:var(--primary-hi); }
.admin-act.danger { color:var(--error); border-color:var(--error-bg); }
.admin-act.danger:hover { background:var(--error-bg); }
.admin-act:disabled { opacity:.5; cursor:default; }

/* Bebés dentro del panel de administración */
.admin-addbebe { margin-bottom:.6rem; }
.admin-addbebe-form { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
.admin-addbebe-form input, .admin-addbebe-form select { flex:1; min-width:110px; padding:.4rem .5rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); color:var(--text); font-size:.82rem; }
.admin-bebe { border:1px solid var(--border); border-radius:var(--radius-sm); padding:.55rem .7rem; margin-bottom:.6rem; }
.admin-bebe .admin-row { padding:0 0 .35rem; border-bottom:none; }
.admin-members { border-top:1px dashed var(--border); padding-top:.4rem; display:flex; flex-direction:column; gap:.4rem; }
.admin-member { display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.8rem; }
.admin-member-name { min-width:0; word-break:break-word; display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.admin-member-actions { display:flex; align-items:center; gap:.3rem; flex-shrink:0; }
.admin-rolesel { padding:.25rem .3rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); color:var(--text); font-size:.72rem; }
.admin-addmember { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.15rem; }
/* El desplegable de usuario ocupa toda la fila para que se vea el nombre
   completo; el rol y el botón van debajo. */
.admin-addmember-user { flex:1 1 100%; min-width:0; max-width:100%; padding:.45rem .5rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); color:var(--text); font-size:.82rem; }
.admin-addmember-rol { flex:0 0 auto; padding:.45rem .3rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); color:var(--text); font-size:.78rem; }
.admin-addmember .admin-act { flex:1 1 auto; }

/* Panel de administración: más grande y con más aire en móvil (cuesta
   gestionarlo en pantallas pequeñas con el tamaño de escritorio). */
@media (max-width:600px){
  /* Hoja a pantalla completa: usa dvh (altura real del viewport, descontando
     la barra del navegador) para que la parte de abajo (Bebés) no se corte.
     El contenido hace scroll dentro y se respeta el área segura inferior. */
  #adminModal { padding:0 !important; align-items:stretch !important; }
  #adminModal > div {
    width:100% !important; max-width:100% !important;
    height:100dvh !important; max-height:100dvh !important;
    border-radius:0 !important;
    padding:1rem .9rem calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  .admin-act { min-height:38px; padding:.4rem .6rem; }
  .admin-rolesel { min-height:34px; }
}

/* ════════════════════════════════
   Feedings (tomas)
   Layout fila: hora | icono-tipo | [ml bibe] | meta | borrar
   Altura uniforme de celdas: 28px
════════════════════════════════ */
.feedings-card .section-sub{font-size:.74rem;color:var(--muted);margin-top:-.3rem;margin-bottom:.55rem;}
.feeding-list{display:flex;flex-direction:column;gap:.28rem;}

/* Escritorio: columna de hora ancha (92px) para que quepa "hh:mm" + el
   icono nativo del reloj. En móvil se estrecha (bloque @media de abajo). */
.feeding-row{
  display:grid;
  grid-template-columns: 92px 28px 0px minmax(0,1fr) 28px 28px;
  gap:.3rem;
  align-items:center;
  padding:.28rem .4rem;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--soft-2);
  transition:grid-template-columns .18s;
}
.feeding-row:has(.feeding-ml-wrap:not(.feeding-ml-hidden)){
  grid-template-columns: 92px 28px 84px minmax(0,1fr) 28px 28px;
}

/* Hora — ocupa toda su columna. En escritorio muestra el icono nativo;
   en móvil se oculta (bloque @media de abajo). */
.feeding-row input[type=time]{
  height:28px;
  width:100%;
  min-width:0;
  max-width:none;
  font-size:.82rem;
  padding:.24rem .18rem;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--card);
  color:var(--text);
  box-sizing:border-box;
}

/* Tipo — mismo alto que hora, ancho fijo igual */
.feeding-type-wrap{
  position:relative;
  width:28px;
  height:28px;
  flex-shrink:0;
}
.feeding-type-icon{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;
  pointer-events:none;
  border:1.5px solid var(--primary);
  border-radius:var(--radius-sm);
  background:var(--primary-hi);
}
.feeding-type-select{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;}
/* Fórmula (🥛): recuadro ámbar para distinguir de bibe materna (🍼 teal) */
.feeding-type-icon.ft-formula{
  border-color:var(--warn);
  background:var(--warn-bg);
}

/* Campo ml — ancho 84px para caber «999 ml» */
.feeding-ml-wrap{
  display:flex;
  align-items:center;
  height:28px;
  overflow:hidden;
  border:1.5px solid var(--primary);
  border-radius:var(--radius-sm);
  background:var(--primary-hi);
  width:84px;
  opacity:1;
  transition:opacity .18s, width .18s;
  flex-shrink:0;
}
.feeding-ml-wrap.feeding-ml-hidden{
  width:0;
  opacity:0;
  border-width:0;
  pointer-events:none;
}
.feeding-ml-input{
  flex:1;
  min-width:0;
  height:100%;
  padding:0 .15rem 0 .3rem;
  font-size:.82rem;
  font-weight:600;
  border:none;
  background:transparent;
  color:var(--text);
  text-align:right;
  -moz-appearance:textfield;
  outline:none;
}
.feeding-ml-input::-webkit-outer-spin-button,
.feeding-ml-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.feeding-ml-input:focus{outline:none;}
.feeding-ml-unit{
  flex-shrink:0;
  font-size:.82rem;
  font-weight:600;
  color:var(--primary-dk);
  padding:0 .3rem 0 .1rem;
  line-height:1;
  pointer-events:none;
  user-select:none;
}
.feeding-ml-wrap:focus-within{
  border-color:var(--primary-dk);
  box-shadow:0 0 0 3px var(--primary-hi);
}
/* ml de fórmula: recuadro ámbar a juego con el icono 🥛 */
.feeding-ml-wrap.ml-formula{
  border-color:var(--warn);
  background:var(--warn-bg);
}
.feeding-ml-wrap.ml-formula .feeding-ml-unit{
  color:var(--warn);
}

.feeding-remove{width:28px;height:28px;border-radius:999px;color:var(--error);font-size:.85rem;display:flex;align-items:center;justify-content:center;position:relative;}
/* Ampliar área táctil a ~44px sin cambiar el tamaño visual (#10) */
.feeding-remove::after{content:'';position:absolute;inset:-9px;}
.feeding-remove:hover{background:var(--error-bg);}

/* Botón de comentario por toma (💬). Atenuado cuando la toma no tiene
   comentario; resaltado (.has-note) con fondo + anillo cuando sí lo tiene. */
.feeding-note-btn{width:28px;height:28px;border-radius:999px;font-size:.8rem;display:flex;align-items:center;justify-content:center;position:relative;background:none;border:none;cursor:pointer;opacity:.45;transition:opacity .15s,background .15s,box-shadow .15s;}
.feeding-note-btn::after{content:'';position:absolute;inset:-9px;}
.feeding-note-btn:hover{opacity:1;background:var(--soft);}
.feeding-note-btn.has-note{opacity:1;background:var(--primary-hi);box-shadow:0 0 0 1.5px var(--primary) inset;}

/* Textarea del modal de comentario */
.feeding-note-textarea{width:100%;box-sizing:border-box;padding:.55rem .65rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font-size:.88rem;font-family:inherit;line-height:1.4;resize:vertical;min-height:84px;}
.feeding-note-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-hi);}
.feeding-actions{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.45rem;}
.feeding-empty{padding:.6rem;border:1px dashed var(--border);border-radius:var(--radius-sm);color:var(--muted);text-align:center;font-size:.8rem;background:var(--soft-2);}
.feeding-meta{min-width:0;display:flex;flex-direction:column;line-height:1.1;justify-content:center;gap:.05rem;}
.feeding-meta-duration{font-size:.76rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.feeding-meta-from{font-size:.64rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.feeding-meta-empty .feeding-meta-duration{color:var(--muted);font-weight:600;}

/* Móvil ≤600px — bloque único consolidado */
@media (max-width:600px){
  .feeding-row{
    grid-template-columns: 50px 28px 0px minmax(0,1fr) 26px 26px;
    gap:.2rem;
    padding:.24rem .28rem;
  }
  .feeding-row:has(.feeding-ml-wrap:not(.feeding-ml-hidden)){
    grid-template-columns: 50px 28px 80px minmax(0,1fr) 26px 26px;
  }
  /* Ancho fijo igual en todas las filas, sin hueco de icono */
  .feeding-row input[type="time"]{
    width:100%;
    min-width:0;
    max-width:none;
    padding:.24rem .12rem;
  }
  .feeding-ml-wrap{ width:80px; }
  .feeding-remove{ width:26px; height:26px; }
  .feeding-note-btn{ width:26px; height:26px; }
}

/* ════════════════════════════════
   Página de Estadísticas
════════════════════════════════ */
/* Stats integrado como panel de pestaña (ya no es un overlay a pantalla
   completa: la visibilidad la controla .tab-panel.active). */
.stats-panel{display:block;}
.stats-range-bar{padding:0 .75rem .5rem;}
/* Un poco de aire arriba en todas las pestañas (no pegado a la cabecera) */
.tab-panel{padding-top:.6rem;}
.stats-custom-range{display:flex;align-items:center;gap:.5rem;margin-top:.6rem;flex-wrap:wrap;}
.stats-custom-range input{padding:.4rem .55rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font-size:.82rem;}
.stats-custom-range span{color:var(--muted);}
#statsBody{padding-bottom:1rem;position:relative;}

.stats-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;}
.stats-summary-card{background:var(--soft-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem .55rem;text-align:center;}
.stats-summary-icon{font-size:1.15rem;margin-bottom:.15rem;}
.stats-summary-value{font-size:1.15rem;font-weight:800;color:var(--primary);line-height:1.1;}
.stats-summary-label{font-size:.66rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-top:.15rem;}
.stats-summary-hint{font-size:.63rem;color:var(--muted);margin-top:.25rem;min-height:1.4em;}

.stats-subtitle{font-size:.85rem;font-weight:700;color:var(--text);margin:1rem 0 .5rem;}
.stats-growth-note{font-size:.78rem;color:var(--text);background:var(--soft-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .6rem;margin:0 0 .6rem;line-height:1.4;}
.stats-growth-note .growth-disc{color:var(--muted);font-size:.72rem;}
.stats-feeding-dist{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;}
.stats-donut-legend{display:flex;flex-direction:column;gap:.4rem;font-size:.82rem;}
.stats-donut-legend-item{display:flex;align-items:center;gap:.4rem;}

/* Totales de ml por tipo de biberón (materna vs fórmula) */
.stats-feeding-ml{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem;margin-top:1rem;}
.stats-ml-card{background:var(--soft-2);border:1px solid var(--border);border-left-width:4px;border-radius:var(--radius-sm);padding:.6rem .7rem;}
.stats-ml-label{font-size:.72rem;font-weight:700;color:var(--text);}
.stats-ml-value{font-size:1.35rem;font-weight:800;color:var(--primary);line-height:1.15;}
.stats-ml-value span{font-size:.7rem;font-weight:700;color:var(--muted);}
.stats-ml-hint{font-size:.66rem;color:var(--muted);margin-top:.15rem;}
.stats-ml-day-note{color:var(--muted);font-size:.68rem;}

@media (max-width:600px){
  .stats-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}



/* ── Sección de medicamentos ── */
.meds-card .section-sub{font-size:.74rem;color:var(--muted);margin-top:-.3rem;margin-bottom:.55rem;}
.meds-list{display:flex;flex-direction:column;gap:.35rem;}
.meds-empty{font-size:.82rem;color:var(--muted);padding:.3rem 0;}
.meds-row{display:grid;grid-template-columns:1fr auto minmax(90px,110px) auto;gap:.35rem;align-items:center;padding:.35rem 0;border-bottom:1px solid var(--border);}
.meds-row:last-child{border-bottom:none;}
.meds-name-select{font-size:.82rem;padding:.35rem .5rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);min-width:0;height:38px;box-sizing:border-box;line-height:1.2;}
/* Hora: ancho fijo suficiente para HH:MM (no se corta) y misma altura que el
   resto; -webkit-appearance:none para que iOS respete la altura del input. */
.meds-time{font-size:.82rem;padding:.35rem .5rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);width:104px;min-width:104px;height:38px;box-sizing:border-box;line-height:1.2;-webkit-appearance:none;appearance:none;}
.meds-dose-wrap{display:flex;align-items:center;gap:0;height:38px;min-width:0;}
.meds-dose-num{font-size:.88rem;padding:.35rem .5rem;border:1px solid var(--border);border-radius:var(--radius-sm) 0 0 var(--radius-sm);background:var(--card);color:var(--text);width:72px;min-width:58px;flex:1;height:38px;box-sizing:border-box;line-height:1.2;-webkit-appearance:none;appearance:none;}
.meds-dose-unit{font-size:.82rem;padding:.35rem .45rem;border:1px solid var(--border);border-left:none;border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--soft-2);color:var(--text);height:38px;box-sizing:border-box;cursor:pointer;}
.meds-interval-wrap{display:flex;align-items:center;gap:.2rem;}
.meds-interval{width:42px;font-size:.82rem;padding:.35rem .3rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);text-align:center;}
.meds-interval-label{font-size:.72rem;color:var(--muted);font-weight:600;}
.meds-del{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--error);background:none;border:1px solid transparent;border-radius:50%;cursor:pointer;transition:background .15s;}
.meds-del:hover{background:var(--error-bg);border-color:var(--error);}
.meds-actions{margin-top:.6rem;}

/* Temporizadores de medicamentos */
.meds-timer-box{display:flex;flex-direction:column;gap:.45rem;margin-bottom:.65rem;}
.meds-timer-card{display:flex;align-items:center;gap:.65rem;border-radius:12px;padding:.7rem .85rem;border:1px solid var(--border);}
.meds-timer-wait{background:var(--warn-bg);}
.meds-timer-ok{background:var(--success-bg);}
.meds-timer-icon{font-size:1.3rem;flex-shrink:0;}
.meds-timer-label{font-size:.72rem;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.03em;}
.meds-timer-time{font-size:1.3rem;font-weight:800;color:var(--warn);line-height:1.1;font-variant-numeric:tabular-nums;}
.meds-timer-status{font-size:.85rem;font-weight:700;color:var(--success);}
.meds-timer-sub{font-size:.72rem;color:var(--muted);margin-top:.1rem;}

@media (max-width:600px){
  .meds-row{grid-template-columns:1fr auto auto;gap:.3rem;}
  .meds-row .meds-name-select{grid-column:1/-1;}
}

/* ── Pautas de medicación ── */
.meds-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;}
.meds-head-row .section-title{margin-bottom:.1rem;}
.med-sched-list{display:flex;flex-direction:column;gap:.6rem;margin-top:.4rem;}
.med-sched-card{border:1px solid var(--border);border-radius:12px;padding:.7rem .8rem;background:var(--soft-2);}
.med-sched-top{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;flex-wrap:wrap;}
.med-sched-title{font-size:.95rem;font-weight:800;color:var(--text);}
.med-sched-bell{font-size:.8rem;}
.med-sched-meta{font-size:.75rem;color:var(--muted);font-weight:600;}
.med-sched-note{font-size:.74rem;color:var(--muted);margin-top:.3rem;font-style:italic;}
.med-sched-timer{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.5rem;border-radius:10px;padding:.5rem .6rem;background:var(--card);border:1px solid var(--border);}
.med-sched-timer .mst-icon{font-size:1.1rem;}
.med-sched-timer .mst-main{font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums;}
.med-sched-timer .mst-sub{font-size:.72rem;color:var(--muted);width:100%;}
.med-sched-timer .mst-muted{font-size:.76rem;color:var(--muted);}
.med-sched-timer.mst-wait{background:var(--warn-bg);}
.med-sched-timer.mst-wait .mst-main{color:var(--warn);}
.med-sched-timer.mst-ok{background:var(--success-bg);}
.med-sched-timer.mst-ok .mst-main{color:var(--success);}
.med-sched-actions{display:flex;align-items:center;gap:.4rem;margin-top:.6rem;}
.med-sched-take{flex:1;justify-content:center;font-size:.82rem;padding:.45rem .8rem;}
.med-sched-icon{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.95rem;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);cursor:pointer;transition:background .15s;}
.med-sched-icon:hover{background:var(--soft);}
.med-sched-icon.danger{color:var(--error);}
.med-sched-icon.danger:hover{background:var(--error-bg);border-color:var(--error);}

/* ── Modal de pauta ── */
.pauta-input{width:100%;padding:.5rem .6rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font-size:.9rem;}
.pauta-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
.pauta-field{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;font-weight:600;color:var(--muted);}
.pauta-hint{font-size:.78rem;color:var(--primary);background:var(--primary-hi);border-radius:var(--radius-sm);padding:.5rem .6rem;line-height:1.4;}
.pauta-disclaimer{font-size:.72rem;color:var(--muted);background:var(--warn-bg);border:1px solid var(--warn);border-radius:var(--radius-sm);padding:.5rem .6rem;line-height:1.35;}
.meds-custom-name{grid-column:1/-1;font-size:.82rem;padding:.35rem .5rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);height:38px;box-sizing:border-box;line-height:1.2;}
.meds-row-incompleta{outline:1px dashed var(--warn);outline-offset:2px;border-radius:6px;}

/* Barra de día de la pestaña Meds */
.meds-datebar{display:flex;align-items:center;gap:.5rem;justify-content:space-between;margin:0 .75rem .7rem;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.4rem .5rem;box-shadow:var(--shadow);}
.meds-nav{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.3rem;line-height:1;border:1px solid var(--border);border-radius:10px;background:var(--soft-2);color:var(--text);cursor:pointer;}
.meds-nav:hover{background:var(--soft);}
.meds-date-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;position:relative;}
.meds-date-label{font-size:.9rem;font-weight:800;color:var(--text);}
.meds-date-input{border:none;background:transparent;color:var(--muted);font-size:.72rem;text-align:center;padding:0;cursor:pointer;}
.day-extra{display:flex;align-items:center;gap:.4rem;margin:0 .75rem .7rem;}
.day-extra .quick-days{margin-top:0; flex:1; gap:.3rem;}
.day-extra .quick-day{font-size:.74rem;padding:.28rem .6rem;}
.day-saved{font-size:.66rem;font-weight:700;white-space:nowrap;margin-left:auto;flex-shrink:0;}
.day-saved.ok{color:var(--success);}
.day-saved.warn{color:var(--warn);}

/* Toggle de notificaciones push (panel Más) */
.push-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.2rem;}
.push-toggle-label{font-size:.88rem;font-weight:600;color:var(--text);}
.push-switch{width:20px;height:20px;flex-shrink:0;cursor:pointer;}
.push-sub-opts{padding-left:.2rem;}
.push-sub-title{font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:.5rem;}
/* Preferencias */
.pref-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.2rem;}
.pref-label{font-size:.88rem;font-weight:600;color:var(--text);}
.pref-select{font-size:.84rem;padding:.4rem .6rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);min-width:0;max-width:160px;}
/* Quick Feed (toma rápida nocturna) */
.quickfeed-box{text-align:center;max-width:320px;}
.quickfeed-icon{font-size:2.8rem;line-height:1;margin-bottom:.2rem;}
.quickfeed-sub{font-size:.82rem;color:var(--muted);margin-bottom:1rem;}
.quickfeed-form{text-align:left;margin-bottom:1rem;}
.quickfeed-btn{width:100%;justify-content:center;font-size:1rem;padding:.75rem 1rem;}
/* Banner de aviso de ventana de sueño (efímero) */
.nap-window-banner{position:fixed;top:0;left:0;right:0;z-index:9000;background:var(--primary);color:#fff;font-size:.88rem;font-weight:600;text-align:center;padding:.7rem 1rem;transform:translateY(-100%);transition:transform .3s ease;pointer-events:none;}
.nap-window-banner.visible{transform:translateY(0);pointer-events:auto;}

/* Modo de frecuencia en el modal de pauta */
.pauta-mode{display:flex;gap:.4rem;}
.pauta-mode-btn{flex:1;padding:.5rem;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font-size:.82rem;cursor:pointer;transition:all .15s;}
.pauta-mode-btn.active{border-color:var(--primary);background:var(--primary-hi);color:var(--primary);font-weight:700;}
.pauta-freq-wrap{margin-top:.2rem;}
.pauta-times{display:flex;flex-direction:column;gap:.4rem;}
.pauta-time-row{display:flex;align-items:center;gap:.5rem;}
.pauta-time-row input[type=time]{flex:1;padding:.45rem .55rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font-size:.9rem;}
.pauta-time-del{width:34px;height:34px;flex-shrink:0;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--error);cursor:pointer;}
.pauta-time-del:hover{background:var(--error-bg);border-color:var(--error);}
.pauta-notify-opts{background:var(--soft-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem;display:flex;flex-direction:column;gap:.4rem;}
.pauta-notify-note{font-size:.7rem;color:var(--muted);line-height:1.35;margin:0;}

/* Banner de recordatorio en-app */
.med-reminder{position:fixed;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom,0px));z-index:400;margin:0 auto;max-width:520px;display:flex;flex-direction:column;gap:.5rem;background:var(--card);border:1px solid var(--primary);border-radius:14px;padding:.75rem .85rem;box-shadow:0 -2px 16px rgba(0,0,0,.18);}
.med-reminder-body{display:flex;align-items:center;gap:.6rem;}
.med-reminder-icon{font-size:1.6rem;}
.med-reminder-title{font-size:.95rem;font-weight:800;color:var(--text);}
.med-reminder-sub{font-size:.78rem;color:var(--muted);}
.med-reminder-actions{display:flex;align-items:center;gap:.5rem;}
.med-reminder-actions .btn{flex:1;justify-content:center;}
.med-reminder-close{width:34px;height:34px;flex-shrink:0;border:1px solid var(--border);border-radius:8px;background:var(--soft-2);color:var(--muted);cursor:pointer;}

/* Selector de sexo (perfil del bebé) */
.sexo-toggle{display:flex;gap:.5rem;}
.sexo-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.55rem .5rem;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font-size:.9rem;cursor:pointer;transition:all .15s;}
.sexo-btn span{font-size:1.15rem;}
.sexo-btn.active{border-color:var(--primary);background:var(--primary-hi);color:var(--primary);font-weight:700;}
.pauta-check{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text);cursor:pointer;}
.pauta-check input{width:18px;height:18px;flex-shrink:0;}

/* ── Panel "Más": datos del bebé + accesos ── */
.mas-baby-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:.5rem;}
.mas-baby-grid .mas-field:first-child{grid-column:1/-1;}
.mas-medidas-list{margin-top:.8rem;display:flex;flex-direction:column;gap:.3rem;}
.mas-medidas-title{font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.15rem;}
.mas-medida-item{display:flex;align-items:center;gap:.5rem;padding:.4rem .55rem;background:var(--soft-2);border:1px solid var(--border);border-radius:10px;font-size:.82rem;}
.mas-medida-fecha{font-weight:700;color:var(--text);min-width:52px;}
.mas-medida-val{flex:1;color:var(--muted);}
.mas-medida-del{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--error);background:none;border:1px solid transparent;border-radius:50%;cursor:pointer;}
.mas-medida-del:hover{background:var(--error-bg);border-color:var(--error);}
.mas-field{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;font-weight:600;color:var(--muted);}
.mas-field input{padding:.5rem .6rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font-size:.95rem;}
.mas-hint{font-size:.74rem;color:var(--muted);margin-top:.5rem;line-height:1.4;}
.mas-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:.3rem;}
.mas-action{display:flex;align-items:center;gap:.45rem;padding:.7rem .75rem;border:1px solid var(--border);border-radius:12px;background:var(--soft-2);color:var(--text);font-size:.85rem;font-weight:600;cursor:pointer;text-align:left;transition:background .15s;}
.mas-action:hover{background:var(--soft);}
.mas-action span{font-size:1.05rem;}
@media (max-width:400px){ .mas-actions-grid{grid-template-columns:1fr;} }


/* ══ BARRA INFERIOR DE PESTAÑAS + PANELES ══ */
.tab-panels { position:relative; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* Red de seguridad contra desbordamiento horizontal: en móvil, si el contenido
   excede el ancho, el layout viewport crece y .tab-bar (position:fixed con
   left:0/right:0) se estira más allá de la pantalla.
   Se usa `clip` y NO `hidden` a propósito: `hidden` convertiría el body en
   contenedor de scroll y rompería el `position:sticky` del <header>.
   Si el navegador no soporta `clip`, ignora la regla (el arreglo real son los
   grids con minmax(0,1fr), esto es solo una salvaguarda). */
body { overflow-x:clip; }

.tab-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:300;
  display:flex; justify-content:space-around; align-items:center;
  background:var(--card); border-top:1px solid var(--border);
  box-shadow:0 -2px 8px rgba(0,0,0,.06);
  padding:.35rem 0 calc(.35rem + env(safe-area-inset-bottom, 0px));
  height:56px;
}
.tab-btn {
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
  background:none; border:none; cursor:pointer;
  color:var(--muted); font-size:.6rem; font-weight:600;
  padding:.25rem .2rem; border-radius:8px;
  transition:color .15s, background .15s;
  flex:1; min-width:0; max-width:84px;
}
.tab-btn .tab-icon { font-size:1.2rem; line-height:1; }
.tab-btn .tab-label { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tab-btn.active { color:var(--primary); }
.tab-btn.active .tab-icon { transform:scale(1.1); }
.tab-btn:hover { background:var(--soft); }

/* Espacio extra al final del contenido para que la barra no tape */
.app { padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px) + 1rem) !important; }

/* ── Modo viewer: toda la interfaz de edición deshabilitada ── */
.app.viewer-mode input:not([type="date"]),
.app.viewer-mode select,
.app.viewer-mode textarea { pointer-events:none; opacity:.6; }
.app.viewer-mode .btn-primary,
.app.viewer-mode .btn-secondary,
.app.viewer-mode .btn-open-medida,
.app.viewer-mode .btn-editar-bebe,
.app.viewer-mode .btn-compartir,
.app.viewer-mode .meds-del,
.app.viewer-mode .mas-medida-del,
.app.viewer-mode .med-sched-take,
.app.viewer-mode #btnAddFeeding,
.app.viewer-mode #btnAddMed { pointer-events:none; opacity:.4; }
.app.viewer-mode .viewer-badge { display:inline-block; }
.viewer-badge { display:none; font-size:.7rem; font-weight:700; padding:.15rem .45rem; border-radius:999px; background:var(--warn-bg); color:var(--warn); margin-left:.5rem; vertical-align:middle; }

/* ── Tooltip interactivo de estadísticas ── */
.stats-tooltip {
  display:none; position:absolute; z-index:50;
  background:var(--text); color:var(--card); font-size:.72rem; font-weight:600;
  padding:.35rem .6rem; border-radius:6px;
  white-space:pre-line; pointer-events:none;
  transform:translate(-50%, -100%);
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  text-align:center; max-width:200px; line-height:1.4;
}
/* Muesca (flecha) que apunta hacia la barra/punto al que corresponde. */
.stats-tooltip::after {
  content:''; position:absolute; top:100%; left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:var(--text);
}

/* ── Modal de Novedades ── */
.whatsnew-emoji { font-size:2.4rem; text-align:center; line-height:1; margin-bottom:.3rem; }
.whatsnew-sub { font-size:.82rem; color:var(--muted); text-align:center; margin:0 0 1rem; }
.whatsnew-list { list-style:none; padding:0; margin:0 0 1.1rem; display:flex; flex-direction:column; gap:.85rem; }
.whatsnew-list li { display:flex; gap:.6rem; align-items:flex-start; font-size:.82rem; line-height:1.35; color:var(--text); }
.whatsnew-list li strong { color:var(--primary); }
.whatsnew-list .wn-ic { font-size:1.25rem; line-height:1.3; flex:0 0 auto; }

/* ── Toggle sueño diurno/nocturno ── */
.stats-sleep-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; margin-bottom:.75rem; }
.stats-sleep-header .section-title { margin-bottom:0; }
.stats-sleep-toggle { display:flex; gap:.25rem; }
.stats-toggle-btn {
  font-size:.72rem; font-weight:700; padding:.3rem .6rem;
  border-radius:999px; border:1px solid var(--border);
  background:var(--soft); color:var(--muted); cursor:pointer;
  transition:background .15s, color .15s;
}
.stats-toggle-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.stats-toggle-btn:hover:not(.active) { background:var(--primary-hi); color:var(--primary); }



/* ══════════════════════════════════════════════════════════════
   SIESTAS — VISTA DE TARJETAS VERTICALES (MÓVIL)
   Reemplaza la tabla horizontal por tarjetas apiladas verticalmente.
   En desktop se ocultan y se muestra la tabla clásica.
   ══════════════════════════════════════════════════════════════ */

/* En desktop: ocultar tarjetas */
/* (la regla de visibilidad está en el @media max-width:600px arriba) */

/* Tarjeta individual de siesta */
.nap-card {
  border:1px solid var(--border);
  border-radius:var(--radius-sm, 8px);
  padding:.45rem .7rem .35rem;
  background:var(--card);
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.nap-card.nap-card-ok   { border-left:3px solid var(--success); }
.nap-card.nap-card-warn { border-left:3px solid var(--warn); }
.nap-card.nap-card-bad  { border-left:3px solid var(--error); }
/* Aviso de horas incoherentes dentro de la tarjeta */
.nap-card-time-warn {
  font-size:.7rem; font-weight:600; color:var(--error);
  background:var(--error-bg);
  border:1px solid var(--error);
  border-radius:var(--radius-sm);
  padding:.35rem .5rem;
  margin-top:.3rem;
  line-height:1.4;
}
.nap-card.nap-card-edge {
  background:var(--soft, #f7f6f2);
  border-left:3px solid var(--muted);
  padding:.5rem .8rem;
}
[data-theme="night"] .nap-card-edge { background:var(--soft-2, #111118); }

/* Cabecera de la tarjeta: nombre */
.nap-card-header {
  display:flex;
  align-items:center;
  gap:.4rem;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.nap-card-title {
  font-size:.85rem;
  font-weight:700;
  color:var(--text);
}
.nap-card-summary {
  flex:1;
  font-size:.72rem;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:none;
}
.nap-card-chevron {
  font-size:.7rem;
  color:var(--muted);
  transition:transform .2s;
  margin-left:auto;
  flex-shrink:0;
}

/* Body colapsable */
.nap-card-body {
  display:block;
}

/* Estado colapsado */
.nap-card-collapsed .nap-card-body { display:none; }
.nap-card-collapsed .nap-card-summary { display:block; }
.nap-card-collapsed .nap-card-chevron { transform:rotate(-90deg); }

/* Tarjeta no compactable (en curso / próxima) */
.nap-card-locked .nap-card-header { cursor:default; }

/* Grid interior con los datos de la siesta */
.nap-card-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.3rem .4rem;
  align-items:stretch;
}
.nap-card-grid-3 {
  grid-template-columns:1fr 1fr 1fr;
}
.nap-card-grid-wake {
  grid-template-columns:1fr 2fr;
}
.nap-card-row-inputs {
  margin-top:.2rem;
  padding-top:.2rem;
  border-top:1px solid var(--border);
}
.nap-card-field {
  display:grid;
  grid-template-rows:1rem 2rem;
  justify-items:center;
  align-items:center;
  min-width:0;
}
.nap-card-field-full {
  grid-column:1 / -1;
}
.nap-card-field-label {
  font-size:.62rem;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.03em;
  text-align:center;
  line-height:1.1rem;
  align-self:end;
}
.nap-card-field-value {
  font-size:.8rem;
  font-weight:600;
  color:var(--text);
  text-align:center;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:2rem;
}
.nap-card-field-value input[type="time"] {
  font-size:.8rem;
  padding:.3rem .3rem;
  border:1px solid var(--border);
  border-radius:var(--radius-sm, 6px);
  background:var(--card);
  color:var(--text);
  width:100%;
  box-sizing:border-box;
  text-align:center;
  height:2rem;
}
.nap-card-field-value input[type="time"]:focus {
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 2px var(--primary-hi);
}
.nap-card-field-value input[type="text"] {
  font-size:.78rem;
  padding:.3rem .3rem;
  border:1px solid var(--border);
  border-radius:var(--radius-sm, 6px);
  background:var(--card);
  color:var(--text);
  width:100%;
  box-sizing:border-box;
  height:2rem;
  text-align:center;
}
.nap-card-field-value input[type="text"]:focus {
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 2px var(--primary-hi);
}
.nap-card-field-value input[type="number"] {
  font-size:.8rem;
  padding:.3rem .3rem;
  border:1px solid var(--border);
  border-radius:var(--radius-sm, 6px);
  background:var(--card);
  color:var(--text);
  width:100%;
  box-sizing:border-box;
  text-align:center;
  height:2rem;
  -moz-appearance:textfield;
  appearance:textfield;
}
.nap-card-field-value input[type="number"]::-webkit-outer-spin-button,
.nap-card-field-value input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.nap-card-field-value input[type="number"]:focus {
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 2px var(--primary-hi);
}

/* Check de estado dentro de las tarjetas — ya no se usa texto,
   el estado se indica con el color del borde del input y del label */
.nap-card-check { display:none; }
.nap-card-check-ok   { color:var(--success); }
.nap-card-check-warn { color:var(--warn); }
.nap-card-check-bad  { color:var(--error); }

/* Colores de estado en inputs y labels */
.nap-card-field-value input.input-ok { border-color:var(--success); }
.nap-card-field-value input.input-warn { border-color:var(--warn); }
.nap-card-field-value input.input-bad { border-color:var(--error); }
.nap-card-field .label-ok { color:var(--success); }
.nap-card-field .label-warn { color:var(--warn); }
.nap-card-field .label-bad { color:var(--error); }
.nap-card-field .value-ok { color:var(--success); }
.nap-card-field .value-warn { color:var(--warn); }
.nap-card-field .value-bad { color:var(--error); }

/* Hint de hora recomendada en tarjeta dormir */
.nap-card-rec-hint {
  font-size:.68rem;
  color:var(--muted);
  text-align:left;
  margin-top:.25rem;
  line-height:1.3;
}

/* Controles cabecera siestas */
.naps-head-row { flex-wrap:wrap; }
.naps-head-controls {
  display:flex;
  align-items:center;
  gap:.4rem;
}
.naps-head-select {
  padding:.3rem .4rem;
  font-size:.8rem;
  font-weight:700;
  border:1px solid var(--border);
  border-radius:var(--radius-sm, 6px);
  background:var(--card);
  color:var(--text);
  width:3.2rem;
}
.naps-head-select:focus { outline:none; border-color:var(--primary); }

/* Ocultar sección config y mostrar controles móvil solo en ≤1024px (móvil + tablet) */
/* Siempre mostrar tarjetas como vista principal (PC incluido).
   La tabla se oculta salvo que el usuario la fuerce en Preferencias. */
.naps-config-desktop { display:none; }
.naps-table-desktop { display:none; }
.naps-cards-mobile { display:flex; flex-direction:column; gap:.45rem; margin-top:.4rem; }

@media (min-width:1025px) {
  /* Nada adicional: en PC también se ven las tarjetas con el selector inline */
}

/* Cuando se fuerza vista tabla */
.naps-table-desktop.force-show { display:block !important; }
.naps-cards-mobile.force-hide { display:none !important; }



/* ══════════════════════════════════════════════════════════════
   QUICK NAP — Modal de inicio rápido de siesta
   ══════════════════════════════════════════════════════════════ */
.quicknap-box { text-align:center; max-width:320px; }
.quicknap-icon { font-size:2.4rem; line-height:1; margin-bottom:.2rem; }
.quicknap-sub { font-size:.82rem; color:var(--muted); margin-bottom:.8rem; }
.quicknap-form { text-align:left; margin-bottom:.8rem; }
.quicknap-btns { display:flex; gap:.5rem; margin-top:.5rem; }
.quicknap-btns .btn { justify-content:center; }

/* Selector de cuidador */
.caregiver-selector {
  display:flex;
  gap:.35rem;
  margin-top:.3rem;
}
.caregiver-btn {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.3rem;
  padding:.4rem .4rem;
  font-size:.75rem;
  font-weight:600;
  border:1px solid var(--border);
  border-radius:var(--radius-sm, 6px);
  background:var(--card);
  color:var(--muted);
  cursor:pointer;
  transition:all .15s;
}
.caregiver-btn span { font-size:1rem; }
.caregiver-btn.active {
  background:var(--primary-hi);
  border-color:var(--primary);
  color:var(--primary);
  font-weight:700;
}
.caregiver-btn:hover { border-color:var(--primary); }

/* Hero-card de sueño interactivo (tap para registrar siesta) */
.hero-timer-sleep { -webkit-tap-highlight-color:transparent; cursor:pointer; }

/* Caregiver badge en tarjetas de siestas */
.nap-card-caregiver {
  font-size:.62rem;
  color:var(--muted);
  font-weight:600;
  margin-left:.3rem;
}

/* Selector de cuidador en tarjeta */
.nap-card-caregiver-row {
  display:flex;
  align-items:center;
  gap:.4rem;
  margin-top:.3rem;
  padding-top:.25rem;
}
.caregiver-field-wrap { display:flex; flex-direction:column; gap:.25rem; flex:1; max-width:10rem; }
.caregiver-select {
  font-size:.75rem;
  padding:.25rem .4rem;
  border:1px solid var(--border);
  border-radius:var(--radius-sm, 6px);
  background:var(--card);
  color:var(--text);
  width:100%;
}
.caregiver-select:focus { outline:none; border-color:var(--primary); }
.caregiver-otro-input {
  font-size:.75rem;
  padding:.25rem .4rem;
  border:1px solid var(--border);
  border-radius:var(--radius-sm, 6px);
  background:var(--card);
  color:var(--text);
  width:100%;
  box-sizing:border-box;
}
.caregiver-otro-input:focus { outline:none; border-color:var(--primary); }



/* ══════════════════════════════════════════════════════════════
   COMPARATIVA SEMANAL
   ══════════════════════════════════════════════════════════════ */
.stats-weekly-grid { font-size:.8rem; }
.weekly-header {
  display:grid; grid-template-columns:1.5fr 1fr 1fr .7fr;
  gap:.3rem; padding:.3rem .4rem;
  font-size:.68rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.03em;
  border-bottom:1px solid var(--border);
}
.weekly-row {
  display:grid; grid-template-columns:1.5fr 1fr 1fr .7fr;
  gap:.3rem; padding:.4rem;
  align-items:center;
  border-bottom:1px solid var(--soft);
}
.weekly-row:last-child { border-bottom:none; }
.weekly-label { font-weight:600; color:var(--text); }
.weekly-val { text-align:center; color:var(--text); font-weight:600; }
.weekly-diff { text-align:center; font-weight:700; font-size:.75rem; }
.weekly-up { color:var(--success); }
.weekly-down { color:var(--error); }

/* ══════════════════════════════════════════════════════════════
   EVENTOS DEL DÍA (tags)
   ══════════════════════════════════════════════════════════════ */
.day-events {
  display:flex; flex-wrap:wrap; gap:.3rem;
  margin-bottom:.5rem;
}
.day-event-tag {
  font-size:.72rem; font-weight:600;
  padding:.3rem .6rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--soft);
  color:var(--muted);
  cursor:pointer;
  transition:all .15s;
}
.day-event-tag.active {
  background:var(--primary-hi);
  border-color:var(--primary);
  color:var(--primary);
  font-weight:700;
}
.day-event-tag:hover { border-color:var(--primary); }



/* ══════════════════════════════════════════════════════════════
   ESTADÍSTICAS DE CUIDADORES
   ══════════════════════════════════════════════════════════════ */
.stats-caregiver-chart { display:flex; flex-direction:column; gap:.5rem; }
.stats-cg-row {
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas: "label bar count" "detail detail detail";
  align-items:center;
  gap:.2rem .5rem;
}
.stats-cg-label { grid-area:label; font-size:.8rem; font-weight:600; color:var(--text); white-space:nowrap; }
.stats-cg-bar-wrap { grid-area:bar; background:var(--soft); border-radius:999px; height:10px; overflow:hidden; }
.stats-cg-bar { height:100%; background:var(--primary); border-radius:999px; transition:width .4s; }
.stats-cg-count { grid-area:count; font-size:.85rem; font-weight:800; color:var(--primary); }
.stats-cg-detail { grid-area:detail; font-size:.68rem; color:var(--muted); }



/* ══════════════════════════════════════════════════════════════
   BANNER INSTALAR PWA
   ══════════════════════════════════════════════════════════════ */
.pwa-install-banner {
  position:fixed; bottom:4.5rem; left:.75rem; right:.75rem; z-index:9500;
  display:flex; align-items:center; gap:.6rem;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 4px 20px rgba(0,0,0,.15); padding:.75rem 1rem;
  animation:slideUp .3s ease;
}
@keyframes slideUp { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
.pwa-install-icon { font-size:1.6rem; flex-shrink:0; }
.pwa-install-text { flex:1; min-width:0; }
.pwa-install-title { font-size:.82rem; font-weight:700; color:var(--text); }
.pwa-install-sub { font-size:.7rem; color:var(--muted); }
.pwa-install-btn { padding:.4rem .8rem; font-size:.78rem; font-weight:700; border-radius:999px; background:var(--primary); color:#fff; border:none; cursor:pointer; white-space:nowrap; }
.pwa-install-close { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:none; color:var(--muted); font-size:1.1rem; cursor:pointer; flex-shrink:0; }