/* Kaigoh · Administración — sobre el Design System de Kaigoh (papel, tinta, un solo azul).
   Sólo tokens: ningún componente escribe un color literal. */

@font-face { font-family: "Poppins"; src: url("fuentes/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fuentes/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fuentes/Inter-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

/* ─── Tokens (copiados 1:1 de tokens/colors.css y theme.css del DS) ─────────── */
:root {
  --paper: #F4F3EE; --ink: #141414; --blue: #3B5BFF; --mist: #E6E6E1;
  --paper-lift: #FAF9F5; --mist-deep: #D8D8D2;
  --ink-soft: #5A5A55; --ink-mute: #6E6E68;
  --blue-deep: #2A47E0; --blue-light: #7B92FF; --blue-wash: #ECEFFF; --blue-veil: rgba(59, 91, 255, .14);
  --ink-lift: #1E1E1D; --ink-line: #2E2E2C; --ink-line-strong: #454542;
  --paper-soft: #C9C8C2; --paper-mute: #A3A29C;
  --critical: #B3261E; --critical-light: #FF9C93;

  --font-display: "Poppins", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: .22s;
  --radius-control: 8px; --radius-card: 12px; --radius-card-lg: 16px;
  --lateral: 15rem;
  --tabs: 4.25rem;
}

:root, [data-theme="light"] {
  --surface: var(--paper); --surface-2: var(--mist); --surface-lift: var(--paper-lift);
  --surface-fill: var(--ink); --on-surface-fill: var(--paper);
  --on-surface: var(--ink); --on-surface-soft: var(--ink-soft); --on-surface-mute: var(--ink-mute);
  --border: var(--mist); --border-strong: var(--mist-deep);
  --accent: var(--blue); --accent-text: var(--blue); --accent-surface: var(--blue-wash);
  --focus: var(--blue); --critical-text: var(--critical);
  --shadow-color: 20, 20, 20;
  --grafica-sale: var(--ink-soft);
  --aviso-icono: var(--blue-light);
  color-scheme: light;
}

[data-theme="dark"] {
  --surface: var(--ink); --surface-2: var(--ink-line); --surface-lift: var(--ink-lift);
  --surface-fill: var(--paper); --on-surface-fill: var(--ink);
  --on-surface: var(--paper); --on-surface-soft: var(--paper-soft); --on-surface-mute: var(--paper-mute);
  --border: var(--ink-line); --border-strong: var(--ink-line-strong);
  --accent: var(--blue); --accent-text: var(--blue-light); --accent-surface: rgba(59, 91, 255, .16);
  --focus: var(--blue-light); --critical-text: var(--critical-light);
  --shadow-color: 0, 0, 0;
  --grafica-sale: var(--paper-mute);
  --aviso-icono: var(--blue);
  color-scheme: dark;
}

:root {
  --shadow-1: 0 1px 2px rgba(var(--shadow-color), .05);
  --shadow-2: 0 6px 20px rgba(var(--shadow-color), .08);
  --shadow-3: 0 16px 34px rgba(var(--shadow-color), .16);
}

/* ─── Base ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--surface); }
body {
  margin: 0; min-height: 100vh; background: var(--surface); color: var(--on-surface);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.018em; margin: 0; }
p { margin: 0; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.icono { flex-shrink: 0; width: 1.25rem; height: 1.25rem; }
.cifra, .num, .monto, .tarjeta-cifra, .heroe-cifra { font-variant-numeric: tabular-nums; }

.logo {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.018em; font-size: 1.5rem;
  line-height: 1; color: var(--on-surface); display: inline-flex; align-items: baseline; white-space: nowrap;
}
.logo .iw { position: relative; display: inline-block; }
.logo .punto {
  position: absolute; left: 50%; top: -0.045em; width: .15em; height: .15em;
  border-radius: 999px; background: var(--accent); transform: translateX(-50%);
}
.kicker {
  font-size: .6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-surface-mute);
}
.cabecera .kicker { color: var(--accent-text); }
.sub { font-size: .8125rem; color: var(--on-surface-mute); }
.texto-critico { color: var(--critical-text); }

/* ─── Marco ─────────────────────────────────────────────────────────────────── */
.marco { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }
.lateral {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 28px;
  padding: 32px 16px 20px; border-right: 1px solid var(--border);
}
.marca { display: flex; flex-direction: column; gap: 6px; padding: 0 12px; }
.marca-sub { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-surface-mute); font-weight: 500; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: var(--radius-control); color: var(--on-surface-soft); font-size: .875rem; font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-item:hover { background: var(--surface-2); color: var(--on-surface); }
.nav-item[aria-current] { background: var(--surface-lift); color: var(--on-surface); box-shadow: inset 0 0 0 1px var(--border); }
.nav-item[aria-current]::before {
  content: ""; position: absolute; left: -11px; top: 50%; width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent); transform: translateY(-50%);
}
.nav-item[aria-current] .icono { color: var(--accent-text); }
.lateral-registrar { margin: 0 4px; }
.lateral-pie { margin-top: auto; }
.yo { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-control); font-size: .875rem; font-weight: 500; color: var(--on-surface-soft); }
.yo:hover { background: var(--surface-2); color: var(--on-surface); }
.avatar {
  width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  background: var(--surface-fill); color: var(--on-surface-fill); font-family: var(--font-display); font-weight: 600; font-size: .8125rem;
}
.barra-movil, .tabs-movil, .fab { display: none; }
.contenido { width: 100%; max-width: 78rem; margin: 0 auto; padding: 44px clamp(20px, 4vw, 56px) 96px; }

