/* ==========================================================================
   AcuerdApp — sistema visual R15 (brand board oficial "ACUERDOS QUE CONECTAN")
   Paleta oficial: navy #0F2742 · azul #3B82D6 · verde-agua #6CC6B5 ·
   dorado #DDBA6A · blanco-hueso #F6F5F2. Deriva del isotipo (cinta en "A" con
   destello dorado). Azul = primario/enlaces; dorado = CTA/acento; verde-agua =
   secundario; navy = modo oscuro. Tipografía: stack de sistema (100% offline).
   ========================================================================== */

:root {
  /* --- Paleta claro --- */
  --color-bg: #FBFDFF;
  --color-bg-alt: #EAF4FC;
  --color-surface: #FFFFFF;
  --color-text: #16303F;
  --color-text-soft: #52697A;
  --color-border: #DCEBF7;

  --color-primary: #3B82D6;      /* azul oficial — confianza, enlaces */
  --color-primary-dark: #2C6BC0; /* azul profundo — detalles/hover */
  --color-primary-soft: #E4F0FB;

  --color-secondary: #6CC6B5;      /* verde-agua oficial — cuidado, acentos suaves */
  --color-secondary-dark: #46A892;
  --color-secondary-soft: #E0F3EE;

  --color-accent: #DDBA6A;       /* dorado oficial — CTA, el destello del acuerdo */
  --color-accent-dark: #B8923F;
  --color-accent-soft: #F4E8CB;

  /* --- Semáforo de la escalera de desescalada (uso puntual, no dominante) --- */
  --nivel-1: #2F7FC9; /* organización · azul */
  --nivel-2: #4BA6DD; /* comunicación · celeste */
  --nivel-3: #D2A227; /* negociación · amarillo */
  --nivel-4: #E08A3C; /* facilitación · naranjo */
  --nivel-5: #8B5FBF; /* mediación · morado */
  --nivel-6: #C6493F; /* tribunal · rojo, uso mínimo */

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-soft: 0 4px 16px rgba(22, 48, 63, 0.08);
  --shadow-card: 0 2px 10px rgba(22, 48, 63, 0.06);

  --font-base: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
}

/* Modo oscuro SOLO por elección explícita (botón). Por defecto: claro,
   aunque el sistema esté en oscuro — evita cualquier parpadeo inicial.
   Fondo = navy del isotipo. */
:root[data-theme="dark"] {
  --color-bg: #0F2742;
  --color-bg-alt: #16304C;
  --color-surface: #16304C;
  --color-text: #EAF1F0;
  --color-text-soft: #9FB6CE;
  --color-border: #24456A;

  --color-primary: #5FB8EA;
  --color-primary-dark: #8ED0F5;
  --color-primary-soft: #1B3A57;

  --color-accent: #F2D06A;
  --color-accent-dark: #F7DE8F;
  --color-accent-soft: #3A3320;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s ease, color 0.2s ease;
}

img { max-width: 100%; display: block; }

/* El atributo hidden SIEMPRE oculta, aunque la clase defina display propio
   (sin esto, .btn[hidden] se veía: display:inline-flex pisaba el default del
   navegador y quedaban botones "muertos" visibles). */
[hidden] { display: none !important; }

a { color: var(--color-primary-dark); }
:root[data-theme="dark"] a { color: var(--color-primary); }

h1, h2, h3, h4 {
  line-height: 1.25;
  font-weight: 800;
  color: var(--color-text);
}

p { color: var(--color-text); }

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Topbar --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(6px);
}

.topbar-inner {
  /* Ancho completo: logo pegado al borde izquierdo, navegación + ☰ pegados
     al borde derecho, aprovechando toda la pantalla en escritorio. */
  max-width: none;
  margin: 0;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--color-text);
}

.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex-shrink: 0;
}

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

.topbar nav a {
  text-decoration: none;
  color: var(--color-text-soft);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}

.topbar nav a:hover, .topbar nav a[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.theme-toggle {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
  /* R21-9: pasó de emoji a ícono de trazo, como el resto de la topbar. */
  color: var(--color-text-soft);
  padding: 0;
}
.theme-toggle .ico { width: 19px; height: 19px; vertical-align: 0; }
.theme-toggle:hover { color: var(--color-primary-dark); border-color: var(--color-primary); }

/* R21-10 — "volver" dentro de la app. Va a la izquierda del logo: es el lugar
   donde se busca por costumbre, y así no compite con la navegación de la
   derecha. Lo inyecta main.js solo en páginas con data-menu="app". */
.btn-atras-app {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-soft);
  border-radius: 999px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; line-height: 1;
  cursor: pointer; flex: none;
  margin-right: 12px;
}
.btn-atras-app:hover { color: var(--color-primary-dark); border-color: var(--color-primary); }
.topbar-izq { display: flex; align-items: center; min-width: 0; }
.topbar-izq .brand { display: inline-flex; align-items: center; }

/* R21-10 — hub con riel de marca a la izquierda de las tarjetas.
   Móvil primero: apilado y compacto (el logo grande antes del contenido sería
   una barrera). Desde 900px pasa a dos columnas y el riel queda pegado arriba
   mientras se hace scroll por las tarjetas. */
.hub-layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
/* Imprescindible: mostrar()/ocultar() usan el atributo [hidden], y un
   `display:grid` explícito le gana a la regla `[hidden]{display:none}` del
   navegador — sin esto el hub se vería SIEMPRE, incluso sin familia cargada. */
.hub-layout[hidden] { display: none; }
/* R21-12: todo el riel va centrado bajo el logo, también en escritorio. Antes
   iba alineado a la izquierda y la píldora de estado quedaba visualmente colgada
   respecto del logo y del título. */
.hub-marca { text-align: center; }
.hub-marca-logo { width: 64px; height: 64px; display: block; margin: 0 auto 8px; border-radius: 18px; }
.hub-marca-nombre {
  margin: 0 0 4px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--color-primary-dark); font-size: 1.15rem;
}
.hub-marca-titulo { margin: 0 0 8px; }
.hub-marca .estado-pill { text-align: center; }   /* al envolver en 2 líneas, centradas */
.hub-contenido { min-width: 0; }

@media (min-width: 900px) {
  .hub-layout { grid-template-columns: 236px minmax(0, 1fr); gap: 32px; align-items: start; }
  .hub-marca { position: sticky; top: 88px; }
  .hub-marca-logo { width: 128px; height: 128px; border-radius: 32px; margin-bottom: 14px; }
  .hub-marca-nombre { font-size: 1.6rem; }
}

/* --- Hero --- */
.hero {
  padding: 48px 0 32px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  margin: 0 0 12px;
}

.hero p.lead {
  font-size: 1.1rem;
  color: var(--color-text-soft);
  max-width: 56ch;
  margin: 0 auto 28px;
}

.hero-emoji-row {
  font-size: 2rem;
  margin-bottom: 20px;
  letter-spacing: 6px;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--color-primary);
  color: #fff !important;
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { background: var(--color-primary-dark); }

.btn-accent {
  background: var(--color-accent);
  color: #2B2A26 !important;
  box-shadow: var(--shadow-soft);
}
.btn-accent:hover { background: var(--color-accent-dark); }

.btn-ghost {
  background: transparent;
  color: var(--color-primary-dark) !important;
  border: 2px solid var(--color-primary);
}

.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(--shadow-card);
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 28px 0;
}

@media (min-width: 640px) {
  .card-grid.cols-2 { grid-template-columns: 1fr 1fr; }
}

.card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.card p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.95rem;
}

.card-emoji {
  font-size: 1.6rem;
  margin-bottom: 10px;
  display: block;
}

