/* Los estilos de todo el sistema, en un solo archivo. Colores, tamaños y espacios se definen una
   vez acá arriba: para cambiar el aspecto se tocan las variables, no las reglas de abajo. */
:root {
  /* Colores */
  --fondo: #f4f5f7;
  --papel: #ffffff;
  --texto: #1b2130;
  --suave: #5f6878;
  --tenue: #8a92a1;
  --borde: #e3e6eb;
  --borde-fuerte: #cfd4dc;
  --acento: #3b5bdb;
  --acento-hover: #2f4bc0;
  --acento-texto: #ffffff;
  --acento-suave: #e9edfc;
  --ok: #1d7a4c;
  --ok-fondo: #e4f4ea;
  --error: #b42318;
  --error-fondo: #fbe9e7;
  --aviso: #8a5300;
  --aviso-fondo: #fff3dc;
  --pruebas: #8a5300;
  --pruebas-fondo: #ffe8b3;
  --velo: rgb(15 20 30 / .45);
  /* Filas de las tablas: alternadas y resaltadas al pasar el mouse (colores opacos: la columna
     fija de la tabla de porcentajes necesita fondo propio). */
  --fila-alterna: #f7f8fa;
  --fila-hover: #edf1fd;
  /* Bordes de color de los indicadores */
  --linea-azul: #3b5bdb;
  --linea-verde: #2f9e5f;
  --linea-ambar: #c98a12;
  --linea-roja: #c4362b;
  /* Dólares: todo lo que está en USD se ve en verde (y además dice «USD» en texto). */
  --usd: #1b7a43;
  --usd-fondo: #e6f5ec;
  --usd-borde: #3aa266;
  /* Egresos y saldos negativos (0.8.1). Contraste sobre el papel: 6,5 a 1 en claro. */
  --egreso: #b42318;

  /* Letra */
  --letra: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --letra-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --t-chica: .78rem;
  --t-suave: .875rem;
  --t-base: .95rem;
  --t-titulo: 1.35rem;
  --t-grande: 1.6rem;
  --t-numero: 2rem;

  /* Espacios */
  --e1: .25rem;
  --e2: .5rem;
  --e3: .75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --gutter: 16px;

  /* Formas */
  --radio: 12px;
  --radio-chico: 8px;
  --radio-pildora: 999px;
  --sombra: 0 1px 2px rgb(16 24 40 / .05), 0 1px 3px rgb(16 24 40 / .07);
  --sombra-alta: 0 10px 30px rgb(16 24 40 / .16);

  /* Medidas */
  --ancho-lateral: 16rem;
  --ancho-cinta: 4rem;
  --alto-franja: 0px; /* 1.5rem cuando hay franja de entorno (ver #app:has más abajo) */
  --alto-superior: 3.75rem;
  --ancho-contenido: 72rem;
  --corte-celular: 900px; /* referencia: el @media de abajo repite este valor */
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #12151b;
    --papel: #1b2029;
    --texto: #e7eaf0;
    --suave: #a3abba;
    --tenue: #7c8596;
    --borde: #2c333f;
    --borde-fuerte: #3b4452;
    --acento: #7b96f5;
    --acento-hover: #93aaf8;
    --acento-texto: #0d1420;
    --acento-suave: #232c47;
    --ok: #5fd39a;
    --ok-fondo: #173326;
    --error: #ff8a80;
    --error-fondo: #3a1f1d;
    --aviso: #ffc46b;
    --aviso-fondo: #3a2c14;
    --pruebas: #ffc46b;
    --pruebas-fondo: #3a2c14;
    --velo: rgb(0 0 0 / .6);
    --fila-alterna: #20262f;
    --fila-hover: #283149;
    --usd: #6fdc9b;
    --usd-fondo: #15301f;
    --usd-borde: #3f9d66;
    --egreso: #ff8a80;
    --sombra: 0 1px 2px rgb(0 0 0 / .4);
    --sombra-alta: 0 10px 30px rgb(0 0 0 / .5);
  }
}

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

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: var(--t-base)/1.5 var(--letra);
  background: var(--fondo);
  color: var(--texto);
  min-height: 100vh;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--e3); }
h1 { font-size: var(--t-titulo); }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; margin-top: var(--e5); }
p { margin: 0 0 var(--e3); }
a { color: var(--acento); }
svg.icono { width: 1.15rem; height: 1.15rem; flex: none; }

/* Plata y cantidades: cifras de ancho fijo para que los números alineen en columna. */
.monto, .numero, table, .version { font-variant-numeric: tabular-nums; }
.monto { white-space: nowrap; }
td.monto, th.monto { text-align: right; }

/* ─────────────── Controles ─────────────── */

button, .boton {
  font: inherit;
  font-weight: 500;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde-fuerte);
  background: var(--papel);
  color: var(--texto);
  padding: .5rem .95rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
}
button:hover, .boton:hover { border-color: var(--suave); }
.primario { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.primario:hover { background: var(--acento-hover); border-color: var(--acento-hover); }
.ancho { width: 100%; }
button:disabled { opacity: .6; cursor: default; }
.enlace { background: none; border: 0; padding: 0; color: var(--suave); text-decoration: underline; font-weight: 400; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

label { display: block; font-size: var(--t-suave); color: var(--suave); margin: var(--e3) 0 var(--e1); }
input, select {
  font: inherit;
  padding: .5rem .7rem;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde-fuerte);
  background: var(--papel);
  color: var(--texto);
  max-width: 100%;
}
input { width: 100%; }
input[type="checkbox"] { width: auto; accent-color: var(--acento); }
input.corto { width: 5rem; }
.filtros-saldos { display: flex; flex-wrap: wrap; align-items: center; }
.filtros-saldos label.en-linea { white-space: nowrap; }
label.en-linea { display: inline-flex; align-items: center; gap: var(--e1); margin: var(--e1) var(--e3) var(--e1) 0; color: var(--texto); }
/* El PIN no es type="password" a propósito: si no, el navegador ofrece guardarlo. */
input.pin {
  -webkit-text-security: disc;
  text-security: disc;
  font-size: var(--t-grande);
  letter-spacing: .5rem;
  text-align: center;
}

/* ─────────────── Avisos y etiquetas ─────────────── */

.mensaje {
  display: flex;
  gap: var(--e2);
  align-items: flex-start;
  border-radius: var(--radio-chico);
  padding: var(--e3) var(--e4);
  margin: var(--e3) 0;
  font-size: var(--t-base);
}
.mensaje[hidden] { display: none; }
.mensaje svg.icono { margin-top: .1rem; }
.mensaje.error { background: var(--error-fondo); color: var(--error); }
.mensaje.ok { background: var(--ok-fondo); color: var(--ok); }
.mensaje.advertencia { background: var(--aviso-fondo); color: var(--aviso); }

.etiqueta {
  display: inline-block;
  font-size: var(--t-chica);
  font-weight: 600;
  padding: .1rem .55rem;
  border-radius: var(--radio-pildora);
  background: var(--fondo);
  color: var(--suave);
  white-space: nowrap;
}
.etiqueta.ok { background: var(--ok-fondo); color: var(--ok); }
.etiqueta.error { background: var(--error-fondo); color: var(--error); }
.etiqueta.advertencia { background: var(--aviso-fondo); color: var(--aviso); }
.etiqueta.acento { background: var(--acento-suave); color: var(--acento); }

/* La marca de pruebas: que nadie confunda este sistema con el de verdad. */
/* Queda pegada arriba aunque se desplace la página, y las barras fijas se corren su alto: antes
   la barra lateral medía 100vh desde abajo de la franja y el pie (con la versión) quedaba cortado. */
#app:has(> .franja-pruebas) { --alto-franja: 1.5rem; }
.franja-pruebas {
  position: sticky;
  top: 0;
  z-index: 35;
  height: var(--alto-franja);
  line-height: var(--alto-franja);
  background: var(--pruebas-fondo);
  color: var(--pruebas);
  font-size: var(--t-chica);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 var(--gutter);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.etiqueta.pruebas { background: var(--pruebas-fondo); color: var(--pruebas); text-transform: uppercase; letter-spacing: .05em; }

/* ─────────────── Tarjetas, indicadores y tablas ─────────────── */

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--e5);
}
.sobretitulo {
  font-size: var(--t-chica);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--suave);
  margin: 0 0 var(--e1);
}
.saludo h1 { font-size: var(--t-grande); margin-bottom: var(--e1); }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--e4); }
.indicador {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--linea-azul);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--e4) var(--e5);
  color: inherit;
  text-decoration: none;
}
.indicador.verde { border-left-color: var(--linea-verde); }
.indicador.ambar { border-left-color: var(--linea-ambar); }
.indicador.rojo { border-left-color: var(--linea-roja); }
.indicador .sobretitulo { overflow-wrap: anywhere; }
.indicador .numero { display: block; font-size: var(--t-numero); font-weight: 700; line-height: 1.1; margin: var(--e1) 0; }
.indicador .detalle { color: var(--suave); font-size: var(--t-suave); }

