/* ==========================================================================
   Finanzas personales — Sistema visual
   Referencia: documento de diseño, sección 15 (Sistema visual) y 19 (Accesibilidad)
   Regla base: el significado nunca depende únicamente del color.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Escala de espaciado: 4 / 8 / 12 / 16 / 24 / 32 / 48 */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;

  --radio: 10px;
  --radio-sm: 6px;
  --radio-lg: 16px;

  --fuente: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-cifras: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;

  /* Superficies */
  --bg: #f4f6f9;
  --superficie: #ffffff;
  --superficie-2: #f0f3f7;
  --superficie-3: #e7ecf3;
  --borde: #d8dee7;
  --borde-fuerte: #b6c0cd;

  /* Texto */
  --texto: #131920;
  --texto-2: #4d5866;
  --texto-3: #5f6b7a;

  /* Roles semánticos */
  --primario: #1a5fa8;
  --primario-hover: #164f8d;
  --primario-suave: #e7f0fa;
  --sobre-primario: #ffffff;

  --ingreso: #0e6f47;
  --ingreso-suave: #e2f4ec;
  --gasto: #a8322b;
  --gasto-suave: #fbeceb;

  --exito: #0e6f47;
  --exito-suave: #e2f4ec;
  --advertencia: #8a5300;
  --advertencia-suave: #fdf1dc;
  --error: #a8322b;
  --error-suave: #fbeceb;
  --neutro: #5b6673;
  --neutro-suave: #eef1f5;

  /* Medios de pago (gráficos y distintivos) */
  --medio-debito: #1a5fa8;
  --medio-credito: #9b3fb8;
  --medio-efectivo: #0b7a75;
  --medio-sin: #8a94a1;

  --sombra: 0 1px 2px rgba(19, 25, 32, .06), 0 2px 8px rgba(19, 25, 32, .05);
  --sombra-alta: 0 8px 28px rgba(19, 25, 32, .16);
  --foco: 0 0 0 3px rgba(26, 95, 168, .45);

  --ancho-sidebar: 244px;

  /* Controles nativos (listas desplegables, calendarios, barras) siguen el tema
     de la app: ver data-tema en app.js. */
  color-scheme: light;
}

:root[data-tema="oscuro"] {
  color-scheme: dark;

  --bg: #0f1419;
  --superficie: #171d25;
  --superficie-2: #1e2630;
  --superficie-3: #26303c;
  --borde: #2e3945;
  --borde-fuerte: #445162;

  --texto: #eaeef4;
  --texto-2: #b3bdca;
  --texto-3: #8b97a6;

  --primario: #6aaef0;
  --primario-hover: #8bc1f5;
  --primario-suave: #17293c;
  --sobre-primario: #0c1620;

  --ingreso: #52c795;
  --ingreso-suave: #122a20;
  --gasto: #f08b83;
  --gasto-suave: #2e1a19;

  --exito: #52c795;
  --exito-suave: #122a20;
  --advertencia: #e5b25c;
  --advertencia-suave: #2c2314;
  --error: #f08b83;
  --error-suave: #2e1a19;
  --neutro: #9aa5b3;
  --neutro-suave: #212a34;

  --medio-debito: #6aaef0;
  --medio-credito: #cf94e6;
  --medio-efectivo: #5fd0c9;
  --medio-sin: #6e7a89;

  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 10px rgba(0, 0, 0, .3);
  --sombra-alta: 0 10px 34px rgba(0, 0, 0, .55);
  --foco: 0 0 0 3px rgba(106, 174, 240, .5);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Necesario: varios elementos ocultables usan display:flex, que gana al
   display:none que el navegador aplica por defecto a [hidden]. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--bg);
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 650; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--primario); }

:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--foco);
  border-radius: var(--radio-sm);
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: var(--e-2);
  background: var(--primario); color: var(--sobre-primario);
  padding: var(--e-3) var(--e-4); border-radius: var(--radio); z-index: 999;
}
.skip-link:focus { left: var(--e-2); }