/* --- Section --- */
.section {
  padding: 32px 0;
}

.section-title {
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.section-subtitle {
  color: var(--color-text-soft);
  margin-top: 0;
  margin-bottom: 20px;
}

/* --- Disclaimer / aviso --- */
.aviso {
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: 0.9rem;
  color: var(--color-text);
  margin: 28px 0;
}

.aviso strong { color: var(--color-accent-dark); }

/* ⓘ informativo: botón inline que abre una explicación breve (toast/modal). */
.info-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary-dark);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 4px;
  padding: 0;
}
.info-i:hover { background: var(--color-primary-soft); }

/* ── Menú ☰ de la app (inyectado por main.js en páginas data-menu) ── */
.menu-toggle {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.15rem;
  color: var(--color-text);
  flex: none;
}
.menu-toggle:hover { background: var(--color-primary-soft); }

.menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 12px;
  width: min(320px, calc(100vw - 24px));
  max-height: min(75vh, 560px);
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 10px;
  z-index: 40;
}
.topbar { position: sticky; }
.menu-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 6px 4px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-soft);
}
.menu-titulo .ico { width: 16px; height: 16px; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 600;
  min-height: 44px;
}
.menu-item:hover { background: var(--color-bg-alt); }
.menu-item.activo { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.menu-sep { border-top: 1px solid var(--color-border); margin: 6px 0; }

/* ── R18 — íconos de línea (reemplazan emojis) ── */
.ico {
  width: 1.25em; height: 1.25em;
  display: inline-block; vertical-align: -0.18em;
  stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.menu-item .menu-ico { display: inline-flex; color: var(--color-text-soft); }
.menu-item .menu-ico .ico { width: 20px; height: 20px; }
.menu-item.activo .menu-ico { color: var(--color-primary-dark); }
/* Íconos dentro de títulos de tarjeta (data-ico en <h3>) */
h3 [data-ico], h2 [data-ico] { display: inline-flex; vertical-align: middle; color: var(--color-primary-dark); margin-right: 4px; }
h3 .ico, h2 .ico { width: 20px; height: 20px; }
/* card-emoji con ícono: mantiene el tratamiento de bloque/centrado que ya tenía
   con el emoji, solo cambia el contenido por un ícono de línea más grande.
   Sin gate por [data-ico]: el JS también inyecta el ícono ya resuelto
   (acIco()) directo en el HTML generado, sin ese atributo. */
.card-emoji { color: var(--color-primary-dark); }
.card-emoji .ico { width: 30px; height: 30px; }

/* ── R18 — interruptor on/off (verde = activo, gris = inactivo) ── */
.ac-toggle {
  appearance: none; -webkit-appearance: none; border: none; flex: none;
  width: 50px; height: 29px; border-radius: 999px; background: var(--color-border);
  position: relative; cursor: pointer; transition: background 0.2s; vertical-align: middle;
}
.ac-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.28); transition: transform 0.2s;
}
.ac-toggle[aria-checked="true"] { background: #2FA26B; }
.ac-toggle[aria-checked="true"]::after { transform: translateX(21px); }
.ac-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ── R18 — deslizador tri-estado: desacuerdo (rojo) · sin definir (gris) · acuerdo (verde) ── */
.ac-tri {
  flex: none; width: 128px; height: 34px; border-radius: 999px; position: relative; cursor: pointer;
  border: 1px solid var(--color-border);
  background: linear-gradient(90deg, rgba(216,84,75,0.16) 0 33%, var(--color-bg-alt) 33% 67%, rgba(47,162,107,0.16) 67% 100%);
}
.ac-tri .knob {
  position: absolute; top: 3px; left: 3px; width: 40px; height: 26px; border-radius: 999px;
  background: var(--color-text-soft); box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform 0.18s, background 0.18s; display: grid; place-items: center; color: #fff;
}
.ac-tri .knob .ico { width: 15px; height: 15px; stroke: #fff; stroke-width: 2.2; }
.ac-tri[data-pos="0"] .knob { transform: translateX(0); background: #D8544B; }
.ac-tri[data-pos="1"] .knob { transform: translateX(42px); background: var(--color-text-soft); }
.ac-tri[data-pos="2"] .knob { transform: translateX(84px); background: #2FA26B; }
.ac-tri:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Botón flotante del chat (páginas de app, inyectado por main.js) */
.chat-fab {
  position: fixed;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  width: 62px;
  height: 62px;
  border-radius: 999px;
  /* R13 — más contraste: relleno sólido azul + anillo blanco + sombra marcada */
  background: var(--color-primary-dark, #2F7FC9);
  border: 3px solid var(--color-surface);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(15, 39, 66, 0.35);
}
.chat-fab .ico { width: 28px; height: 28px; stroke-width: 2; }
.chat-fab:hover { background: var(--color-primary); transform: translateY(-1px); }
:root[data-theme="dark"] .chat-fab { border-color: rgba(255,255,255,0.85); }
@media print { .chat-fab { display: none; } }

/* ── Barra inferior fija (móvil) — inyectada por main.js en páginas de app ──
   Solo en pantallas angostas; en escritorio la topbar cumple ese rol. */
.bottom-nav { display: none; }
@media (max-width: 720px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 35;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 14px rgba(22, 48, 63, 0.08);
  }
  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 2px;
    text-decoration: none;
    color: var(--color-text-soft);
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
  }
  .bottom-nav-item .bn-ico { display: inline-flex; line-height: 1; }
  .bottom-nav-item .bn-ico .ico { width: 23px; height: 23px; }
  .bottom-nav-item.activo { color: var(--color-primary-dark); background: var(--color-primary-soft); }
  body.has-bottom-nav { padding-bottom: 68px; }
  body.has-bottom-nav .chat-fab { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
@media print { .bottom-nav { display: none !important; } }

/* ── Home conversacional del hub (familia/) ── */
.hub-conversar { margin-bottom: 16px; }
.hub-conversar-botones {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 560px) {
  .hub-conversar-botones { grid-template-columns: 1fr 1fr; }
}
.hub-materia-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 18px 14px;
  /* R20: antes iba con relleno celeste (--color-primary-soft), que en el resto
     de la app significa "seleccionado". Se leía como estado, no como algo
     tocable. Ahora es una tarjeta blanca elevada, con la señal de acción en la
     flecha y en el realce al pasar/tocar. */
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--color-text);
  min-height: 44px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.hub-materia-btn .sub::after { content: " →"; font-weight: 700; color: var(--color-primary-dark); }
.hub-materia-btn:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.hub-materia-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hub-materia-btn { transition: none; } .hub-materia-btn:hover { transform: none; } }
.hub-materia-btn .emoji { font-size: 1.8rem; }
.hub-materia-btn .emoji[data-ico] .ico { width: 30px; height: 30px; }
.hub-materia-btn strong { font-size: 1.02rem; }
.hub-materia-btn .sub { font-size: 0.82rem; color: var(--color-text-soft); }

/* --- Guías: índice + acordeón --- */
.guia-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin: 20px 0 36px;
}

.guia-index a {
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
}

.guia-index a:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }

details.guia {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  overflow: hidden;
  scroll-margin-top: 90px;
}

details.guia > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 1.02rem;
}

details.guia > summary::-webkit-details-marker { display: none; }

details.guia > summary .num {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

details.guia > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--color-text-soft);
  transition: transform 0.15s ease;
}

details.guia[open] > summary::after { transform: rotate(180deg); }

.guia-body {
  padding: 0 20px 22px 64px;
  color: var(--color-text-soft);
}