.titulo-con-acciones { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e3); }
.titulo-con-acciones h1 { margin: 0; }
.volver { display: inline-flex; align-items: center; gap: var(--e1); font-size: var(--t-suave); margin-bottom: var(--e3); }

.tabla-scroll { overflow-x: auto; margin: var(--e3) 0; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-base); }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
thead th { color: var(--suave); font-weight: 600; font-size: var(--t-chica); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
tbody tr:last-child > * { border-bottom: 0; }
/* Todas las tablas: filas alternadas y la del mouse resaltada. El fondo va en las celdas (no en la
   fila) para que una columna fija (position: sticky) lo tenga igual. */
tbody tr > td, tbody tr > th { background: var(--papel); }
tbody tr:nth-child(even) > td, tbody tr:nth-child(even) > th { background: var(--fila-alterna); }
tbody tr:hover > td, tbody tr:hover > th { background: var(--fila-hover); }
table.grilla td { text-align: center; }
table.grilla th[scope="row"] { white-space: nowrap; }
tr.apagado { color: var(--tenue); }

.datos { display: grid; grid-template-columns: max-content 1fr; gap: var(--e2) var(--e5); margin: 0; }
.datos dt { color: var(--suave); }
.datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.acciones { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e4); }
.ayuda { font-size: var(--t-suave); color: var(--suave); }
form.tarjeta > .ayuda:last-child { margin: var(--e4) 0 0; }

.lista-opciones { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e2); }
.lista-opciones a {
  display: flex; gap: var(--e3); align-items: center;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  color: inherit; text-decoration: none;
}
.lista-opciones a:hover { border-color: var(--acento); }
.lista-opciones strong { display: block; }
.lista-opciones span { color: var(--suave); font-size: var(--t-suave); }
.imputacion { display: grid; gap: var(--e1); padding: var(--e2) 0; border-bottom: 1px solid var(--borde); }

/* ─────────────── Maestros ─────────────── */

/* En las fichas cada campo va en su renglón (un select y una casilla quedaban uno al lado del otro). */
form.tarjeta > select { display: block; width: 100%; }
form.tarjeta > label.en-linea { display: flex; margin-top: var(--e3); }
.campo-color { display: flex; align-items: center; gap: var(--e3); }
input[type="color"] { width: 3rem; height: 2.3rem; padding: .15rem; }
input[type="color"]:disabled { opacity: .35; }
.filtros { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); align-items: center; }
.filtros input[type="search"] { flex: 1 1 14rem; width: auto; }
.muestra-color { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: var(--e2); vertical-align: middle; }
tr.clickeable { cursor: pointer; }
tbody tr.vigente > td { background: var(--acento-suave); }
.grilla-porcentajes { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--e2); margin: var(--e3) 0; }
.grilla-porcentajes .parte { display: flex; align-items: center; gap: var(--e2); margin: 0; color: var(--texto); }
.grilla-porcentajes .parte > span:first-child { min-width: 3rem; font-weight: 600; }
.grilla-porcentajes input { text-align: right; font-variant-numeric: tabular-nums; }
/* Lista de porcentajes: una columna por sucursal. Los ceros atenuados para leer rápido. */
/* Compacta para que en la compu entre entera (decisión del 6/11/2026): menos margen, número chico,
   descripción con ancho tope (el texto completo va en el title). */
