/* ==========================================================================
   Conciliador Bancario — Hoja de estilos
   Agente 3 — css/styles.css
   Sin frameworks, sin @import, sin CDNs. Fuente del sistema.
   ========================================================================== */

/* === 1. Reset ligero === */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; }

/* === 2. Tokens de diseño (tema claro, por defecto) === */
:root {
  /* Superficies */
  --fondo: #f2f4f7;
  --superficie: #ffffff;
  --superficie-2: #f7f8fa;
  --borde: #dde1e7;
  --borde-fuerte: #c3c9d2;

  /* Texto */
  --texto: #1b2430;
  --texto-2: #4b5563;
  --texto-3: #8b95a3;

  /* Acentos */
  --primario: #2f5ede;
  --primario-rgb: 47, 94, 222;
  --primario-fuerte: #1f45b8;
  --primario-tenue: #e8edfd;

  --exito: #1a9e6c;
  --exito-rgb: 26, 158, 108;
  --exito-tenue: #e3f7ef;

  --alerta: #b8791a;
  --alerta-rgb: 184, 121, 26;
  --alerta-tenue: #fdf0dd;

  --peligro: #d1373f;
  --peligro-rgb: 209, 55, 63;
  --peligro-tenue: #fbe6e7;

  --info: #6a4fd1;
  --info-rgb: 106, 79, 209;
  --info-tenue: #eee9fc;

  /* Radios */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  /* Sombras */
  --sombra-1: 0 1px 2px rgba(20, 25, 35, 0.06);
  --sombra-2: 0 4px 12px rgba(20, 25, 35, 0.10);
  --sombra-3: 0 12px 32px rgba(20, 25, 35, 0.16);

  /* Espaciado */
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px;
  --esp-4: 16px; --esp-5: 24px; --esp-6: 32px;

  /* Tipografía */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 14px;
  --fs-lg: 16px; --fs-xl: 20px; --fs-xxl: 28px;

  /* Transiciones */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: light;
}

/* Tema oscuro: sólo redefine variables, ningún componente se duplica */
html[data-tema="oscuro"] {
  --fondo: #10131a;
  --superficie: #171b24;
  --superficie-2: #1d222c;
  --borde: #2a3040;
  --borde-fuerte: #3a4256;

  --texto: #e7eaf1;
  --texto-2: #a8b0c0;
  --texto-3: #6c7789;

  --primario: #6f92ff;
  --primario-rgb: 111, 146, 255;
  --primario-fuerte: #9ab0ff;
  --primario-tenue: #212a45;

  --exito: #35c98e;
  --exito-rgb: 53, 201, 142;
  --exito-tenue: #12332a;

  --alerta: #e2a53d;
  --alerta-rgb: 226, 165, 61;
  --alerta-tenue: #3a2e15;

  --peligro: #f0656c;
  --peligro-rgb: 240, 101, 108;
  --peligro-tenue: #3a1a1c;

  --info: #a48cf2;
  --info-rgb: 164, 140, 242;
  --info-tenue: #2a2245;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sombra-2: 0 4px 14px rgba(0, 0, 0, 0.45);
  --sombra-3: 0 16px 40px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* === 3. Base y utilidades === */
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--fs-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

.tabular, .card__importe, .kpi__valor, .tabla td.num, .card__dif { font-variant-numeric: tabular-nums; }

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

:focus { outline: none; }

.btn:focus-visible, .card:focus-visible, .input:focus-visible, .select:focus-visible,
.chip:focus-visible, .dropzone:focus-visible, .kanban__masBtn:focus-visible,
.modal__cerrar:focus-visible, .buscador__input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* === 4. Layout general (.app) === */
.app { display: flex; flex-direction: column; height: 100vh; min-height: 0; overflow: hidden; }

.app__header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-4); padding: var(--esp-3) var(--esp-5);
  background: var(--superficie); border-bottom: 1px solid var(--borde);
  box-shadow: var(--sombra-1); flex-wrap: wrap;
}

.app__brand { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }

.app__logo {
  width: 36px; height: 36px; border-radius: var(--r-md); flex-shrink: 0;
  background: linear-gradient(135deg, var(--primario), var(--info));
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: var(--fs-lg);
}

.app__titulo { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__sub { font-size: var(--fs-sm); color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__acciones { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }

.app__main {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: var(--esp-5); display: flex; flex-direction: column; gap: var(--esp-5);
}

/* === 5. Paso (stepper) === */
.paso { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-2) 0; }
.paso__num {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--primario-tenue); color: var(--primario);
  font-weight: 700; font-size: var(--fs-sm); display: grid; place-items: center;
}
.paso__titulo { font-weight: 600; font-size: var(--fs-md); color: var(--texto); }