.guia-body p { margin: 0 0 12px; }
.guia-body ul { margin: 0 0 12px; padding-left: 20px; }
.guia-body li { margin-bottom: 6px; }
.guia-body .ejemplo {
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-primary);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.92rem;
}

/* --- Escalera --- */
.escalera {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 24px 0;
}

.peldano {
  border: none;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.12s ease;
  position: relative;
}

.peldano:active { transform: scale(0.985); }

.peldano .emoji { font-size: 1.5rem; flex: none; }
.peldano .num {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: rgba(255,255,255,0.28); color: inherit;
  font-weight: 800; font-size: 0.95rem; flex: none;
}
.peldano .titulo-wrap { flex: 1; }
.peldano .titulo { display: block; }
.peldano .subtitulo { display: block; font-weight: 400; font-size: 0.82rem; opacity: 0.92; }
.peldano .chevron { font-size: 1.1rem; opacity: 0.85; transition: transform 0.15s ease; }
.peldano[aria-expanded="true"] .chevron { transform: rotate(90deg); }

.peldano.n1 { background: var(--nivel-1); }
.peldano.n2 { background: var(--nivel-2); }
.peldano.n3 { background: var(--nivel-3); color: #2B2A26; }
.peldano.n4 { background: var(--nivel-4); }
.peldano.n5 { background: var(--nivel-5); }
.peldano.n6 { background: var(--nivel-6); }

.peldano-panel {
  display: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 18px 20px;
  margin-top: -12px;
  font-size: 0.95rem;
}

.peldano-panel.abierto { display: block; }

.peldano-panel h4 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

.peldano-panel ul { margin: 0 0 14px; padding-left: 20px; color: var(--color-text-soft); }
.peldano-panel li { margin-bottom: 4px; }

.volver-box {
  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--color-primary-dark);
  font-size: 0.88rem;
}

/* --- Footer --- */
footer.site {
  padding: 36px 0 60px;
  text-align: center;
  color: var(--color-text-soft);
  font-size: 0.85rem;
}

footer.site a { color: var(--color-text-soft); }

/* --- Utilidades --- */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.small { font-size: 0.85rem; color: var(--color-text-soft); }

@media (max-width: 480px) {
  .topbar nav a span.full { display: none; }
}

/* ==========================================================================
   Wizard de propuesta (F2-E1) — proponer/index.html + js/proponer.js
   Mobile-first: probado sin desbordes desde 375px. Los inputs date/time
   llevan min-width:0 + appearance:none (fix iOS/Safari, igual que en CT rdr.html).
   ========================================================================== */

.wizard-progreso {
  display: flex;
  gap: 6px;
  margin: 18px 0 24px;
}

.wizard-progreso .paso-dot {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--color-border);
}

.wizard-progreso .paso-dot.activo { background: var(--color-primary); }
.wizard-progreso .paso-dot.hecho { background: var(--color-primary-soft); }

.paso-titulo {
  font-size: 1.3rem;
  margin: 0 0 4px;
}

.paso-subtitulo {
  color: var(--color-text-soft);
  margin: 0 0 20px;
  font-size: 0.95rem;
}

.wz-field {
  margin-bottom: 18px;
}

.wz-field > label,
.wz-label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.wz-field input[type="text"],
.wz-field input[type="email"],
.wz-field input[type="password"],
.wz-field input[type="number"],
.wz-field input[type="tel"],
.wz-field input[type="date"],
.wz-field input[type="time"],
.wz-field select,
.wz-field textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 13px 15px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-size: 1rem;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* Foco visible y coherente con la paleta (antes no había estado de foco). */
.wz-field input:focus,
.wz-field select:focus,
.wz-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.wz-field input::placeholder,
.wz-field textarea::placeholder {
  color: var(--color-text-soft);
  opacity: 0.75;
}

.wz-field input[type="date"]::-webkit-calendar-picker-indicator,
.wz-field input[type="time"]::-webkit-calendar-picker-indicator {
  filter: var(--color-scheme, none);
}

/* --- Filas de hijo (nombre + fecha nac) apiladas en móvil ---
   R21-9: se quitó el recuadro gris (background + padding). Metía los campos de
   hijos ~12px hacia adentro respecto de los de la columna izquierda, y las dos
   columnas del paso "datos" se veían descuadradas entre sí. */
.wz-hijo-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

/* R21-9: el ancho que importa NO es el de la ventana sino el de la columna que
   contiene esta fila. Bajo 860px .wz-datos-grid es de UNA columna y la fila
   dispone del ancho completo del wizard: ahí nombre y fecha caben lado a lado
   (con piso de 150px para la fecha, que es lo que necesita dd/mm/aaaa más el
   ícono del calendario; con menos, el navegador recorta el valor a "01/("). */
@media (min-width: 480px) and (max-width: 859px) {
  .wz-hijo-row { grid-template-columns: minmax(0, 1fr) minmax(150px, auto) auto; align-items: center; }
}
/* Desde 860px .wz-datos-grid se parte en dos y esta fila queda en una columna de
   ~260px: los dos campos juntos dejaban el nombre en ~90px, ilegible. Se apilan. */

.wz-hijo-row input { min-width: 0; }

.wz-btn-quitar {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-soft);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  justify-self: start;
}