/* --------------------------------------------------------------------------
   3. Estructura (AppShell)
   -------------------------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--ancho-sidebar);
  flex: 0 0 var(--ancho-sidebar);
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  padding: var(--e-5) var(--e-3);
  display: flex; flex-direction: column; gap: var(--e-5);
  position: sticky; top: 0; height: 100vh;
}

.sidebar__marca {
  display: flex; align-items: center; gap: var(--e-3);
  padding: 0 var(--e-2);
  font-weight: 700; font-size: .95rem; line-height: 1.2;
}
.sidebar__logo { font-size: 1.6rem; }

.sidebar__nav { flex: 1; overflow-y: auto; }
.sidebar__nav ul { display: flex; flex-direction: column; gap: 2px; }

.nav-enlace {
  display: flex; align-items: center; gap: var(--e-3);
  padding: 10px var(--e-3);
  border-radius: var(--radio);
  color: var(--texto-2); text-decoration: none;
  font-size: .92rem; font-weight: 500;
  min-height: 40px;
}
.nav-enlace:hover { background: var(--superficie-2); color: var(--texto); }
.nav-enlace[aria-current="page"] {
  background: var(--primario-suave);
  color: var(--primario);
  font-weight: 650;
  box-shadow: inset 3px 0 0 var(--primario);
}
.nav-enlace__icono { font-size: 1.05rem; width: 20px; text-align: center; }
.nav-enlace__globo {
  margin-left: auto;
  background: var(--error); color: #fff;
  font-size: .72rem; font-weight: 700;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
:root[data-tema="oscuro"] .nav-enlace__globo { color: #2e1a19; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
  padding: var(--e-5) var(--e-6) var(--e-4);
  background: var(--bg);
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid transparent;
}
.cabecera--fija { border-bottom-color: var(--borde); }
.cabecera__titulo { font-size: 1.5rem; }
.cabecera__sub { color: var(--texto-3); font-size: .88rem; margin-top: 2px; }
.cabecera__der { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }

/* Controles de la cabecera: píldoras suaves (mes, medio de pago, rango de días). */
.selector-mes, .selector-medio, .selector-dias {
  display: flex; align-items: center; gap: var(--e-1);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 1px 2px rgba(19, 25, 32, .05);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.selector-mes:hover, .selector-medio:hover, .selector-dias:hover { border-color: var(--borde-fuerte); }
.selector-mes:focus-within, .selector-medio:focus-within, .selector-dias:focus-within {
  border-color: var(--primario); box-shadow: var(--foco);
}
.selector-mes .btn-icono { border-radius: 50%; color: var(--texto-2); }
.selector-mes .btn-icono:hover { background: var(--primario-suave); color: var(--primario); }

.selector-mes__valor, .selector-dias__valor {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 36px; padding: 0 var(--e-3);
  border: 0; border-radius: 999px; background: transparent; color: var(--texto);
  font: inherit; font-weight: 650; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.selector-mes__valor { min-width: 12.5rem; }
.selector-mes__valor:hover, .selector-dias__valor:hover { background: var(--primario-suave); color: var(--primario); }
.selector-flecha { font-size: .7rem; color: var(--texto-3); }

.selector-medio { padding: 3px var(--e-3); gap: var(--e-2); }
.selector-medio--activo { border-color: var(--primario); background: var(--primario-suave); }
.selector-medio__etiqueta { font-size: .82rem; font-weight: 600; color: var(--texto-3); white-space: nowrap; }
.selector-medio__input {
  border: 0; background: transparent; color: var(--texto);
  font: inherit; font-weight: 600; padding: 4px var(--e-1);
  min-height: 32px; width: auto; box-shadow: none;
}

.selector-dias--activo { border-color: var(--primario); background: var(--primario-suave); }
.selector-dias__valor { font-size: .92rem; }
.selector-dias__quitar { border-radius: 50%; min-width: 30px; min-height: 30px; font-size: .8rem; color: var(--texto-2); }
.selector-dias__quitar:hover { background: var(--superficie-3); color: var(--texto); }

/* Filtros de la cabecera. En escritorio el contenedor "desaparece" (sus hijos se
   colocan como antes) y el botón no se ve; en móvil se pliega (ver sección 12). */
.cabecera__filtros { display: contents; }
.cabecera__der .btn-filtros { display: none; }
.btn-filtros__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 2px;
  border-radius: 10px; background: var(--primario); color: var(--sobre-primario);
  font-size: .75rem; font-weight: 700;
}


.aviso-medio {
  margin-top: var(--e-3);
  padding: 8px var(--e-3);
  background: var(--primario-suave);
  border: 1px solid var(--primario);
  border-radius: var(--radio);
  color: var(--primario);
  font-size: .88rem; font-weight: 600;
}

.aviso-mes {
  margin: 0 var(--e-6) var(--e-4);
  padding: 10px var(--e-4);
  background: var(--advertencia-suave);
  border: 1px solid var(--advertencia);
  border-radius: var(--radio);
  color: var(--advertencia);
  font-size: .9rem; font-weight: 600;
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
}

.contenido {
  flex: 1;
  padding: 0 var(--e-6) var(--e-7);
  max-width: 1440px; width: 100%;
}
.contenido:focus { outline: none; }

.nav-inferior { display: none; }

.fab { display: none; }

/* --------------------------------------------------------------------------
   4. Botones y controles
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 40px; padding: var(--e-2) var(--e-4);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--superficie-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primario {
  background: var(--primario); border-color: var(--primario); color: var(--sobre-primario);
}
.btn--primario:hover { background: var(--primario-hover); border-color: var(--primario-hover); }

.btn--peligro { background: var(--error); border-color: var(--error); color: #fff; }
:root[data-tema="oscuro"] .btn--peligro { color: #2e1a19; }
.btn--peligro:hover { filter: brightness(.92); }

.btn--fantasma { background: transparent; border-color: transparent; color: var(--texto-2); }
.btn--fantasma:hover { background: var(--superficie-2); color: var(--texto); }

.btn--bloque { width: 100%; }
.btn--sm { min-height: 32px; padding: var(--e-1) var(--e-3); font-size: .84rem; }

/* Mínimo 24x24 CSS px de objetivo (WCAG 2.2 AA, 2.5.8) */
.btn-icono {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px;
  border: 0; border-radius: var(--radio-sm);
  background: transparent; color: var(--texto-2);
  font-size: 1.15rem; cursor: pointer;
}
.btn-icono:hover { background: var(--superficie-2); color: var(--texto); }

.enlace {
  background: none; border: 0; padding: 2px 4px;
  color: var(--primario); font: inherit; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}

.grupo-segmentado {
  display: inline-flex; background: var(--superficie-2);
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 3px; gap: 3px;
}
.grupo-segmentado button {
  border: 0; background: transparent; color: var(--texto-2);
  font: inherit; font-size: .87rem; font-weight: 600;
  padding: var(--e-2) var(--e-4); min-height: 32px;
  border-radius: var(--radio-sm); cursor: pointer;
}
.grupo-segmentado button[aria-pressed="true"] {
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra);
}
.grupo-segmentado button[aria-pressed="true"][data-tipo="ingreso"] { color: var(--ingreso); }
.grupo-segmentado button[aria-pressed="true"][data-tipo="gasto"] { color: var(--gasto); }