.tabla-reparto { font-size: var(--t-suave); }
.tabla-reparto th, .tabla-reparto td { padding: .35rem .4rem; }
.tabla-reparto td.monto, .tabla-reparto th.monto { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-reparto td.monto { font-size: .8rem; }
/* Atenuado con el color, no con opacity: opacity también apagaba el fondo alternado de la fila. */
.tabla-reparto td.cero { color: var(--borde-fuerte); }
.tabla-reparto td.total { font-weight: 600; }
.tabla-reparto td.total-mal { color: var(--error); background: var(--error-fondo); }
.tabla-reparto td.sin-reparto { color: var(--suave); font-style: italic; white-space: nowrap; }
.tabla-reparto td.descripcion { max-width: 11rem; min-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.fecha { white-space: nowrap; }
.tabla-reparto th.no-habilitada { color: var(--tenue); font-style: italic; }
/* Al desplazar la tabla de costado, el código queda a la vista. */
.tabla-reparto tr > :first-child { position: sticky; left: 0; z-index: 1; }
.tabla-reparto thead tr > :first-child { background: var(--papel); }
.scroll-con-sombra { position: relative; }
.scroll-con-sombra.desborda::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1.5rem;
  pointer-events: none;
  background: linear-gradient(to right, transparent, rgb(16 24 40 / .14));
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
}
.pista-desplazar { margin: var(--e2) 0 0; }
.grilla-porcentajes .parte.deshabilitada { opacity: .45; }
/* La nota va en su propio renglón, debajo del campo: al costado se metía en la sucursal de al lado. */
.grilla-porcentajes .parte { flex-wrap: wrap; }
.nota-habilitada { flex-basis: 100%; padding-left: 3.5rem; margin-top: -.2rem; font-size: var(--t-chica); font-style: italic; }
.nota-habilitada:empty { display: none; }
.parte-fuera { color: var(--error); font-weight: 600; }
.tabla-reparto tbody tr:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
button.orden { background: none; border: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
th[aria-sort="ascending"] button.orden::after { content: ' ▲'; }
th[aria-sort="descending"] button.orden::after { content: ' ▼'; }
input.invalido { border-color: var(--error); background: var(--error-fondo); }
p.monto.bien { color: var(--ok); font-weight: 600; }
p.monto.mal { color: var(--error); font-weight: 600; }
/* El texto del color del papel: blanco sobre el rojo oscuro del modo claro, oscuro sobre el rojo claro
   del modo oscuro (con blanco fijo, en oscuro casi no se leía). */
button.peligro { background: var(--error); border-color: var(--error); color: var(--papel); }
button.peligro:disabled { opacity: .45; }
/* El cartel de los cambios que mueven costos: grande y en rojo, no una línea chica (decisión del 5/11/2026). */
.cartel-retro {
  border: 2px solid var(--error);
  background: var(--error-fondo);
  color: var(--error);
  border-radius: var(--radio);
  padding: var(--e4) var(--e5);
  margin: var(--e4) 0;
}
.cartel-retro .titulo-cartel { display: flex; align-items: center; gap: var(--e2); font-size: 1.15rem; font-weight: 700; }
.cartel-retro .titulo-cartel .icono { width: 1.5rem; height: 1.5rem; }
.cartel-retro input { max-width: 14rem; background: var(--papel); }

/* ─────────────── Pantallas sueltas (ingreso, PIN) ─────────────── */

.solo { min-height: 100vh; display: flex; flex-direction: column; }
.centro {
  width: 100%;
  max-width: 25rem;
  margin: 10vh auto var(--e6);
  padding: 0 var(--gutter);
  flex: 1;
}
.centro .marca { justify-content: center; margin-bottom: var(--e5); }
.centro h1 { text-align: center; }
.pie-solo { text-align: center; padding: var(--e3) var(--gutter); }

/* ─────────────── Marca del sistema ─────────────── */

.marca { display: flex; align-items: center; gap: var(--e3); }
.marca .logo {
  width: 2.2rem; height: 2.2rem; border-radius: var(--radio-chico);
  background: var(--acento); color: var(--acento-texto);
  display: grid; place-items: center; flex: none;
}
.marca .logo svg.icono { width: 1.3rem; height: 1.3rem; }
.marca strong { display: flex; align-items: center; gap: var(--e2); font-size: 1.02rem; line-height: 1.2; }
.marca small { display: block; font-size: var(--t-chica); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); white-space: nowrap; }

/* ─────────────── Pantalla principal ─────────────── */

/* El fondo blanco de la columna va en el marco: la barra es sticky de 100vh y, en una página
   larga, debajo de ella quedaba el gris. */
.marco {
  display: grid;
  grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
  min-height: 100vh;
  background: linear-gradient(to right, var(--papel) calc(var(--ancho-lateral) - 1px), var(--borde) 0 var(--ancho-lateral), transparent 0);
}

.lateral {
  background: var(--papel);
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--alto-franja);
  height: calc(100vh - var(--alto-franja));
  /* Se desplaza solo el menú: con todo Administración abierto no entraba y el pie (con la versión)
     se iba para abajo. */
  overflow: hidden;
}
.lateral nav { min-height: 0; overflow-y: auto; }
/* La franja ya marca el entorno arriba de todo; en la barra, la etiqueta apretaba el nombre. */
.lateral .marca .etiqueta { display: none; }
.cabeza-lateral { display: flex; align-items: center; gap: var(--e1); padding: var(--e4) var(--e2) var(--e3) var(--e4); }
.cabeza-lateral .marca { flex: 1; min-width: 0; }
/* Los botones de la barra lateral se muestran según el estado (ver «Barra lateral en la compu»). */
#menu-cinta, #achicar-menu, #fijar-menu { display: none; }
.lateral nav { flex: 1; padding: 0 var(--e3) var(--e4); }
.grupo-menu {
  font-size: var(--t-chica);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tenue);
  margin: var(--e4) var(--e2) var(--e1);
}
.lateral nav ul { list-style: none; margin: 0; padding: 0; }
.lateral nav a {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: .5rem var(--e3);
  border-radius: var(--radio-chico);
  color: var(--texto);
  text-decoration: none;
  font-weight: 500;
}
.lateral nav a:hover { background: var(--fondo); }
.lateral nav a.activa { background: var(--acento-suave); color: var(--acento); }
.lateral nav a .icono { color: var(--suave); }
.lateral nav a.activa .icono { color: var(--acento); }
.lateral nav a .nombre { flex: 1; min-width: 0; }
.lateral nav ul ul a { padding-left: 2.6rem; font-weight: 400; font-size: var(--t-suave); }
.contador {
  font-size: var(--t-chica);
  font-weight: 600;
  min-width: 1.5rem;
  text-align: center;
  padding: 0 .4rem;
  border-radius: var(--radio-pildora);
  border: 1px solid var(--borde-fuerte);
  color: var(--suave);
}
.lateral .pie-lateral { border-top: 1px solid var(--borde); padding: var(--e3) var(--e4); }
.quien { display: flex; align-items: center; gap: var(--e3); }
.quien strong { display: block; font-size: var(--t-suave); line-height: 1.2; }
.quien small { color: var(--suave); font-size: var(--t-chica); }
.version { font-family: var(--letra-mono); font-size: var(--t-chica); color: var(--tenue); text-decoration: none; margin-top: var(--e2); }

.avatar {
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--acento-suave);
  color: var(--acento);
  font-size: var(--t-chica);
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
  text-decoration: none;
}

.principal { min-width: 0; display: flex; flex-direction: column; }
.superior {
  height: var(--alto-superior);
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 0 var(--e5);
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: var(--alto-franja);
  z-index: 5;
}
.superior .titulo { font-size: 1.1rem; font-weight: 600; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boton-icono { padding: .45rem; border-color: transparent; background: none; color: var(--suave); position: relative; }
.boton-icono:hover { background: var(--fondo); border-color: transparent; }
#abrir-menu { display: none; }

.buscador { position: relative; width: min(24rem, 40vw); }
.buscador > .icono { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--tenue); pointer-events: none; }
.buscador input { padding-left: 2.3rem; padding-right: 2rem; background: var(--fondo); border-color: var(--borde); }
/* La cruz propia de Chrome quedaba encima del «/»; para borrar está Esc. */
.buscador input::-webkit-search-cancel-button { display: none; }
.buscador kbd {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  font: var(--t-chica) var(--letra-mono);
  color: var(--tenue);
  border: 1px solid var(--borde-fuerte);
  border-radius: 4px;
  padding: 0 .3rem;
}
.desplegable {
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(26rem, calc(100vw - 2 * var(--gutter)));
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: var(--e2);
  z-index: 20;
}
.desplegable[hidden] { display: none; }
.desplegable ul { list-style: none; margin: 0; padding: 0; }
.desplegable a { display: flex; gap: var(--e3); align-items: center; padding: var(--e2) var(--e3); border-radius: var(--radio-chico); color: inherit; text-decoration: none; }
.desplegable a:hover, .desplegable a.marcado { background: var(--acento-suave); }
.desplegable a small { color: var(--suave); }
.desplegable .vacio { color: var(--suave); padding: var(--e2) var(--e3); margin: 0; font-size: var(--t-suave); }
.desplegable .grupo-menu { margin: var(--e2) var(--e3) var(--e1); }
.campana-caja { position: relative; }