/* === 6. Uploader / dropzone === */
.uploader { display: flex; flex-direction: column; gap: var(--esp-3); }
.uploader__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-4); }

.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--esp-2); padding: var(--esp-6) var(--esp-4);
  border: 2px dashed var(--borde-fuerte); border-radius: var(--r-lg);
  background: var(--superficie); text-align: center; cursor: pointer;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.dropzone:hover {
  border-color: var(--primario);
  background: var(--primario-tenue);
}

.dropzone--banco { border-top: 3px solid var(--peligro); }
.dropzone--auxiliar { border-top: 3px solid var(--info); }

.dropzone--activo {
  border-color: var(--primario);
  background: var(--primario-tenue);
  transform: scale(1.01);
}

.dropzone--cargado {
  border-style: solid;
  border-color: var(--exito);
  background: var(--exito-tenue);
}

.dropzone--error {
  border-style: solid;
  border-color: var(--peligro);
  background: var(--peligro-tenue);
}

.dropzone__icono { font-size: 32px; line-height: 1; color: var(--texto-3); }
.dropzone--cargado .dropzone__icono { color: var(--exito); }
.dropzone--error .dropzone__icono { color: var(--peligro); }
.dropzone__titulo { font-weight: 600; font-size: var(--fs-md); color: var(--texto); }
.dropzone__hint { font-size: var(--fs-sm); color: var(--texto-3); }
.dropzone__meta {
  font-size: var(--fs-xs); color: var(--texto-2); background: var(--superficie-2);
  border: 1px solid var(--borde); border-radius: var(--r-sm); padding: 2px var(--esp-2);
}
.dropzone__input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* === 7. Panel === */
.panel {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-lg); box-shadow: var(--sombra-1);
  display: flex; flex-direction: column; min-width: 0;
}
.panel__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  padding: var(--esp-4); border-bottom: 1px solid var(--borde); flex-wrap: wrap;
}
.panel__titulo { font-weight: 700; font-size: var(--fs-md); }
.panel__cuerpo { padding: var(--esp-4); }
.panel__acciones { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; }

/* === 8. Config / campos / controles === */
.config { display: flex; flex-direction: column; gap: var(--esp-4); }
.config__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--esp-4); }
.campo { display: flex; flex-direction: column; gap: var(--esp-1); }
.campo__label { font-size: var(--fs-sm); font-weight: 600; color: var(--texto-2); }
.campo__hint { font-size: var(--fs-xs); color: var(--texto-3); }

.input, .select {
  width: 100%; padding: 8px var(--esp-3); border-radius: var(--r-sm);
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
  font-size: var(--fs-md); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.input:hover, .select:hover { border-color: var(--borde-fuerte); }
.input:focus, .select:focus { border-color: var(--primario); box-shadow: 0 0 0 3px rgba(var(--primario-rgb), 0.18); }
.select { cursor: pointer; }

.switch { display: inline-flex; align-items: center; gap: var(--esp-2); cursor: pointer; user-select: none; }
.switch__track {
  position: relative; width: 38px; height: 22px; border-radius: 999px;
  background: var(--borde-fuerte); transition: background var(--dur-2) var(--ease); flex-shrink: 0;
}
.switch input:checked + .switch__track, .switch__track[data-activo="true"] { background: var(--primario); }
.switch__thumb {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--sombra-1); transition: transform var(--dur-2) var(--ease);
}
.switch input:checked + .switch__track .switch__thumb,
.switch__track[data-activo="true"] .switch__thumb { transform: translateX(16px); }
.switch input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
/* El input real es de 1px: el anillo de foco tiene que dibujarse sobre la pista,
   o quien navegue con teclado no ve dónde está parado. */
.switch input:focus-visible + .switch__track { outline: 2px solid var(--primario); outline-offset: 2px; }

