/* ==========================================================================
   Haia — sistema visual v2 "SOSTENER" (marca 2026-08-04, ex EntreCuidados)
   Modelo: dos brazos y una cuna que sostienen un punto dorado (la persona).
   Paleta: navy tinta #2C4356 (identidad y texto — tinta cálida, nunca
   superficie fría) · terracota #C06B4A (CTA, calidez) · salvia #7E9471
   (positivo/ok) · dorado #D9A441 (la persona; acentos, bitácora) · arena
   #D9BC92 · crema #F9F3E9 (fondo). Público: cuidadoras ~51 años + hijos que
   coordinan → tipografía GRANDE y REDONDEADA (ui-rounded con degradación al
   stack de sistema, 100% offline), contraste alto, tap targets generosos,
   cero jerga. Claro/oscuro con [data-theme]; el oscuro es "noche navy".
   ========================================================================== */

:root {
  /* --- Paleta claro — hex OFICIALES del manual de marca Haia --- */
  --color-bg: #F9F3E9;
  --color-bg-alt: #F1E7D6;
  --color-surface: #FFFFFF;
  --color-text: #284766;          /* azul profundo (tipografía) — oficial */
  --color-text-soft: #5F6E7E;
  --color-border: #E7DBC8;

  --color-primary: #284766;       /* azul profundo — marca, enlaces, selección */
  --color-primary-dark: #1C374F;
  --color-primary-soft: #E4EAF0;

  --color-accent: #D28A68;        /* terracota cálido — oficial (CTA con tinta oscura) */
  --color-accent-dark: #A65F3D;   /* funcional: texto/hover terracota con contraste */
  --color-accent-soft: #F7E5DA;

  --color-salvia: #8F9572;        /* verde salvia — oficial */
  --color-salvia-soft: #EDEFE3;
  --color-oro: #D5A23A;           /* dorado (el círculo, la persona) — oficial */
  --color-oro-soft: #F7EBD2;
  --color-arena: #D6B382;         /* arena/beige — oficial */

  --color-ok: #5F6845;            /* salvia oscurecida: texto positivo legible */
  --color-alerta: #B4523A;        /* terracota quemada, nunca rojo hospital */

  --radius: 16px;
  --radius-lg: 24px;
  --sombra: 0 2px 10px rgba(40, 71, 102, 0.08);
  --sombra-alta: 0 8px 28px rgba(40, 71, 102, 0.14);
  --ancho-lectura: 720px;
}

[data-theme="dark"] {
  /* Noche navy: el fondo deriva del azul oficial; terracota/salvia/dorado/arena
     van EXACTOS (sobre oscuro contrastan bien tal cual). */
  --color-bg: #14212F;
  --color-bg-alt: #1A2A3C;
  --color-surface: #223549;
  --color-text: #F2ECDF;
  --color-text-soft: #9DACBB;
  --color-border: #35495F;

  --color-primary: #8FB3D0;
  --color-primary-dark: #ABC8E0;
  --color-primary-soft: #263E56;

  --color-accent: #D28A68;        /* oficial, exacto */
  --color-accent-dark: #E0A585;
  --color-accent-soft: #452E22;

  --color-salvia: #8F9572;        /* oficial, exacto */
  --color-salvia-soft: #2A3328;
  --color-oro: #D5A23A;           /* oficial, exacto */
  --color-oro-soft: #3D3115;
  --color-arena: #D6B382;         /* oficial, exacto */

  --color-ok: #A8B78E;
  --color-alerta: #E08A6E;

  --sombra: 0 2px 10px rgba(0, 0, 0, 0.35);
  --sombra-alta: 0 8px 28px rgba(0, 0, 0, 0.5);
}

/* --- Base --- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* ui-rounded = SF Rounded en Apple (la letra redondeada del modelo Haia);
     en el resto degrada al stack de sistema sin cargar nada externo. */
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.06rem;               /* base grande a propósito (público 45-70) */
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; color: var(--color-text); }
h1 { font-size: clamp(1.9rem, 5.5vw, 2.7rem); margin: 0 0 14px; }
h2 { font-size: clamp(1.4rem, 4vw, 1.8rem); margin: 0 0 12px; }
h3 { font-size: 1.15rem; margin: 0 0 8px; }

p { margin: 0 0 14px; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dark); }

img { max-width: 100%; height: auto; }

.container {
  max-width: var(--ancho-lectura);
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Topbar --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
}

/* Tipografía de la MARCA. Es Comfortaa 600, identificada comparando el
   wordmark del logo contra las candidatas (calce 81,8% y misma proporción).
   Se sirve desde el propio sitio, nunca desde Google: la app tiene que
   funcionar sin señal y sin pedirle nada a terceros.
   Va recortada a las letras que se usan y con el peso ya fijo: 7 KB en vez de
   los 197 KB del archivo completo. Solo se aplica al nombre "Haia" y a la
   bajada — el resto de la app sigue con la redondeada del sistema, que no
   cuesta nada y se ve bien en cualquier aparato. */
@font-face {
  font-family: "Haia Wordmark";
  src: url("../assets/haia-wordmark.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;   /* si tarda, se lee igual con la del sistema */
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Haia Wordmark", ui-rounded, system-ui, sans-serif;
  font-weight: 600;     /* la fuente ya viene en 600: no se finge con bold */
  font-size: 1.32rem;
  color: var(--color-primary);      /* navy en claro, celeste-crema en oscuro */
  text-decoration: none;
  letter-spacing: 0;    /* Comfortaa ya viene holgada; sumarle espacio la desarma */
}
/* El punto dorado del logo, como remate del wordmark. */
.brand::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-oro);
  align-self: flex-end;
  margin: 0 0 7px -4px;
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.topbar nav a {
  text-decoration: none;
  color: var(--color-text-soft);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 9px 12px;
  border-radius: 10px;
}
.topbar nav a:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); }