.contenido {
  width: 100%;
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: var(--e5);
  display: grid;
  gap: var(--e4);
  align-content: start;
}
/* Una celda de grilla crece hasta el ancho de su contenido: sin esto, una tabla ancha corría toda
   la página de costado en el celular en vez de desplazarse dentro de su recuadro. */
.contenido > *, .contenido-asinc > * { min-width: 0; }
.contenido-asinc { display: grid; gap: var(--e4); }
.angosto { max-width: 46rem; }

.velo { display: none; }

/* ─────────────── Barra lateral en la compu: fija, cinta o flotante ─────────────── */
/* Fija: la de siempre. Cinta: angosta, solo íconos, el nombre aparece al pasar el mouse o con
   el foco. Flotante: la cinta abierta por encima del contenido, sin correrlo. */

@media (min-width: 901px) {
  .marco { --col: var(--ancho-lateral); grid-template-columns: var(--col) minmax(0, 1fr);
    background: linear-gradient(to right, var(--papel) calc(var(--col) - 1px), var(--borde) 0 var(--col), transparent 0); }
  .marco.lateral-cinta { --col: var(--ancho-cinta); }
  /* La flotante sale del flujo: sin esto, el contenido se metía en la primera columna. */
  .principal { grid-column: 2; }

  .marco:not(.lateral-cinta) #achicar-menu { display: inline-flex; }

  /* Con overflow: auto, el nombre que sale al costado de la cinta quedaba recortado. */
  .lateral-cinta:not(.lateral-flotante) .lateral,
  .lateral-cinta:not(.lateral-flotante) .lateral nav { overflow: visible; }
  .lateral-cinta:not(.lateral-flotante) .cabeza-lateral { justify-content: center; padding: var(--e3) 0; }
  .lateral-cinta:not(.lateral-flotante) #menu-cinta { display: inline-flex; }
  .lateral-cinta:not(.lateral-flotante) .cabeza-lateral .marca { display: none; }
  .lateral-cinta:not(.lateral-flotante) nav { padding: 0 var(--e2) var(--e4); }
  /* Los títulos de grupo pasan a ser una rayita: siguen separando sin ocupar lugar. */
  .lateral-cinta:not(.lateral-flotante) .grupo-menu { font-size: 0; height: 1px; background: var(--borde); margin: var(--e3) var(--e2); }
  .lateral-cinta:not(.lateral-flotante) nav ul ul,
  .lateral-cinta:not(.lateral-flotante) nav .contador,
  .lateral-cinta:not(.lateral-flotante) nav .etiqueta { display: none; }
  .lateral-cinta:not(.lateral-flotante) nav a { justify-content: center; padding: .6rem 0; position: relative; }
  /* El nombre no se esconde con display:none: así el lector de pantalla lo sigue leyendo. */
  .lateral-cinta:not(.lateral-flotante) nav a .nombre {
    position: absolute;
    left: calc(100% + .6rem);
    top: 50%;
    transform: translateY(-50%);
    background: var(--texto);
    color: var(--papel);
    padding: .25rem .6rem;
    border-radius: 6px;
    font-size: var(--t-suave);
    white-space: nowrap;
    box-shadow: var(--sombra-alta);
    opacity: 0;
    pointer-events: none;
    z-index: 40;
  }
  .lateral-cinta:not(.lateral-flotante) nav a:hover .nombre,
  .lateral-cinta:not(.lateral-flotante) nav a:focus-visible .nombre { opacity: 1; }
  .lateral-cinta:not(.lateral-flotante) .pie-lateral { padding: var(--e3) 0; text-align: center; }
  .lateral-cinta:not(.lateral-flotante) .quien { justify-content: center; }
  .lateral-cinta:not(.lateral-flotante) .quien > div { display: none; }

  .lateral-flotante .lateral {
    position: fixed;
    inset: var(--alto-franja) auto 0 0;
    width: var(--ancho-lateral);
    height: auto;
    z-index: 30;
    box-shadow: var(--sombra-alta);
  }
  .lateral-flotante #fijar-menu { display: inline-flex; }
  .lateral-flotante .velo { display: block; position: fixed; inset: 0; background: var(--velo); z-index: 25; }
}

/* ─────────────── Celular ─────────────── */

@media (max-width: 900px) {
  .marco { grid-template-columns: minmax(0, 1fr); background: none; }
  .lateral {
    position: fixed;
    inset: var(--alto-franja) auto 0 0;
    height: auto;
    width: min(var(--ancho-lateral), 85vw);
    z-index: 30;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--sombra-alta);
    visibility: hidden;
  }
  .menu-abierto .lateral { transform: none; visibility: visible; }
  .menu-abierto .velo { display: block; position: fixed; inset: 0; background: var(--velo); z-index: 25; }
  #abrir-menu { display: inline-flex; }
  .superior { padding: 0 var(--gutter); gap: var(--e2); }
  .buscador { width: auto; flex: 1; }
  .buscador kbd { display: none; }
  .superior .titulo { display: none; }
  .contenido { padding: var(--gutter); }
  .tarjeta { padding: var(--e4); }
}
@media (prefers-reduced-motion: reduce) {
  .lateral { transition: none; }
}

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

dialog { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--papel); color: var(--texto); max-width: min(34rem, calc(100vw - 32px)); padding: var(--e5); box-shadow: var(--sombra-alta); }
dialog::backdrop { background: var(--velo); }
dialog ul { padding-left: 1.2rem; }

/* ─────────────── Carga de movimientos ─────────────── */

/* La marca de los dólares: la usan el formulario, la vista previa y los listados. */
.moneda-usd { color: var(--usd); }
span.monto.moneda-usd, .numero.moneda-usd { font-weight: 600; }
.etiqueta.usd { background: var(--usd-fondo); color: var(--usd); margin-left: var(--e2); }

/* En el formulario, hidden esconde siempre: button { display: inline-flex } le ganaba y el botón
   «Revisar» seguía a la vista con la vista previa abierta. */
.form-carga [hidden] { display: none !important; }
td.sin-corte { white-space: nowrap; }
.campos-carga { border: 0; padding: 0; margin: 0; min-width: 0; }
.campos-carga:disabled { opacity: .7; }
.form-carga h2 { margin-bottom: 0; }

/* Buscador de listas largas (buscadorLista en app.js): cuentas, códigos, códigos de costo. */
.buscador-lista { position: relative; }
.buscador-lista .sugerencias[hidden] { display: none; }
.sugerencias {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 2px);
  list-style: none; margin: 0; padding: var(--e1);
  background: var(--papel); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico);
  box-shadow: var(--sombra-alta); max-height: 22rem; overflow-y: auto;
}
.sugerencias li { padding: var(--e2) var(--e3); border-radius: var(--radio-chico); cursor: pointer; overflow-wrap: anywhere; }
.sugerencias li small { display: block; color: var(--suave); margin-top: 2px; }
.sugerencias li.marcada, .sugerencias li:hover { background: var(--acento-suave); }
.sugerencias li.vacia { color: var(--suave); cursor: default; }
.detalle-codigo { margin: var(--e1) 0 0; font-size: var(--t-suave); color: var(--suave); }
.falta-costo { color: var(--aviso); }