/* --------------------------------------------------------------------------
   5. Formularios
   -------------------------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--e-4); }
.campo__etiqueta { font-size: .85rem; font-weight: 600; color: var(--texto-2); }
.campo__ayuda { font-size: .8rem; color: var(--texto-3); }
.campo__error { font-size: .82rem; font-weight: 600; color: var(--error); display: flex; gap: 6px; }
.campo__error::before { content: "⚠"; }

input[type="text"], input[type="number"], input[type="date"], input[type="month"],
input[type="search"], input[type="password"], select, textarea {
  font: inherit; font-size: .95rem;
  color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  padding: 9px var(--e-3);
  min-height: 40px; width: 100%;
}
textarea { min-height: 72px; resize: vertical; }
select { cursor: pointer; }

/* Lista desplegable: el menú nativo toma el color de fondo y de texto del tema
   de la app (no del sistema operativo). Sin esto, con la app en oscuro y el
   sistema en claro el texto salía claro sobre fondo blanco. */
select option, select optgroup {
  background-color: var(--superficie);
  color: var(--texto);
}

input[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error);
}

.campo-monto { position: relative; }
.campo-monto input { padding-left: 30px; font-size: 1.15rem; font-weight: 650; letter-spacing: .01em; }
.campo-monto__simbolo {
  position: absolute; left: var(--e-3); top: 50%; transform: translateY(-50%);
  color: var(--texto-3); font-weight: 600; pointer-events: none;
}

.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }

.radio-lista { display: flex; flex-direction: column; gap: var(--e-2); }
.radio-opcion {
  display: flex; align-items: center; gap: var(--e-3);
  padding: 10px var(--e-3); border: 1px solid var(--borde);
  border-radius: var(--radio); cursor: pointer; min-height: 44px;
}
.radio-opcion:hover { background: var(--superficie-2); }
.radio-opcion input { width: auto; min-height: auto; margin: 0; }

.check-linea {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-2) 0; cursor: pointer;
}
.check-linea input { width: auto; min-height: auto; margin-top: 3px; }
.check-linea__texto { font-size: .9rem; }
.check-linea__texto small { display: block; color: var(--texto-3); font-size: .82rem; }