/* R17 — tarjeta de hijo con fecha de nacimiento por Día / Mes / Año --- */
.wz-hijo-card {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
}
.wz-hijo-card > input[type="text"],
.wz-fecha-nac select {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wz-hijo-card > input[type="text"] {
  padding: 13px 15px;
  font-size: 1rem;
  margin-bottom: 10px;
}
.wz-fecha-nac {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1.2fr;
  gap: 8px;
}
.wz-fecha-nac select {
  padding: 12px 10px;
  font-size: 0.95rem;
}
.wz-hijo-card > input[type="text"]:focus,
.wz-fecha-nac select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.wz-hijo-quitar {
  margin-top: 10px;
  display: inline-block;
  font-size: 0.85rem;
}
.miembro-pendiente { opacity: 0.8; }
.miembro-pendiente .miembro-avatar {
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
}

/* R17 — página "Mi cuenta" (cuenta/) */
.cuenta-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cuenta-card-head h3 { margin-bottom: 0; }
.cuenta-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.cuenta-fila:last-child { border-bottom: none; }
.cuenta-fila > span { color: var(--color-text-soft); font-size: 0.9rem; }
.cuenta-fila > strong { text-align: right; }
.cuenta-lista {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.cuenta-lista li { padding: 4px 0; }

/* R17 — hub: izquierda = integrantes + hijos; derecha = invitación.
   En escritorio 2 columnas; con familia completa (sin invitación) vuelve a 1. */
.hub-top-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
/* R21-13: `display:grid` le gana a `[hidden]{display:none}` del navegador, así
   que sin esto ocultar la grilla desde JS no tendría ningún efecto. Mismo caso
   que .hub-layout — en este repo, todo contenedor con `display:` explícito que
   se muestre/oculte por atributo necesita su par `[hidden]`. */
.hub-top-grid[hidden] { display: none; }
.hub-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
@media (min-width: 720px) {
  /* R21-12: las tarjetas son celdas directas de la grilla (antes se agrupaban en
     dos sub-columnas de alturas distintas, y los bordes de abajo nunca calzaban).
     minmax(0,1fr) —y NO 1fr— es lo que las deja del MISMO ancho: `1fr` es
     `minmax(auto,1fr)`, así que una tarjeta con contenido ancho ensancha su
     columna y las dos quedan desparejas (medido: 327px vs 293px).
     `align-items: stretch` las iguala de alto dentro de cada fila. */
  .hub-top-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .hub-top-grid.completa { grid-template-columns: minmax(0, 1fr); }
  /* Una tarjeta sola en su fila ocupa el ancho completo: si no, queda media
     fila vacía a la derecha y la página se ve cortada. */
  .hub-top-grid > #hubDiaADia { grid-column: 1 / -1; }
}

/* --- Chips (día de la semana, opciones de 1 toque) --- */
.wz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wz-chip {
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.wz-chip.on {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

/* R21-10 — píldora de "agregar algo nuevo" (+ Etapa) en el ámbar de los avisos:
   entre píldoras que representan cosas YA existentes, el azul la hacía parecer
   una etapa más en vez de una acción. Nunca lleva .on (no es seleccionable). */
.wz-chip-nuevo {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
}
.wz-chip-nuevo:hover { border-color: var(--color-accent-dark); }

/* --- Plantillas de 1 toque (paso 1) --- */
.wz-plantillas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

@media (min-width: 560px) {
  .wz-plantillas { grid-template-columns: 1fr 1fr; }
}

.wz-plantilla {
  text-align: left;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-text);
}

.wz-plantilla strong { display: block; margin-bottom: 3px; }
.wz-plantilla span { font-size: 0.85rem; color: var(--color-text-soft); }

.wz-plantilla.on {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.wz-plantilla.on strong { color: var(--color-primary-dark); }

/* ── R18-1 — explainer ordinario / extraordinario (colapsable) ───────────── */
.wz-explicacion {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 4px 0 18px;
}
.wz-exp-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary-soft);
  border: 0;
  padding: 12px 14px;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-primary-dark);
  cursor: pointer;
  text-align: left;
}
.wz-exp-head .ico { width: 20px; height: 20px; flex: none; }
.wz-exp-caret { margin-left: auto; transition: transform 0.15s ease; font-size: 0.8rem; }
.wz-explicacion.abierta .wz-exp-caret { transform: rotate(180deg); }
.wz-exp-body { padding: 12px 14px; border-top: 1px solid var(--color-border); }
.wz-exp-body p { margin: 0 0 9px; font-size: 0.92rem; }
.wz-exp-body p:last-child { margin-bottom: 0; }

/* ── R18-2 — atajos de régimen ordinario ─────────────────────────────────── */
.wz-atajos { margin: 6px 0 8px; }
.wz-atajos-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--color-primary-dark); }
.wz-atajos-head .ico { width: 20px; height: 20px; flex: none; }
.wz-atajo-botones { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
@media (min-width: 560px) { .wz-atajo-botones { grid-template-columns: 1fr 1fr; } }
.wz-atajo-btn {
  text-align: left;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  color: var(--color-text);
}
/* abierto = configurándose; on = aplicado al calendario (solo uno a la vez) */
.wz-atajo-btn.abierto { border-color: var(--color-primary); color: var(--color-primary-dark); }
.wz-atajo-btn small { display: block; margin-top: 3px; font-weight: 500; font-size: 0.82rem; color: var(--color-text-soft); }
.wz-atajo-btn.on { background: var(--color-primary); color: #fff; }
.wz-atajo-btn.on small { color: rgba(255, 255, 255, 0.88); }

.wz-atajo-panel {
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-top: 12px;
  background: var(--color-surface);
}
.wz-atajo-fila { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.wz-atajo-fila .txt { flex: 1; font-weight: 600; }
.wz-atajo-fila .txt small { display: block; font-weight: 400; font-size: 0.82rem; color: var(--color-text-soft); }
.wz-atajo-horas { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 0; }
.wz-atajo-horas label { display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem; font-weight: 600; color: var(--color-text-soft); }
/* ── R18-5 — revisión punto por punto (vía secuencial) ───────────────────── */
.rev-item {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 12px 0;
  background: var(--color-surface);
}
.rev-item.en-desacuerdo { border-color: #D8544B; }
.rev-item-cab { display: flex; align-items: center; gap: 8px; }
.rev-item-cab .ico { width: 20px; height: 20px; flex: none; color: var(--color-primary-dark); }
.rev-item-cab h3 { margin: 0; font-size: 1.02rem; }
.rev-item-resumen { margin: 8px 0 12px; font-size: 0.92rem; color: var(--color-text-soft); }
.rev-item-control { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rev-item-etiqueta { font-size: 0.86rem; font-weight: 600; color: var(--color-text-soft); }
.rev-item.en-desacuerdo .rev-item-etiqueta { color: #D8544B; }
.rev-alts { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--color-border); }
.rev-alts-tit { margin: 0 0 8px; font-weight: 700; font-size: 0.92rem; }
.rev-alt {
  display: block;
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-text);
}
.rev-alt:hover { border-color: var(--color-primary); }
.rev-alt strong { display: block; font-size: 0.92rem; }
.rev-alt span { display: block; font-size: 0.82rem; color: var(--color-text-soft); margin-top: 2px; }
.rev-alt.on { border-color: var(--color-primary); background: var(--color-primary-soft); }
.rev-alt.on strong { color: var(--color-primary-dark); }

/* ── R18-4 — opciones del popup "¿cómo quieren armarlo?" ─────────────────── */
.via-op {
  display: block;
  width: 100%;
  text-align: left;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 10px 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-text);
}
.via-op:hover, .via-op:focus-visible { border-color: var(--color-primary); background: var(--color-primary-soft); }
.via-op strong { display: flex; align-items: center; gap: 8px; color: var(--color-primary-dark); margin-bottom: 4px; }
.via-op strong .ico { width: 20px; height: 20px; flex: none; }
.via-op span { display: block; font-size: 0.86rem; color: var(--color-text-soft); }
.via-op[disabled] { opacity: 0.55; cursor: default; }

/* ── R18-3 — fila con interruptor (reemplaza los checkbox del wizard) ────── */
.wz-tog-fila { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.wz-tog-txt { flex: 1; }
.wz-tog-txt small { display: block; font-size: 0.82rem; color: var(--color-text-soft); }
.wz-tog-fila .ac-toggle { flex: none; }
.wz-esp-chip.nore { background: var(--color-border); color: var(--color-text-soft); }

/* ── R19-3 — wizard, paso datos: 2 columnas en escritorio ── */
.wz-datos-grid { display: grid; grid-template-columns: 1fr; gap: 0 32px; }
@media (min-width: 860px) { .wz-datos-grid { grid-template-columns: 1fr 1fr; } }
#avisoFamiliaLista { text-align: justify; }

/* ── R19-3 — Mi cuenta: dos columnas en escritorio + botón de entrada ancho ── */
.cuenta-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 860px) { .cuenta-grid { grid-template-columns: 1fr 1fr; } }
.btn-ir-app { min-width: 320px; max-width: 100%; justify-content: center; font-size: 1.05rem; padding: 14px 26px; }
/* Login/edición de un solo campo se quedan angostos; la vista de cuenta ya
   lograda (grilla de 2 columnas) usa el ancho completo de .container. */
.cuenta-estrecho { max-width: 460px; margin-left: auto; margin-right: auto; }

/* R19-2 — porcentaje junto a los puntos de progreso del wizard */
.wz-progreso-pct { font-size: 0.84rem; font-weight: 700; color: var(--color-primary-dark); margin-left: 8px; align-self: center; }

/* ── R19-2 — extraordinario: activador "Lo quiero acordar" + tarjeta activa ── */
.wz-especial { scroll-margin-top: 82px; }
.wz-esp-head-row { display: flex; align-items: center; gap: 10px; padding-right: 12px; }
.wz-esp-head-row .wz-esp-cab { flex: 1; min-width: 0; }
.wz-esp-acordar { color: var(--color-text-soft); white-space: nowrap; }
.wz-esp-head-row .ac-toggle { flex: none; }
.wz-esp-head-row .wz-esp-chip { flex: none; }
.wz-especial.abierta { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.wz-especial.abierta .wz-esp-cab h4 { color: var(--color-primary-dark); }
@media (max-width: 560px) { .wz-esp-acordar { display: none; } }

/* R20 — rótulo de la columna de interruptores, una sola vez sobre la lista
   (antes se repetía en las 8 filas). Se alinea con el ancho del control. */
.wz-esp-encab {
  display: flex; justify-content: flex-end;
  padding: 0 12px 6px 0; margin-top: 10px;
}
.wz-esp-encab span {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--color-text-soft); text-transform: uppercase;
}
/* R20 — títulos largos ("Cumpleaños de los padres", "Día de la madre y del
   padre") se partían dejando el ícono colgando y la fila despareja. */
.wz-esp-head-row .wz-esp-cab h4 {
  font-size: 0.98rem; line-height: 1.25; text-wrap: balance;
}

.wz-atajo-horas input[type="time"] {
  padding: 8px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}

/* --- Calendario de mes proyectado --- */
.wz-mes-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 10px;
}

.wz-mes-nav button {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 1rem;
}

/* R11-a: bordes de una etapa del progresivo — la flecha queda inactiva. */
.wz-mes-nav button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.wz-mes-titulo { font-weight: 800; }

.wz-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font-size: 0.72rem;
}

.wz-cal-h {
  text-align: center;
  color: var(--color-text-soft);
  font-weight: 700;
  padding-bottom: 4px;
}

.wz-cal-dia {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
  font-weight: 700;
}

.wz-cal-dia.fuera { background: transparent; }
.wz-cal-dia.tocable { cursor: pointer; }
.wz-cal-dia.tocable:active { transform: scale(0.94); }

/* R21-11 — feriado legal: un punto ámbar en la esquina. Deliberadamente NO usa
   fondo ni color de texto, porque esos ya significan "con el otro progenitor" y
   "parte del día": un feriado puede coincidir con cualquiera de los dos estados
   y debe poder verse encima, sin taparlos. */
.wz-cal-dia.feriado { position: relative; }
.wz-cal-dia.feriado::after {
  content: ""; position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent-dark);
}
.pt.pt-feriado { background: var(--color-accent-dark) !important; border-radius: 50%; }

