/* ============================================================================
   Registro del bebé — estilos.

   Dos condicionantes mandan sobre todo lo demás:
   1. Se usa con UNA MANO, a menudo de noche y con el bebé encima. Los objetivos
      táctiles principales no bajan de 88px de alto y viven en la mitad inferior
      de la pantalla, al alcance del pulgar.
   2. Se usa A OSCURAS. El modo oscuro no es un adorno: es el modo principal de
      madrugada, así que se cuidan los contrastes bajos sin perder legibilidad.

   Colores y medidas salen de tokens.css (packages/design-system). Nada
   hardcodeado salvo lo específico de esta app, declarado aquí como token local.
   ========================================================================== */

:root {
  /* Tokens locales de esta app: un color por tipo de evento, para reconocerlos
     de un vistazo en las listas sin tener que leer. Derivados de la paleta. */
  --c-pecho:      var(--color-brand-primary);
  --c-biberon:    var(--color-accent);
  --c-panal:      #7A6C9B;              /* violeta apagado — no existe en tokens */
  --c-sueno:      #4A6B82;              /* azul noche */
  --c-peso:       var(--color-success);
  --c-extraccion: #8A7F6B;

  --alto-accion:  96px;
  --alto-tabbar:  62px;
}

:root[data-theme="dark"], :root:not([data-theme="light"]) {
  --c-panal:      #A395C4;
  --c-sueno:      #7FA3BE;
  --c-extraccion: #B3A791;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* El atributo `hidden` aplica display:none con especificidad mínima, así que
   cualquier regla de clase con `display` lo anula — pasaba con `.vista`, que
   seguía visible al cambiar de pestaña. Con esto, `hidden` manda siempre. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  /* Evita el rebote de scroll en iOS cuando la app está instalada */
  overscroll-behavior-y: contain;
}

body {
  padding-bottom: calc(var(--alto-tabbar) + env(safe-area-inset-bottom) + var(--space-4));
}

h1, h2, h3 { margin: 0; line-height: var(--line-height-tight); }
.muted { color: var(--color-text-muted); }

/* ─── CABECERA ───────────────────────────────────────────────────────────── */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: calc(env(safe-area-inset-top) + var(--space-3)) var(--space-4) var(--space-3);
  background: var(--color-brand-primary);
  color: var(--color-text-on-brand);
  box-shadow: var(--shadow-sm);
}

.cabecera h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
.cabecera .muted { color: rgba(255, 255, 255, 0.75); font-size: var(--font-size-sm); }
.cabecera-acciones { display: flex; align-items: center; gap: var(--space-2); }

.chip-autor {
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-text-on-brand);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.btn-icono {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-on-brand);
  font-size: var(--font-size-lg);
  cursor: pointer;
}

.aviso-offline {
  padding: var(--space-2) var(--space-4);
  background: var(--color-warning-bg);
  color: var(--color-warning-dark);
  font-size: var(--font-size-sm);
  text-align: center;
  border-bottom: 1px solid var(--color-warning-border);
}

/* ─── LAYOUT ─────────────────────────────────────────────────────────────── */

main { max-width: 560px; margin: 0 auto; padding: var(--space-4); }
.vista { display: flex; flex-direction: column; gap: var(--space-4); }