.fila-monto { display: flex; gap: var(--e2); align-items: stretch; flex-wrap: wrap; }
.campo-monto {
  flex: 1 1 12rem; display: flex; align-items: center; gap: var(--e2);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); background: var(--papel); padding-left: var(--e3);
}
.campo-monto input { border: 0; background: transparent; padding-left: 0; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.campo-monto input:focus-visible { outline: none; }
.campo-monto:focus-within { outline: 2px solid var(--acento); outline-offset: 1px; }
.insignia-moneda { font-weight: 700; color: var(--suave); min-width: 2.2rem; flex: none; }
.campo-monto input { flex: 1; min-width: 0; }
.campo-monto.moneda-usd { border: 2px solid var(--usd-borde); background: var(--usd-fondo); }
.campo-monto.moneda-usd .insignia-moneda, .campo-monto.moneda-usd input { color: var(--usd); }
.campo-monto.moneda-usd:focus-within { outline-color: var(--usd-borde); }
#m-cambio .campo-monto { margin-bottom: 0; }

.selector-moneda { display: inline-flex; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); overflow: hidden; }
.selector-moneda.fija { align-items: center; padding: 0 var(--e3); color: var(--suave); font-size: var(--t-suave); }
.selector-moneda.fija.moneda-usd, .selector-moneda.moneda-usd { border-color: var(--usd-borde); }
.opcion-moneda { border: 0; border-radius: 0; min-width: 4.5rem; }
.opcion-moneda[aria-pressed="true"] { background: var(--acento); color: var(--acento-texto); }
.opcion-moneda.usd[aria-pressed="true"] { background: var(--usd); color: var(--papel); }
.resultado-monto { margin: var(--e1) 0 0; font-size: var(--t-suave); color: var(--suave); min-height: 1.3em; font-variant-numeric: tabular-nums; }
.resultado-monto.error, .error-texto { color: var(--error); }
.resultado-monto.moneda-usd { color: var(--usd); font-weight: 600; }

.partes { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--e2); margin: var(--e2) 0; }
.parte-persona { display: flex; align-items: center; gap: var(--e2); }
.parte-persona label.en-linea { margin: 0; min-width: 8.5rem; }
.parte-persona input.corto-monto { width: 7.5rem; text-align: right; font-variant-numeric: tabular-nums; }
#m-bloque-compartido { margin-top: var(--e3); }

.vista-previa { margin-top: var(--e4); border-width: 2px; border-color: var(--acento); }
.vista-previa.moneda-usd { border-color: var(--usd-borde); background: var(--usd-fondo); color: var(--texto); }
.vp-monto { font-size: var(--t-grande); font-weight: 700; margin: 0 0 var(--e3); overflow-wrap: anywhere; color: var(--texto); }
.vp-sentido { letter-spacing: .03em; }
.vista-previa .datos { margin-bottom: var(--e4); }
.vp-monto.egreso .vp-sentido { color: var(--error); }
.vp-monto.ingreso .vp-sentido { color: var(--texto); }
.vp-monto.egreso .monto { color: var(--egreso); }

/* Cambio de moneda */
.selector-operacion { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); margin: var(--e3) 0 var(--e2); }
.opcion-operacion { padding: .75rem; font-size: 1rem; font-weight: 600; border-width: 2px; }
.opcion-operacion[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.opcion-operacion[aria-pressed="true"]::before { content: "✓ "; }
/* Uno debajo del otro: en tres columnas los montos grandes no entraban y se cortaban. */
.campos-cambio { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 32rem; }
.campos-cambio .campo-monto { flex: none; }
.campo-monto.calculado { border-style: dashed; }
.nota-calculado { font-size: var(--t-chica); color: var(--suave); padding-right: var(--e2); white-space: nowrap; }
.frase-cambio { margin: var(--e3) 0 0; padding: var(--e3) var(--e4); border-radius: var(--radio-chico); background: var(--acento-suave); color: var(--texto); font-weight: 600; font-size: 1.05rem; }
.frase-cambio.grande { font-size: var(--t-titulo); margin-bottom: var(--e3); }
.advertencia-texto { color: var(--aviso); }
.vp-monto.chico { font-size: 1.1rem; margin-bottom: var(--e1); }

/* Últimos movimientos: las filas de un mismo grupo (cambio o compartido) unidas por una barra. */
.tabla-ultimos tr.enlazada > td:first-child { box-shadow: inset 4px 0 0 var(--acento); }
.tabla-ultimos tr.enlazada.de-cambio > td:first-child { box-shadow: inset 4px 0 0 var(--usd-borde); }
.tabla-ultimos tr.enlazada:not(.ultima) > td { border-bottom-style: dashed; }
.tabla-ultimos tr.enlazada.primera > td { border-top: 2px solid var(--borde-fuerte); }
.marca-grupo { margin-top: 2px; white-space: nowrap; }
.marca-grupo.cambio { background: var(--usd-fondo); color: var(--usd); }

@media (max-width: 900px) {
  .fila-monto .selector-moneda { flex: 1 1 100%; }
  .opcion-moneda { flex: 1; }
  .vp-monto { font-size: var(--t-titulo); }
  .vista-previa .datos { grid-template-columns: 1fr; gap: 0 var(--e3); }
  .vista-previa .datos dd { margin-bottom: var(--e2); }
}

/* ─────────────── Listado de movimientos (0.8.0) ─────────────── */

.solo-celular { display: none; }
.saldo-al { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin-top: var(--e3); }
.saldo-al label { margin: 0; }
.saldo-al input { width: auto; }
.saldo-al-numeros { font-weight: 600; font-variant-numeric: tabular-nums; }

.cabecera-listado { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); }
.cabecera-listado h2 { margin: 0; }
.filtros-listado { display: grid; gap: var(--e2); margin: var(--e3) 0; }
.fila-filtros { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.fila-filtros > * { flex: 1 1 11rem; min-width: 0; }
.fila-filtros input[type="date"] { flex: 0 1 10rem; }
.fila-filtros #filtro-periodo { flex: 0 1 14rem; }
.fila-filtros .buscador-lista { flex: 1 1 14rem; }

.chips { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin-bottom: var(--e2); }
.chip { display: inline-flex; align-items: center; gap: var(--e1); background: var(--acento-suave); color: var(--texto); border-radius: var(--radio-pildora); padding: 2px 4px 2px 10px; font-size: var(--t-suave); max-width: 100%; overflow-wrap: anywhere; }
.chip-sacar { border: 0; background: transparent; padding: 2px 6px; border-radius: var(--radio-pildora); font-size: var(--t-chica); line-height: 1; }
.chip-sacar:hover { background: var(--papel); }

.totales-filtrado { border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: var(--e2) var(--e3); margin: var(--e2) 0; display: grid; gap: var(--e1); }
.fila-total { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); align-items: baseline; font-variant-numeric: tabular-nums; }
.fila-total strong { min-width: 5rem; }

.barra-listado { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--e2); margin: var(--e3) 0 var(--e2); }
.acciones-listado { display: flex; gap: var(--e2); flex-wrap: wrap; }
.selector-vista { display: inline-flex; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); overflow: hidden; }
.opcion-vista { border: 0; border-radius: 0; }
.opcion-vista[aria-pressed="true"] { background: var(--acento); color: var(--acento-texto); }