/* --------------------------------------------------------------------------
   6. Tarjetas y bloques
   -------------------------------------------------------------------------- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: var(--e-5);
  box-shadow: var(--sombra);
}
.tarjeta + .tarjeta { margin-top: var(--e-4); }

.seccion { margin-bottom: var(--e-5); }
.seccion__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3); margin-bottom: var(--e-3); flex-wrap: wrap;
}
.seccion__titulo { font-size: 1.05rem; font-weight: 650; }

.rejilla { display: grid; gap: var(--e-4); }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--panel { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }

/* Resumen del mes */
.resumen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-4);
}
.resumen__item {
  padding: var(--e-4);
  border-radius: var(--radio);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
}
.resumen__etiqueta {
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 650; color: var(--texto-2);
  text-transform: uppercase; letter-spacing: .04em;
}
.resumen__cifra {
  font-family: var(--fuente-cifras);
  font-size: 1.75rem; font-weight: 700; line-height: 1.15;
  margin-top: var(--e-2); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.resumen__pie { font-size: .82rem; color: var(--texto-3); margin-top: var(--e-1); }

.resumen__item--ingreso { background: var(--ingreso-suave); border-color: transparent; }
.resumen__item--ingreso .resumen__cifra { color: var(--ingreso); }
.resumen__item--gasto { background: var(--gasto-suave); border-color: transparent; }
.resumen__item--gasto .resumen__cifra { color: var(--gasto); }

/* Meta de ahorro */
.meta { margin-top: var(--e-5); padding-top: var(--e-5); border-top: 1px solid var(--borde); }
.meta__fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }
.meta__cifra { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.meta__mensaje { font-size: .9rem; font-weight: 600; margin-top: var(--e-2); }

/* Barra de progreso */
.barra {
  height: 10px; border-radius: 999px;
  background: var(--superficie-3); overflow: hidden; margin: var(--e-2) 0 6px;
}
.barra__relleno { height: 100%; border-radius: 999px; background: var(--primario); transition: width .3s ease; }
.barra__relleno--exito { background: var(--exito); }
.barra__relleno--advertencia { background: var(--advertencia); }
.barra__relleno--error { background: var(--error); }
.barra__relleno--neutro { background: var(--neutro); }

/* Distintivos de estado: color + texto (nunca solo color) */
.distintivo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px var(--e-2); border-radius: 999px;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.distintivo--exito { background: var(--exito-suave); color: var(--exito); border-color: var(--exito); }
.distintivo--advertencia { background: var(--advertencia-suave); color: var(--advertencia); border-color: var(--advertencia); }
.distintivo--error { background: var(--error-suave); color: var(--error); border-color: var(--error); }
.distintivo--neutro { background: var(--neutro-suave); color: var(--neutro); border-color: var(--borde-fuerte); }
.distintivo--ingreso { background: var(--ingreso-suave); color: var(--ingreso); border-color: var(--ingreso); }
.distintivo--gasto { background: var(--gasto-suave); color: var(--gasto); border-color: var(--gasto); }
.distintivo--info { background: var(--primario-suave); color: var(--primario); border-color: var(--primario); }

/* Fila de categoría del presupuesto */
.tope { padding: var(--e-4) 0; border-bottom: 1px solid var(--borde); }
.tope:last-child { border-bottom: 0; padding-bottom: 0; }
.tope:first-child { padding-top: 0; }
.tope__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.tope__nombre { font-weight: 650; }
.tope__cifras { font-size: .88rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.tope__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }
.tope__disponible { font-size: .86rem; font-weight: 600; }

/* Movimientos */
.movimiento {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) 0; border-bottom: 1px solid var(--borde);
}
.movimiento:last-child { border-bottom: 0; }
.movimiento__marca {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .95rem; font-weight: 700;
}
.movimiento__marca--ingreso { background: var(--ingreso-suave); color: var(--ingreso); }
.movimiento__marca--gasto { background: var(--gasto-suave); color: var(--gasto); }
.movimiento__cuerpo { flex: 1; min-width: 0; }
.movimiento__titulo { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.movimiento__meta { font-size: .8rem; color: var(--texto-3); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.movimiento__monto { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.monto--ingreso { color: var(--ingreso); }
.monto--gasto { color: var(--gasto); }

/* Alertas */
.alerta {
  display: flex; gap: var(--e-3);
  padding: var(--e-4);
  border-radius: var(--radio);
  border: 1px solid;
  margin-bottom: var(--e-3);
}
.alerta:last-child { margin-bottom: 0; }
.alerta--advertencia { background: var(--advertencia-suave); border-color: var(--advertencia); }
.alerta--error { background: var(--error-suave); border-color: var(--error); }
.alerta--info { background: var(--primario-suave); border-color: var(--primario); }
.alerta__icono { font-size: 1.15rem; line-height: 1.3; }
.alerta__cuerpo { flex: 1; min-width: 0; }
.alerta__titulo { font-weight: 700; display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.alerta__texto { font-size: .9rem; margin-top: var(--e-1); color: var(--texto); }
.alerta__cifras { font-size: .85rem; color: var(--texto-2); margin-top: var(--e-2); font-variant-numeric: tabular-nums; }
.alerta__acciones { display: flex; gap: var(--e-2); margin-top: var(--e-3); flex-wrap: wrap; }

/* Tablas */
.tabla-contenedor { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.tabla th, table.tabla td {
  text-align: left; padding: 10px var(--e-3);
  border-bottom: 1px solid var(--borde); vertical-align: middle;
}
table.tabla th {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-3); font-weight: 700; white-space: nowrap;
}
table.tabla td.num, table.tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabla tbody tr:hover { background: var(--superficie-2); }
table.tabla tbody tr:last-child td { border-bottom: 0; }

/* Tabla que en móvil se apila como tarjetas: ui.apilarTabla() pone en cada celda
   data-etiqueta con el texto de su encabezado. En escritorio no cambia nada. */

/* Estado vacío */
.vacio { text-align: center; padding: var(--e-6) var(--e-4); }
.vacio__icono { font-size: 2.2rem; }
.vacio__titulo { font-weight: 650; margin-top: var(--e-3); }
.vacio__texto { color: var(--texto-3); font-size: .9rem; margin-top: var(--e-2); max-width: 42ch; margin-inline: auto; }
.vacio__accion { margin-top: var(--e-4); }

/* Carga (skeletons) */
.esqueleto {
  background: linear-gradient(90deg, var(--superficie-2) 25%, var(--superficie-3) 37%, var(--superficie-2) 63%);
  background-size: 400% 100%;
  animation: brillo 1.3s ease infinite;
  border-radius: var(--radio-sm);
  height: 14px; margin-bottom: var(--e-2);
}
@keyframes brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Menú contextual */
.menu-envoltura { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  min-width: 190px; padding: var(--e-1);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra-alta);
}
.menu button {
  display: flex; align-items: center; gap: var(--e-2);
  width: 100%; text-align: left;
  padding: var(--e-2) var(--e-3); min-height: 36px;
  border: 0; background: transparent; color: var(--texto);
  font: inherit; font-size: .88rem; border-radius: var(--radio-sm); cursor: pointer;
}
.menu button:hover { background: var(--superficie-2); }
.menu button.peligro { color: var(--error); }

/* Filtros */
.filtros {
  display: flex; align-items: flex-end; gap: var(--e-3);
  flex-wrap: wrap; margin-bottom: var(--e-4);
}
.filtros .campo { margin-bottom: 0; min-width: 170px; }
.filtros__buscar { flex: 1; min-width: 200px; }

/* --------------------------------------------------------------------------
   7. Diálogos
   -------------------------------------------------------------------------- */
.dialogo {
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie); color: var(--texto);
  padding: 0; width: min(520px, calc(100vw - 32px));
  box-shadow: var(--sombra-alta);
}
.dialogo::backdrop { background: rgba(10, 15, 22, .55); backdrop-filter: blur(2px); }
.dialogo--ancho { width: min(760px, calc(100vw - 32px)); }

.dialogo__cabecera {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-5) var(--e-5) var(--e-3);
}
.dialogo__titulo { font-size: 1.15rem; }
.dialogo__descripcion { font-size: .88rem; color: var(--texto-3); margin-top: var(--e-1); }
.dialogo__cuerpo { padding: 0 var(--e-5) var(--e-4); max-height: min(60vh, 560px); overflow-y: auto; }
.dialogo__pie {
  display: flex; justify-content: flex-end; gap: var(--e-2);
  padding: var(--e-4) var(--e-5) var(--e-5);
  border-top: 1px solid var(--borde);
  flex-wrap: wrap;
}

/* Calendario: selector de mes y de rango de días (js/calendario.js). */
.dialogo--calendario { width: min(360px, calc(100vw - 32px)); }
.dialogo--popover {
  position: fixed; width: 340px; margin: 0;
  border-radius: var(--radio-lg); box-shadow: var(--sombra-alta);
  animation: aparecer .14s ease-out;
}
.dialogo--popover::backdrop { background: transparent; backdrop-filter: none; }
/* El título sigue nombrando el diálogo para lectores de pantalla, pero el contenido ya trae su encabezado. */
.dialogo--popover .dialogo__cabecera { display: none; }
.dialogo--popover .dialogo__cuerpo { padding: var(--e-4); max-height: none; }
.dialogo--popover .dialogo__pie { padding: var(--e-3) var(--e-4); }
@keyframes aparecer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.cal { display: flex; flex-direction: column; gap: var(--e-3); }
.cal__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.cal__titulo { flex: 1; text-align: center; font-size: 1rem; }
.cal__semana, .cal__dias { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__semana { font-size: .75rem; font-weight: 700; color: var(--texto-3); text-align: center; }
.cal__dias { row-gap: 2px; }

.cal__dia {
  min-height: 40px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--texto);
  font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.cal__dia:hover:not(.cal__dia--rango) { background: var(--superficie-3); }
.cal__dia--hoy:not(.cal__dia--rango) { box-shadow: inset 0 0 0 1.5px var(--primario); }
/* Banda continua: el rango es plano y solo sus extremos (y los bordes de cada fila) se redondean. */
.cal__dia--rango { background: var(--primario-suave); color: var(--primario); border-radius: 0; }
.cal__dia--rango:nth-child(7n+1) { border-radius: 999px 0 0 999px; }
.cal__dia--rango:nth-child(7n) { border-radius: 0 999px 999px 0; }
.cal__dia--inicio, .cal__dia--fin { background: var(--primario); color: var(--sobre-primario); }
.cal__dia--inicio { border-radius: 999px 0 0 999px; }
.cal__dia--fin { border-radius: 0 999px 999px 0; }
.cal__dia--inicio.cal__dia--fin { border-radius: 999px; }

.cal__meses { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); }
.cal__mes {
  min-height: 48px; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); color: var(--texto);
  font: inherit; font-weight: 650; text-transform: capitalize; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.cal__mes:hover { background: var(--primario-suave); border-color: var(--primario); color: var(--primario); }
.cal__mes--hoy { border-color: var(--primario); }
.cal__mes--sel, .cal__mes--sel:hover { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); }
.cal__pie { display: flex; justify-content: center; }