/* ─── Cabecera de página ───────────────────────────────────────────────────── */
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.cabecera-texto { min-width: 0; }
.cabecera h1 {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.08;
  margin-top: 8px; overflow-wrap: anywhere;
}
.bajada { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; color: var(--on-surface-soft); font-size: .9375rem; }
.bajada a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
.bajada a:hover { text-decoration-color: currentColor; }
.acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.miga { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; color: var(--on-surface-mute); margin-bottom: 14px; }
.miga:hover { color: var(--on-surface); }
.miga .icono { width: 1rem; height: 1rem; }

/* ─── Botones ──────────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border-radius: var(--radius-control); border: 1px solid transparent; font: 500 .875rem/1 var(--font-body);
  cursor: pointer; white-space: nowrap; min-width: 5rem;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.boton .icono { width: 1.125rem; height: 1.125rem; }
.boton-primario { background: var(--surface-fill); color: var(--on-surface-fill); }
.boton-primario:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.boton-primario:active { transform: none; box-shadow: none; }
.boton-secundario { background: var(--surface-lift); border-color: var(--border-strong); color: var(--on-surface); }
.boton-secundario:hover { border-color: var(--on-surface); }
.boton-fantasma { background: transparent; color: var(--on-surface-soft); }
.boton-fantasma:hover { background: var(--surface-2); color: var(--on-surface); }
.boton-peligro { background: transparent; color: var(--critical-text); padding: 0 12px; }
.boton-peligro:hover { background: var(--surface-2); }
.boton-chico { min-height: 32px; padding: 0 12px; font-size: .8125rem; min-width: 0; gap: 6px; }
.boton-chico .icono { width: 1rem; height: 1rem; }
.boton-ancho { width: 100%; }
.boton-icono {
  width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: var(--radius-control);
  color: var(--on-surface-soft); transition: background var(--dur) var(--ease);
}
.boton-icono:hover { background: var(--surface-2); color: var(--on-surface); }
.boton-icono.deshabilitado { opacity: .3; }
.enlace-flecha {
  display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; font-weight: 500; color: var(--accent-text);
  margin-top: auto; padding-top: 10px; align-self: flex-start;
}
.enlace-flecha .icono { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease); }
.enlace-flecha:hover .icono { transform: translateX(3px); }
.tarjeta-cabecera .enlace-flecha { margin: 0; padding: 0; align-self: center; }

/* ─── Rejillas y tarjetas ──────────────────────────────────────────────────── */
.rejilla { display: grid; gap: 16px; margin-bottom: 16px; }
.rejilla-arriba { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); }
.rejilla-media { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.rejilla-mitades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-final { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.rejilla-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tarjeta {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  background: var(--surface-lift); border: 1px solid var(--border); border-radius: var(--radius-card-lg); padding: 24px;
}
section.tarjeta { margin-bottom: 16px; }
.tarjeta-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; min-height: 32px; }
.tarjeta-cabecera h2 { font-size: 1.125rem; display: inline-flex; align-items: center; gap: 8px; }
.tarjeta-cabecera.separada { margin-top: 24px; }
.tarjeta-cifra {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.625rem, 1.3rem + .8vw, 2rem);
  letter-spacing: -0.03em; line-height: 1.1; margin: 4px 0 2px;
}
.tarjeta-cifra small, .heroe-cifra small { font-size: .5em; color: var(--on-surface-mute); font-weight: 500; letter-spacing: 0; margin-left: 2px; }
.tarjeta .boton-chico { align-self: flex-start; margin-top: auto; }
.notas p { white-space: pre-line; color: var(--on-surface-soft); font-size: .9375rem; }