/* ── R8-e: tarjeta de día + reloj de 15 min + lista de períodos ─────────── */
.wz-card-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, 0.45);
}
.wz-diacard {
  position: fixed; z-index: 61;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 28px));
  max-height: 86vh; overflow-y: auto;
  background: var(--color-bg-card, var(--color-bg));
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .wz-diacard { background: var(--color-bg-card, #1c2733); }
.wz-diacard h3 { margin: 0 0 10px; }
.wz-hora-btn {
  font: inherit; font-weight: 700; font-size: 1.05rem;
  padding: 8px 18px; border-radius: 12px;
  border: 1.5px solid var(--color-border, #ccc);
  background: transparent; color: var(--color-text);
  cursor: pointer;
}
/* R11-b: retiro y regreso en una sola fila; el reloj se despliega debajo. */
.wz-fila-horas {
  display: flex; gap: 12px; align-items: flex-end;
}
.wz-fila-horas > .wz-field { flex: 1; min-width: 0; }
.wz-fila-horas .wz-hora-btn { width: 100%; text-align: left; }
.wz-hora-btn.on { border-color: var(--color-primary); color: var(--color-primary-dark); }
.wz-reloj-wrap { margin-top: 10px; }
/* R11-c: botón que abre el mini-calendario de una fecha especial. */
.wz-cal-btn {
  font: inherit; font-weight: 700; font-size: 1rem;
  padding: 10px 16px; border-radius: 12px;
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); cursor: pointer; width: 100%; text-align: left;
}
.wz-cal-btn.on { border-color: var(--color-primary); color: var(--color-primary-dark); }
.wz-calesp {
  margin-top: 10px; padding: 12px;
  border: 1px solid var(--color-border); border-radius: 12px;
  background: var(--color-bg-alt);
}
/* R11-c: sub-tarjeta para agrupar campos (p. ej. cada tramo de invierno). */
/* R20: dentro de una tarjeta de fecha especial esto daba 3 marcos anidados
   (tarjeta > sub-tarjeta > chips), visualmente muy pesado. Se cambia el marco
   completo por una barra lateral: separa igual, sin encajonar. */
.wz-subcard {
  border: 0; border-left: 3px solid var(--color-primary-soft);
  border-radius: 0; padding: 2px 0 2px 14px; margin: 0 0 18px;
  background: transparent;
}
.wz-subcard > strong {
  display: block; margin-bottom: 8px;
  color: var(--color-primary-dark);
}
/* R11-f: encabezado de rama (día hábil / inhábil) dentro de una tarjeta. */
.wz-branch-title {
  font-weight: 800; font-size: 0.95rem;
  margin: 16px 0 10px; padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.wz-branch-title:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
/* R11-i: resumen por escrito + calendario anual en la pantalla final. */
.wz-redaccion {
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
  font-family: inherit; font-size: 0.9rem; line-height: 1.5;
  color: var(--color-text); margin: 0;
}
.cal-anual {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (min-width: 560px) { .cal-anual { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .cal-anual { grid-template-columns: repeat(4, 1fr); } }
.mini-mes-tit { font-size: 0.72rem; font-weight: 700; text-transform: capitalize; margin-bottom: 4px; text-align: center; color: var(--color-text-soft); }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mini-dia { aspect-ratio: 1; border-radius: 3px; background: var(--color-bg-alt); }
.mini-dia.fuera { background: transparent; }
.mini-dia.completo { background: var(--color-primary); }
.mini-dia.parcial { background: var(--color-primary); opacity: 0.45; }
.cal-anual-leyenda {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px;
  font-size: 0.82rem; color: var(--color-text-soft);
}
.cal-anual-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal-anual-leyenda .mini-dia { width: 14px; height: 14px; aspect-ratio: auto; }
.wz-reloj {
  display: flex; gap: 8px; margin-top: 8px;
  max-width: 220px;
}
.wz-reloj-col {
  flex: 1; height: 150px; overflow-y: auto;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 12px;
  scroll-snap-type: y proximity;
  -webkit-overflow-scrolling: touch;
}
.wz-reloj-item {
  display: block; width: 100%;
  font: inherit; font-size: 1rem; text-align: center;
  padding: 7px 0; border: 0; background: transparent;
  color: var(--color-text); cursor: pointer;
  scroll-snap-align: center;
}
.wz-reloj-item.on {
  background: var(--color-primary); color: #fff;
  font-weight: 800; border-radius: 8px;
}
.wz-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.wz-check input { width: 18px; height: 18px; accent-color: var(--color-primary); }
.wz-bloques-lista { list-style: none; margin: 10px 0 0; padding: 0; }
.wz-bloques-lista li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; margin-bottom: 6px;
  background: var(--color-primary-soft, rgba(47, 143, 111, 0.1));
  border-radius: 10px; font-size: 0.92rem;
}

/* ── R8-f: acordeón de fechas especiales ────────────────────────────────── */
.wz-esp-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 0; border: 0; background: transparent;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.wz-esp-cab h4 { margin: 0; }
.wz-esp-chip {
  flex-shrink: 0; font-size: 0.78rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  background: var(--color-border, #e5e0d5); color: var(--color-text-soft);
}
.wz-esp-chip.ok { background: var(--color-primary); color: #fff; }
.wz-esp-chip.pend { background: var(--color-accent-soft); color: var(--color-accent-dark); }
.wz-especial .wz-especial-body { margin-top: 12px; }
.wz-esp-resumen-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--color-border, #eee);
}
.wz-esp-resumen-row:last-child { border-bottom: 0; }
/* R9-g: día parcial = diagonal del MISMO color sólido que el día completo */
.wz-cal-dia.parcial {
  background: repeating-linear-gradient(135deg, var(--color-primary) 0 5px, var(--color-primary-soft) 5px 10px);
  color: var(--color-primary-dark);
}
.wz-cal-dia.completo { background: var(--color-primary); color: #fff; }
/* Muestra en la leyenda de "parte del día" */
.pt.pt-diag { background: repeating-linear-gradient(135deg, var(--color-primary) 0 3px, var(--color-primary-soft) 3px 6px) !important; }

.wz-cal-leyenda {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--color-text-soft);
  margin-top: 10px;
}

.wz-cal-leyenda .pt { width: 12px; height: 12px; border-radius: 4px; display: inline-block; margin-right: 5px; vertical-align: -1px; }

/* --- Tarjetas de fechas especiales (paso 3): estado definido / pendiente --- */
.wz-especial {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--color-surface);
}

.wz-especial-cab {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wz-especial-cab h4 { margin: 0; font-size: 1rem; }

.wz-especial-estado {
  display: inline-flex;
  gap: 6px;
}

.wz-especial-estado button {
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.wz-especial-estado button.on.definir { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.wz-especial-estado button.on.pendiente { background: var(--color-accent); border-color: var(--color-accent); color: #2B2A26; }

.wz-especial-body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
}

.wz-especial-pendiente-nota {
  padding: 0 16px 16px;
  color: var(--color-text-soft);
  font-size: 0.85rem;
  font-style: italic;
}

.wz-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.wz-radio-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}

.wz-hint {
  font-size: 0.82rem;
  color: var(--color-text-soft);
  margin-top: -8px;
  margin-bottom: 14px;
}
/* R11-c: el margen negativo de arriba montaba el hint sobre las píldoras cuando
   estas envuelven a dos filas. Tras un grupo de chips, el hint respira. */
.wz-chips + .wz-hint { margin-top: 6px; }

/* --- Paso 4: resumen --- */
.wz-resumen-stat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}

.wz-stat-card {
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}

.wz-stat-card .num {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.wz-stat-card .lbl {
  font-size: 0.8rem;
  color: var(--color-text-soft);
}

/* --- Navegación entre pasos --- */
.wz-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 28px 0 40px;
}

.wz-guardado {
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-text-soft);
  margin-bottom: 6px;
}

/* ==========================================================================
   Cuenta / Familia / Invitación (F2-E2)
   ========================================================================== */

/* Pestañas Iniciar sesión / Crear cuenta */
.auth-tabs {
  display: flex;
  gap: 6px;
  background: var(--color-bg-alt);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 20px;
}

.auth-tabs button {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 10px 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-text-soft);
  cursor: pointer;
}

.auth-tabs button.on {
  background: var(--color-surface);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-card);
}

.auth-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-soft);
  font-size: 0.82rem;
  margin: 18px 0;
}