/* La tabla se desplaza adentro de su caja para que el encabezado quede fijo, como en la hoja. */
.tabla-listado { max-height: 75vh; overflow: auto; border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.tabla-movimientos thead th { position: sticky; top: 0; z-index: 1; background: var(--papel); box-shadow: inset 0 -1px 0 var(--borde); }
.tabla-movimientos td { vertical-align: top; }
.tabla-movimientos .descripcion-codigo { color: var(--suave); }
.tabla-movimientos tr.enlazada > td:first-child { box-shadow: inset 4px 0 0 var(--acento); }
.tabla-movimientos tr.enlazada.de-cambio > td:first-child { box-shadow: inset 4px 0 0 var(--usd-borde); }
.tabla-movimientos tr.enlazada:not(.ultima) > td { border-bottom-style: dashed; }
.tabla-movimientos tr.enlazada.primera > td { border-top: 2px solid var(--borde-fuerte); }
/* Lugar para el punto 8: un movimiento anulado se ve tachado (hoy no hay ninguno). */
/* El tachado no se puede sacar en un hijo: se tachan los datos y no la marca que explica la anulación. */
tr.anulado td:not(.detalle):not(.accion), tr.anulado .texto-detalle, .tarjeta-mov.anulado .tm-monto, .tarjeta-mov.anulado .texto-detalle { text-decoration: line-through; color: var(--tenue); }
tr.anulado .monto.egreso, .tarjeta-mov.anulado .monto.egreso { color: var(--tenue); }
.extras-fila:empty { display: none; }
.extras-fila { margin-left: var(--e2); font-size: var(--t-chica); color: var(--suave); }
.punto-color { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: var(--e1); vertical-align: middle; border: 1px solid var(--borde-fuerte); }
#cargar-mas { margin-top: var(--e3); }
.vacio-listado { padding: var(--e4) 0; }

/* Celular: tarjetas en vez de tabla y los filtros detrás de un botón. */
.tarjetas-movimientos { display: grid; gap: var(--e2); }
.tarjeta-mov { border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: var(--e2) var(--e3); background: var(--papel); overflow-wrap: anywhere; }
.tm-arriba { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); }
.tm-monto { font-size: 1.15rem; font-weight: 700; }
.tm-fecha { color: var(--suave); font-size: var(--t-suave); white-space: nowrap; }
.tm-codigo, .tm-detalle { margin-top: 2px; }
.tm-pie { margin-top: var(--e1); }
.grupo-tarjetas { border-left: 4px solid var(--acento); padding-left: var(--e2); display: grid; gap: var(--e1); }
.grupo-tarjetas.de-cambio { border-left-color: var(--usd-borde); }

@media (max-width: 900px) {
  .solo-celular { display: inline-flex; }
  .solo-compu { display: none; }
  .filtros-listado { display: none; }
  .filtros-listado.abierto { display: grid; }
  .fila-filtros > *, .fila-filtros input[type="date"] { flex: 1 1 100%; }
}
/* La planilla tiene 12 columnas: un poco más compacta para que entre en una pantalla de compu común. */
.vista-planilla { font-size: var(--t-suave); }
.vista-planilla th, .vista-planilla td { padding: .45rem .45rem; }
.vista-planilla td.detalle { min-width: 9rem; }
.tabla-movimientos td.usuario { font-size: var(--t-suave); min-width: 6rem; }

/* Egresos en rojo y saldos negativos en rojo; los ingresos, del color del texto (0.8.1). El signo
   «−» va siempre: el color no es lo único que avisa. */
.monto.egreso, .monto.negativo, .numero.negativo { color: var(--egreso); }
.tabla-movimientos td.detalle { overflow-wrap: anywhere; }
.vista-lista td.detalle { min-width: 11rem; }
.tabla-movimientos td.descripcion { color: var(--suave); min-width: 8rem; }
/* El listado usa todo el ancho: con 10 o 12 columnas, el tope de 72rem dejaba afuera la fecha de
   carga y el usuario aunque en la pantalla había lugar. */
.contenido:has(.tarjeta-listado) { max-width: none; }

/* ─────────────── Anulaciones, solicitudes y avisos (0.9.0) ─────────────── */

textarea { font: inherit; width: 100%; padding: .5rem .7rem; border-radius: var(--radio-chico); border: 1px solid var(--borde-fuerte); background: var(--papel); color: var(--texto); resize: vertical; }
.boton.chico, button.chico { padding: .25rem .6rem; font-size: var(--t-suave); }
.tabla-movimientos td.accion { white-space: nowrap; text-align: right; }
.extras-fila { display: block; margin: 2px 0 0; }
.marca-anulado { color: var(--egreso); font-size: var(--t-chica); display: block; text-decoration: none; }
.marca-contra { color: var(--suave); font-size: var(--t-chica); }
.volver-a-cargar { font-size: var(--t-chica); }
tr.contramovimiento > td { background-image: linear-gradient(var(--fila-hover), var(--fila-hover)); }
.tarjeta-mov.contramovimiento { border-style: dashed; }

/* La campana: un globo con los avisos sin leer y la lista al abrirla. */
.boton-icono { position: relative; }
.globo-avisos { position: absolute; top: 2px; right: 2px; min-width: 1.1rem; height: 1.1rem; padding: 0 4px; border-radius: var(--radio-pildora); background: var(--egreso); color: var(--papel); font-size: .7rem; font-weight: 700; line-height: 1.1rem; text-align: center; }
.globo-avisos[hidden] { display: none; }
.lista-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); max-height: 60vh; overflow-y: auto; }
.lista-avisos li { padding: var(--e2); border-radius: var(--radio-chico); font-size: var(--t-suave); overflow-wrap: anywhere; }
.lista-avisos li.sin-leer { background: var(--acento-suave); }
.lista-avisos small { display: block; color: var(--suave); margin-top: 2px; }

/* Anular y la bandeja de solicitudes. */
.form-anular h2 { margin-top: var(--e4); }
.tabla-partes td { vertical-align: top; }
.pedido { margin-bottom: var(--e3); }
.pedido-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-bottom: var(--e2); }
.pedido-que { font-weight: 600; }
.pedido .pedido-nota { margin-top: var(--e2); }
.pedido .pedido-fecha { width: auto; }
#para-resolver, #mis-pedidos { margin-bottom: var(--e5); }
.etiqueta.habilitada { margin-left: var(--e2); }
.pedir-fecha { margin: var(--e2) 0; padding: var(--e3); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-chico); }
.pedir-fecha[hidden] { display: none; }
/* En el celular, lo que se anula (o se pidió anular) va en filas que se acomodan: en tabla, el monto
   quedaba afuera de la pantalla. */
@media (max-width: 900px) {
  .tabla-partes thead { display: none; }
  .tabla-partes tr { display: flex; flex-wrap: wrap; gap: 0 var(--e3); padding: var(--e2) 0; border-bottom: 1px solid var(--borde); }
  .tabla-partes td { border: 0; padding: 2px 0; }
  .tabla-partes td.monto { margin-left: auto; font-weight: 600; text-align: right; }
}