.titulo-seccion {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* ─── ESTADO (lo primero que se lee) ─────────────────────────────────────── */

.estado {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.estado-principal { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.estado-etiqueta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.estado-valor {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-brand-primary);
}
.estado-detalle { font-size: var(--font-size-sm); }

.sugerencia {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-brand-primary-tint);
  color: var(--color-brand-primary-hover);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

/* ─── EN CURSO (cronómetro vivo) ─────────────────────────────────────────── */

.en-curso-tarjeta {
  border: 2px solid var(--color-brand-primary);
  border-radius: var(--radius-xl);
  background: var(--color-bg-surface);
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: aparecer 0.2s ease-out;
}
.en-curso-tarjeta.sueno { border-color: var(--c-sueno); }

@keyframes aparecer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.en-curso-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.en-curso-titulo { font-weight: var(--font-weight-semibold); font-size: var(--font-size-lg); }
.en-curso-crono {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-brand-primary);
}
.en-curso-tarjeta.sueno .en-curso-crono { color: var(--c-sueno); }

.lados { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.lado-btn {
  min-height: 52px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface-alt);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
.lado-btn[aria-pressed="true"] {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-text-on-brand);
}

.aviso-crono {
  font-size: var(--font-size-sm);
  color: var(--color-warning-dark);
  background: var(--color-warning-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

/* ─── BOTONES DE ACCIÓN (el corazón de la app) ───────────────────────────── */

.acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.accion {
  min-height: var(--alto-accion);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  border: none;
  border-radius: var(--radius-xl);
  color: var(--color-text-on-brand);
  font: inherit;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s ease;
}
.accion:active { transform: scale(0.97); }
.accion-icono { font-size: 30px; line-height: 1; }

.accion-pecho   { background: var(--c-pecho); }
.accion-biberon { background: var(--c-biberon); }
.accion-panal   { background: var(--c-panal); }
.accion-sueno   { background: var(--c-sueno); }

.acciones-secundarias { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.btn-secundario {
  min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
}

.btn-principal {
  min-height: 52px;
  width: 100%;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-brand-primary);
  color: var(--color-text-on-brand);
  font: inherit;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.btn-principal:active { background: var(--color-brand-primary-hover); }

.btn-texto {
  border: none; background: none;
  color: var(--color-danger);
  font: inherit; font-weight: var(--font-weight-medium);
  padding: var(--space-3) 0;
  cursor: pointer;
}

/* ─── RESUMEN DEL DÍA ────────────────────────────────────────────────────── */

.resumen-dia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-2);
}
.resumen-celda { text-align: center; display: flex; flex-direction: column; }
.resumen-celda strong {
  font-size: var(--font-size-2xl);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}
.resumen-celda span { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ─── LISTAS DE EVENTOS ──────────────────────────────────────────────────── */

.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.evento {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-left: 4px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.evento:active { background: var(--color-bg-hover); }

.evento[data-tipo="pecho"]      { border-left-color: var(--c-pecho); }
.evento[data-tipo="biberon"]    { border-left-color: var(--c-biberon); }
.evento[data-tipo="panal"]      { border-left-color: var(--c-panal); }
.evento[data-tipo="sueno"]      { border-left-color: var(--c-sueno); }
.evento[data-tipo="peso"]       { border-left-color: var(--c-peso); }
.evento[data-tipo="extraccion"] { border-left-color: var(--c-extraccion); }

.evento-icono { font-size: 22px; line-height: 1; }
.evento-cuerpo { flex: 1; min-width: 0; }
.evento-titulo { font-weight: var(--font-weight-medium); }
.evento-detalle { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.evento-hora {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.evento-pendiente { opacity: 0.6; }

.vacio {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-bg-surface-alt);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
}

/* ─── HISTORIAL ──────────────────────────────────────────────────────────── */

.dia-bloque { margin-bottom: var(--space-5); }
.dia-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-2);
}
/* Sin text-transform: capitalize — pondría mayúscula en cada palabra
   ("23 De Septiembre"). La primera letra se pone desde JS. */
.dia-titulo { font-weight: var(--font-weight-semibold); }
.dia-totales { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ─── PESO ───────────────────────────────────────────────────────────────── */

.tarjetas-peso { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.tarjeta-peso {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.tarjeta-peso .valor {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}
.tarjeta-peso .etiqueta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.tarjeta-peso.ancha { grid-column: 1 / -1; }
.valor-bien  { color: var(--color-success); }
.valor-ojo   { color: var(--color-warning-dark); }
.valor-mal   { color: var(--color-danger); }

.grafica-caja {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.grafica-caja svg { display: block; width: 100%; height: auto; }

/* ─── TARJETAS / FORMULARIOS ─────────────────────────────────────────────── */

.tarjeta {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tarjeta h3 { font-size: var(--font-size-lg); }

label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-size-sm); color: var(--color-text-secondary); }

input[type="text"], input[type="password"], input[type="number"],
input[type="datetime-local"], input[type="time"], textarea, select {
  min-height: 48px;
  padding: var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  /* 16px mínimo: por debajo, Safari en iPhone hace zoom al enfocar el campo */
  font-family: inherit;
  font-size: 16px;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--color-brand-primary-bright);
  outline-offset: 1px;
}

.form-logout { margin: 0; }
.pie { font-size: var(--font-size-xs); text-align: center; margin: 0; }

/* ─── HOJA INFERIOR ──────────────────────────────────────────────────────── */

.fondo-hoja {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(58, 64, 51, 0.45);
  animation: fundido 0.15s ease-out;
}
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }

.hoja {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--color-bg-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-3) var(--space-4) calc(env(safe-area-inset-bottom) + var(--space-5));
  box-shadow: var(--shadow-lg);
  animation: subir 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }

.hoja-tirador {
  width: 44px; height: 4px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}

.hoja h3 { font-size: var(--font-size-2xl); margin-bottom: var(--space-4); }
.hoja-campos { display: flex; flex-direction: column; gap: var(--space-4); }

/* Rejilla de opciones gordas dentro de la hoja (pipí/caca, ml, cantidad…) */
.opciones { display: grid; gap: var(--space-2); }
.opciones.dos  { grid-template-columns: 1fr 1fr; }
.opciones.tres { grid-template-columns: repeat(3, 1fr); }
.opciones.cuatro { grid-template-columns: repeat(4, 1fr); }

.opcion {
  min-height: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface-alt);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
.opcion .sub { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
.opcion[aria-pressed="true"] {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-text-on-brand);
}
.opcion[aria-pressed="true"] .sub { color: rgba(255, 255, 255, 0.8); }

.hoja-botones { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.hoja-botones .btn-principal { flex: 1; }
.hoja-botones .btn-secundario { flex: 0 0 auto; padding: 0 var(--space-5); }

.hoja-borrar { margin-top: var(--space-4); text-align: center; }

/* ─── TABBAR ─────────────────────────────────────────────────────────────── */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border-subtle);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab {
  min-height: var(--alto-tabbar);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.tab span { font-size: 20px; line-height: 1; }
.tab.activa { color: var(--color-brand-primary); font-weight: var(--font-weight-semibold); }

/* ─── BRINDIS (confirmación breve) ───────────────────────────────────────── */

.brindis {
  position: fixed;
  left: 50%;
  bottom: calc(var(--alto-tabbar) + env(safe-area-inset-bottom) + var(--space-4));
  transform: translateX(-50%);
  z-index: 60;
  max-width: 90vw;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-text-primary);
  color: var(--color-bg-surface);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-lg);
  animation: aparecer 0.18s ease-out;
}

/* ─── LOGIN ──────────────────────────────────────────────────────────────── */

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: var(--color-brand-primary);
}
.login-card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-bg-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.login-logo { font-size: 52px; line-height: 1; }
.login-card h1 { font-size: var(--font-size-3xl); }
.login-card p { margin: 0; }
.login-error {
  color: var(--color-danger-dark);
  background: var(--color-danger-bg);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--font-size-sm);
}

/* Accesibilidad: respetar quien pide menos animación. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}