/* === 9. Resumen / KPIs === */
.resumen { display: flex; flex-direction: column; gap: var(--esp-3); }
.resumen__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--esp-3); }
.kpi {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md);
  padding: var(--esp-3) var(--esp-4); display: flex; flex-direction: column; gap: 4px; box-shadow: var(--sombra-1);
}
.kpi__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-3); }
.kpi__valor { font-size: var(--fs-xxl); font-weight: 700; color: var(--texto); text-align: right; font-variant-numeric: tabular-nums; }
.kpi__delta { font-size: var(--fs-xs); color: var(--texto-2); text-align: right; }
.kpi--ok .kpi__valor { color: var(--exito); }
.kpi--alerta .kpi__valor { color: var(--alerta); }
.kpi--info .kpi__valor { color: var(--info); }
.kpi--neutro .kpi__valor { color: var(--texto); }

/* === 10. Toolbar / buscador === */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; }
.toolbar__grupo { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.buscador { position: relative; display: flex; align-items: center; min-width: 200px; }
.buscador__input {
  width: 100%; padding: 8px var(--esp-3) 8px 34px; border-radius: var(--r-sm);
  border: 1px solid var(--borde); background-color: var(--superficie); color: var(--texto);
  font-size: var(--fs-md); transition: border-color var(--dur-1) var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b95a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 10px center;
}
.buscador__input:focus { border-color: var(--primario); box-shadow: 0 0 0 3px rgba(var(--primario-rgb), 0.18); }

/* === 11. Kanban === */
/* El tablero vive dentro de `.app__main`, que es una columna flex con scroll.
   Necesita base de altura propia y NO encogerse (flex-shrink 0): si se le deja
   encoger, los paneles de arriba lo aplastan a 0 px y las columnas se desbordan
   por debajo del pie de página. Las filas se declaran explícitas para que el
   grid reparta la altura del contenedor en vez de crecer con el contenido. */
.kanban {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--esp-4); flex: 1 0 460px; min-height: 0;
}
.kanban__col {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-top: 3px solid var(--borde-fuerte); border-radius: var(--r-lg); overflow: hidden;
}
.kanban__col--banco { border-top-color: var(--peligro); }
.kanban__col--conciliado { border-top-color: var(--exito); }
.kanban__col--auxiliar { border-top-color: var(--info); }
.kanban__colHeader {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--borde);
  background: var(--superficie); flex-shrink: 0;
}
.kanban__colTitulo {
  font-weight: 700; font-size: var(--fs-md); display: flex; align-items: center; gap: var(--esp-2);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kanban__colTotal { font-size: var(--fs-sm); color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kanban__badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px; background: var(--borde); color: var(--texto-2);
  font-size: var(--fs-xs); font-weight: 700;
}
.kanban__col--banco .kanban__badge { background: var(--peligro-tenue); color: var(--peligro); }
.kanban__col--conciliado .kanban__badge { background: var(--exito-tenue); color: var(--exito); }
.kanban__col--auxiliar .kanban__badge { background: var(--info-tenue); color: var(--info); }

.kanban__lista {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--esp-3);
  display: flex; flex-direction: column; gap: var(--esp-2);
  transition: background var(--dur-1) var(--ease);
  scrollbar-width: thin; scrollbar-color: var(--borde-fuerte) transparent;
}
.kanban__lista--drop {
  background: rgba(var(--primario-rgb), 0.08);
  outline: 2px dashed var(--primario); outline-offset: -4px; border-radius: var(--r-md);
}
.kanban__lista::-webkit-scrollbar { width: 8px; }
.kanban__lista::-webkit-scrollbar-track { background: transparent; }
.kanban__lista::-webkit-scrollbar-thumb { background: var(--borde-fuerte); border-radius: 999px; }
.kanban__lista::-webkit-scrollbar-thumb:hover { background: var(--texto-3); }

.kanban__vacio {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--esp-2); padding: var(--esp-6) var(--esp-3); color: var(--texto-3);
  text-align: center; flex: 1 1 auto;
}
.kanban__masBtn {
  align-self: center; margin-top: var(--esp-2); padding: 6px var(--esp-4);
  border: 1px dashed var(--borde-fuerte); border-radius: var(--r-sm); background: transparent;
  color: var(--texto-2); font-size: var(--fs-sm); cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.kanban__masBtn:hover { background: var(--superficie); color: var(--primario); border-color: var(--primario); }

/* === 12. Card === */
.card {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md);
  padding: var(--esp-3); display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--sombra-1); cursor: pointer; position: relative;
  transition: box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
    opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.card:hover { box-shadow: var(--sombra-2); border-color: var(--borde-fuerte); }