.heroe { padding: 28px; gap: 0; }
.heroe-cifra {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
  letter-spacing: -0.04em; line-height: 1; margin: 14px 0 24px;
}
.heroe-par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 18px; border-top: 1px solid var(--border); margin-top: auto; }
.heroe-par > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.heroe-par strong { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.02em; }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--on-surface-soft); }
.etiqueta .icono { width: 1rem; height: 1rem; }
.delta { font-size: .75rem; color: var(--on-surface-mute); }
.alerta-linea { display: flex; align-items: center; gap: 6px; color: var(--critical-text); font-size: .8125rem; font-weight: 500; }
.icono-alerta { width: .75rem; height: .75rem; }
.mini { margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px; }
.mini div { display: flex; justify-content: space-between; gap: 12px; font-size: .875rem; }
.mini dt { color: var(--on-surface-soft); }
.mini dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.mini dd small { color: var(--on-surface-mute); font-weight: 400; margin-left: 4px; }

/* ─── Bienvenida ───────────────────────────────────────────────────────────── */
.bienvenida { margin-bottom: 28px; }
.pasos { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pasos a {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 22px; border-radius: var(--radius-card-lg);
  border: 1px solid var(--border); background: var(--surface-lift);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pasos a:hover { border-color: var(--on-surface); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.pasos span { font-family: var(--font-display); font-weight: 600; color: var(--accent-text); font-size: .875rem; }
.pasos strong { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: -0.01em; }
.pasos small { color: var(--on-surface-mute); font-size: .8125rem; }

/* ─── Listas ───────────────────────────────────────────────────────────────── */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li + li { border-top: 1px solid var(--border); }
.fila { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 0 -12px; min-height: 58px; border-radius: 10px; transition: background var(--dur) var(--ease); }
a.fila:hover, .fila-pendiente:hover { background: var(--surface-2); }
.fila.apagada { opacity: .55; }
.fila-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fila-texto strong { font-weight: 500; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-texto small { color: var(--on-surface-mute); font-size: .8125rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.fila-dato { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; font-variant-numeric: tabular-nums; font-size: .9375rem; }
.fila-dato small { font-size: .75rem; color: var(--on-surface-mute); }
.fila-pendiente .fila-dato { flex-direction: row; align-items: center; gap: 12px; }
.fila-icono {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--surface-2); color: var(--on-surface-soft);
}
.fila-icono .icono { width: 1.0625rem; height: 1.0625rem; }
.fila-icono.ingreso { background: var(--accent-surface); color: var(--accent-text); }
.monto { white-space: nowrap; }
.monto-entra { color: var(--on-surface); font-weight: 600; }
.monto-sale { color: var(--on-surface-soft); font-weight: 500; }

.estado { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; color: var(--on-surface-soft); white-space: nowrap; }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--on-surface-mute); flex-shrink: 0; }
.estado[data-e="activo"]::before, .estado[data-e="en_curso"]::before { background: var(--accent); }
.estado[data-e="prospecto"]::before, .estado[data-e="propuesta"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--on-surface-soft); }
.estado[data-e="pausado"]::before { background: var(--border-strong); }
.estado[data-e="terminado"]::before, .estado[data-e="entregado"]::before { background: var(--on-surface); }
.estado[data-e="cancelado"] { color: var(--on-surface-mute); text-decoration: line-through; }

.vence { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vence small { color: var(--on-surface-mute); font-size: .75rem; }
.vence.vencido, .vence.vencido small { color: var(--critical-text); }

.avance { display: inline-block; width: 6rem; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; vertical-align: middle; }
.avance > span { display: block; height: 100%; width: var(--w); background: var(--accent); border-radius: 999px; transform-origin: left; animation: dibuja-x .9s var(--ease-out) .25s both; }
.avance-grande { margin: 8px 0 2px; }
.avance-grande .avance { width: 100%; height: 8px; }
.celda-avance { display: inline-flex; align-items: center; gap: 10px; }
.celda-avance small { color: var(--on-surface-mute); font-size: .75rem; font-variant-numeric: tabular-nums; }

/* ─── Vacíos ───────────────────────────────────────────────────────────────── */
.vacio { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 0 8px; color: var(--on-surface-soft); font-size: .875rem; }
.vacio-punto { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); margin-bottom: 6px; }
.vacio-titulo { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--on-surface); }
.vacio .boton { margin-top: 10px; }
.contenido > .vacio {
  align-items: center; text-align: center; padding: 56px 24px; background: var(--surface-lift);
  border: 1px solid var(--border); border-radius: var(--radius-card-lg);
}