.auth-sep::before, .auth-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.btn-block { width: 100%; justify-content: center; }

.auth-error {
  background: rgba(198, 73, 63, 0.1);
  border: 1px solid rgba(198, 73, 63, 0.45);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.88rem;
  margin: 12px 0 0;
}

.link-suave {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--color-primary-dark);
  text-decoration: underline;
  cursor: pointer;
}

/* Código de invitación GRANDE */
.inv-codigo {
  /* R21-12: 9vw + 0.18em de separación desbordaba la tarjeta y partía el código
     de 8 caracteres en dos líneas — ilegible justo en el dato que hay que
     copiar. `nowrap` garantiza que nunca se parta, y el tamaño se ajusta solo. */
  font-size: clamp(1.5rem, 4.5vw, 2.3rem);
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: center;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border-radius: var(--radius-md);
  padding: 18px 8px;
  margin: 14px 0;
  user-select: all;
  overflow-wrap: anywhere;
}

/* Miembros de la familia */
.miembro-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.miembro-row:last-child { border-bottom: none; }

.miembro-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
}
.miembro-avatar .ico { width: 20px; height: 20px; }

/* Punto de color de un nivel de la escalera (usa --nivel-1..6). Reutilizable
   fuera de .escalera-dots (p.ej. dentro de una lista de texto). */
.edot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
  margin-bottom: 2px;
}
.escalera-nivel-lista { padding-left: 4px; }
.escalera-nivel-lista li { list-style: none; margin-bottom: 6px; }

.miembro-row .rol {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-soft);
  background: var(--color-bg-alt);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.estado-pill {
  display: inline-block;
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;   /* R21-12: si el texto envuelve, la 2.ª línea va centrada */
}

/* Toast flotante */
.ac-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  max-width: min(92vw, 420px);
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1000;
}

.ac-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.ac-toast.error { background: #8f3a33; color: #fff; }

/* ==========================================================================
   Comparador + rondas de acercamiento + mediación (F2-E4)
   Semáforo suave: igual=verde primario, cerca=ámbar (nivel-3), distinto=
   terracota apagado (NUNCA el rojo agresivo de --nivel-6, reservado a tribunal).
   ========================================================================== */

:root {
  --color-cerca: #C99A2E;
  --color-cerca-soft: #FBF1DC;
  --color-distinto: #B9695C;
  --color-distinto-soft: #F3E4E1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-cerca: #E0B24A;
    --color-cerca-soft: #3A311C;
    --color-distinto: #D08D80;
    --color-distinto-soft: #3A2723;
  }
}
:root[data-theme="dark"] {
  --color-cerca: #E0B24A;
  --color-cerca-soft: #3A311C;
  --color-distinto: #D08D80;
  --color-distinto-soft: #3A2723;
}

/* --- Banner de % de coincidencia --- */
.cmp-pct-banner {
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  text-align: center;
  margin: 22px 0;
  border: 1px solid var(--color-border);
}
.cmp-pct-banner .cmp-pct-num { font-size: 2.4rem; font-weight: 800; display: block; line-height: 1; }
.cmp-pct-banner .cmp-pct-msg { font-weight: 700; margin-top: 6px; }
.cmp-pct-banner .cmp-pct-detalle { font-size: 0.85rem; color: var(--color-text-soft); margin-top: 4px; }
.cmp-pct-banner.alta { background: var(--color-primary-soft); border-color: var(--color-primary); }
.cmp-pct-banner.alta .cmp-pct-num, .cmp-pct-banner.alta .cmp-pct-msg { color: var(--color-primary-dark); }
.cmp-pct-banner.media { background: var(--color-cerca-soft); border-color: var(--color-cerca); }
.cmp-pct-banner.media .cmp-pct-num, .cmp-pct-banner.media .cmp-pct-msg { color: var(--color-cerca); }
.cmp-pct-banner.baja { background: var(--color-distinto-soft); border-color: var(--color-distinto); }
.cmp-pct-banner.baja .cmp-pct-num, .cmp-pct-banner.baja .cmp-pct-msg { color: var(--color-distinto); }

/* --- Lista de categorías del comparador --- */
.cmp-lista { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }

.cmp-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.cmp-item-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.cmp-item-cab .titulo { font-weight: 700; flex: 1; }