/* 0.9.1: «Vuelto a cargar» y la fila nueva resaltada al ir a verla; la casilla de las contras. */
.vuelto-a-cargar, .volver-a-cargar { font-size: var(--t-chica); margin-left: var(--e1); }
tr.resaltada > td, .tarjeta-mov.resaltada { background: var(--aviso-fondo) !important; transition: background .3s; }
.casilla-filtro { margin: 0; }
.nota-totales { margin: var(--e1) 0 0; }

/* ─────────────── Columna «Código» al ancho justo (0.10.0) y la marca del grupo en su renglón (0.10.1) ─────────────── */
/* El código no se parte y la columna toma su ancho justo. La marca del grupo («⇄ Cambio…», «↩ Anulación…»)
   va en un renglón propio pegado debajo de la primera fila (filaMarca en listados.js), de Código a Cuenta.
   En la 0.10.0 iba encima, con posición absoluta, y tapaba el código y la descripción de su fila.
   «max-width: 0» en la celda hace que no cuente para el ancho de las columnas: si no entra, «…». */
.tabla-movimientos td.codigo { white-space: nowrap; width: 1%; }
.tabla-movimientos td.descripcion { min-width: 10rem; }
.tabla-movimientos tr.con-marca > td, .tabla-movimientos tr.enlazada.con-marca:not(.ultima) > td { border-bottom: 0; padding-bottom: .2rem; }
.tabla-movimientos tr.fila-marca > td { border-top: 0; padding-top: 0; padding-bottom: .45rem; }
.tabla-movimientos td.celda-marca { max-width: 0; overflow: hidden; }
.tabla-movimientos td.celda-marca .marca-grupo { display: inline-block; max-width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
/* El renglón de la marca tiene el fondo de su fila (las rayas alternas cuentan por posición). */
tbody tr.fila-marca > td { background: var(--papel); }
tbody tr:nth-child(even):has(+ tr.fila-marca) + tr.fila-marca > td { background: var(--fila-alterna); }
tbody tr:hover:has(+ tr.fila-marca) + tr.fila-marca > td, tbody tr:has(+ tr.fila-marca:hover) > td, tbody tr.fila-marca:hover > td { background: var(--fila-hover); }
tr.resaltada + tr.fila-marca > td { background: var(--aviso-fondo) !important; }
.tarjeta-mov .marca-grupo, .grupo-tarjetas > .marca-grupo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; }

/* ─────────────── 0.10.0 · Informes de costos ─────────────── */
.filtros-costos .fila-filtros > * { flex: 1 1 12rem; }
.filtros-costos .selector-vista { flex: 0 0 auto; }
.aviso-sin-reparto { margin-bottom: var(--e3); }
.tabla-costos-caja { max-height: 75vh; overflow: auto; border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.tabla-costos { font-size: var(--t-suave); }
.tabla-costos thead th { position: sticky; top: 0; z-index: 2; background: var(--papel); box-shadow: inset 0 -1px 0 var(--borde); }
.tabla-costos th[scope="row"], .tabla-costos thead th:first-child { position: sticky; left: 0; z-index: 1; background: inherit; text-align: left; min-width: 12rem; max-width: 22rem; }
.tabla-costos thead th:first-child { z-index: 3; background: var(--papel); }
.tabla-costos tbody th[scope="row"] { background: var(--papel); font-weight: 400; }
.tabla-costos tbody tr:nth-child(even) th[scope="row"] { background: var(--fila-alterna); }
.tabla-costos .codigo-costo .descripcion-codigo { color: var(--suave); }
.tabla-costos td.monto { white-space: nowrap; }
.tabla-costos .fila-seccion th { background: var(--acento-suave) !important; color: var(--texto); font-size: var(--t-base); text-transform: uppercase; letter-spacing: .04em; position: static; }
.tabla-costos .fila-seccion.aparte th { background: var(--fila-alterna) !important; text-transform: none; }
.tabla-costos .fila-categoria th { font-weight: 700; padding-top: var(--e3); position: static; background: var(--papel) !important; }
.tabla-costos .fila-categoria.sin-codigo th { color: var(--aviso); }
.tabla-costos .fila-subtotal > *, .tabla-costos .fila-total-seccion > * { font-weight: 700; }
.tabla-costos .fila-total-seccion > * { border-top: 2px solid var(--borde-fuerte); }
.tabla-costos .fila-resultado > *, #tabla-saldos-cajas .fila-resultado > * { font-weight: 700; border-top: 3px double var(--borde-fuerte); font-size: var(--t-base); }
.enlace-celda { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--borde-fuerte); }
.enlace-celda:hover { color: var(--acento); border-bottom-color: var(--acento); }
.total-detalle { font-weight: 700; font-size: 1.1rem; }
.vigencias-mes { min-width: 18rem; font-size: var(--t-chica); }
.vigencia-aplicada + .vigencia-aplicada { margin-top: 2px; padding-top: 2px; border-top: 1px dashed var(--borde); }
.etiqueta.motivo { margin: 1px 2px; }
#tabla-saldos-cajas .etiqueta { margin-left: var(--e2); }
/* Los informes de costos, como el listado, usan todo el ancho: con 12 meses y el total, el tope de
   72rem cortaba la última columna. */
.contenido:has(.tabla-costos) { max-width: none; }

/* ─────────────── 0.10.1 · Vista Planilla, «no suma» y orden de los códigos ─────────────── */
/* Lo que no suma se ve (como en el Excel), pero apagado: que no se confunda con lo que entra en el total. */
.tabla-costos tr.no-suma > *, .tabla-costos tr.oculto > * { color: var(--tenue); font-style: italic; }
.etiqueta.no-suma { margin-left: var(--e2); font-style: normal; }
.tabla-planilla .fila-seccion-planilla > * { border-top: 1px solid var(--borde-fuerte); }
.tabla-planilla .fila-resumen.resultado > * { font-weight: 700; border-top: 3px double var(--borde-fuerte); }
.tabla-planilla .fila-resumen.total > * { font-weight: 700; }
.tabla-planilla .fila-separador td { padding: var(--e2) 0; background: var(--papel) !important; border: 0; }
.tabla-planilla td.pct { min-width: 4.5rem; }
#selector-modo .ayuda { align-self: center; margin-right: var(--e1); }
.orden-botones { white-space: nowrap; }
.orden-botones .boton { padding: 0 .45rem; min-width: 2rem; }
/* «hidden» no alcanza contra el display: flex de .fila-filtros: sin esto, en la Planilla se veían los
   filtros de «Por categorías». */
.filtros-costos [hidden] { display: none !important; }
/* 12 meses, Total y %: más apretada que el informe, para que en una compu entre entera. */
.tabla-planilla th, .tabla-planilla td { padding-left: .4rem; padding-right: .4rem; font-size: var(--t-suave); }
.tabla-planilla th[scope="row"] { max-width: 16rem; }
.tabla-planilla .descripcion-codigo { white-space: normal; }

/* ─────────────── Planilla: colores del Excel (0.10.4) ───────────────
   Tomados de las hojas Ingresos, Egresos y Resumen de 2026 COSTOS.xlsx: franja #334960, título
   #F46524, Totales con fondo #FF3800 y letra blanca, «Total al mes» de cada sección con fondo #6C7687
   y letra blanca, códigos en #334960 y números en #576475; en el Resumen, Ingresos/Gastos/IVA en
   #334960, Saldo y participaciones en #222222, números en #6C7687. En oscuro, la misma escala más
   apagada: Totales sigue siendo lo más fuerte y la sección lo que le sigue. */