.theme-toggle {
  border: none;
  background: none;
  font-size: 1.15rem;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 10px;
  line-height: 1;
}
.theme-toggle:hover { background: var(--color-bg-alt); }

/* Salida durante el alta: sin familia todavía no hay hub, que es donde vive
   "Cerrar sesión". Sin esto, equivocarse de correo al registrarse encierra. */
.salir-onboarding {
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 0.85rem; color: var(--color-text-soft);
  padding: 8px 10px; border-radius: 10px; min-height: 44px;
}
.salir-onboarding:hover { background: var(--color-bg-alt); color: var(--color-text); }

/* --- Menú de módulos (inyectado por main.js cuando hay sesión) --- */
.menu-wrap { position: relative; }
/* Con el menú presente, los links estáticos del nav sobran (todo destino vive
   en el menú) y a 375px no caben. Si el navegador no soporta :has(), solo
   quedan ambos visibles — degradación inofensiva. */
.topbar nav:has(.menu-wrap) > a { display: none; }
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.menu-btn:hover, .menu-btn[aria-expanded="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}
.menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  max-width: calc(100vw - 24px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-alta);
  padding: 8px;
  display: grid;
  gap: 2px;
  z-index: 60;
}
.menu-panel a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  font-size: 1rem;
}
.menu-panel a:hover { background: var(--color-bg-alt); color: var(--color-text); }
.menu-panel a[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.menu-panel a .emoji { font-size: 1.2rem; width: 26px; text-align: center; }

/* --- Botón transversal de bitácora (inyectado por main.js) --- */
.fab-bitacora {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--color-oro);
  color: #35290E;                   /* tinta café-dorada: legible sobre el dorado */
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: var(--sombra-alta);
  transition: transform 0.06s ease;
}
.fab-bitacora:active { transform: scale(0.97); }
.fab-bitacora:hover { color: #1F1806; }
@media print { .fab-bitacora, .menu-wrap { display: none !important; } }

/* --- Botones (tap targets grandes: mínimo 48px de alto) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--color-accent);
  color: #3A2412;                 /* tinta cálida: el terracota oficial es claro,
                                     texto blanco encima no contrasta */
  box-shadow: var(--sombra);
}
.btn-primary:hover { background: #C67C58; color: #2A1809; }

.btn-secondary {
  background: var(--color-primary);
  color: #F2FAF8;
}
.btn-secondary:hover { background: var(--color-primary-dark); color: #F2FAF8; }

.btn-ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* --- Cards --- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--sombra);
}

/* --- Acordeón (guías) --- */
.acordeon { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.acordeon + .acordeon { margin-top: 14px; }

.acordeon summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  font-weight: 700;
  font-size: 1.08rem;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
  content: "＋";
  margin-left: auto;
  font-size: 1.2rem;
  color: var(--color-primary);
  flex-shrink: 0;
}
.acordeon[open] summary::after { content: "−"; }
.acordeon[open] summary { border-bottom: 1px solid var(--color-border); }
.acordeon .acordeon-cuerpo { padding: 18px 20px 8px; }
.acordeon .emoji { font-size: 1.35rem; flex-shrink: 0; }

/* --- Formularios (ficha) --- */
label { display: block; font-weight: 700; margin: 0 0 6px; font-size: 0.98rem; }
.campo { margin-bottom: 18px; }
.campo .ayuda { font-size: 0.88rem; color: var(--color-text-soft); margin: 4px 0 0; }

/* `date` y `time` entraron acá el 2026-08-06 (F5-A). Estaban fuera desde el
   principio, así que los 17 selectores de fecha/hora de la app se pintaban con
   el control nativo pelado: 22px de alto, sin borde y sin fondo — la mitad del
   mínimo táctil de 48px que se respeta en todo el resto, y justo en el público
   que peor lo tolera. `cuidadores/` lo había parchado solo para su grilla; ese
   override es más específico y sigue mandando ahí. */
input[type="text"], input[type="tel"], input[type="number"],
input[type="date"], input[type="time"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .fila-2 { grid-template-columns: 1fr; } }

/* --- Chips (selección múltiple: categorías de disponibilidad, etc.) --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}
.chip[aria-pressed="true"] {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/* --- Avisos --- */
.aviso {
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 0.95rem;
  margin: 16px 0;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}
.aviso-suave { background: var(--color-primary-soft); border-color: transparent; }
.aviso-acento { background: var(--color-accent-soft); border-color: transparent; }

/* --- Toast --- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-text);
  color: var(--color-bg);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: var(--sombra-alta);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 100;
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- Footer --- */
.footer {
  margin-top: 70px;
  border-top: 1px solid var(--color-border);
  padding: 30px 0 40px;
  font-size: 0.92rem;
  color: var(--color-text-soft);
}
.footer .container { display: grid; gap: 6px; }
.footer a { color: var(--color-text-soft); }

/* --- Utilidades --- */
.centrado { text-align: center; }
.suave { color: var(--color-text-soft); }
[hidden] { display: none !important; }

@media print {
  .topbar, .footer, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
}