.cmp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.cmp-badge.igual { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.cmp-badge.cerca { background: var(--color-cerca-soft); color: var(--color-cerca); }
.cmp-badge.distinto { background: var(--color-distinto-soft); color: var(--color-distinto); }
.cmp-badge.pendiente { background: var(--color-bg-alt); color: var(--color-text-soft); }

.cmp-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  font-size: 0.88rem;
}
@media (min-width: 560px) {
  .cmp-cols.dos { grid-template-columns: 1fr 1fr; }
}
.cmp-cols .col { background: var(--color-bg-alt); border-radius: var(--radius-sm); padding: 8px 12px; }
.cmp-cols .col .nombre { font-weight: 700; font-size: 0.8rem; color: var(--color-text-soft); display: block; margin-bottom: 2px; }

.cmp-pendientes-nota {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  font-style: italic;
  margin-top: 6px;
}

/* --- Rondas de acercamiento (acercar/) --- */
.ac-mentaliza {
  text-align: center;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 18px 0;
}

.ac-ronda-banner {
  text-align: center;
  font-weight: 700;
  color: var(--color-text-soft);
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.ac-cat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 16px;
}

.ac-cat-card .titulo { font-weight: 800; font-size: 1.05rem; margin-bottom: 10px; }

.ac-opciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.ac-opcion-btn {
  text-align: left;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-text);
}
.ac-opcion-btn strong { display: block; margin-bottom: 2px; }
.ac-opcion-btn span.desc { font-size: 0.85rem; color: var(--color-text-soft); }

.ac-opcion-btn.mia-elegida { border-color: var(--color-primary); background: var(--color-primary-soft); }
.ac-opcion-btn.mia-elegida strong { color: var(--color-primary-dark); }

.ac-opcion-otro-eligio {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
  border-radius: 999px;
  padding: 3px 9px;
  margin-left: 6px;
}

.ac-resuelto {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.ac-confirmar-row {
  text-align: center;
  margin: 26px 0 10px;
}

.ac-celebracion {
  text-align: center;
  padding: 40px 20px;
}
.ac-celebracion .emoji-grande { font-size: 3.2rem; display: block; margin-bottom: 10px; }
.ac-celebracion .emoji-grande[data-ico] { color: var(--color-primary-dark); }
.ac-celebracion .emoji-grande[data-ico] .ico { width: 52px; height: 52px; }

/* --- Mediación --- */
.med-fono-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }

/* ==========================================================================
   Acuerdo final (F2-E5) — acuerdo/index.html + js/acuerdo.js
   ========================================================================== */

.acu-hijos-lista {
  margin: 10px 0 0;
  padding-left: 20px;
}
.acu-hijos-lista li { margin-bottom: 4px; }

/* Cláusulas: "una por bloque" con subtítulos amables por sobre el texto legal
   tal cual lo produce RDR.redactar (no se altera ni una palabra). */