.card[draggable="true"] { cursor: grab; }
.card[draggable="true"]:active { cursor: grabbing; }
.card--banco { border-left: 3px solid var(--peligro); }
.card--auxiliar { border-left: 3px solid var(--info); }
.card--sel { box-shadow: 0 0 0 2px var(--primario), var(--sombra-2); border-color: var(--primario); }
.card--drag { opacity: 0.5; transform: rotate(-1.5deg); }

.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-2); }
.card__fecha { font-size: var(--fs-xs); color: var(--texto-3); font-weight: 600; white-space: nowrap; }
.card__importe { font-size: var(--fs-md); font-weight: 700; text-align: right; white-space: nowrap; color: var(--texto); }
.card__importe--cargo { color: var(--peligro); }
.card__importe--abono { color: var(--exito); }
.card__desc {
  font-size: var(--fs-sm); color: var(--texto); display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.35; min-height: calc(1.35em * 2);
}
.card__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.card__metaItem { font-size: var(--fs-xs); color: var(--texto-3); display: inline-flex; align-items: center; gap: 3px; }
/* Por omisión las acciones están siempre visibles: en pantallas táctiles no hay
   hover y esconderlas las volvería inalcanzables. */
.card__acciones {
  display: flex; gap: 6px; align-items: center; justify-content: flex-end;
  margin-top: 6px;
}
/* Solo con puntero fino (ratón) las revelamos al pasar encima, y nunca en las
   tarjetas de par: ahí «Ver detalle» y «Desconciliar» son la acción principal. */
@media (hover: hover) and (pointer: fine) {
  .card:not(.card--par) .card__acciones {
    opacity: 0; max-height: 0; overflow: hidden; margin-top: 0;
    transition: opacity var(--dur-1) var(--ease), max-height var(--dur-1) var(--ease);
  }
  .card:not(.card--par):hover .card__acciones,
  .card:not(.card--par):focus-within .card__acciones { opacity: 1; max-height: 40px; margin-top: 6px; }
}

/* Tarjeta de par conciliado: dos lados + flecha */
.card--par .card__par { display: flex; align-items: center; gap: var(--esp-2); }
.card__parLado {
  flex: 1 1 0; min-width: 0; background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--r-sm); padding: 6px 8px; display: flex; flex-direction: column; gap: 2px;
}
.card__parLado[data-origen="banco"] { border-left: 3px solid var(--peligro); }
.card__parLado[data-origen="auxiliar"] { border-left: 3px solid var(--info); }
.card__parFlecha { flex-shrink: 0; color: var(--texto-3); font-size: var(--fs-lg); line-height: 1; }
.card__dif { font-size: var(--fs-xs); color: var(--texto-2); text-align: right; font-variant-numeric: tabular-nums; }

/* === 13. Chip === */
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.6; white-space: nowrap; border: 1px solid transparent;
}
button.chip {
  cursor: pointer;
  background: none;
  transition: filter var(--dur-1) var(--ease);
}

button.chip:hover { filter: brightness(0.96); }

/* Colores por tipo de coincidencia */
.chip--exacto { background: var(--exito-tenue); color: var(--exito); }
.chip--referencia { background: var(--primario-tenue); color: var(--primario); }
.chip--aproximado { background: var(--alerta-tenue); color: var(--alerta); }
.chip--agrupado { background: var(--info-tenue); color: var(--info); }

.chip--manual {
  background: var(--superficie-2);
  color: var(--texto-2);
  border-color: var(--borde);
}

/* Colores por origen del movimiento */
.chip--banco { background: var(--peligro-tenue); color: var(--peligro); }
.chip--auxiliar { background: var(--info-tenue); color: var(--info); }

/* === 14. Botones === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px var(--esp-4); border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: var(--fs-md); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--primario { background: var(--primario); color: #fff; }
.btn--primario:hover:not(:disabled) { background: var(--primario-fuerte); }

.btn--secundario {
  background: var(--superficie);
  color: var(--texto);
  border-color: var(--borde);
}

.btn--secundario:hover:not(:disabled) {
  border-color: var(--borde-fuerte);
  background: var(--superficie-2);
}

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

.btn--peligro { background: var(--peligro); color: #fff; }
.btn--peligro:hover:not(:disabled) { filter: brightness(0.92); }

.btn--sm { padding: 5px var(--esp-3); font-size: var(--fs-sm); }
.btn--bloque { display: flex; width: 100%; }

/* === 15. Modal === */
/* `.modal__fondo` y `.modal__caja` son HERMANOS dentro de `.modal`: el que centra
   y ocupa la pantalla es `.modal`, y el fondo va detrás de la caja. Si el fondo
   fuera el contenedor fijo, quedaría encima de la caja y la dejaría desenfocada
   e inclicable. */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: var(--esp-4);
}