/* ─── Filtros ──────────────────────────────────────────────────────────────── */
.barra-filtros { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border-strong); font-size: .8125rem; font-weight: 500; color: var(--on-surface-soft);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--on-surface); color: var(--on-surface); }
.chip span { color: var(--on-surface-mute); font-variant-numeric: tabular-nums; }
.chip[aria-current] { background: var(--surface-fill); border-color: var(--surface-fill); color: var(--on-surface-fill); }
.chip[aria-current] span { color: inherit; opacity: .65; }
.buscador {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; min-width: min(18rem, 100%);
  border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface-lift); color: var(--on-surface-mute);
}
.buscador:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--blue-veil); }
.buscador .icono { width: 1rem; height: 1rem; }
.buscador input, .buscador select {
  border: 0; background: transparent; padding: 0; min-height: 0; height: 100%; font-size: .875rem; color: var(--on-surface); box-shadow: none;
}
.buscador input { flex: 1; min-width: 6rem; }
.buscador input:focus, .buscador select:focus { box-shadow: none; }
.buscador select { width: auto; max-width: 11rem; padding-right: 22px; border-right: 1px solid var(--border); margin-right: 4px; background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%; }
.selector-mes {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface-lift);
}
.selector-mes > span:not(.boton-icono) { min-width: 9.5rem; text-align: center; font-weight: 500; font-size: .875rem; }