.cal__atajos { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.cal__atajo {
  min-height: 34px; padding: 0 var(--e-3);
  border: 1px solid var(--borde); border-radius: 999px;
  background: var(--superficie); color: var(--texto-2);
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.cal__atajo:hover { background: var(--primario-suave); border-color: var(--primario); color: var(--primario); }
.cal__campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.cal__campos label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--texto-2); }
.cal__campos input { min-height: 40px; text-align: center; }
.cal__campos input[aria-invalid="true"] { border-color: var(--error); }
.cal__estado { font-size: .88rem; color: var(--texto-2); min-height: 1.4em; text-align: center; margin-top: calc(var(--e-2) * -1); }

/* --------------------------------------------------------------------------
   8. Toasts
   -------------------------------------------------------------------------- */
.toasts {
  position: fixed; bottom: var(--e-5); left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: var(--e-2);
  width: min(440px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-left: 4px solid var(--primario);
  border-radius: var(--radio); box-shadow: var(--sombra-alta);
  animation: entrar .18s ease-out;
}
.toast--exito { border-left-color: var(--exito); }
.toast--error { border-left-color: var(--error); }
.toast--advertencia { border-left-color: var(--advertencia); }
.toast__texto { flex: 1; font-size: .9rem; font-weight: 500; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   9. Gráficos
   -------------------------------------------------------------------------- */
.grafico { width: 100%; }
.grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafico__leyenda {
  display: flex; gap: var(--e-4); flex-wrap: wrap;
  margin-top: var(--e-3); font-size: .82rem; color: var(--texto-2);
}
.grafico__clave { display: inline-flex; align-items: center; gap: 6px; }
.grafico__muestra { width: 12px; height: 12px; border-radius: 3px; }
.eje-texto { font-size: 11px; fill: var(--texto-3); }
.rejilla-linea { stroke: var(--borde); stroke-width: 1; }

/* --------------------------------------------------------------------------
   10. Utilidades
   -------------------------------------------------------------------------- */
.pila { display: flex; flex-direction: column; }
.pila--2 { gap: var(--e-2); }
.pila--3 { gap: var(--e-3); }
.pila--4 { gap: var(--e-4); }
.fila { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.fila--entre { justify-content: space-between; }
.mt-3 { margin-top: var(--e-3); }
.mt-4 { margin-top: var(--e-4); }
.mt-5 { margin-top: var(--e-5); }
.texto-apagado { color: var(--texto-3); }
.texto-sm { font-size: .85rem; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   11. Responsive — Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --ancho-sidebar: 76px; }
  .sidebar { padding: var(--e-4) var(--e-2); align-items: center; }
  .sidebar__titulo, .sidebar__pie [data-tema-etiqueta] { display: none; }
  .nav-enlace { justify-content: center; padding: 10px; }
  .nav-enlace span:not(.nav-enlace__icono):not(.nav-enlace__globo) { display: none; }
  .nav-enlace__globo { position: absolute; margin: 0; transform: translate(14px, -12px); }
  .nav-enlace { position: relative; }
  .rejilla--panel, .rejilla--3 { grid-template-columns: 1fr; }
  .contenido, .cabecera { padding-left: var(--e-5); padding-right: var(--e-5); }
  .aviso-mes { margin-left: var(--e-5); margin-right: var(--e-5); }
}

/* --------------------------------------------------------------------------
   12. Responsive — Móvil
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  body { font-size: 15px; }

  .sidebar { display: none; }

  /* Cabecera corta: título, mes y un botón «Filtros». Ya no es fija: así no
     ocupa un cuarto de la pantalla mientras lees. */
  .cabecera {
    position: relative;
    padding: var(--e-3) var(--e-4) var(--e-2);
    align-items: stretch; flex-direction: column; flex-wrap: nowrap; gap: var(--e-2);
  }
  .cabecera__titulo { font-size: 1.25rem; }
  .cabecera__sub { margin-top: 0; }
  .cabecera__izq, .cabecera__der { min-width: 0; }
  .cabecera__der { justify-content: space-between; gap: var(--e-2); }
  /* El selector de mes ocupa toda su fila; «Filtros» va arriba a la derecha, junto al título. */
  .selector-mes { flex: 1 1 100%; min-width: 0; }
  .selector-mes__valor { flex: 1; min-width: 0; min-height: 44px; }
  /* Los distintivos largos (p. ej. «Ahorraste $ … más en Septiembre 2026») se parten en vez de salirse. */
  .distintivo { white-space: normal; max-width: 100%; text-align: left; }
  .cabecera__der .btn-filtros {
    display: inline-flex; align-items: center; gap: var(--e-1);
    position: absolute; top: var(--e-2); right: var(--e-4);
  }
  .cabecera--filtros .cabecera__izq { padding-right: 112px; }
  .cabecera__filtros { display: none; }
  .cabecera__filtros.abierto {
    display: flex; flex-direction: column; gap: var(--e-2);
    order: 3; flex: 1 1 100%;
  }
  .selector-medio { flex: 1 1 100%; }
  .selector-dias { flex: 1 1 100%; }
  .selector-dias__valor { flex: 1; min-height: 44px; justify-content: flex-start; }
  .selector-medio__input { flex: 1; min-width: 0; }
  .btn--registrar { display: none; }

  /* Espacio final para que el botón flotante y la barra inferior no tapen lo último. */
  .contenido { padding: 0 var(--e-4) calc(132px + env(safe-area-inset-bottom, 0px)); }

  /* Aviso «estás consultando otro mes»: una franja baja, no un bloque grande. */
  .aviso-mes {
    margin: 0 var(--e-4) var(--e-3); padding: 0 var(--e-3);
    font-size: .84rem; flex-wrap: nowrap; justify-content: space-between; gap: var(--e-2);
  }
  .aviso-mes .enlace { white-space: nowrap; }

  /* El botón flotante se esconde al bajar y reaparece al subir. */
  .fab { transition: transform .2s ease, opacity .2s ease; }
  .fab--oculto { transform: translateY(140px); opacity: 0; pointer-events: none; }

  /* Tablas apiladas: cada fila es una tarjeta y cada celda lleva su etiqueta. */
  .tabla--apilable, .tabla--apilable tbody, .tabla--apilable tr,
  .tabla--apilable th, .tabla--apilable td { display: block; width: 100%; }
  .tabla--apilable thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .tabla--apilable tbody tr { padding: var(--e-3) 0; border-bottom: 1px solid var(--borde); }
  .tabla--apilable tbody tr:last-child { border-bottom: 0; }
  .tabla--apilable tbody tr:hover { background: transparent; }
  table.tabla.tabla--apilable tbody th {
    border: 0; padding: 0 0 var(--e-2); white-space: normal;
    font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--texto);
  }
  table.tabla.tabla--apilable tbody td {
    display: flex; justify-content: flex-end; align-items: center; gap: var(--e-1);
    border: 0; padding: var(--e-1) 0; text-align: right;
  }
  .tabla--apilable td::before {
    content: attr(data-etiqueta); flex: 0 0 auto; text-align: left; margin-right: auto; padding-right: var(--e-3);
    color: var(--texto-3); font-size: .82rem; font-weight: 600;
  }
  .tabla--apilable td:not([data-etiqueta])::before { content: none; }

  .tarjeta { padding: var(--e-4); border-radius: var(--radio); }
  .rejilla--2, .rejilla--3, .rejilla--panel { grid-template-columns: 1fr; }

  .resumen { grid-template-columns: 1fr; gap: var(--e-3); }
  .resumen__item { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
  .resumen__cifra { margin-top: 0; font-size: 1.35rem; }

  .fila-campos { grid-template-columns: 1fr; }
  .filtros .campo { min-width: 0; width: 100%; }

  /* Navegación inferior */
  .nav-inferior {
    display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: var(--superficie); border-top: 1px solid var(--borde);
    padding: 6px var(--e-2) calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .nav-inferior ul { display: flex; }
  .nav-inferior li { flex: 1; }
  .nav-inferior .nav-enlace {
    flex-direction: column; gap: 2px; padding: 6px 2px;
    font-size: .68rem; text-align: center; box-shadow: none; min-height: 48px;
    border-radius: var(--radio-sm);
  }
  .nav-inferior .nav-enlace span { display: block !important; }
  .nav-inferior .nav-enlace__icono { font-size: 1.2rem; width: auto; }
  .nav-inferior .nav-enlace[aria-current="page"] { background: var(--primario-suave); }
  .nav-inferior .nav-enlace__globo {
    position: absolute; transform: translate(16px, -4px);
    font-size: .65rem; min-width: 16px; height: 16px; padding: 0 4px;
  }

  /* Botón flotante de registro */
  .fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: var(--e-4); bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 70; width: 56px; height: 56px; border-radius: 50%;
    background: var(--primario); color: var(--sobre-primario);
    border: 0; font-size: 1.8rem; line-height: 1;
    box-shadow: var(--sombra-alta); cursor: pointer;
  }

  .toasts { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }

  /* Diálogos como hoja inferior: salen desde abajo, al alcance del pulgar, y se
     cierran arrastrando el asa hacia abajo o tocando fuera. */
  .dialogo, .dialogo--ancho {
    width: 100vw; max-width: 100vw; height: auto;
    max-height: 92vh; max-height: 92dvh;
    margin: 0; top: auto; bottom: 0; left: 0; right: 0;
    border: 0; border-top: 1px solid var(--borde);
    border-radius: 20px 20px 0 0;
  }
  .dialogo[open] { display: flex; flex-direction: column; animation: subir-hoja .22s ease-out; }
  .dialogo__cabecera { position: relative; padding: var(--e-5) var(--e-4) var(--e-2); touch-action: none; }
  .dialogo__cabecera::before {
    content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 2px; background: var(--borde-fuerte);
  }
  .dialogo__cuerpo { max-height: none; flex: 1; padding: 0 var(--e-4) var(--e-4); }
  .dialogo__pie {
    position: sticky; bottom: 0; background: var(--superficie);
    padding: var(--e-3) var(--e-4) calc(var(--e-4) + env(safe-area-inset-bottom, 0px));
  }
  .dialogo__pie .btn { flex: 1; }
}

/* Pantallas táctiles (teléfonos, tablets, también en horizontal): objetivos de al menos
   44 × 44 px (WCAG 2.5.5 y guías de Apple/Google), sin depender del ancho de la ventana. */
@media (pointer: coarse) {
  /* Zonas táctiles de al menos 44 × 44 px (WCAG 2.5.5 / guías de Apple y Google). */
  .btn, .btn--sm { min-height: 44px; }
  .btn-icono { min-width: 44px; min-height: 44px; }
  .nav-enlace { min-width: 44px; min-height: 44px; }
  .cal__dia, .cal__mes, .cal__atajo { min-height: 44px; }
  .cal__campos input { min-height: 44px; }
  .selector-medio__input, .selector-mes__valor, .selector-dias__valor { min-height: 44px; }
  .selector-dias__quitar { min-width: 44px; min-height: 44px; }
  .enlace { min-height: 44px; display: inline-flex; align-items: center; }
  .grupo-segmentado button { min-height: 44px; }
  .menu button { min-height: 44px; }
  select, input[type="text"], input[type="number"], input[type="date"], input[type="month"],
  input[type="search"], input[type="password"] { min-height: 44px; }
  .selector-medio { padding: 3px var(--e-3); }
  .check-linea { min-height: 44px; align-items: center; }
  .check-linea input { width: 22px; height: 22px; margin-top: 0; }
  .radio-opcion { min-height: 44px; }
}

@keyframes subir-hoja { from { transform: translateY(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .sidebar, .nav-inferior, .fab, .cabecera__der, .toasts { display: none !important; }
  body { background: #fff; }
  .tarjeta { box-shadow: none; break-inside: avoid; }
}