.modal__fondo {
  position: absolute; inset: 0; background: rgba(10, 14, 22, 0.5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.modal__caja {
  position: relative; z-index: 1;
  width: 100%; max-width: 520px; max-height: 90vh; background: var(--superficie);
  border-radius: var(--r-lg); box-shadow: var(--sombra-3);
  display: flex; flex-direction: column; overflow: hidden;
}
.modal__caja--ancha { max-width: 860px; }
.modal__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5); border-bottom: 1px solid var(--borde); flex-shrink: 0;
}
.modal__titulo { font-size: var(--fs-lg); font-weight: 700; }
.modal__cerrar {
  width: 30px; height: 30px; border-radius: var(--r-sm); border: none; background: transparent;
  color: var(--texto-2); font-size: var(--fs-lg); cursor: pointer; display: grid; place-items: center;
  transition: background var(--dur-1) var(--ease);
}
.modal__cerrar:hover { background: var(--superficie-2); color: var(--texto); }
.modal__cuerpo { padding: var(--esp-5); overflow-y: auto; min-height: 0; }
.modal__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-5); border-top: 1px solid var(--borde); flex-shrink: 0; flex-wrap: wrap;
}

/* === 16. Tabla === */
.tabla__wrap { width: 100%; overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--r-md); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tabla th {
  position: sticky; top: 0; z-index: 1; background: var(--superficie-2); color: var(--texto-2);
  text-align: left; font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0.03em; padding: 10px var(--esp-3); border-bottom: 1px solid var(--borde); white-space: nowrap;
}
.tabla td { padding: 9px var(--esp-3); border-bottom: 1px solid var(--borde); color: var(--texto); vertical-align: middle; }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tbody tr:hover { background: var(--superficie-2); }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla--compacta th, .tabla--compacta td { padding: 5px var(--esp-2); }

/* === 17. Mapeo de columnas === */
.mapeo { display: flex; flex-direction: column; gap: var(--esp-4); }
.mapeo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3) var(--esp-4); }
.mapeo__fila { display: flex; flex-direction: column; gap: 4px; }
.mapeo__label { font-size: var(--fs-sm); font-weight: 600; color: var(--texto-2); }

/* === 18. Toast === */
.toast__zona {
  position: fixed; right: var(--esp-4); bottom: var(--esp-4); z-index: 200;
  display: flex; flex-direction: column; gap: var(--esp-2);
  max-width: min(360px, calc(100vw - 2 * var(--esp-4)));
}
.toast {
  display: flex; align-items: flex-start; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4);
  border-radius: var(--r-md); background: var(--superficie); border: 1px solid var(--borde);
  box-shadow: var(--sombra-2); font-size: var(--fs-sm); animation: toast-entrada var(--dur-2) var(--ease);
}
@keyframes toast-entrada {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.toast--ok { border-left: 3px solid var(--exito); }
.toast--error { border-left: 3px solid var(--peligro); }
.toast--info { border-left: 3px solid var(--info); }

/* === 19. Spinner, barra de progreso, vacío, alertas === */
.spinner {
  width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--borde);
  border-top-color: var(--primario); animation: spinner-rotar 0.7s linear infinite; flex-shrink: 0;
}
@keyframes spinner-rotar { to { transform: rotate(360deg); } }

.barra { width: 100%; height: 8px; border-radius: 999px; background: var(--borde); overflow: hidden; }
.barra__relleno { height: 100%; background: var(--primario); border-radius: 999px; transition: width var(--dur-2) var(--ease); }

.vacio {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--esp-2); padding: var(--esp-6); color: var(--texto-3); text-align: center;
}
.vacio__icono { font-size: 34px; line-height: 1; }
.vacio__texto { font-size: var(--fs-sm); max-width: 320px; }

.alerta {
  display: flex; align-items: flex-start; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4);
  border-radius: var(--r-md); font-size: var(--fs-sm); border: 1px solid transparent;
}
.alerta--warn { background: var(--alerta-tenue); color: var(--alerta); border-color: rgba(var(--alerta-rgb), 0.35); }
.alerta--error { background: var(--peligro-tenue); color: var(--peligro); border-color: rgba(var(--peligro-rgb), 0.35); }

/* === 20. Footer === */
.footer {
  padding: var(--esp-4) var(--esp-5); text-align: center; font-size: var(--fs-xs); color: var(--texto-3);
  border-top: 1px solid var(--borde); background: var(--superficie); flex-shrink: 0;
}