:root {
  --pl-banda: #334960;
  --pl-titulo: #f46524;
  --pl-totales-fondo: #ff3800;
  --pl-totales-texto: #ffffff;
  --pl-seccion-fondo: #6c7687;
  --pl-seccion-texto: #ffffff;
  --pl-codigo: #334960;
  --pl-numero: #576475;
  --pl-resumen-total: #334960;
  --pl-resumen-saldo: #222222;
  --pl-resumen-numero: #6c7687;
}
@media (prefers-color-scheme: dark) {
  :root {
    --pl-banda: #7d93b0;
    --pl-titulo: #ff8f5c;
    --pl-totales-fondo: #b5340e;
    --pl-totales-texto: #ffffff;
    --pl-seccion-fondo: #48536a;
    --pl-seccion-texto: #f1f3f6;
    --pl-codigo: #c3d0e2;
    --pl-numero: #a7b2c3;
    --pl-resumen-total: #c3d0e2;
    --pl-resumen-saldo: #eef1f5;
    --pl-resumen-numero: #a7b2c3;
  }
}
.tarjeta:has(> .tabla-costos-caja .tabla-planilla) > .titulo-con-acciones h2 { color: var(--pl-titulo); margin: 0; }
.tabla-planilla thead th { color: var(--pl-codigo); font-weight: 700; box-shadow: inset 0 4px 0 var(--pl-banda), inset 0 -1px 0 var(--borde); padding-top: calc(var(--e2) + 4px); }
.tabla-planilla tbody th.codigo-costo strong { color: var(--pl-codigo); }
.tabla-planilla tbody tr:not(.fila-seccion-planilla):not(.fila-resultado) td.monto { color: var(--pl-numero); }
.tabla-planilla tr[data-clave="totales"] > * { background: var(--pl-totales-fondo) !important; color: var(--pl-totales-texto) !important; border-top: 0; }
.tabla-planilla .fila-seccion-planilla > * { background: var(--pl-seccion-fondo) !important; color: var(--pl-seccion-texto) !important; }
/* Lo de ADENTRO de las celdas hereda el blanco (0.10.5). Con «tr … .monto» la regla agarraba también
   al td.monto, que heredaba el color oscuro de la fila: en claro, los números salían casi negros
   sobre el fondo gris azulado o rojo. */
.tabla-planilla tr[data-clave="totales"] > * a, .tabla-planilla tr[data-clave="totales"] > * .monto,
.tabla-planilla .fila-seccion-planilla > * a, .tabla-planilla .fila-seccion-planilla > * .monto,
.tabla-planilla .fila-seccion-planilla > * .ayuda { color: inherit !important; }
/* «Totales» en negrita también en el nombre: «.tabla-costos tbody th[scope=row]» le ponía 400. */
.tabla-planilla tbody tr[data-clave="totales"] > th[scope="row"] { font-weight: 700; }
.tabla-planilla .fila-resumen.total th, .tabla-planilla .fila-resumen.iva th { color: var(--pl-resumen-total); font-weight: 700; }
.tabla-planilla .fila-resumen.resultado th, .tabla-planilla .fila-resumen.participacion th { color: var(--pl-resumen-saldo); font-weight: 700; }
.tabla-planilla .fila-resumen td.monto { color: var(--pl-resumen-numero); }

/* «Ordenar» sobre la Planilla y el bloque de lo que queda fuera (0.10.4) */
.barra-orden { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }
.barra-orden .acciones { margin-top: 0; }
.barra-orden .ayuda { margin: 0; max-width: 40rem; }
.flechas-orden { display: inline-flex; gap: 2px; margin-right: var(--e2); vertical-align: middle; }
.flechas-orden .boton { padding: 0 .45rem; min-height: 1.6rem; line-height: 1; }
.tarjeta.ordenando .tabla-costos-caja { outline: 2px dashed var(--acento); outline-offset: 2px; }
.tabla-fuera-planilla { font-size: var(--t-suave); }
.tabla-fuera-planilla th[scope="row"] { text-align: left; font-weight: 400; }
.encabezado-impresion { display: none; }

/* ─────────────── Imprimir (0.10.4) ───────────────
   Lo que se ve, sin menú, botones ni filtros; en horizontal; siempre con los colores claros (el
   papel es blanco) y forzando los fondos: sin print-color-adjust, Chrome no imprime los rellenos y
   los Totales salían blanco sobre blanco. La tabla sin scroll y con letra chica para que entren los
   12 meses; el encabezado de la tabla se repite en cada hoja (thead como table-header-group). */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  :root {
    --fondo: #ffffff; --papel: #ffffff; --texto: #1b2130; --suave: #5f6878; --tenue: #8a92a1;
    --borde: #d5d9e0; --borde-fuerte: #b9c0cb; --fila-alterna: #ffffff; --acento-suave: #e9edfc;
    --pl-banda: #334960; --pl-titulo: #f46524; --pl-totales-fondo: #ff3800; --pl-totales-texto: #ffffff;
    --pl-seccion-fondo: #6c7687; --pl-seccion-texto: #ffffff; --pl-codigo: #334960; --pl-numero: #576475;
    --pl-resumen-total: #334960; --pl-resumen-saldo: #222222; --pl-resumen-numero: #6c7687;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body, .marco, .principal, .contenido { background: #fff !important; color: var(--texto); }
  .lateral, .superior, .velo, .franja-pruebas, .filtros-costos, .barra-orden, button, .boton, .titulo-con-acciones > .acciones,
  .aviso-sin-reparto, .ver-movimientos, .tabla-fuera-planilla th:last-child { display: none !important; }
  .marco, .principal { display: block !important; margin: 0 !important; padding: 0 !important; grid-template-columns: none !important; }
  .contenido { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .tarjeta { border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 4mm !important; break-inside: auto; }
  .encabezado-impresion { display: flex !important; gap: 6mm; align-items: baseline; flex-wrap: wrap; border-bottom: 2px solid var(--pl-banda); padding-bottom: 2mm; margin-bottom: 3mm; font-size: 10pt; }
  .encabezado-impresion strong { font-size: 13pt; color: var(--pl-codigo); }
  .encabezado-impresion .emitido { margin-left: auto; color: var(--suave); }
  h1 { display: none; }
  h2 { font-size: 12pt; margin: 0 0 2mm; }
  .tabla-scroll, .tabla-costos-caja { overflow: visible !important; max-height: none !important; border: 0 !important; }
  .tabla-costos, .tabla-fuera-planilla { width: 100%; font-size: 7.5pt !important; }
  .tabla-costos th, .tabla-costos td { padding: 1px 3px !important; font-size: 7.5pt !important; }
  .tabla-costos th[scope="row"], .tabla-costos thead th { position: static !important; min-width: 0 !important; max-width: 60mm !important; }
  .tabla-costos thead { display: table-header-group; }
  .tabla-costos tr { break-inside: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
  .ayuda { font-size: 8pt; }
}