/* Tarifario · rediseño 3 (mezcla de los prototipos)
   Lectura: herramienta interna para una sola persona no técnica. Sobria, de gestión, con poca información de entrada:
   lo principal se ve primero y el detalle se abre cuando hace falta.
   Diales: variedad 3 · movimiento 3 · densidad 4.
   Formas (regla única): tarjetas 12px, botones y campos 8px, chips 6px.
   Color: neutros de una sola familia + UN acento (el del tema elegido en Ajustes, por defecto el azul de Párraga).
   Las familias de producto conservan su color para reconocerlas (codificación de datos, no acento).
   Superficies planas: la profundidad sale de bordes finos, no de sombras (salvo diálogos y avisos flotantes).
   Layout: barra superior con pestañas + área de trabajo de 1200px como máximo; en móvil, barra inferior. */

:root {
  /* El tema elegido en Ajustes escribe --t-* desde JavaScript; estos son los del tema Párraga (antes de cargar, y en el acceso). */
  --t-accent: #1e63a8;
  --t-accent-strong: #164b80;
  --t-accent-soft: #e3eef9;
  --t-accent-dark: #7fb3e6;

  --bg: #edf1f6;
  --surface: #ffffff;
  --surface-2: #f4f7fb;
  --surface-3: #e6ecf4;
  --ink: #0f1b2a;
  --ink-2: #42506a;
  --ink-3: #5a6780;
  --line: #dae2ed;
  --line-strong: #c2cede;
  /* La marca, siempre oscura: barra superior, tarea del mes y resúmenes. Sale del tema elegido. */
  --marca: color-mix(in srgb, var(--t-accent-strong) 48%, #06101d);
  --marca-2: color-mix(in srgb, var(--t-accent) 52%, #0a1a2e);
  --sobre-marca-2: rgba(255, 255, 255, 0.74);
  /* Paleta de apoyo para distinguir bloques (no son acentos: cada uno marca un tipo de cosa). */
  --c-azul: var(--accent-text); --c-azul-s: var(--accent-soft);
  --c-ambar: #9a5b00; --c-ambar-s: #fcedcc;
  --c-verde: #167044; --c-verde-s: #dcf1e4;
  --c-violeta: #5242b8; --c-violeta-s: #e9e7fb;
  --c-teja: #b0421b; --c-teja-s: #fbe7de;
  --c-turquesa: #0a6874; --c-turquesa-s: #d8eff2;
  --accent: var(--t-accent);
  --accent-strong: var(--t-accent-strong);
  --accent-soft: var(--t-accent-soft);
  --accent-text: var(--t-accent-strong);
  --on-accent: #ffffff;
  --sube: #b4441c;
  --sube-soft: #fcede6;
  --baja: #177245;
  --baja-soft: #e4f4ea;
  --aviso: #8a5a00;
  --aviso-soft: #fbf1d6;
  --mal: #b42318;
  --mal-soft: #fdeceb;
  --sombra-1: 0 1px 2px rgba(16, 24, 40, 0.04);
  --sombra-2: 0 1px 2px rgba(16, 24, 40, 0.04);
  --sombra-3: 0 24px 60px -18px rgba(16, 24, 40, 0.28), 0 2px 6px rgba(16, 24, 40, 0.06);
  --velo: rgba(14, 17, 22, 0.42);

  --f-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --r-card: 12px;
  --r-ctl: 8px;
  --r-chip: 6px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 140ms;
  --t-med: 220ms;
  --alto-cabeza: 60px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b111a;
    --surface: #121a26;
    --surface-2: #172131;
    --surface-3: #1e2a3d;
    --ink: #eaf0f7;
    --ink-2: #b3bfd0;
    --ink-3: #8e9bb1;
    --line: #223047;
    --line-strong: #31415c;
    --marca: color-mix(in srgb, var(--t-accent-strong) 64%, #040a13);
    --marca-2: color-mix(in srgb, var(--t-accent-strong) 78%, #07121f);
    --c-ambar: #f2b84b; --c-ambar-s: rgba(242, 184, 75, 0.14);
    --c-verde: #6fd69a; --c-verde-s: rgba(80, 200, 130, 0.14);
    --c-violeta: #aa9ff7; --c-violeta-s: rgba(170, 159, 247, 0.15);
    --c-teja: #ff9b7a; --c-teja-s: rgba(255, 128, 92, 0.14);
    --c-turquesa: #5fcfdc; --c-turquesa-s: rgba(95, 207, 220, 0.14);
    --accent: var(--t-accent-dark);
    --accent-strong: var(--t-accent-dark);
    --accent-soft: color-mix(in srgb, var(--t-accent-dark) 15%, transparent);
    --accent-text: var(--t-accent-dark);
    --on-accent: #0f1114;
    --sube: #ff9b7a;
    --sube-soft: rgba(255, 128, 92, 0.12);
    --baja: #6fd69a;
    --baja-soft: rgba(80, 200, 130, 0.12);
    --aviso: #f2c25c;
    --aviso-soft: rgba(242, 194, 92, 0.12);
    --mal: #ff8a80;
    --mal-soft: rgba(255, 110, 100, 0.13);
    --sombra-1: none;
    --sombra-2: none;
    --sombra-3: 0 30px 70px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --velo: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b111a;
  --surface: #121a26;
  --surface-2: #172131;
  --surface-3: #1e2a3d;
  --ink: #eaf0f7;
  --ink-2: #b3bfd0;
  --ink-3: #8e9bb1;
  --line: #223047;
  --line-strong: #31415c;
  --marca: color-mix(in srgb, var(--t-accent-strong) 64%, #040a13);
  --marca-2: color-mix(in srgb, var(--t-accent-strong) 78%, #07121f);
  --c-ambar: #f2b84b; --c-ambar-s: rgba(242, 184, 75, 0.14);
  --c-verde: #6fd69a; --c-verde-s: rgba(80, 200, 130, 0.14);
  --c-violeta: #aa9ff7; --c-violeta-s: rgba(170, 159, 247, 0.15);
  --c-teja: #ff9b7a; --c-teja-s: rgba(255, 128, 92, 0.14);
  --c-turquesa: #5fcfdc; --c-turquesa-s: rgba(95, 207, 220, 0.14);
  --accent: var(--t-accent-dark);
  --accent-strong: var(--t-accent-dark);
  --accent-soft: color-mix(in srgb, var(--t-accent-dark) 15%, transparent);
  --accent-text: var(--t-accent-dark);
  --on-accent: #0f1114;
  --sube: #ff9b7a;
  --sube-soft: rgba(255, 128, 92, 0.12);
  --baja: #6fd69a;
  --baja-soft: rgba(80, 200, 130, 0.12);
  --aviso: #f2c25c;
  --aviso-soft: rgba(242, 194, 92, 0.12);
  --mal: #ff8a80;
  --mal-soft: rgba(255, 110, 100, 0.13);
  --sombra-1: none;
  --sombra-2: none;
  --sombra-3: 0 30px 70px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --velo: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* ─── Base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabeza) + 12px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14.5px/1.55 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; text-wrap: balance; letter-spacing: -0.01em; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
b, strong { font-weight: 600; }
a { color: var(--accent-text); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-size: 0.9em; letter-spacing: 0; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: var(--r-ctl); background: var(--ink); color: var(--surface); font-weight: 600; text-decoration: none; }
.saltar:focus { top: 12px; }

/* Iconos Phosphor duotono: el trazo hereda currentColor y el relleno suave va al 20 %. */
svg.i { width: 18px; height: 18px; flex: none; fill: currentColor; }
svg.i.s { width: 15px; height: 15px; }
svg.i.l { width: 22px; height: 22px; }
svg.i.xl { width: 28px; height: 28px; }

/* ─── Estructura: barra superior con pestañas ──────────────────────────── */

.app { display: flex; flex-direction: column; min-height: 100%; }

.cabeza {
  position: sticky; top: 0; z-index: 20;
  height: var(--alto-cabeza);
  display: flex; align-items: center; gap: 28px;
  padding: 0 clamp(16px, 3vw, 32px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex: none; }
.marca-sello {
  width: 32px; height: 32px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
}
.marca-sello svg { width: 20px; height: 20px; }
.marca-logo { width: 74px; height: 32px; object-fit: contain; object-position: left center; border-radius: 6px; background: #f8f9fb; flex: none; }
/* El logo de Párraga sin fondo; en oscuro, su versión clara a un tamaño que se lea. */
.marca-logo.sin-fondo { width: auto; height: 42px; background: none; border-radius: 0; }
.marca-logo.oscuro { display: none; }
:root[data-theme="dark"] .marca-logo.claro { display: none; }
:root[data-theme="dark"] .marca-logo.oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marca-logo.claro { display: none; }
  :root:not([data-theme="light"]) .marca-logo.oscuro { display: block; }
}
.marca .nombre { display: flex; flex-direction: column; padding-left: 12px; border-left: 1px solid var(--line); line-height: 1.15; }
.marca b { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.marca small { color: var(--ink-3); font-size: 12px; }

.nav { display: flex; align-items: stretch; gap: 2px; height: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 0 11px; white-space: nowrap;
  color: var(--ink-3); text-decoration: none; font-weight: 500; font-size: 14px;
  transition: color var(--t-fast) var(--ease);
}
.nav a svg { display: none; }
.nav a:hover { color: var(--ink); }
.nav a::after {
  content: ''; position: absolute; left: 11px; right: 11px; bottom: -1px; height: 2px; border-radius: 2px;
  background: transparent; transition: background-color var(--t-fast) var(--ease);
}
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { background: var(--accent); }
.nav .corto { display: none; }
.cuenta {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  display: inline-grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.cuenta svg.i { width: 13px; height: 13px; display: block !important; }

.cabeza .derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.usuario { display: flex; align-items: center; gap: 10px; }
.usuario .txt { display: flex; flex-direction: column; min-width: 0; text-align: right; line-height: 1.25; }
.usuario b { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.usuario small { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.etiqueta-demo {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: var(--r-chip);
  border: 1px dashed var(--line-strong); color: var(--ink-3); font-size: 12px; font-weight: 500; white-space: nowrap;
}

.principal { flex: 1; min-width: 0; padding: 36px clamp(16px, 3.4vw, 48px) 80px; }
.contenido { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.nota-pie { max-width: 1200px; margin: 40px auto 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px; display: flex; gap: 8px; align-items: center; }

.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cabecera .titulos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cabecera h1 { font-weight: 600; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.025em; }
.cabecera h1:focus { outline: none; }
.cabecera .sub { color: var(--ink-2); font-size: 14.5px; max-width: 70ch; }
.cabecera .acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.migas { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); font-weight: 500; }
.migas a { color: var(--ink-2); text-decoration: none; }
.migas a:hover { color: var(--ink); text-decoration: underline; }

.barra-movil { display: none; }

/* ─── Botones ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 0 14px; border-radius: var(--r-ctl);
  border: 1px solid transparent; background: var(--surface-3); color: var(--ink);
  font-weight: 550; font-size: 14px; white-space: nowrap; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform 110ms var(--ease);
}
.btn:hover { background: color-mix(in srgb, var(--surface-3) 75%, var(--line-strong)); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn.primario { background: var(--accent); color: var(--on-accent); }
.btn.primario:hover { background: var(--accent-strong); }
.btn.borde { background: var(--surface); border-color: var(--line-strong); }
.btn.borde:hover { border-color: var(--ink-3); background: var(--surface-2); }
.btn.fantasma { background: transparent; color: var(--ink-2); }
.btn.fantasma:hover { background: var(--surface-3); color: var(--ink); }
.btn.peligro { background: var(--mal-soft); color: var(--mal); }
.btn.peligro:hover { background: color-mix(in srgb, var(--mal-soft) 70%, var(--mal)); color: var(--mal); }
.btn.grande { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn.mini { min-height: 32px; padding: 0 10px; font-size: 13px; gap: 6px; }
.btn.icono { width: 38px; padding: 0; }
.btn.mini.icono { width: 32px; }
.btn.blanco { background: var(--accent); color: var(--on-accent); }
.btn.blanco:hover { background: var(--accent-strong); }
.btn-enlace { border: 0; background: none; padding: 0; color: var(--accent-text); font-weight: 550; font-size: 13.5px; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.btn-enlace:hover { text-decoration: underline; }

/* ─── Superficies ──────────────────────────────────────────────────────── */

.card { background: var(--surface); border-radius: var(--r-card); border: 1px solid var(--line); }
.card > .card-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px 12px;
}
.card-cab h2, .titulo-seccion { font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; }
.card-cab p { color: var(--ink-3); font-size: 13.5px; margin-top: 2px; }
.card-cab .izq { display: flex; align-items: center; gap: 12px; min-width: 0; }
.card > .card-cab > .izq { flex: 1 1 240px; }
/* En las cabeceras de tarjeta el título basta: el icono decorativo se omite. */
.card > .card-cab > .izq > .pastilla { display: none; }
.card > .card-cuerpo { padding: 4px 20px 20px; }
.separa { border-top: 1px solid var(--line); }

/* Pastilla de icono: neutra; solo los estados (aviso, error, bien) llevan color. */
.pastilla {
  width: 32px; height: 32px; flex: none; border-radius: 8px; display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink-2);
}
.pastilla.s { width: 28px; height: 28px; border-radius: 7px; }
.pastilla.s svg.i { width: 15px; height: 15px; }
.pastilla.l { width: 44px; height: 44px; border-radius: 10px; }
.pastilla.sube { background: var(--sube-soft); color: var(--sube); }
.pastilla.baja { background: var(--baja-soft); color: var(--baja); }
.pastilla.aviso { background: var(--aviso-soft); color: var(--aviso); }
.pastilla.mal { background: var(--mal-soft); color: var(--mal); }
.pastilla.neutra { background: var(--surface-3); color: var(--ink-2); }
.pastilla.fam { background: var(--fam-s); color: var(--fam-f); }

/* ─── Chips y etiquetas ────────────────────────────────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 8px 0 7px; border-radius: var(--r-chip);
  font-size: 12.5px; font-weight: 550; white-space: nowrap;
  background: var(--surface-3); color: var(--ink-2);
}
.chip svg.i { width: 14px; height: 14px; }
.chip.bien { background: var(--baja-soft); color: var(--baja); }
.chip.aviso { background: var(--aviso-soft); color: var(--aviso); }
.chip.mal { background: var(--mal-soft); color: var(--mal); }
.chip.acento { background: var(--accent-soft); color: var(--accent-text); }
.chip.sube { background: var(--sube-soft); color: var(--sube); }
.chip.borde { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }

.fam {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 6px;
  border-radius: var(--r-chip); font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--fam-s); color: var(--fam-f);
}
.fam svg.i { width: 14px; height: 14px; }

.cambio { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: var(--r-chip); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cambio svg.i { width: 13px; height: 13px; }
.cambio.sube { background: var(--sube-soft); color: var(--sube); }
.cambio.baja { background: var(--baja-soft); color: var(--baja); }
.cambio.igual { color: var(--ink-3); font-weight: 500; padding-left: 0; padding-right: 0; }
.sube-txt { color: var(--sube); }
.aviso-txt { color: var(--aviso); }
.baja-txt { color: var(--baja); }
.igual-txt { color: var(--ink-3); }

.adr { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; }
.adr i { width: 9px; height: 9px; transform: rotate(45deg); background: #e36d0d; border-radius: 1.5px; flex: none; }

/* Avatar de cliente: iniciales sobre un neutro (el color se reserva a los estados). */
.avatar {
  width: 36px; height: 36px; flex: none; border-radius: 8px; display: grid; place-items: center;
  font-weight: 600; font-size: 12.5px; letter-spacing: 0;
  background: var(--surface-3); color: var(--ink-2);
}
.avatar.s { width: 30px; height: 30px; border-radius: 7px; font-size: 11.5px; }
.avatar.l { width: 56px; height: 56px; border-radius: 12px; font-size: 19px; }
:root[data-theme="dark"] .fam, :root[data-theme="dark"] .pastilla.fam { background: color-mix(in srgb, var(--fam-o) 14%, transparent); color: var(--fam-o); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fam, :root:not([data-theme="light"]) .pastilla.fam { background: color-mix(in srgb, var(--fam-o) 14%, transparent); color: var(--fam-o); }
}

/* ─── Formularios ──────────────────────────────────────────────────────── */

.campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.campo > label, .campo > .etiqueta { font-size: 13.5px; font-weight: 550; color: var(--ink); }
.campo .ayuda { font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.input, select.input, textarea.input {
  width: 100%; min-height: 44px; padding: 9px 13px;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
textarea.input { min-height: 100px; resize: vertical; line-height: 1.55; }
.input::placeholder { color: var(--ink-3); opacity: 0.8; }
.input:hover { border-color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.input:user-invalid, .input[aria-invalid="true"] { border-color: var(--mal); background: var(--mal-soft); }
.input[readonly], .input:disabled { background: var(--surface-2); color: var(--ink-2); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.rejilla .ancho { grid-column: 1 / -1; }
.con-icono { position: relative; display: block; }
.con-icono > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.con-icono > .input { padding-left: 42px; }

.euros { position: relative; display: inline-flex; align-items: center; width: 100%; }
.euros .input { text-align: right; padding-right: 30px; font-variant-numeric: tabular-nums; font-weight: 550; }
.euros::after { content: '\20AC'; position: absolute; right: 12px; color: var(--ink-3); pointer-events: none; font-weight: 600; }
.euros .input::placeholder { color: var(--ink-3); opacity: 0.55; font-weight: 500; }
.euros.cambia .input { border-color: color-mix(in srgb, var(--accent) 50%, var(--line-strong)); background: var(--accent-soft); color: var(--accent-text); }
.euros.grande .input { min-height: 48px; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; padding-right: 40px; }
.euros.grande::after { font-size: 17px; right: 15px; }

.interruptor { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; font-weight: 600; font-size: 14.5px; }
.interruptor input { appearance: none; width: 44px; height: 26px; border-radius: 99px; background: var(--line-strong); position: relative; cursor: pointer; transition: background-color var(--t-med) var(--ease); margin: 0; flex: none; }
.interruptor input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--t-med) var(--ease); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.3); }
.interruptor input:checked { background: var(--accent); }
.interruptor input:checked::after { transform: translateX(18px); }

/* Control segmentado (Claro / Oscuro / Sistema, tarjetas / lista…) */
.segmentos { align-self: flex-start; display: inline-flex; padding: 4px; gap: 2px; border-radius: 8px; background: var(--surface-3); }
.segmentos button { border: 0; background: transparent; min-height: 34px; padding: 0 12px; border-radius: 7px; font-weight: 550; font-size: 13.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.segmentos button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sombra-1); }

/* Correos uno a uno */
.correos-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.correo-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; font-size: 13.5px; max-width: 100%; }
.correo-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo-chip button { border: 0; background: transparent; color: inherit; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; padding: 0; }
.correo-chip button:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.anadir-correo { display: flex; gap: 8px; }
.anadir-correo .con-icono { flex: 1; min-width: 0; }

/* ─── Tablas ───────────────────────────────────────────────────────────── */

.tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabla th { text-align: left; font-size: 12.5px; font-weight: 550; color: var(--ink-3); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla th:first-child, .tabla td:first-child { padding-left: 22px; }
.tabla th:last-child, .tabla td:last-child { padding-right: 22px; }
.tabla .der { text-align: right; }
.tabla td.der, .tabla td.num { font-variant-numeric: tabular-nums; }
.tabla tbody tr.clic { cursor: pointer; transition: background-color var(--t-fast); }
.tabla tbody tr.clic:hover td { background: var(--surface-2); }
.tabla tr.grupo td { padding-top: 16px; padding-bottom: 8px; border-bottom: 0; }
.celda { display: flex; align-items: center; gap: 12px; min-width: 0; }
.celda .txt { display: flex; flex-direction: column; min-width: 0; }
.celda .txt b { font-weight: 550; }
.celda .txt small { color: var(--ink-3); font-size: 12.5px; }
.acciones-fila { display: flex; gap: 6px; justify-content: flex-end; }

/* ─── Panel ────────────────────────────────────────────────────────────── */

/* Tarea del mes: lo único que hay que hacer, con un botón, y los tres pasos debajo. */
.tarea {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 24px; align-items: center;
  padding: 24px 28px 0; border-radius: var(--r-card); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
}
.tarea .etq { font-size: 13px; font-weight: 550; color: var(--accent-text); }
.tarea h2 { font-weight: 600; font-size: clamp(20px, 2vw, 24px); letter-spacing: -0.02em; line-height: 1.2; margin-top: 4px; }
.tarea p { color: var(--ink-2); max-width: 70ch; margin-top: 6px; }
.tarea > .carril { grid-column: 1 / -1; margin: 4px -28px 0; }
.tarea:not(:has(.carril)) { padding-bottom: 24px; }

/* Carril de pasos (Variación → Revisión → Envío): una barra fina arriba dice dónde se está. */
.carril { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.carril > li { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 14px 20px 16px 28px; min-width: 0; border-right: 1px solid var(--line); }
.carril > li:last-child { border-right: 0; }
.carril > li::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: transparent; }
.carril > li.hecho::before { background: var(--ink-3); }
.carril > li.actual::before { background: var(--accent); }
.carril .n { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--ink-3); margin-top: 1px; }
.carril .n svg.i { width: 13px; height: 13px; }
.carril .hecho .n { background: var(--ink-2); color: var(--surface); }
.carril .actual .n { background: var(--accent); color: var(--on-accent); }
.carril .t { display: flex; flex-direction: column; min-width: 0; }
.carril .t b { font-weight: 550; font-size: 14px; }
.carril .t small { color: var(--ink-3); font-size: 12.5px; }
.carril .pendiente .t b { color: var(--ink-2); }

/* Tres cifras en una sola franja, sin tarjetas sueltas. */
.datos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.datos > div { padding: 16px 22px 18px; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); }
.datos > div:last-child { border-right: 0; }
.datos .etq { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.datos .valor { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 6px; }
.datos small { color: var(--ink-3); font-size: 12.5px; }

.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cifra { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.cifra .arriba { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cifra .etq { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.cifra .valor { font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cifra .det { font-size: 12.5px; color: var(--ink-3); }

.dos { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.columna { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.grafico { position: relative; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico .eje { font: 500 11.5px var(--f-sans); fill: var(--ink-3); }
.grafico .rejilla-l { stroke: var(--line); stroke-width: 1; }
.grafico .cero-l { stroke: var(--line-strong); stroke-width: 1; }
.grafico .linea { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafico .area { fill: var(--accent-soft); }
.grafico .punto { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.grafico .punto.borrador { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.grafico .linea.borrador { stroke-dasharray: 5 5; }
.grafico .etiqueta-fin { font: 600 12.5px var(--f-sans); fill: var(--ink); }
.grafico .guia { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.tooltip {
  position: absolute; pointer-events: none; z-index: 2;
  background: var(--ink); color: var(--surface); border-radius: 8px;
  padding: 9px 11px; font-size: 12.5px; line-height: 1.5; white-space: nowrap; box-shadow: var(--sombra-2);
  transform: translate(-50%, calc(-100% - 14px));
}

.filas { display: flex; flex-direction: column; padding: 0 10px 10px; }
.fila {
  display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; min-width: 0;
  color: inherit; text-decoration: none; border: 0; background: none; width: 100%; text-align: left; font: inherit;
  transition: background-color var(--t-fast);
}
a.fila:hover, button.fila:hover { background: var(--surface-2); }
.fila .txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fila .txt b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .txt small { color: var(--ink-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Revisión ─────────────────────────────────────────────────────────── */

.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.paso {
  position: relative; display: flex; align-items: flex-start; gap: 10px; min-width: 0; text-align: left;
  padding: 14px 18px 15px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent;
  color: var(--ink-2); transition: background-color var(--t-fast);
}
.paso:last-child { border-right: 0; }
.paso::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: transparent; }
.paso:hover { background: var(--surface-2); }
.paso .n { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 12px; background: var(--surface-3); color: var(--ink-3); margin-top: 1px; }
.paso .n svg.i { width: 13px; height: 13px; }
.paso .t { display: flex; flex-direction: column; min-width: 0; }
.paso .t b { font-weight: 550; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paso .t small { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paso.hecho::before { background: var(--ink-3); }
.paso.hecho .n { background: var(--ink-2); color: var(--surface); }
.paso[aria-current="step"]::before { background: var(--accent); }
.paso[aria-current="step"] .n { background: var(--accent); color: var(--on-accent); }

/* Paso 1: la subida del mes, en grande. */
.subida { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); overflow: hidden; }
.subida .izq { padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; }
.subida .der { padding: 24px 26px; background: var(--surface-2); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; justify-content: flex-start; }
.subida h2 { font-weight: 600; font-size: 18px; letter-spacing: -0.015em; }
.subida .izq > div > div > p { margin-top: 2px; font-size: 13.5px; }
.subida .entrada { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.subida .entrada .euros { width: 190px; }
.subida .resultado { display: flex; flex-wrap: wrap; gap: 8px; }
.atajos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.atajos > span { font-size: 13px; color: var(--ink-3); margin-right: 2px; }
.atajos button { border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-pill); height: 32px; padding: 0 12px; font-weight: 550; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.atajos button:hover { border-color: var(--accent); color: var(--accent-text); }

.familias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.familia-card .card-cab { padding-bottom: 8px; }
.familia-card .prods { display: flex; flex-direction: column; padding: 0 10px 12px; }
.prod { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 8px; }
.prod:hover { background: var(--surface-2); }
.prod .txt { display: flex; flex-direction: column; min-width: 0; }
.prod .txt b { font-weight: 550; font-size: 14.5px; line-height: 1.3; }
.prod .txt small { color: var(--ink-3); font-size: 12.5px; }
.prod .valor-fijo { text-align: right; }
.prod .euros .input { min-height: 40px; }
.destello { animation: destello 700ms var(--ease); border-radius: 8px; }
@keyframes destello { from { background: var(--accent-soft); } to { background: transparent; } }

.explica { display: flex; flex-direction: column; gap: 14px; }
.explica .opciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between; }

.pie-fijo {
  position: sticky; bottom: 16px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px 12px 20px; border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(12px);
  border: 1px solid var(--line); box-shadow: var(--sombra-3);
}
.pie-fijo .resumen { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--ink-2); }
.pie-fijo .resumen b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.pie-fijo .botones { display: flex; gap: 8px; flex-wrap: wrap; }
.guardado { font-size: 13px; color: var(--ink-3); display: inline-flex; gap: 6px; align-items: center; }

/* Paso 2: cada cliente como tarjeta compacta */
.clientes-rev { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.cli-rev { padding: 16px; display: flex; flex-direction: column; gap: 12px; text-align: left; transition: border-color var(--t-fast), transform var(--t-fast) var(--ease); }
.cli-rev.con-aviso { border-color: color-mix(in srgb, var(--mal) 45%, var(--line)); }
.cli-rev .cab { display: flex; gap: 12px; align-items: center; min-width: 0; }
.cli-rev .cab .txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cli-rev .cab b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cli-rev .cab small { color: var(--ink-3); font-size: 12.5px; }
.mini-lineas { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.mini-lineas > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.mini-lineas span:first-child { color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.mini-lineas .precio { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
.cli-rev .pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--line); margin-top: auto; }
.mas-lineas { border: 0; background: none; color: var(--accent-text); font-weight: 550; font-size: 13px; padding: 0; text-align: left; }

.avisos { display: flex; flex-direction: column; gap: 10px; }
.aviso-fila { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 8px; font-size: 14px; }
.aviso-fila.critico { background: var(--mal-soft); color: var(--mal); }
.aviso-fila.aviso { background: var(--aviso-soft); color: var(--aviso); }
.aviso-fila.info { background: var(--accent-soft); color: var(--accent-text); }
.aviso-fila .cuerpo { color: var(--ink); flex: 1; min-width: 0; }
.aviso-fila .cuerpo b { font-weight: 600; }

.banda { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.banda.acento { background: var(--accent-soft); border-color: transparent; }
.banda.aviso { background: var(--aviso-soft); border-color: transparent; }
.banda .txt { flex: 1; min-width: 0; }
.banda p { color: var(--ink-2); font-size: 14px; }
.banda b { color: var(--ink); }

/* Paso 3: envío */
.envio-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 22px 24px; }
.envio-cab .etq { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 550; color: var(--baja); margin-bottom: 4px; }
.progreso { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-top: 14px; max-width: 560px; }
.progreso i { display: block; height: 100%; border-radius: 99px; background: var(--baja); transition: width 400ms var(--ease); }
.nota-tabla { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-3); font-size: 13px; margin-top: -10px; }
.nota-tabla svg { margin-top: 2px; }
.anillo { position: relative; width: 108px; height: 108px; flex: none; }
.anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo .fondo { fill: none; stroke: var(--surface-3); stroke-width: 10; }
.anillo .ok { fill: none; stroke: var(--baja); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 400ms var(--ease); }
.anillo .centro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.1; }
.anillo .centro b { font-weight: 600; font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; display: block; }
.anillo .centro small { font-size: 12px; color: var(--ink-3); display: block; }
.leyenda { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.envio-cab h2 { font-weight: 600; font-size: 21px; letter-spacing: -0.02em; }
.envio-cab .derecha { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.control { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); }
.archivo { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--ink-2); font-size: 13px; }
.archivo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.girando { animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ─── Clientes ─────────────────────────────────────────────────────────── */

.barra-herr { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.barra-herr .con-icono { flex: 1 1 260px; max-width: 440px; }
.barra-herr .contar { color: var(--ink-3); font-size: 13.5px; margin-left: auto; }
.rejilla-clientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cli-card {
  display: flex; flex-direction: column; gap: 14px; padding: 18px; text-decoration: none; color: inherit;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast);
}
.cli-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.cli-card .cab { display: flex; gap: 12px; align-items: center; min-width: 0; }
.cli-card .cab .txt { display: flex; flex-direction: column; min-width: 0; }
.cli-card .cab b { font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.cli-card .cab small { color: var(--ink-3); font-size: 13px; }
.cli-card .fams { display: flex; gap: 6px; flex-wrap: wrap; }
.cli-card .pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--ink-3); }

.ficha-cab { padding: 24px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.ficha-cab h1 { font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.02em; line-height: 1.15; }
.ficha-cab h1:focus { outline: none; }
.ficha-cab .metas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mini-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.mini-cifras > div { padding: 16px 24px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); min-width: 0; }
.mini-cifras > div:last-child { border-right: 0; }
.mini-cifras span { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.mini-cifras b { font-weight: 600; font-size: 19px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.pestanas button {
  border: 0; background: none; padding: 12px 14px; font-weight: 550; font-size: 14.5px; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 8px; border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.pestanas button:hover { color: var(--ink); }
.pestanas button[aria-selected="true"] { color: var(--accent-text); border-bottom-color: var(--accent); }
.pestanas .cuenta { font-size: 12px; background: var(--surface-3); color: var(--ink-2); border-radius: 99px; padding: 1px 8px; }

.precios-fam { display: flex; flex-direction: column; gap: 10px; }
.precio-fila, .cab-precios {
  display: grid; gap: 14px; align-items: center;
  grid-template-columns: minmax(0, 1.5fr) 124px 132px 150px 140px 40px;
  grid-template-areas: "prod base cons fecha vig quitar";
}
.precio-fila { padding: 12px 14px; border-radius: 8px; background: var(--surface-2); }
.precio-fila .txt { grid-area: prod; display: flex; flex-direction: column; min-width: 0; }
.precio-fila .txt b { font-weight: 550; }
.precio-fila .txt small { color: var(--ink-3); font-size: 12.5px; }
.precio-fila .base { grid-area: base; }
.precio-fila .consumo { grid-area: cons; }
.precio-fila .txt-linea { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.unidad-campo { position: relative; display: block; }
.unidad-campo .input { min-height: 40px; text-align: right; padding-right: 34px; }
.unidad-campo i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--ink-3); font-size: 12.5px; pointer-events: none; }
.sparkline path { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sparkline circle { stroke: var(--surface); stroke-width: 1.5; }
.sparkline.sube path { stroke: var(--sube); } .sparkline.sube circle { fill: var(--sube); }
.sparkline.baja path { stroke: var(--baja); } .sparkline.baja circle { fill: var(--baja); }
.precio-fila .fecha-acuerdo { grid-area: fecha; min-width: 0; }
.precio-fila .fecha-acuerdo .input { min-height: 40px; padding: 6px 10px; font-size: 13.5px; }
.precio-fila .vigente { grid-area: vig; text-align: right; }
.precio-fila .vigente b { font-weight: 600; font-size: 18px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; display: block; }
.precio-fila .vigente small { font-size: 12px; }
.precio-fila .quitar { grid-area: quitar; justify-self: end; }
.cab-precios { padding: 0 14px; font-size: 12.5px; font-weight: 550; color: var(--ink-3); }
.cab-precios .d { text-align: right; }

.historial-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.hist { padding: 14px; border-radius: 8px; background: var(--surface-2); display: flex; flex-direction: column; gap: 10px; }
.hist .cab { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.hist b { font-weight: 600; }
.hist small { color: var(--ink-3); font-size: 12.5px; }

/* ─── Diálogos ─────────────────────────────────────────────────────────── */

dialog.modal {
  border: 0; border-radius: 8px; padding: 0;
  background: var(--surface); color: var(--ink); box-shadow: var(--sombra-3);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  opacity: 0; transform: translateY(10px) scale(0.98);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease),
    overlay var(--t-med) allow-discrete, display var(--t-med) allow-discrete;
}
dialog.modal[open] { opacity: 1; transform: none; display: flex; flex-direction: column; }
@starting-style { dialog.modal[open] { opacity: 0; transform: translateY(10px) scale(0.98); } }
dialog.modal::backdrop {
  background: var(--velo); backdrop-filter: blur(3px); opacity: 0;
  transition: opacity var(--t-med) var(--ease), overlay var(--t-med) allow-discrete, display var(--t-med) allow-discrete;
}
dialog.modal[open]::backdrop { opacity: 1; }
@starting-style { dialog.modal[open]::backdrop { opacity: 0; } }
dialog.modal.ancho { width: min(880px, calc(100vw - 32px)); }
dialog.modal.pdf { width: min(920px, calc(100vw - 24px)); height: calc(100dvh - 40px); }
.modal-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 14px; }
.modal-cab .izq { display: flex; gap: 14px; align-items: center; min-width: 0; }
.modal-cab h2 { font-weight: 600; font-size: 19px; letter-spacing: -0.02em; line-height: 1.25; }
.modal-cab p { color: var(--ink-3); font-size: 13.5px; margin-top: 2px; }
.modal-cuerpo { padding: 6px 22px 20px; overflow: auto; display: flex; flex-direction: column; gap: 16px; min-height: 0; flex: 1; }
.modal-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 20px; flex-wrap: wrap; }

.visor { background: var(--surface-3); flex: 1; overflow: auto; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0 14px; border-radius: 8px; }
.visor .paginas { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.visor.zoom { align-items: flex-start; }
.visor.zoom .paginas { align-items: flex-start; width: max-content; }
.visor.zoom canvas { max-width: none; }
.visor canvas { background: #fff; box-shadow: var(--sombra-2); border-radius: 4px; max-width: 100%; height: auto; }
.visor .cargando { display: flex; gap: 10px; align-items: center; color: var(--ink-2); }
.esqueleto-pdf { width: min(620px, 100%); aspect-ratio: 210 / 297; border-radius: 6px; background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 300% 100%; animation: brillo 1.4s linear infinite; }
@keyframes brillo { to { background-position: -150% 0; } }

.correo-vista { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.correo-vista dl { margin: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px 12px; padding: 16px 18px; background: var(--surface-2); font-size: 14px; }
.correo-vista dt { color: var(--ink-3); font-weight: 600; }
.correo-vista dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.correo-vista .cuerpo-correo { padding: 18px; white-space: pre-wrap; font-size: 14.5px; line-height: 1.65; }
/* El correo tal como se ve en Outlook: papel blanco también en modo oscuro (los colores de la firma son los suyos). */
.cuerpo-correo.html {
  white-space: normal; background: #fff; color: #0d0d0d; color-scheme: light;
  font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif; font-size: 15px; line-height: 1.45; padding: 20px 22px;
}
.cuerpo-correo.html p, .cuerpo-correo.html ul { max-width: 72ch; }
.cuerpo-correo.html li { margin: 2px 0; }
.cuerpo-correo.html img { max-width: 100%; height: auto; }
.cuerpo-correo.html a { color: #0563c1; }
.adjunto {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--surface); text-align: left; max-width: 100%; font-weight: 600; font-size: 13.5px;
}
.adjunto:hover { border-color: var(--accent); }
.adjunto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; cursor: pointer; padding: 14px; border-radius: 8px; background: var(--surface-2); }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }

/* ─── Ajustes ──────────────────────────────────────────────────────────── */

.ajustes-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; }
.ajustes-menu { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
.ajustes-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 14px; }
.ajustes-menu a:hover { background: var(--surface); color: var(--ink); }
.ajustes-menu a[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
[hidden] { display: none !important; }
.ajustes-secciones { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ajustes-secciones > section { scroll-margin-top: 20px; }

.variables-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.variable {
  display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); transition: border-color var(--t-fast), background-color var(--t-fast);
}
.variable:hover { border-color: var(--accent); background: var(--accent-soft); }
.variable code { font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: var(--accent-text); }
.variable span { font-size: 13px; color: var(--ink); font-weight: 600; }
.variable small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tema { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 8px; border: 2px solid var(--line); background: var(--surface); text-align: left; font-weight: 600; }
.tema[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tema .muestra { height: 56px; border-radius: 8px; display: grid; grid-template-columns: 2fr 1fr; overflow: hidden; }
.tema .muestra i:first-child { background: var(--m-a); }
.tema .muestra i:last-child { background: var(--m-s); }

.logo-subida { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.logo-caja { width: 168px; height: 76px; border-radius: 8px; border: 2px dashed var(--line-strong); display: grid; place-items: center; background: #fff; overflow: hidden; color: #5d6b82; font-size: 12.5px; }
.logo-caja img { max-width: 148px; max-height: 60px; object-fit: contain; }


/* ─── Avisos flotantes ─────────────────────────────────────────────────── */

.tostadas {
  position: fixed; inset: auto 18px calc(18px + env(safe-area-inset-bottom, 0px)) auto; margin: 0;
  border: 0; padding: 0; background: transparent; overflow: visible;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end; width: min(400px, calc(100vw - 32px));
}
.tostadas:not(:popover-open) { display: none; }
.tostada {
  display: flex; gap: 12px; align-items: flex-start; width: 100%;
  padding: 14px 12px 14px 14px; border-radius: 8px;
  background: var(--ink); color: var(--surface); box-shadow: var(--sombra-3); font-size: 14px; font-weight: 500;
  animation: entra-tostada var(--t-med) var(--ease);
}
.tostada.mal { background: #a32119; color: #fff; }
.tostada p { flex: 1; min-width: 0; }
.tostada button { background: none; border: 0; color: inherit; opacity: 0.7; padding: 0; display: grid; place-items: center; }
.tostada button:hover { opacity: 1; }
@keyframes entra-tostada { from { opacity: 0; transform: translateY(10px) scale(0.98); } }

.vacio { padding: 40px 20px; text-align: center; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vacio b { color: var(--ink); font-size: 16px; }

/* Carga inicial: esqueleto con la forma de la app. */
.carga-inicial { display: flex; flex-direction: column; min-height: 100vh; }
.carga-inicial .l { height: var(--alto-cabeza); background: var(--surface); border-bottom: 1px solid var(--line); }
.carga-inicial .c { width: 100%; max-width: 1200px; margin: 0 auto; padding: 36px clamp(16px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 18px; }
.carga-inicial .hueso { border-radius: var(--r-card); }
.hueso { border-radius: 8px; background: linear-gradient(100deg, var(--surface-3) 30%, var(--surface-2) 50%, var(--surface-3) 70%) 0 0 / 300% 100%; animation: brillo 1.4s linear infinite; }

/* Entrada escalonada de tarjetas (solo al montar, una vez). */
.entra > * { animation: entra 360ms var(--ease) both; animation-delay: calc(min(var(--i, 0), 12) * 35ms); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* ─── Transiciones de pantalla ─────────────────────────────────────────── */

/* Sistema de movimiento (una sola gramática para toda la app):
   · Curvas: --ease-llega para lo que entra (rápido al principio, frena al llegar), --ease-va para lo que se va,
     --ease-morfo para lo que cambia sin salir de pantalla, --ease-sello (con un leve rebote) solo para el sello del mes.
   · Duraciones por tamaño: 140 ms detalles, 220 ms piezas pequeñas, 320 ms bloques, 420 ms pantallas y morfos.
   · Las salidas son más cortas y discretas que las entradas.
   · Entre pantallas: hacia dentro entra por la derecha, hacia fuera por la izquierda, lateral con fundido.
   · Lo que está en las dos pantallas se transforma: título, subrayado del menú, carril de pasos y paso activo. */
:root {
  --ease-llega: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-va: cubic-bezier(0.4, 0, 1, 1);
  --ease-morfo: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-sello: linear(0, 0.18 7%, 0.62 17%, 0.95 27%, 1.06 34%, 1.08 39%, 1.05 46%, 1.01 56%, 0.995 66%, 1);
  --dur-detalle: 140ms;
  --dur-pieza: 220ms;
  --dur-bloque: 320ms;
  --dur-pantalla: 420ms;
  --escalon: 45ms;
}

.cabeza { view-transition-name: cabeza; }
.barra-movil { view-transition-name: barra-movil; }
.contenido { view-transition-name: contenido; }
main h1 { view-transition-name: titulo; }
.tarea > .carril, .pasos { view-transition-name: carril; }
.nav .indicador { view-transition-name: indicador-nav; }
.barra-movil .indicador { view-transition-name: indicador-movil; }
.indicador-paso { view-transition-name: paso-activo; }
.indicador-pestana { view-transition-name: pestana-activa; }

/* La página de fondo y la barra superior no se mueven: solo lo que cambia. */
::view-transition-old(root), ::view-transition-new(root),
::view-transition-old(cabeza), ::view-transition-new(cabeza),
::view-transition-old(barra-movil), ::view-transition-new(barra-movil) { animation: none; }
::view-transition-group(*) { animation-duration: var(--dur-pantalla); animation-timing-function: var(--ease-morfo); }

/* El contenido: fundido lateral por defecto; con dirección al ir hacia dentro o hacia fuera. */
::view-transition-old(contenido) { animation: vt-sale var(--dur-pieza) var(--ease-va) both; }
::view-transition-new(contenido) { animation: vt-entra var(--dur-bloque) var(--ease-llega) 60ms both; }
html[data-transicion="avanza"]::view-transition-old(contenido) { animation-name: vt-sale-izquierda; }
html[data-transicion="avanza"]::view-transition-new(contenido) { animation-name: vt-entra-derecha; animation-duration: var(--dur-pantalla); }
html[data-transicion="retrocede"]::view-transition-old(contenido) { animation-name: vt-sale-derecha; }
html[data-transicion="retrocede"]::view-transition-new(contenido) { animation-name: vt-entra-izquierda; animation-duration: var(--dur-pantalla); }
@keyframes vt-sale { to { opacity: 0; filter: blur(2px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
@keyframes vt-sale-izquierda { to { opacity: 0; transform: translateX(-24px); filter: blur(2px); } }
@keyframes vt-sale-derecha { to { opacity: 0; transform: translateX(24px); filter: blur(2px); } }
@keyframes vt-entra-derecha { from { opacity: 0; transform: translateX(48px); filter: blur(4px); } }
@keyframes vt-entra-izquierda { from { opacity: 0; transform: translateX(-48px); filter: blur(4px); } }

/* El título se transforma (de la fila pulsada al título, o de un título al siguiente) sin deformarse. */
::view-transition-old(titulo), ::view-transition-new(titulo) { block-size: 100%; inline-size: auto; }
::view-transition-old(titulo) { animation: vt-sale var(--dur-pieza) var(--ease-va) both; }
::view-transition-new(titulo) { animation: vt-entra-titulo var(--dur-pantalla) var(--ease-llega) both; }
@keyframes vt-entra-titulo { from { opacity: 0; filter: blur(3px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .girando, .hueso, .esqueleto-pdf { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ─── Pantallas estrechas ──────────────────────────────────────────────── */


@media (max-width: 1100px) {
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos { grid-template-columns: minmax(0, 1fr); }
  .familias { grid-template-columns: minmax(0, 1fr); }
  .ajustes-grid { grid-template-columns: minmax(0, 1fr); }
  .ajustes-menu { position: static; flex-direction: row; overflow-x: auto; }
  .ajustes-menu a { white-space: nowrap; }
}

@media (max-width: 860px) {
  .cabeza { gap: 12px; }
  .cabeza .nav { display: none; }
  .carga-inicial .c { padding: 20px 16px; }
  .principal { padding: 22px 16px calc(100px + env(safe-area-inset-bottom, 0px)); }
  .nota-pie { margin-top: 28px; }
  .barra-movil {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .barra-movil a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; font-size: 11.5px; font-weight: 550; color: var(--ink-3); text-decoration: none; border-radius: 8px; position: relative; }
  .barra-movil a[aria-current="page"] { color: var(--accent-text); }
  .barra-movil a[aria-current="page"]::before { content: ''; position: absolute; top: -7px; left: 30%; right: 30%; height: 2px; border-radius: 2px; background: var(--accent); }
  .barra-movil .cuenta { position: absolute; top: 3px; left: calc(50% + 7px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 10.5px; font-weight: 600; display: grid; place-items: center; }
  .tarea { grid-template-columns: minmax(0, 1fr); padding: 20px 20px 0; }
  .tarea > .carril { margin: 0 -20px; }
  .tarea .btn { width: 100%; }
  .carril { grid-template-columns: minmax(0, 1fr); }
  .carril > li { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 20px; }
  .carril > li:last-child { border-bottom: 0; }
  .carril > li::before { right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .datos { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; }
  .datos > div { border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 12px; padding: 12px 18px; }
  .datos > div:last-child { border-bottom: 0; }
  .datos .valor { font-size: 20px; margin-top: 0; order: 2; }
  .datos small { width: 100%; order: 3; }
  .subida { grid-template-columns: minmax(0, 1fr); }
  .subida .der { border-left: 0; border-top: 1px solid var(--line); }
  .pasos .paso .t small { display: none; }
  .paso { padding: 10px 12px; gap: 8px; }
  .paso .n { width: 28px; height: 28px; border-radius: 7px; font-size: 12.5px; }
  .envio-cab { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .pie-fijo { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .solo-ancho { display: none !important; }
  .tostadas { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .ficha-cab { grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
  .ficha-cab > .acciones { grid-column: 1 / -1; }
  .mini-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-cifras > div { padding: 14px 18px; }
  .mini-cifras > div:nth-child(2) { border-right: 0; }
  .mini-cifras > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .precio-fila { grid-template-columns: minmax(0, 1fr) 132px; grid-template-areas: "prod quitar" "base vig" "cons fecha"; row-gap: 10px; }
  .cab-precios { display: none; }
}

@media (max-width: 520px) {
  .cifra .valor { font-size: 24px; }
  .pasos { gap: 6px; }
  .paso { flex-direction: column; align-items: flex-start; }
  .paso .t b { font-size: 13px; }
  .cabecera .acciones { width: 100%; }
  .cabecera .acciones .btn { flex: 1; }
  .subida .izq, .subida .der { padding: 20px; }
  .subida .entrada .euros { width: 100%; }
  .prod { grid-template-columns: minmax(0, 1fr) 112px; }
}
.solo-movil-flex { display: none !important; }
@media (max-width: 860px) { .solo-movil-flex { display: flex !important; } }

.solo-movil-in { display: none; }
@media (max-width: 860px) {
  .solo-movil-in { display: inline; }
  .banda { flex-wrap: wrap; }
  .banda .txt { min-width: 200px; }
  .subida h2 { font-size: 19px; }
}

@media (max-width: 860px) {
  .btn.mini { min-height: 40px; }
  .btn.mini.icono { width: 40px; }
  .tabla td { padding-top: 10px; padding-bottom: 10px; }
}

/* Quién nota más la subida */
.llamar { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; padding: 0 14px 16px; }
.llamar-fila { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); color: inherit; text-decoration: none; min-width: 0; }
.llamar-fila:hover { background: var(--surface-3); }
.llamar-fila .txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.llamar-fila .txt b { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.llamar-fila .txt small { color: var(--ink-3); font-size: 12.5px; }
.llamar-fila .cuanto { display: flex; flex-direction: column; align-items: flex-end; }
.llamar-fila .cuanto b { font-weight: 600; font-variant-numeric: tabular-nums; }
.llamar-fila .cuanto small { color: var(--ink-3); font-size: 12px; white-space: nowrap; }

.soltar { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 30px 20px; border: 2px dashed var(--line-strong); border-radius: 8px; background: var(--surface-2); cursor: pointer; }
.soltar:hover { border-color: var(--accent); background: var(--accent-soft); }
.soltar:focus-within { outline: 2.5px solid var(--accent); outline-offset: 2px; }

.ia-caja { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 14px; border-radius: 8px; background: var(--accent-soft); }
.btn.ia svg { color: var(--accent-text); }

.programar { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.programado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px 8px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); font-size: 13.5px; max-width: 320px; }
.programado span { flex: 1; min-width: 0; }

.margen-bajo { display: inline-block; margin-top: 2px; padding: 0 6px; border-radius: 99px; background: var(--aviso-soft); color: var(--aviso); font-weight: 600; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-caja { width: min(400px, 100%); padding: 28px; display: flex; flex-direction: column; gap: 18px; }

/* ─── Frase automática y vista del correo (paso 1) ─────────────────────── */

.frase-auto {
  margin: 0; padding: 12px 14px; border-radius: var(--r-ctl); background: var(--accent-soft); color: var(--ink);
  font-weight: 600; line-height: 1.5; text-wrap: pretty;
}
.vista-correo { border-top: 1px solid var(--line); padding-top: 14px; }
.vista-correo summary {
  cursor: pointer; display: inline-flex; gap: 8px; align-items: center; font-weight: 550; color: var(--accent-text);
  padding: 6px 2px; border-radius: 8px; list-style: none;
}
.vista-correo summary::-webkit-details-marker { display: none; }
.vista-correo[open] summary { margin-bottom: 12px; }

/* ─── Calendario ───────────────────────────────────────────────────────── */

.cal-nav { display: flex; gap: 6px; }
.cal { margin-bottom: 18px; }
.cal-rejilla { padding: 0 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.cal-fila { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-semana { text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 0; }
.cal-dia {
  min-height: 104px; padding: 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; gap: 4px; align-items: stretch; text-align: left; font: inherit; color: inherit; cursor: pointer; min-width: 0;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.cal-dia.vacio { border: 0; background: none; cursor: default; }
.cal-dia:hover:not(.vacio) { border-color: var(--line-strong); }
.cal-dia .n { font-weight: 600; font-size: 13px; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.cal-dia.pasado .n { color: var(--ink-3); }
.cal-dia.hoy .n { background: var(--accent); color: var(--on-accent); }
.cal-dia.elegido { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--accent-soft); }
.cal-evs { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-ev { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.3; padding: 2px 6px; border-radius: 6px; min-width: 0; }
.cal-ev .txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cal-mas { font-size: 11.5px; color: var(--ink-3); font-weight: 550; padding-left: 4px; }
.ev-vigencia { background: var(--accent-soft); color: var(--accent-text); }
.ev-programado { background: var(--accent); color: var(--on-accent); }
.ev-envio { background: var(--baja-soft); color: var(--baja); }
.ev-contrato { background: var(--aviso-soft); color: var(--aviso); }
.ev-recordatorio { background: var(--surface-3); color: var(--ink-2); }
.cal-leyenda { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 4px 18px 18px; font-size: 12.5px; color: var(--ink-3); }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal-leyenda i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.cal-punto { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.fila.pasado { opacity: 0.6; }
.fila .canales { display: inline-flex; gap: 4px; color: var(--ink-3); }
.avisos-conf { display: flex; flex-direction: column; gap: 14px; }
.avisos-conf .canal { display: flex; flex-direction: column; gap: 8px; }
.canales-sel { border: 0; padding: 0; margin: 0; display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: center; }
.canales-sel legend { margin-bottom: 8px; padding: 0; }
.canales-sel .check span { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 860px) {
  .chat-boton { display: inline-flex; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); padding: 12px; }
  .chat-boton span { display: none; }
  body:has(.pie-fijo) .chat-boton { bottom: calc(164px + env(safe-area-inset-bottom, 0px)); }
  .chat { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; z-index: 60; }
  .cal-rejilla { padding: 0 8px 8px; }
  .cal-fila { gap: 3px; }
  .cal-dia { min-height: 52px; padding: 4px; border-radius: 8px; align-items: center; }
  .cal-ev { width: 7px; height: 7px; padding: 0; border-radius: 99px; }
  .cal-ev.ev-vigencia { background: var(--accent); }
  .cal-ev.ev-recordatorio { background: var(--ink-3); }
  .cal-ev.ev-envio { background: var(--baja); }
  .cal-ev.ev-contrato { background: var(--aviso); }
  .cal-ev .txt, .cal-mas { display: none; }
  .cal-evs { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3px; }
}
@media (min-width: 861px) { body:has(.chat) .tostadas { right: 460px; } }

/* ─── Subida por grupos (ANFO, Encartuchado) ───────────────────────────── */
.grupos-subida { display: flex; flex-direction: column; gap: 10px; }
.grupo-subida {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 170px auto; gap: 6px 14px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.grupo-subida .txt { display: flex; flex-direction: column; min-width: 0; }
.grupo-subida .txt b { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.grupo-subida .txt small { color: var(--ink-3); font-size: 13px; }
.grupo-subida .unidad { color: var(--ink-3); font-weight: 550; font-size: 14px; }
.grupo-subida .nota-grupo { grid-column: 2 / -1; color: var(--aviso); font-size: 12.5px; }
.mas-familias { border: 1px solid var(--line); border-radius: var(--r-card); padding: 2px 20px; background: var(--surface); }
.mas-familias > summary { cursor: pointer; list-style: none; padding: 12px 0; font-weight: 550; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mas-familias > summary::-webkit-details-marker { display: none; }
.mas-familias > summary::after { content: '\25BE'; margin-left: auto; color: var(--ink-3); transition: transform .2s; }
.mas-familias[open] > summary::after { transform: rotate(180deg); }
.mas-familias[open] { padding-bottom: 16px; }
.mas-familias > summary .faint { font-weight: 500; font-size: 13.5px; }
.lista-ajuste { margin: 2px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.6; }
@media (max-width: 640px) {
  .grupo-subida { grid-template-columns: auto minmax(0, 1fr); }
  .grupo-subida .euros { grid-column: 1 / -1; width: 100%; }
  .grupo-subida .unidad { display: none; }
}

/* ─── Condiciones del PDF (Ajustes) ───────────────────────────────────── */
.condiciones-editor { display: flex; flex-direction: column; gap: 12px; }
.condicion { border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); }
.condicion-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.condicion-cab .input { font-weight: 600; }
.condicion-fila { display: grid; grid-template-columns: minmax(0, 1fr) 90px 80px auto; gap: 8px; align-items: start; }
.condicion-fila textarea { resize: vertical; min-height: 40px; }
@media (max-width: 640px) {
  .condicion-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .condicion-fila textarea { grid-column: 1 / -1; }
}

/* ─── Comprobar precios: que no se quede nadie atrás ───────────────────── */
.nadie-atras.con-avisos { box-shadow: inset 0 3px 0 var(--aviso), var(--sombra-2); }
.nadie-atras .card-cab p b { color: var(--ink); }
.comprobaciones { list-style: none; margin: 0; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.comprobacion { border-radius: 8px; background: var(--surface-2); padding: 10px 12px; }
.comp-cab { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.comp-icono { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; align-items: center; justify-content: center; flex: none; }
.comprobacion.bien .comp-icono { background: var(--baja-soft); color: var(--baja); }
.comprobacion.aviso .comp-icono { background: var(--aviso-soft); color: var(--aviso); }
.comprobacion.critico .comp-icono { background: var(--mal-soft); color: var(--mal); }
.comprobacion.bien .comp-cab b { font-weight: 600; color: var(--ink-2); }
.comp-cuenta { margin-left: auto; min-width: 26px; height: 26px; padding: 0 8px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; background: var(--aviso-soft); color: var(--aviso); }
.comprobacion.critico .comp-cuenta { background: var(--mal-soft); color: var(--mal); }
.comp-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.comp-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.comp-fila.critico { border-color: color-mix(in srgb, var(--mal) 45%, transparent); }
.comp-fila.info { opacity: .85; }
.comp-fila .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.comp-fila .txt span { color: var(--ink-2); line-height: 1.45; text-wrap: pretty; }
@media (max-width: 640px) {
  .comp-fila { grid-template-columns: auto minmax(0, 1fr); }
  .comp-fila .acciones-fila { grid-column: 1 / -1; }
}

/* ─── Mosaico: tarjetas de distinta altura sin huecos ──────────────────── */
.mosaico { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 16px; align-items: start; }
.mosaico-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mas-familias .mosaico { margin-top: 4px; }

/* ─── Catálogo de productos ───────────────────────────────────────────── */
.indice-familias { display: flex; flex-wrap: wrap; gap: 8px; }
.indice-familias .fam { border: 0; cursor: pointer; font: inherit; font-weight: 550; font-size: 13.5px; transition: filter var(--t-fast), transform var(--t-fast); }
.indice-familias .fam:hover { filter: brightness(0.96); }
.indice-familias .fam:active { transform: translateY(1px); }
.indice-familias .fam .n { margin-left: 2px; padding: 0 7px; border-radius: var(--r-pill); background: color-mix(in srgb, currentColor 14%, transparent); font-size: 12px; font-variant-numeric: tabular-nums; }
.catalogo { scroll-margin-top: 16px; }
.catalogo .card-cab { padding-bottom: 6px; }
.catalogo .card-cab h2 { font-size: 16px; }
.catalogo .fila { padding: 8px 10px; align-items: center; }
.catalogo .fila + .fila { border-top: 1px solid var(--line); border-radius: 0; }
.catalogo .fila:hover { border-radius: 8px; }
.catalogo .fila .txt small { white-space: normal; }
.catalogo .lado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.catalogo .en-ano { font-size: 12px; display: inline-flex; gap: 4px; align-items: center; }
.catalogo .fila .txt b { white-space: normal; overflow: visible; line-height: 1.3; }
.mas-familias .prod .txt b { overflow-wrap: anywhere; }

/* ─── Tarifas del mes: un mes por línea ───────────────────────────────── */
.lista-meses { display: flex; flex-direction: column; overflow: hidden; }
.mes-fila {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) auto 16px; gap: 20px; align-items: center;
  padding: 14px 20px; color: inherit; text-decoration: none; border-top: 1px solid var(--line);
  transition: background-color var(--t-fast);
}
.mes-fila:first-child { border-top: 0; }
.mes-fila:hover { background: var(--surface-2); }
.mes-fila .mes { display: flex; flex-direction: column; min-width: 0; }
.mes-fila .mes b { font-weight: 550; }
.mes-fila .mes small, .mes-fila .estado small { color: var(--ink-3); font-size: 12.5px; }
.mes-fila .variacion { color: var(--ink-2); font-size: 13.5px; font-variant-numeric: tabular-nums; min-width: 0; }
.mes-fila .estado { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.mes-fila > svg { color: var(--ink-3); }
@media (max-width: 860px) {
  .mes-fila { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 16px; }
  .mes-fila .variacion { grid-column: 1 / -1; grid-row: 2; }
  .mes-fila > svg { display: none; }
}

/* ─── Revisión de precios: incidencias en una lista ───────────────────── */
.incidencias.con-avisos { border-top: 2px solid var(--aviso); }
.incidencias .card-cab p b { color: var(--ink); }
.inc-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.inc { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.inc .ico { margin-top: 2px; color: var(--aviso); display: grid; }
.inc.critico .ico { color: var(--mal); }
.inc.info .ico { color: var(--ink-3); }
.inc.revisada .ico { color: var(--baja); }
.inc .txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 14px; }
.inc .txt b { font-weight: 550; }
.inc .txt > span { color: var(--ink-2); line-height: 1.45; text-wrap: pretty; }
.inc .tipo { color: var(--ink); font-weight: 500; }
.inc.critico .tipo { color: var(--mal); }
.inc.revisada .txt, .inc.info .txt { opacity: 0.72; }
.inc .acciones { display: flex; gap: 16px; align-items: center; padding-top: 1px; white-space: nowrap; }
.marcar { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; padding: 4px 10px 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); }
.marcar:hover { border-color: var(--ink-3); }
.marcar input { width: 16px; height: 16px; margin: 0; accent-color: var(--baja); }
.inc.revisada .marcar { color: var(--baja); border-color: color-mix(in srgb, var(--baja) 40%, var(--line)); }
.inc-pie { display: flex; gap: 8px 20px; align-items: center; flex-wrap: wrap; padding: 12px 20px 14px; font-size: 13px; }
.inc-pie:empty { display: none; }
@media (max-width: 860px) {
  .inc { grid-template-columns: 20px minmax(0, 1fr); padding: 12px 16px; }
  .inc .acciones { grid-column: 2; flex-wrap: wrap; }
  .inc-pie { padding: 12px 16px; }
}

/* Bloques plegables: el detalle se abre cuando hace falta. */
details.plegable > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 20px; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary > span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
details.plegable > summary b { font-weight: 600; font-size: 15px; }
details.plegable > summary small { color: var(--ink-3); font-size: 13px; }
details.plegable > summary::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); margin: 0 4px 4px 0; transition: transform var(--t-fast); flex: none; }
details.plegable[open] > summary::after { transform: rotate(225deg); margin-bottom: -4px; }
details.plegable > summary:hover { background: var(--surface-2); border-radius: var(--r-card); }
details.plegable[open] > summary:hover { border-radius: var(--r-card) var(--r-card) 0 0; }

.marca-inc { display: inline-grid; place-items: center; color: var(--aviso); margin-left: 2px; flex: none; }
.marca-inc.critico { color: var(--mal); }

/* ═══ Color y contraste ═══════════════════════════════════════════════════
   La marca (marino) enmarca la aplicación; cada bloque lleva su color y cada estado el suyo:
   hecho = verde, en curso = azul, pendiente = gris, aviso = ámbar, crítico = rojo. */

/* Barra superior en el color de la marca. */
.cabeza { background: var(--marca); border-bottom: 0; color: #fff; backdrop-filter: none; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); }
.cabeza .marca-logo.sin-fondo.claro { display: none !important; }
.cabeza .marca-logo.sin-fondo.oscuro { display: block !important; }
.cabeza .marca .nombre { border-left-color: rgba(255, 255, 255, 0.2); }
.cabeza .marca small, .cabeza .usuario small { color: var(--sobre-marca-2); }
.cabeza .nav a { color: var(--sobre-marca-2); }
.cabeza .nav a:hover { color: #fff; }
.cabeza .nav a[aria-current="page"] { color: #fff; font-weight: 550; }
.cabeza .nav a[aria-current="page"]::after { background: var(--t-accent-dark); height: 3px; }
.cabeza .cuenta { background: #f2b33d; color: #1d1300; }
.cabeza .etiqueta-demo { border-color: rgba(255, 255, 255, 0.32); color: var(--sobre-marca-2); }
.cabeza .avatar { background: rgba(255, 255, 255, 0.14); color: #fff; }
.cabeza .btn.fantasma { color: var(--sobre-marca-2); }
.cabeza .btn.fantasma:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.cabeza :focus-visible { outline-color: #fff; }
.carga-inicial .l { background: var(--marca); border-bottom: 0; }

/* Iconos de bloque: vuelven, cada uno en su color. */
.card > .card-cab > .izq > .pastilla { display: grid; }
.pastilla { background: var(--accent-soft); color: var(--accent-text); }
.pastilla.neutra { background: var(--surface-3); color: var(--ink-2); }
.pastilla.ambar { background: var(--c-ambar-s); color: var(--c-ambar); }
.pastilla.verde { background: var(--c-verde-s); color: var(--c-verde); }
.pastilla.violeta { background: var(--c-violeta-s); color: var(--c-violeta); }
.pastilla.teja { background: var(--c-teja-s); color: var(--c-teja); }
.pastilla.turquesa { background: var(--c-turquesa-s); color: var(--c-turquesa); }

/* Avatares de cliente con su color (ayuda a reconocerlos en las listas). */
.avatar { background: var(--av-s); color: var(--av-f); }
:root[data-theme="dark"] .avatar { background: color-mix(in srgb, var(--av-f) 40%, var(--surface-2)); color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .avatar { background: color-mix(in srgb, var(--av-f) 40%, var(--surface-2)); color: #fff; }
}
.cabeza .avatar { background: rgba(255, 255, 255, 0.14) !important; color: #fff !important; }

/* Tarea del mes: arriba en marino, los pasos debajo en blanco. */
.tarea { background: linear-gradient(120deg, var(--marca) 0%, var(--marca-2) 100%); color: #fff; border: 0; }
.tarea .etq { color: var(--t-accent-dark); }
.tarea p { color: var(--sobre-marca-2); }
.tarea > .btn.primario, .tarea > .btn.borde { background: #fff; color: var(--marca); border-color: transparent; }
.tarea > .btn.primario:hover, .tarea > .btn.borde:hover { background: #e6eef8; }
.tarea :focus-visible { outline-color: #fff; }
.tarea > .carril { background: var(--surface); color: var(--ink); }

/* Carril y pasos: el estado se lee por el color. */
.carril > li.hecho::before, .paso.hecho::before { background: var(--c-verde); }
.carril .hecho .n, .paso.hecho .n { background: var(--c-verde); color: var(--surface); }
.carril > li.actual { background: var(--accent-soft); }
.carril > li.actual::before { height: 3px; }
.carril .actual .t b { color: var(--accent-text); }
.paso[aria-current="step"] { background: var(--accent-soft); }
.paso[aria-current="step"]::before { height: 3px; }
.paso[aria-current="step"] .t b { color: var(--accent-text); }
.paso.hecho .t small { color: var(--c-verde); }

/* Cifras: cada una con su color, su icono y una franja arriba. */
.dato { position: relative; }
.dato::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.dato .arriba { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dato .ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--cs); color: var(--c); flex: none; }
.dato .ico svg.i { width: 16px; height: 16px; }
.dato[data-color="azul"] { --c: var(--c-azul); --cs: var(--c-azul-s); }
.dato[data-color="ambar"] { --c: var(--c-ambar); --cs: var(--c-ambar-s); }
.dato[data-color="verde"] { --c: var(--c-verde); --cs: var(--c-verde-s); }
.dato[data-color="violeta"] { --c: var(--c-violeta); --cs: var(--c-violeta-s); }
.dato[data-color="teja"] { --c: var(--c-teja); --cs: var(--c-teja-s); }
.dato[data-color="turquesa"] { --c: var(--c-turquesa); --cs: var(--c-turquesa-s); }
.datos { overflow: hidden; }
@media (max-width: 860px) {
  .dato::before { right: auto; bottom: 0; width: 3px; height: auto; }
  .dato .arriba { flex: 1; }
  .dato .ico { width: 26px; height: 26px; }
}

/* Tablas: cabecera tintada y fila resaltada al pasar. */
.tabla thead th { background: var(--surface-3); color: var(--ink-2); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-bottom-color: var(--line-strong); }
.tabla tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.tabla tbody tr.clic:hover td { background: var(--accent-soft); }

/* Tarifas del mes: una franja de color por estado. */
.mes-fila { box-shadow: inset 4px 0 0 var(--line-strong); }
.mes-fila.borrador { box-shadow: inset 4px 0 0 var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.mes-fila.pendiente { box-shadow: inset 4px 0 0 var(--c-ambar); }
.mes-fila.hecho { box-shadow: inset 4px 0 0 var(--c-verde); }
.mes-fila .mes b { font-weight: 600; }

/* Incidencias: cada fila con el color de su gravedad. */
.incidencias.con-avisos { border-top: 0; }
.incidencias.con-avisos > .card-cab { background: var(--c-ambar-s); border-bottom: 1px solid color-mix(in srgb, var(--c-ambar) 25%, transparent); border-radius: var(--r-card) var(--r-card) 0 0; padding-bottom: 14px; }
.incidencias.en-orden > .card-cab { background: var(--c-verde-s); border-radius: var(--r-card) var(--r-card) 0 0; padding-bottom: 14px; }
.inc-lista { border-top: 0; }
.inc { box-shadow: inset 4px 0 0 var(--c-ambar); }
.inc.critico { box-shadow: inset 4px 0 0 var(--mal); background: color-mix(in srgb, var(--mal-soft) 60%, transparent); }
.inc.info { box-shadow: inset 4px 0 0 var(--line-strong); }
.inc.revisada { box-shadow: inset 4px 0 0 var(--c-verde); background: color-mix(in srgb, var(--c-verde-s) 55%, transparent); }
.inc.aviso .tipo { color: var(--c-ambar); }

/* Variación del mes: el resumen en el color de la marca; cada grupo con el color de su familia. */
.subida .der { background: linear-gradient(160deg, var(--marca) 0%, var(--marca-2) 100%); color: #fff; border-left: 0; }
.subida .der .muted, .subida .der .faint, .subida .der small { color: var(--sobre-marca-2) !important; }
.subida .der .chip.borde { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); color: #fff; }
.grupo-subida { box-shadow: inset 4px 0 0 var(--fam-f); }
:root[data-theme="dark"] .grupo-subida { box-shadow: inset 4px 0 0 var(--fam-o); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grupo-subida { box-shadow: inset 4px 0 0 var(--fam-o); } }

/* Tarjetas de una familia de producto: franja superior con su color. */
.con-familia { border-top: 3px solid var(--fam-f); }
:root[data-theme="dark"] .con-familia { border-top-color: var(--fam-o); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .con-familia { border-top-color: var(--fam-o); } }

/* Envío: franja según cómo va. */
.envio-cab { box-shadow: inset 4px 0 0 var(--accent); }
.envio-cab.hecho { box-shadow: inset 4px 0 0 var(--c-verde); background: linear-gradient(90deg, var(--c-verde-s), var(--surface) 55%); }
.envio-cab.error { box-shadow: inset 4px 0 0 var(--mal); }

/* Barra inferior del móvil: la pestaña activa con fondo. */
@media (max-width: 860px) {
  .barra-movil a[aria-current="page"] { background: var(--accent-soft); }
}

/* Botón principal un punto más presente. */
.btn.primario { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.12); }
.card { box-shadow: 0 1px 2px rgba(15, 27, 42, 0.04); }

/* Ficha de cliente: cabecera en el color de la marca y cifras con su color. */
.ficha-cab { background: linear-gradient(120deg, var(--marca) 0%, var(--marca-2) 100%); color: #fff; }
.ficha-cab .chip { background: rgba(255, 255, 255, 0.12); color: #fff; }
.ficha-cab .chip.mal { background: #fde7e5; color: #a3211a; }
.ficha-cab .chip.acento { background: rgba(255, 255, 255, 0.92); color: var(--marca); }
.ficha-cab .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }
.datos.en-ficha { border-top: 0; }
.datos.en-ficha .valor { font-size: 21px; }
.barra-movil .cuenta { background: #f2b33d; color: #1d1300; }

/* ─── Comunicación a clientes: dos opciones para el texto del correo ─── */
.comunicacion > .card-cab { align-items: flex-end; }
.vigencia-campo { width: 200px; }
.vigencia-campo .input { min-height: 40px; }
.opciones-texto { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.opciones-texto legend { grid-column: 1 / -1; padding: 0; margin-bottom: 8px; font-size: 13.5px; font-weight: 550; }
.opcion-texto {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 14px 16px; border-radius: var(--r-card); border: 1.5px solid var(--line-strong); background: var(--surface);
  cursor: pointer; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.opcion-texto:hover { border-color: var(--ink-3); }
.opcion-texto input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-texto .marca-opcion { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: var(--ink-2); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.opcion-texto .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opcion-texto b { font-weight: 600; }
.opcion-texto small { color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.opcion-texto::after {
  content: ''; position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: var(--surface); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.opcion-texto.elegida { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.opcion-texto.elegida .marca-opcion { background: var(--accent); color: var(--on-accent); }
.opcion-texto.elegida::after { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 9px var(--accent); }
.opcion-texto:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.opcion-texto.sin-ia { cursor: not-allowed; opacity: 0.6; }
.opciones-texto:disabled .opcion-texto { cursor: default; }
.opciones-texto:disabled .opcion-texto:not(.elegida) { opacity: 0.55; }
.texto-habitual { margin: 0; padding: 14px 16px; border-radius: var(--r-ctl); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.texto-habitual .etiqueta { display: block; font-size: 12.5px; font-weight: 550; color: var(--ink-3); margin-bottom: 4px; }
.texto-habitual p { color: var(--ink); line-height: 1.6; max-width: 90ch; }
.caja-ia { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--r-card); background: var(--c-violeta-s); }
.caja-ia .input { background: var(--surface); }
.ia-acciones { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; }
textarea.escribiendo { border-color: var(--c-violeta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-violeta) 18%, transparent); }
@media (max-width: 640px) {
  .opciones-texto { grid-template-columns: minmax(0, 1fr); }
  .vigencia-campo { width: 100%; }
}

/* ═══ Movimiento dentro de cada pantalla ══════════════════════════════════ */

/* Subrayados que se deslizan (menú, móvil, pasos del mes y pestañas de la ficha). */
.cabeza .nav a[aria-current="page"]::after { background: transparent; }
.nav .indicador { position: absolute; left: 11px; right: 11px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--t-accent-dark); }
.barra-movil a[aria-current="page"]::before { display: none; }
.barra-movil .indicador { position: absolute; top: -7px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.paso[aria-current="step"]::before { background: transparent; }
.indicador-paso { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); }
.pestanas button { position: relative; }
.pestanas button[aria-selected="true"] { border-bottom-color: transparent; }
.indicador-pestana { position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--accent); }

/* Los bloques de cada pantalla se materializan en orden de lectura (el título y los morfos, no). */
.contenido > :not(.cabecera, .migas, .pasos, .tarea, .ficha-cabecera) { animation: bloque var(--dur-bloque) var(--ease-llega) both; }
.contenido > :nth-child(2) { animation-delay: calc(1 * var(--escalon)); }
.contenido > :nth-child(3) { animation-delay: calc(2 * var(--escalon)); }
.contenido > :nth-child(4) { animation-delay: calc(3 * var(--escalon)); }
.contenido > :nth-child(5) { animation-delay: calc(4 * var(--escalon)); }
.contenido > :nth-child(6) { animation-delay: calc(5 * var(--escalon)); }
.contenido > :nth-child(n+7) { animation-delay: calc(6 * var(--escalon)); }
@keyframes bloque { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }
@keyframes bloque-corto { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } }

/* Barras de color que se rellenan: pasos hechos y en curso, franjas de las cifras. */
.carril > li::before, .paso::before, .dato::before { transform-origin: left center; animation: barra 520ms var(--ease-llega) both; }
.carril > li:nth-child(1)::before, .paso:nth-child(1)::before, .dato:nth-child(1)::before { animation-delay: 160ms; }
.carril > li:nth-child(2)::before, .paso:nth-child(2)::before, .dato:nth-child(2)::before { animation-delay: 260ms; }
.carril > li:nth-child(3)::before, .paso:nth-child(3)::before, .dato:nth-child(3)::before { animation-delay: 360ms; }
.dato:nth-child(4)::before { animation-delay: 460ms; }
@keyframes barra { from { transform: scaleX(0); } }
@media (max-width: 860px) {
  .carril > li::before, .dato::before { transform-origin: center top; animation-name: barra-vertical; }
}
@keyframes barra-vertical { from { transform: scaleY(0); } }

/* Gráfica del ANFO: la línea se traza, el área aparece detrás y los puntos se posan uno a uno (solo la primera vez). */
.grafico svg.dibuja .linea:not(.borrador) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazo 1100ms var(--ease-morfo) 200ms forwards; }
.grafico svg.dibuja .area { animation: aparece 700ms var(--ease-llega) 600ms both; }
.grafico svg.dibuja .punto { transform-box: fill-box; transform-origin: center; animation: posa 360ms var(--ease-llega) both; animation-delay: calc(200ms + var(--i, 0) * 90ms); }
.grafico svg.dibuja .linea.borrador, .grafico svg.dibuja .etiqueta-fin { animation: aparece 400ms var(--ease-llega) 1250ms both; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
@keyframes aparece { from { opacity: 0; } }
@keyframes posa { from { opacity: 0; transform: scale(0.4); } }

/* Meses de la lista e incidencias: en cascada corta. */
.mes-fila { animation: bloque-corto var(--dur-bloque) var(--ease-llega) both; }
.mes-fila:nth-child(2) { animation-delay: 30ms; } .mes-fila:nth-child(3) { animation-delay: 60ms; }
.mes-fila:nth-child(4) { animation-delay: 90ms; } .mes-fila:nth-child(5) { animation-delay: 120ms; }
.mes-fila:nth-child(n+6) { animation-delay: 150ms; }
.inc { animation: bloque-corto var(--dur-bloque) var(--ease-llega) both; animation-delay: calc(120ms + min(var(--i, 0), 6) * 35ms); transition: background-color var(--dur-pieza) var(--ease-morfo), box-shadow var(--dur-pieza) var(--ease-morfo); }
/* Al marcar «Revisada», el icono cambia con un pequeño enfoque y el contador se actualiza. */
.inc .ico { animation: icono var(--dur-pieza) var(--ease-llega) both; }
@keyframes icono { from { opacity: 0; transform: scale(0.7); filter: blur(3px); } }
[data-cambia] { animation: cifra var(--dur-pieza) var(--ease-llega) both; }
@keyframes cifra { from { opacity: 0; transform: translateY(5px); filter: blur(2px); } }

/* Cambios de estado visibles: transiciones suaves y cortas. */
.opcion-texto, .marcar, .mes-fila, .fila, .tabla tbody td { transition-duration: var(--dur-detalle); }
.btn:active { transform: scale(0.97); }
.progreso i { width: 100% !important; transform-origin: left center; transition: transform 700ms var(--ease-llega); }

/* Lo que se despliega aparece en su sitio. */
details[open] > :not(summary) { animation: bloque-corto var(--dur-bloque) var(--ease-llega) both; }
.caja-ia, .texto-habitual { animation: bloque-corto var(--dur-bloque) var(--ease-llega) both; }

/* Diálogos: entran con un enfoque y salen más rápido y con menos recorrido. */
dialog.modal { transform: translateY(4px) scale(0.99); filter: blur(2px); transition-property: opacity, transform, filter, overlay, display; transition-duration: 160ms; transition-timing-function: var(--ease-va); transition-behavior: allow-discrete; }
dialog.modal[open] { transform: none; filter: none; transition-duration: 300ms; transition-timing-function: var(--ease-llega); }
@starting-style { dialog.modal[open] { opacity: 0; transform: translateY(14px) scale(0.97); filter: blur(4px); } }
@keyframes entra-tostada { from { opacity: 0; transform: translateY(12px) scale(0.98); filter: blur(3px); } }

/* El sello del mes: solo al acabar de validar los precios (una vez al mes). */
.sello-recien > .chip { animation: sello 640ms var(--ease-sello) both; }
@keyframes sello { from { opacity: 0; transform: scale(1.5) rotate(-8deg); filter: blur(6px); } }
.envio-cab.hecho h2 { animation: bloque-corto var(--dur-bloque) var(--ease-llega) both; }

/* Resultado del envío: el correo de ejemplo tal como lo recibe el cliente. */
.pastilla.verde { background: var(--c-verde-s); color: var(--c-verde); }
.ejemplo-de { max-width: 420px; }
.envio-hecho .correo-vista { animation: bloque-corto var(--dur-bloque) var(--ease-llega) both; }
.envio-hecho .cuerpo-correo { max-height: 46vh; overflow: auto; }

/* Ajustes: grupos con descripción; copias a la vista en el paso 1. */
@media (min-width: 1101px) { .ajustes-grid { grid-template-columns: 250px minmax(0, 1fr); } }
.ajustes-menu a { align-items: flex-start; padding: 10px 12px; }
.ajustes-menu a svg { margin-top: 2px; }
.ajustes-menu a .txt { display: flex; flex-direction: column; min-width: 0; }
.ajustes-menu a .txt b { font-weight: 550; color: var(--ink); }
.ajustes-menu a .txt small { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.ajustes-menu a[aria-current="true"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.ajustes-menu a[aria-current="true"] .txt b { color: var(--accent-text); }
@media (max-width: 1100px) { .ajustes-menu a .txt small { display: none; } .ajustes-menu a[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--accent); } }
.copias-fijas { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r-ctl); background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.copias-fijas > svg { margin-top: 2px; color: var(--c-turquesa); }
.copias-fijas > span { flex: 1 1 320px; min-width: 0; overflow-wrap: anywhere; }
.copias-fijas b { color: var(--ink); font-weight: 550; }

/* Inicio: gráfica y vencimientos emparejados; actividad en dos columnas a todo el ancho. */
.dos.parejas { align-items: stretch; }
@media (min-width: 861px) {
  .actividad .filas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
}

/* Barra superior que se compacta sola (la medida la hace la app): nada se queda fuera. */
.cabeza[data-nivel="1"] .usuario .txt, .cabeza[data-nivel="2"] .usuario .txt, .cabeza[data-nivel="3"] .usuario .txt, .cabeza[data-nivel="4"] .usuario .txt,
.cabeza[data-nivel="1"] .etiqueta-demo, .cabeza[data-nivel="2"] .etiqueta-demo, .cabeza[data-nivel="3"] .etiqueta-demo, .cabeza[data-nivel="4"] .etiqueta-demo { display: none; }
.cabeza[data-nivel="2"] .nav .largo, .cabeza[data-nivel="3"] .nav .largo { display: none; }
.cabeza[data-nivel="2"] .nav .corto, .cabeza[data-nivel="3"] .nav .corto { display: inline; }
.cabeza[data-nivel="2"] .boton-ajustes .txt, .cabeza[data-nivel="3"] .boton-ajustes .txt, .cabeza[data-nivel="4"] .boton-ajustes .txt { display: none; }
.cabeza[data-nivel="3"] .marca .nombre, .cabeza[data-nivel="4"] .marca .nombre { display: none; }
.cabeza[data-nivel="3"], .cabeza[data-nivel="4"] { gap: 14px; }
.cabeza[data-nivel="3"] .nav a, .cabeza[data-nivel="4"] .nav a { padding: 0 8px; }
.cabeza[data-nivel="4"] .nav a .largo, .cabeza[data-nivel="4"] .nav a .corto, .cabeza[data-nivel="4"] .nav a .siempre { display: none; }
.cabeza[data-nivel="4"] .nav a svg { display: block; }
.cabeza[data-nivel="4"] .nav a .cuenta { margin-left: -4px; }

/* Botón de Ajustes junto al usuario. */
.boton-ajustes, .boton-guia {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border-radius: var(--r-ctl);
  color: var(--sobre-marca-2); text-decoration: none; font-size: 14px; font-weight: 500;
  background: rgba(255, 255, 255, 0.08); transition: background-color var(--dur-detalle) var(--ease-llega), color var(--dur-detalle) var(--ease-llega);
}
.boton-ajustes:hover, .boton-guia:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.boton-ajustes.activo { color: #fff; background: rgba(255, 255, 255, 0.18); }
.boton-ajustes .indicador { position: absolute; left: 10px; right: 10px; bottom: -13px; height: 3px; border-radius: 3px 3px 0 0; background: var(--t-accent-dark); view-transition-name: indicador-nav; }
@media (max-width: 860px) { .boton-ajustes { display: none; } }

/* ─── Móvil: nada se sale de la pantalla y todo se puede pulsar con el dedo ─── */
/* Lo oculto para lectores de pantalla no debe ensanchar la página: la caja de la tabla lo contiene. */
.tabla-caja { position: relative; }
.dos-iguales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .dos-iguales { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  /* Zona táctil de unos 40 px en enlaces de texto, sin cambiar cómo se ven. */
  .btn-enlace, .migas a { padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px; }
  .segmentos button { min-height: 40px; }
  .indice-familias .fam { height: auto; min-height: 38px; }
  .correo-chip { height: 40px; }
  .correo-chip button { width: 34px; height: 34px; }
  .tabla th, .tabla td { padding-left: 10px; padding-right: 10px; }
  .tabla th:first-child, .tabla td:first-child { padding-left: 14px; }
  .tabla th:last-child, .tabla td:last-child { padding-right: 14px; }
}
/* Tablas apiladas en el móvil: cada fila es un bloque (cliente arriba; estado y acciones debajo). */
@media (max-width: 640px) {
  .tabla.apilada thead { display: none; }
  .tabla.apilada, .tabla.apilada tbody { display: block; }
  .tabla.apilada tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .tabla.apilada tr:last-child { border-bottom: 0; }
  .tabla.apilada tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
  .tabla.apilada td { display: block; padding: 0 !important; border: 0; background: none !important; min-width: 0; }
  .tabla.apilada td.solo-ancho { display: none !important; }
  .tabla.envios td:first-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) { .vista-correo summary { min-height: 40px; } }
@media (max-width: 400px) { .tabla .celda > .avatar { display: none; } }
@media (max-width: 640px) { .tabla .antes { display: none; } }
@media (max-width: 640px) { .tabla .celda > .pastilla { display: none; } }

/* ─── Marca Zimplea y pie de la aplicación ─────────────────────────────── */
.zimplea { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; white-space: nowrap; }
.zimplea-simbolo { width: 20px; height: 20px; flex: none; }
.zimplea-simbolo.oscuro { display: none; }
:root[data-theme="dark"] .zimplea-simbolo.claro { display: none; }
:root[data-theme="dark"] .zimplea-simbolo.oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .zimplea-simbolo.claro { display: none; }
  :root:not([data-theme="light"]) .zimplea-simbolo.oscuro { display: block; }
}
.zimplea-nombre { font-family: 'Recursive', var(--f-sans); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); }
.pie-app { max-width: 1200px; margin: 40px auto 0; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; }
.pie-app .nota-pie { margin: 0; padding: 0; border: 0; }
.firma-zimplea { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; color: var(--ink-3); font-size: 12.5px; }
.firma-zimplea .lema { padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--line-strong); }
@media (max-width: 860px) { .pie-app { margin-top: 28px; } }
.login-columna { display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(400px, 100%); }
.login-columna .login-caja { width: 100%; }
.login-marca { padding: 0; color: var(--ink); }
.login-marca b { font-size: 18px; }

.login-marca > div { display: flex; flex-direction: column; line-height: 1.2; }
.login-marca small { color: var(--ink-3); font-size: 12.5px; }
.login .marca-sello { background: linear-gradient(135deg, #0c2a4a, #1e63a8); }
@media (max-width: 640px) { .firma-zimplea .lema { border-left: 0; padding-left: 0; margin-left: 0; flex-basis: 100%; } }

/* ─── Guía de uso ──────────────────────────────────────────────────────── */
/* Recorrido de la primera vez. Es un diálogo transparente a pantalla completa: la página se ve pero no se toca.
   El anillo rodea lo señalado y su sombra oscurece el resto; sin nada señalado, se cierra en el centro y
   oscurece toda la página. Se usa una vez (o cuando se pide): admite algo más de movimiento que el día a día. */
/* Solo el icono: con texto, la barra superior tendría que compactarse antes en los portátiles. */
.boton-guia { width: 34px; padding: 0; justify-content: center; border: 0; font: inherit; cursor: pointer; }
@media (max-width: 860px) { .boton-guia { width: 38px; } }

dialog.guia {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden;
}
dialog.guia::backdrop { background: transparent; }
dialog.guia[open] { animation: aparece var(--dur-bloque) var(--ease-llega) both; }

.guia-velo { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: rgba(9, 14, 22, 0.55); }
:root[data-theme="dark"] .guia-velo { fill: rgba(0, 0, 0, 0.68); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .guia-velo { fill: rgba(0, 0, 0, 0.68); } }
.guia-anillo {
  position: fixed; left: 0; top: 0; width: 0; height: 0; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--accent); opacity: 0; transition: opacity var(--dur-pieza) var(--ease-llega);
}
.guia-anillo.ve { opacity: 1; }
/* Al llegar, una onda corta desde el borde para encontrar con la vista lo señalado. */
.guia-anillo.llega.ve::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  animation: guia-onda 900ms var(--ease-llega) 260ms both;
}
@keyframes guia-onda {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  to { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent); }
}

.guia-tarjeta {
  position: fixed; left: 0; top: 0; width: min(390px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--sombra-3);
}
.guia-tarjeta:not([data-listo]) { opacity: 0; }
.guia-tarjeta.anima { transition: transform var(--dur-pantalla) var(--ease-morfo); }
.guia-tarjeta.intro { width: min(500px, calc(100vw - 32px)); }

.guia-progreso { height: 3px; flex: none; background: var(--surface-3); }
.guia-progreso i { display: block; height: 100%; background: var(--accent); transform-origin: left center; transition: transform var(--dur-bloque) var(--ease-llega); }
.guia-cab { display: flex; align-items: center; gap: 10px; padding: 12px 12px 0 18px; }
.guia-cap { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 550; color: var(--accent-text); }
.guia-n { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.guia-cuerpo {
  padding: 6px 18px 2px; display: flex; flex-direction: column; gap: 8px; overflow: auto; min-height: 0;
  animation: bloque-corto var(--dur-bloque) var(--ease-llega) both;
}
.guia-cuerpo h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; text-wrap: balance; }
.guia-cuerpo p, .guia-lista { font-size: 14px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.guia-lista { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.guia-lista b { color: var(--ink); font-weight: 600; }
.guia-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px 16px; flex: none; }

.guia-tarjeta.intro .guia-cuerpo { padding-top: 10px; gap: 12px; }
.guia-tarjeta.intro h2 { font-size: 22px; letter-spacing: -0.02em; }
.guia-capitulos { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.guia-capitulos li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; animation: bloque-corto var(--dur-bloque) var(--ease-llega) both; animation-delay: calc(140ms + var(--i, 0) * var(--escalon)); }
.guia-capitulos li + li { border-top: 1px solid var(--line); }
.guia-capitulos b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.guia-capitulos small { display: block; font-size: 12.5px; color: var(--ink-3); }
.guia-cuerpo .guia-nota { font-size: 13px; color: var(--ink-3); }

/* En el móvil, una hoja abajo (o arriba, si lo señalado es la barra de abajo); la bienvenida, centrada. */
dialog.guia.movil .guia-tarjeta { left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: 64dvh; transform: none !important; }
dialog.guia.movil .guia-tarjeta[data-lado="arriba"] { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; }
dialog.guia.movil .guia-tarjeta.intro { top: 50%; bottom: auto; max-height: calc(100dvh - 24px); transform: translateY(-50%) !important; }
dialog.guia.movil .guia-pie .btn { flex: 1; }