/* === 20a. Acceso, sesión y administración === */
.acceso {
  min-height: 100vh; display: grid; place-items: center;
  padding: var(--esp-5); background: var(--fondo);
}
.acceso__caja {
  width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--esp-4);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg);
  padding: var(--esp-6) var(--esp-5); box-shadow: var(--sombra-2);
}
.acceso__marca { display: flex; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-2); }

/* Identidad de quien está dentro, en la barra superior */
.usuario { display: inline-flex; align-items: center; gap: var(--esp-2); min-width: 0; }
.usuario__nombre {
  font-weight: 600; font-size: var(--fs-sm); color: var(--texto-2);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Pestañas del panel de administración */
.pestanas {
  display: flex; gap: 2px; border-bottom: 1px solid var(--borde);
  margin-bottom: var(--esp-4); overflow-x: auto;
}
.pestanas__btn {
  padding: var(--esp-2) var(--esp-4); border: none; background: transparent; cursor: pointer;
  color: var(--texto-2); font-size: var(--fs-md); font-weight: 600; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.pestanas__btn:hover { color: var(--texto); }
.pestanas__btn--activa { color: var(--primario); border-bottom-color: var(--primario); }
.pestanas__btn:focus-visible { outline: 2px solid var(--primario); outline-offset: -2px; }

/* Chip usado como interruptor (activo/inactivo en la tabla de usuarios) */
button.chip { cursor: pointer; font: inherit; font-size: var(--fs-xs); }
button.chip:disabled { cursor: default; opacity: 0.65; }

/* === 20b. Partidas en tránsito (heredadas de un periodo anterior) === */
.chip--transito {
  background: rgba(139, 92, 246, 0.14);
  color: #6d28d9;
  border: 1px solid rgba(139, 92, 246, 0.35);
}
html[data-tema="oscuro"] .chip--transito { color: #c4b5fd; }

/* Franja lateral punteada: se distingue de un movimiento del periodo actual
   sin competir con el color de la columna. */
.card--transito { border-left: 3px dashed #8b5cf6; }

/* === 21. Responsive === */
@media (max-width: 1100px) {
  /* Dos filas: hay que declararlas o el grid crece con el contenido. */
  .kanban {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    flex-basis: 720px;
  }
  .kanban__col--auxiliar { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  /* Apilado: cada columna toma su altura natural (acotada) y el que hace
     scroll es el contenedor principal, no cada lista. */
  .kanban {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(280px, auto);
    flex: 0 0 auto;
  }
  .kanban__col--auxiliar { grid-column: auto; }
  .kanban__col { min-height: 280px; max-height: 75vh; }
  .uploader__grid { grid-template-columns: 1fr; }
  .app__main { padding: var(--esp-4); }
  .card--par .card__par { flex-direction: column; align-items: stretch; }
  .card__parFlecha { align-self: center; transform: rotate(90deg); }
}

@media (max-width: 640px) {
  .app__header { padding: var(--esp-2) var(--esp-3); gap: var(--esp-2); }
  .app__titulo { font-size: var(--fs-md); }
  .app__sub { display: none; }
  .app__acciones { width: 100%; }
  .app__acciones .btn { flex: 1 1 auto; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar__grupo { justify-content: space-between; }
  .buscador { width: 100%; }
  .modal__header, .modal__cuerpo, .modal__footer { padding-left: var(--esp-4); padding-right: var(--esp-4); }
  .modal__footer .btn { flex: 1 1 auto; }
  .mapeo__grid { grid-template-columns: 1fr; }
  .toast__zona { left: var(--esp-3); right: var(--esp-3); max-width: none; }
}

/* === 22. Movimiento reducido === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* === 23. Impresión === */
@media print {
  .app__header, .app__acciones, .dropzone, .uploader, .toolbar, .card__acciones,
  .kanban__masBtn, .toast__zona, .modal__fondo, .footer { display: none !important; }
  .app, .app__main { height: auto; overflow: visible; }
  .kanban { display: block; }
  .kanban__col { break-inside: avoid; margin-bottom: var(--esp-4); border: 1px solid #000; }
  .kanban__lista { overflow: visible; }
  .card { box-shadow: none; border: 1px solid #000; color: #000; background: #fff; transform: none; opacity: 1; }
  .card__importe--cargo, .card__importe--abono { color: #000; }
}