/* ─── Tablas ───────────────────────────────────────────────────────────────── */
.tabla-marco { background: var(--surface-lift); border: 1px solid var(--border); border-radius: var(--radius-card-lg); overflow-x: auto; overscroll-behavior-x: contain; }
.tabla-marco.sin-borde { border: 0; border-radius: 0; background: transparent; margin: 0 -12px; }
.tabla { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabla th {
  text-align: left; font-weight: 500; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-surface-mute); padding: 14px 16px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tabla td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabla-marco.sin-borde td { padding: 12px; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background var(--dur) var(--ease); }
.tabla tbody tr[data-href] { cursor: pointer; }
.tabla tbody tr:hover { background: var(--surface-2); }
.tabla tfoot td { border-top: 1px solid var(--border-strong); border-bottom: 0; color: var(--on-surface-soft); }
.tabla .num { text-align: right; white-space: nowrap; }
.col-fecha { white-space: nowrap; color: var(--on-surface-soft); width: 6.5rem; }
.col-accion { width: 1%; text-align: right; }
.celda-principal { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.celda-principal strong { font-weight: 500; }
.celda-principal small { color: var(--on-surface-mute); font-size: .8125rem; }
.solo-movil { display: none; }
.grupo-pendientes[data-grupo="vencido"] h2 { color: var(--critical-text); }

/* ─── Gráficas ─────────────────────────────────────────────────────────────── */
.tarjeta-grafica { gap: 0; }
.grafica { margin: 0; }
.leyenda { display: flex; gap: 18px; font-size: .8125rem; color: var(--on-surface-soft); margin-bottom: 14px; }
.ley { display: inline-flex; align-items: center; gap: 7px; }
.ley::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.ley-entra::before { background: var(--accent); }
.ley-sale::before { background: var(--grafica-sale); }
.graf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; height: 15rem; }
.graf-ejes { position: relative; width: 2.75rem; margin-bottom: 1.75rem; font-size: .6875rem; color: var(--on-surface-mute); font-variant-numeric: tabular-nums; }
.graf-ejes span { position: absolute; right: 0; bottom: var(--y); transform: translateY(50%); white-space: nowrap; }
.graf-area { position: relative; height: 100%; }
.graf-plot { position: absolute; inset: 0 0 1.75rem 0; border-bottom: 1px solid var(--border-strong); }
.graf-linea { position: absolute; left: 0; right: 0; bottom: var(--y); border-top: 1px dashed var(--border); }
.graf-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.graf-col { display: flex; flex-direction: column; align-items: center; height: 100%; outline-offset: -2px; border-radius: 8px; cursor: default; }
.graf-barras { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.b {
  width: min(22px, 34%); height: var(--h); border-radius: 4px 4px 0 0; transform-origin: bottom;
  animation: crecer .8s var(--ease-out) both; animation-delay: calc(180ms + var(--i, 0) * 70ms);
  transition: opacity var(--dur) var(--ease);
}
.b-entra { background: var(--accent); }
.b-sale { background: var(--grafica-sale); }
.graf-mes { height: 1.75rem; display: flex; align-items: flex-end; font-size: .75rem; color: var(--on-surface-mute); }
.graf-col.activa .graf-mes { color: var(--on-surface); font-weight: 600; }
.graf-cols:hover .graf-col:not(:hover) .b { opacity: .4; }

.categorias { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.cat-fila { display: flex; justify-content: space-between; gap: 12px; font-size: .875rem; }
.cat-fila span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-fila strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.cat-barra { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 7px 0 4px; }
.cat-barra span { display: block; height: 100%; width: var(--w); background: var(--grafica-sale); border-radius: 999px; transform-origin: left; animation: dibuja-x .9s var(--ease-out) .3s both; }
.categorias small { font-size: .75rem; color: var(--on-surface-mute); }

.tip {
  position: fixed; z-index: 60; pointer-events: none; min-width: 10rem;
  background: var(--surface-fill); color: var(--on-surface-fill); padding: 10px 12px; border-radius: 10px;
  font-size: .8125rem; line-height: 1.55; box-shadow: var(--shadow-3); font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(4px); transition: opacity .14s var(--ease), transform .14s var(--ease);
}
.tip.visible { opacity: 1; transform: none; }
.tip strong { display: block; margin-bottom: 2px; }

/* ─── Formularios ──────────────────────────────────────────────────────────── */
.form-marco { max-width: 36rem; margin: 0 auto; }
.contenido > .form-marco { background: var(--surface-lift); border: 1px solid var(--border); border-radius: var(--radius-card-lg); padding: 32px; }
.form-cabecera { position: relative; margin-bottom: 22px; padding-right: 44px; }
.form-cabecera h2 { font-size: 1.5rem; letter-spacing: -0.025em; line-height: 1.15; margin-top: 6px; overflow-wrap: anywhere; }
.hoja-cerrar { position: absolute; top: -6px; right: -8px; }
.formulario { display: flex; flex-direction: column; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label { font-size: .8125rem; font-weight: 500; color: var(--on-surface-soft); }
.opcional { font-weight: 400; color: var(--on-surface-mute); margin-left: 2px; }
input, select, textarea {
  font: inherit; font-size: 1rem; color: var(--on-surface); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-control); padding: 10px 12px; min-height: 44px; width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--blue-veil); }
input::placeholder, textarea::placeholder { color: var(--on-surface-mute); opacity: .8; }
textarea { resize: vertical; min-height: 5.5rem; line-height: 1.5; }
select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
input[type="date"] { min-width: 0; }
.fila-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ayuda { font-size: .75rem; color: var(--on-surface-mute); }
.campo-monto label { font-size: .8125rem; }
.monto-entrada { display: flex; align-items: baseline; gap: 6px; border-bottom: 1.5px solid var(--border-strong); padding: 2px 0 6px; transition: border-color var(--dur) var(--ease); }
.monto-entrada:focus-within { border-color: var(--focus); }
.monto-entrada span { font-family: var(--font-display); font-size: 2rem; font-weight: 500; color: var(--on-surface-mute); }
.monto-entrada input {
  border: 0; background: transparent; padding: 0; min-height: 0; box-shadow: none !important;
  font-family: var(--font-display); font-weight: 600; font-size: 2.5rem; letter-spacing: -0.03em; line-height: 1.2; font-variant-numeric: tabular-nums;
}
.segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 10px; }
.segmento {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 7px;
  font-size: .875rem; font-weight: 500; color: var(--on-surface-soft); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.segmento input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; min-height: 0; }
.segmento:has(input:checked) { background: var(--surface-lift); color: var(--on-surface); box-shadow: var(--shadow-1), 0 0 0 1px var(--border); }
.segmento:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.segmento .icono { width: 1.125rem; height: 1.125rem; }
.segmento[data-valor="ingreso"]:has(input:checked) .icono, .segmento[data-valor="cobro"]:has(input:checked) .icono { color: var(--accent-text); }
.form-acciones { display: flex; gap: 8px; margin-top: 8px; }
.form-acciones .boton-primario { flex: 1; min-height: 46px; font-size: .9375rem; }
.form-acciones .boton-fantasma { min-height: 46px; }
.zona-peligro { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.acciones-secundarias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.acciones-secundarias form { margin: 0; padding: 0; border: 0; }
.pie-registro { font-size: .75rem; color: var(--on-surface-mute); margin-top: 20px; }
.error {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-control);
  background: var(--surface-2); color: var(--critical-text); font-size: .875rem; font-weight: 500; margin-bottom: 16px;
}
.formulario .error { margin-bottom: 0; }
.interruptor { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; cursor: pointer; font-size: .9375rem; font-weight: 500; }
.interruptor input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--surface-fill); }
.interruptor small { grid-column: 2; font-size: .75rem; color: var(--on-surface-mute); font-weight: 400; }
.resumen-pago {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 14px;
  background: var(--surface-2); border-radius: 10px; font-size: .875rem; color: var(--on-surface-soft);
}
.resumen-pago strong { margin-left: auto; color: var(--on-surface); font-family: var(--font-display); font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.ayuda-grande { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: var(--on-surface-soft); }

/* ─── Hoja (formularios encima de la página) ───────────────────────────────── */
.hoja {
  border: 0; padding: 0; color: var(--on-surface); background: var(--surface-lift);
  width: min(36rem, calc(100vw - 32px)); max-height: calc(100vh - 48px); border-radius: 20px; box-shadow: var(--shadow-3); overflow: auto;
  overscroll-behavior: contain;
}
.hoja::backdrop { background: rgba(var(--shadow-color), .38); }
.hoja[open] { animation: hoja-entra .34s var(--ease-out); }
.hoja[open]::backdrop { animation: fundido .3s var(--ease); }
.hoja-cuerpo { padding: 28px; }
.hoja .form-marco { max-width: none; }
.hoja.cargando .hoja-cuerpo { min-height: 14rem; display: grid; place-items: center; }
.hoja.cargando .hoja-cuerpo::after { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--accent); animation: latido 1s var(--ease) infinite alternate; }