.clausula-bloque { margin: 26px 0; }
.clausula-bloque h2 { font-size: 1.15rem; margin: 0 0 4px; }
.clausula-legal-heading {
  margin: 0 0 12px;
  font-style: italic;
}
.clausula {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  font-size: 0.92rem;
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Temas pendientes */
.acu-pendientes-lista { margin: 10px 0 0; padding-left: 20px; }
.acu-pendientes-lista li { margin-bottom: 6px; color: var(--color-text-soft); }

/* Calendario anual: 12 mini-meses en grilla */
.cal-anio-titulo { font-size: 1.1rem; margin: 26px 0 4px; }
.cal-anio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 10px 0 20px;
}
.cal-mes {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.cal-mes-titulo {
  font-weight: 700;
  font-size: 0.8rem;
  text-align: center;
  margin-bottom: 6px;
}
.cal-mes-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-dia {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  border-radius: 3px;
  background: var(--color-bg-alt);
  color: var(--color-text-soft);
}
.cal-dia.fuera { background: transparent; }
.cal-dia.completo { background: var(--color-primary); color: #fff; font-weight: 700; }
.cal-dia.parcial { background: var(--color-accent-soft); color: var(--color-accent-dark); font-weight: 700; }

.cal-leyenda {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--color-text-soft);
  margin: 6px 0 24px;
}
.cal-leyenda .pt { width: 12px; height: 12px; border-radius: 4px; display: inline-block; margin-right: 5px; vertical-align: -1px; }

/* Solo visible al imprimir (rotulado del PDF) */
.print-only { display: none; }

/* --- Impresión: hoja "Borrador de acuerdo" limpia, sin UI de la app --- */
@media print {
  .no-print { display: none !important; }
  .print-only { display: block !important; }

  body { background: #fff !important; color: #000 !important; }
  main.container { max-width: none !important; padding: 0 !important; }

  .card, .clausula, .cal-mes {
    box-shadow: none !important;
    border-color: #bbb !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .clausula-bloque, .acu-resumen-cards, .cal-anio-titulo + .cal-anio-grid {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  a { color: #000 !important; text-decoration: none !important; }

  .cal-dia.completo {
    background: #ccc !important;
    color: #000 !important;
    border: 1px solid #333;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .cal-dia.parcial {
    background: #eee !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .print-titulo { font-size: 1.3rem; font-weight: 800; text-align: center; margin: 0 0 8px; }
  .print-rotulado {
    text-align: center;
    font-size: 0.85rem;
    font-style: italic;
    color: #333 !important;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #999;
  }
  .print-disclaimer {
    margin-top: 24px;
    padding-top: 10px;
    border-top: 1px solid #999;
    font-size: 0.78rem;
    color: #333 !important;
    text-align: center;
  }
}

/* ==========================================================================
   F3-A — régimen vigente (regimen/) + calendario vivo (calendario/) + hub
   Casi todo reusa clases ya existentes (card, aviso, wz-resumen-stat,
   wz-cal-grid, miembro-row…). Solo agrega lo puntual que faltaba.
   ========================================================================== */

/* Botones deshabilitados (p. ej. "Bitácora — próximamente" en el hub) */
.btn:disabled, .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn:disabled:hover, .btn[disabled]:hover { transform: none; }

/* Mes navegable de calendario/: mismo look que la vista previa del wizard,
   pero a ancho completo de página (sin el contenedor .wz-field). */
#mesGrid.wz-cal-grid { margin-bottom: 4px; }

/* ==========================================================================
   F3-B — registro de cumplimiento + cambios con compensación + bitácora +
   balanza de flexibilidad. Reusa card/wz-chip/miembro-row/cmp-badge.
   ========================================================================== */

.btn-sm { padding: 8px 14px; font-size: 0.85rem; }

/* Fila de "Qué viene" + botón "Pedir un cambio" debajo, sin romper miembro-row */
.proximo-item { margin-bottom: 6px; }
.proximo-accion { display: flex; justify-content: flex-end; padding: 2px 0 8px; }

/* Registro de cumplimiento */
.reg-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.reg-item .miembro-row { border-bottom: none; padding: 0 0 8px; }
.reg-estado p { margin: 0 0 8px; }
.reg-confirmado { color: var(--color-primary-dark); font-weight: 700; }

/* Solicitudes de cambio */
.cmb-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.cmb-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.cmb-cab .titulo { font-weight: 700; }
.cmb-item p { margin: 0 0 6px; }

.cmb-puentes {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.cmb-puente {
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.cmb-puente:last-child { margin-bottom: 0; }

/* ==========================================================================
   Bitácora (bitacora/index.html + js/bitacora.js) — línea de tiempo neutral,
   idéntica para ambos progenitores. Print reusa las reglas @media print de
   acuerdo/ (.no-print/.print-only ya definidas arriba).
   ========================================================================== */

.bit-lista { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }

.bit-item {
  display: flex;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.bit-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}
.bit-icon .ico { width: 19px; height: 19px; }
.bit-cuerpo { flex: 1; min-width: 0; }
.bit-fecha { font-weight: 700; font-size: 0.88rem; }
.bit-texto { margin: 3px 0; font-size: 0.9rem; }
.bit-meta { font-size: 0.78rem; color: var(--color-text-soft); }

/* ==========================================================================
   Balanza de flexibilidad (familia/) — SOLO actos positivos, nunca faltas.
   ========================================================================== */

.bal-barras { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.bal-fila { display: flex; align-items: center; gap: 10px; }
.bal-nombre { flex: none; width: 92px; font-size: 0.85rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bal-pista { flex: 1; background: var(--color-bg-alt); border-radius: 999px; height: 14px; overflow: hidden; }
.bal-relleno { height: 100%; background: var(--color-primary); border-radius: 999px; min-width: 6px; transition: width 0.3s ease; }
.bal-num { flex: none; width: 26px; text-align: right; font-weight: 800; font-size: 0.9rem; color: var(--color-primary-dark); }
.bal-nudge {
  background: var(--color-accent-soft);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.88rem;
  margin-top: 10px;
}

/* ==========================================================================
   F4 — módulo Alimentos (alimentos/index.html + js/alimentos.js)
   Educación (acordeón) + calculadora referencial pública, sin cuenta.
   Reusa card/aviso/wz-field/wz-resumen-stat/wz-stat-card/estado-pill/
   guia-index/details.guia ya existentes; solo agrega lo puntual que faltaba.
   ========================================================================== */

.alm-fila-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 12px;
  align-items: end; /* R13 — alinea los campos aunque el label de al lado ocupe 2 líneas */
}
@media (min-width: 480px) {
  .alm-fila-2 { grid-template-columns: 1fr 1fr; }
}
/* R13 — el input/select queda al fondo de la celda, así ambos recuadros de la
   fila (p. ej. "Número de hijos" y "Gasto estimado") quedan a la misma altura. */
.alm-fila-2 > .wz-field { display: flex; flex-direction: column; margin-bottom: 12px; }
.alm-fila-2 > .wz-field > label { margin-bottom: auto; }
.alm-fila-2 > .wz-field > label { padding-bottom: 8px; }

.alm-indic-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 18px;
}

.alm-resultado-final {
  background: var(--color-accent-soft);
}
.alm-resultado-final .num { color: var(--color-accent-dark); }

/* ==========================================================================
   F5 — pension/ (constructor a ciegas de alimentos) + pagos/ (cumplimiento).
   Reusa card/wz-field/wz-chips/cmp-badge/cmp-cols/ac-opciones/aviso ya
   existentes; solo agrega lo puntual: gastos con fotos, cards de pago.
   ========================================================================== */

.gasto-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.gasto-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gasto-cat { font-weight: 700; }
.gasto-cab-der { display: flex; align-items: center; gap: 8px; }
.gasto-monto { font-weight: 800; color: var(--color-primary-dark); }
.gasto-acciones { display: flex; gap: 2px; }
.btn-icon {
  background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  width: 26px; height: 26px; font-size: 0.85rem; line-height: 1; cursor: pointer;
  color: var(--color-text-soft); display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon:hover { background: var(--color-bg-alt); color: var(--color-text); }
.gasto-fotos, .gasto-fotos-preview-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gasto-foto {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--color-border);
}
.gasto-foto-preview { position: relative; display: inline-block; }
.gasto-foto-preview img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.gasto-foto-preview button {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border-radius: 999px; border: none; background: var(--color-distinto); color: #fff;
  font-size: 0.75rem; line-height: 1; cursor: pointer;
}

/* R12 — badge "pago directo" en un gasto */
.gasto-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 2px 7px; border-radius: 999px;
  background: var(--color-accent-soft, rgba(245,206,91,0.25)); color: var(--color-text);
  vertical-align: middle;
}
.gasto-nota-calc { font-size: 0.78rem; }

/* R12 — grupos desplegables (vivienda / educación) y colapso de gastos */
.gasto-grupo { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 10px; overflow: hidden; }
.gasto-grupo > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; cursor: pointer; list-style: none; background: var(--color-bg-alt);
}
.gasto-grupo > summary::-webkit-details-marker { display: none; }
.gasto-grupo > summary::before { content: "▸"; margin-right: 6px; color: var(--color-text-soft); transition: transform 0.15s; }
.gasto-grupo[open] > summary::before { transform: rotate(90deg); }
.gasto-grupo-items { padding: 10px 12px 2px; }
.gasto-grupo-items .gasto-item { background: var(--color-bg-alt); }
.gastos-colapso > summary { cursor: pointer; color: var(--color-primary-dark); font-weight: 600; padding: 4px 0; }

/* R12 — checkbox en línea (pago directo, términos) */
.check-inline { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; cursor: pointer; }
.check-inline input { margin-top: 3px; flex: 0 0 auto; }

/* R12 — modal (agregar/editar gasto) */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center;
  background: rgba(15, 39, 66, 0.55); padding: 24px 14px; overflow-y: auto;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  position: relative; width: 100%; max-width: 480px; background: var(--color-surface);
  border-radius: var(--radius-lg, 16px); border: 1px solid var(--color-border);
  padding: 22px 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); margin: auto 0;
}
.modal-close {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-bg-alt); color: var(--color-text-soft);
  font-size: 0.9rem; line-height: 1; cursor: pointer;
}
.modal-close:hover { background: var(--color-border); color: var(--color-text); }
body.modal-abierto { overflow: hidden; }

/* R12-g — gate de términos (reusa .modal-overlay/.modal-card) */
.terminos-gate { align-items: center; }
.terminos-box {
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 10px 14px; margin: 12px 0;
  max-height: 200px; overflow-y: auto;
}
.terminos-box p { margin: 0 0 8px; }
.terminos-box p:last-child { margin-bottom: 0; }
.terminos-check { display: block; font-weight: 500; cursor: pointer; margin: 12px 0; line-height: 1.5; }
.terminos-check input { margin-right: 8px; vertical-align: middle; }

/* Cards de pago mensual (pagos/) */
.pago-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.pago-mes-card {
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  text-align: center;
  margin-bottom: 16px;
}
.pago-mes-card .monto { font-size: 2rem; font-weight: 800; color: var(--color-primary-dark); display: block; }
.pago-mes-card .sub { color: var(--color-text-soft); font-size: 0.88rem; }


/* ==========================================================================
   Modo revisión (?revision=1) — notas ancladas para testers de la beta.
   ========================================================================== */

.revision-barra {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px;
  z-index: 500; background: var(--color-text); color: #fff;
  border-radius: 999px; padding: 8px 10px 8px 16px;
  display: flex; align-items: center; gap: 10px; font-size: 0.85rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.revision-barra .btn { padding: 6px 12px; }
body.revision-esperando { cursor: crosshair; }
.revision-pin {
  position: fixed; z-index: 499; transform: translate(-50%, -50%);
  width: 24px; height: 24px; border-radius: 999px; border: 2px solid #fff;
  background: var(--color-accent); color: #fff; font-weight: 800; font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.revision-tooltip {
  position: fixed; z-index: 501; transform: translate(-50%, 12px);
  max-width: 240px; background: var(--color-text); color: #fff;
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: 0.82rem;
}
.revision-form {
  position: fixed; z-index: 502; width: 240px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.revision-form textarea {
  width: 100%; box-sizing: border-box; resize: vertical; margin-bottom: 8px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px 8px;
  font: inherit; background: var(--color-bg); color: var(--color-text);
}