/* ─── Aviso ────────────────────────────────────────────────────────────────── */
.aviso {
  position: fixed; left: 50%; bottom: 32px; z-index: 70; display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 12px; background: var(--surface-fill); color: var(--on-surface-fill);
  font-size: .875rem; font-weight: 500; box-shadow: var(--shadow-3); max-width: calc(100vw - 32px);
  animation: aviso 4.2s var(--ease) both; pointer-events: none;
}
.aviso .icono { color: var(--aviso-icono); width: 1.125rem; height: 1.125rem; }

/* ─── Acceso ───────────────────────────────────────────────────────────────── */
.solo { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.acceso { width: min(25rem, 100%); display: flex; flex-direction: column; align-items: center; gap: 22px; }
.acceso-tarjeta {
  width: 100%; display: flex; flex-direction: column; gap: 16px; padding: 36px 32px;
  background: var(--surface-lift); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-2);
}
.acceso-marca { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.acceso-marca .logo { font-size: 2rem; }
.acceso h1 { font-size: 1.75rem; letter-spacing: -0.03em; }
.acceso .bajada { margin: 0; }
.acceso .boton-primario { min-height: 46px; margin-top: 4px; }
.acceso-pie { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-surface-mute); }

/* ─── Movimiento ───────────────────────────────────────────────────────────── */
@keyframes subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }
@keyframes crecer { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dibuja-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hoja-entra { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes hoja-sube { from { transform: translateY(100%); } to { transform: none; } }
@keyframes latido { from { opacity: .35; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes aviso {
  0% { opacity: 0; transform: translate(-50%, 14px); }
  8%, 86% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 6px); visibility: hidden; }
}
.escalonado > * { animation: subir .52s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.escalonado > :nth-child(2) { --i: 1; } .escalonado > :nth-child(3) { --i: 2; } .escalonado > :nth-child(4) { --i: 3; }
.escalonado > :nth-child(5) { --i: 4; } .escalonado > :nth-child(6) { --i: 5; } .escalonado > :nth-child(n+7) { --i: 6; }
tbody.escalonado > * { animation-name: fundido; animation-duration: .4s; animation-delay: calc(140ms + var(--i, 0) * 28ms); }
tbody.escalonado > :nth-child(n+7) { --i: 6; } tbody.escalonado > :nth-child(n+9) { --i: 8; } tbody.escalonado > :nth-child(n+12) { --i: 11; }
.entra-subir { animation: subir .52s var(--ease-out) .12s both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ─── Tamaños ──────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .rejilla-arriba { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-arriba .heroe { grid-column: 1 / -1; }
  .rejilla-media, .rejilla-final { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .marco { grid-template-columns: minmax(0, 1fr); }
  .lateral { display: none; }
  .barra-movil {
    display: flex; position: sticky; top: 0; z-index: 20; align-items: center; justify-content: space-between;
    padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .barra-movil .logo { font-size: 1.375rem; }
  .barra-movil .yo { padding: 0; }
  .contenido { padding: 24px 16px calc(var(--tabs) + 88px + env(safe-area-inset-bottom)); }
  .tabs-movil {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--surface-lift); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom);
  }
  .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 7px; font-size: .6875rem; font-weight: 500; color: var(--on-surface-mute); }
  .tab[aria-current] { color: var(--on-surface); }
  .tab[aria-current] .icono { color: var(--accent-text); }
  .fab {
    display: grid; place-items: center; position: fixed; right: 16px; bottom: calc(var(--tabs) + 14px + env(safe-area-inset-bottom)); z-index: 30;
    width: 56px; height: 56px; border-radius: 16px; background: var(--surface-fill); color: var(--on-surface-fill); box-shadow: var(--shadow-3);
  }
  .fab .icono { width: 1.5rem; height: 1.5rem; }
  .aviso { bottom: calc(var(--tabs) + 84px + env(safe-area-inset-bottom)); }
  .pasos { grid-template-columns: minmax(0, 1fr); }
  .solo-escritorio { display: none; }
}

@media (max-width: 720px) {
  .cabecera { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
  .rejilla-arriba, .rejilla-mitades { grid-template-columns: minmax(0, 1fr); }
  .rejilla-tres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rejilla-tres > :last-child { grid-column: 1 / -1; }
  .rejilla-tres .tarjeta { padding: 16px; }
  .rejilla-tres .tarjeta-cifra { font-size: 1.375rem; }
  .rejilla-tres .kicker { font-size: .625rem; }
  .tarjeta { padding: 20px; }
  .heroe { padding: 22px; }
  .col-media { display: none; }
  .solo-movil { display: block; margin-top: 4px; font-weight: 400; }
  .celda-principal .solo-movil { margin-top: 6px; }
  .col-fecha { width: auto; font-size: .8125rem; }
  .solo-movil .vence { font-size: .75rem; }
  .tabla th, .tabla td { padding: 12px; }
  .tabla td.num { vertical-align: top; }
  .barra-filtros { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex-shrink: 0; }
  .buscador { min-width: 0; }
  .fila-pendiente { flex-wrap: wrap; }
  .fila-pendiente .fila-dato { width: 100%; justify-content: space-between; }
  .hoja {
    width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 20px 20px 0 0;
  }
  .hoja[open] { animation: hoja-sube .38s var(--ease-out); }
  .hoja-cuerpo { padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); }
  .contenido > .form-marco { padding: 22px 18px; }
  .graf { height: 13rem; }
  .selector-mes > span:not(.boton-icono) { min-width: 8rem; }
}

@media (max-width: 480px) {
  .fila-campos { grid-template-columns: minmax(0, 1fr); }
  .heroe-par strong { font-size: 1.125rem; }
  .acceso-tarjeta { padding: 28px 22px; }
}