/* ==========================================================================
   EL RUSO COMERCIALIZADORA — hoja de estilos única
   Oscuro por defecto (es una app de escritorio que se mira todo el día),
   claro disponible con data-tema="claro" en <html>.

   Sin framework y sin compilación: todo son variables CSS y utilidades
   escritas a mano. Es deliberado — la app tiene que seguir funcionando el día
   que el servidor no tenga salida a internet.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Superficies, de la más honda a la más alta */
  --fondo:        #0a0d14;
  --superficie:   #111722;
  --superficie-2: #171e2b;
  --superficie-3: #1e2637;
  --borde:        #263043;
  --borde-suave:  #1c2434;

  /* Texto */
  --texto:        #e8edf7;
  --texto-medio:  #9aa7bd;
  --texto-tenue:  #6b7891;

  /* Acento: es una comercializadora de oro. El ámbar no es decoración. */
  --acento:       #f0b429;
  --acento-alto:  #ffc94d;
  --acento-tenue: rgba(240, 180, 41, .14);
  --sobre-acento: #1a1204;

  /* Semánticos */
  --azul:   #4f8cf7;
  --azul-tenue: rgba(79, 140, 247, .14);
  --verde:  #23c48a;
  --verde-tenue: rgba(35, 196, 138, .14);
  --rojo:   #f4556c;
  --rojo-tenue: rgba(244, 85, 108, .14);
  --naranja:#f78c3f;
  --naranja-tenue: rgba(247, 140, 63, .14);
  --morado: #a78bfa;
  --morado-tenue: rgba(167, 139, 250, .14);

  --radio:    12px;
  --radio-sm: 8px;
  --radio-lg: 18px;
  --sombra:   0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --sombra-alta: 0 24px 60px -20px rgba(0,0,0,.75);

  --fuente: "Fira Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:   "Fira Code", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --lateral: 236px;
  --barra:   58px;

  /* Escala de z-index. Definida una vez para no ir subiendo a ojo. */
  --z-tabla-cabecera: 10;
  --z-lateral: 20;
  --z-barra: 30;
  --z-menu: 40;
  --z-modal: 50;
  --z-aviso: 60;
  --z-logro: 70;

  /* El navegador pinta con esto las barras de desplazamiento, los desplegables
     de <select> y los controles nativos. Sin declararlo, el tema claro hereda
     las barras NEGRAS del esquema oscuro y la pantalla se ve rota por dentro
     aunque el CSS propio esté bien. */
  color-scheme: dark;
  --scroll-pulgar:      #2a3446;
  --scroll-pulgar-alto: #3b4863;
}

:root[data-tema="claro"] {
  --fondo:        #f4f6fa;
  --superficie:   #ffffff;
  --superficie-2: #f7f9fc;
  --superficie-3: #eef2f8;
  --borde:        #d7dfeb;
  --borde-suave:  #e6ecf4;
  --texto:        #0f172a;
  --texto-medio:  #475569;
  --texto-tenue:  #64748b;
  --acento:       #b57d05;
  --acento-alto:  #8f6304;
  --acento-tenue: rgba(181, 125, 5, .12);
  --sobre-acento: #fffdf7;
  --azul:   #2563eb;
  --verde:  #058c5f;
  --rojo:   #d92e46;
  --naranja:#c2610d;
  --morado: #7c3aed;
  --sombra: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px -14px rgba(15,23,42,.2);
  --sombra-alta: 0 24px 60px -24px rgba(15,23,42,.28);
  color-scheme: light;
  --scroll-pulgar:      #c2ccdb;
  --scroll-pulgar-alto: #a3b0c4;
}

/* --- 2. Base ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Barras de desplazamiento. `color-scheme` de arriba ya arregla las nativas;
   esto además las viste con los colores del tema. Van con los dos motores
   porque Firefox sólo entiende el primero y Chrome sólo el segundo. */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-pulgar) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-pulgar); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-pulgar-alto); background-clip: content-box; }

/* Todo número se alinea por columnas. Sin esto, una tabla de pesos es ilegible. */
.num, td.num, th.num, input[type="number"], .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .8em; }
a  { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--acento-tenue); }

/* --- 3. Estructura ------------------------------------------------------ */

.app { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh; }

.lateral {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  background: var(--superficie);
  border-right: 1px solid var(--borde-suave);
  display: flex; flex-direction: column;
  z-index: var(--z-lateral);
}

.marca {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid var(--borde-suave);
}
.marca-icono {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--acento), #d98c0a);
  display: grid; place-items: center; color: var(--sobre-acento);
  font-weight: 700; font-family: var(--mono); font-size: 14px;
}
/* El logo es dorado con degradado y fondo transparente. Sobre el blanco del
   tema claro se desvanece, así que va siempre sobre una placa oscura: una
   sola regla para los dos temas en vez de dos tratamientos que se desincronizan. */
.marca-logo {
  width: 34px; height: 34px; flex: none;
  border-radius: 10px; padding: 3px;
  background: linear-gradient(150deg, #1c2434, #0c111c);
  border: 1px solid rgba(240, 180, 41, .3);
  display: grid; place-items: center;
}
.marca-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.marca-texto { min-width: 0; }
.marca-texto strong { display: block; font-size: .9rem; letter-spacing: -.01em; }
.marca-texto span { display: block; font-size: .7rem; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .09em; }

.menu { padding: 10px 10px 20px; flex: 1; }
.menu-grupo { margin-top: 16px; }
.menu-titulo {
  padding: 6px 10px; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--texto-tenue); font-weight: 600;
}
.menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; margin-bottom: 2px;
  border-radius: var(--radio-sm);
  color: var(--texto-medio); font-size: .875rem; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.menu a:hover { background: var(--superficie-3); color: var(--texto); text-decoration: none; }
.menu a.activo { background: var(--acento-tenue); color: var(--acento-alto); }
.menu a.activo svg { color: var(--acento); }
.menu svg { width: 17px; height: 17px; flex: none; color: var(--texto-tenue); }
.menu .cuenta {
  margin-left: auto; font-family: var(--mono); font-size: .7rem;
  background: var(--rojo); color: #fff; border-radius: 99px; padding: 1px 6px; font-weight: 600;
}

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

.barra-sup {
  position: sticky; top: 0; z-index: var(--z-barra);
  height: var(--barra);
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px;
  background: color-mix(in srgb, var(--fondo) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde-suave);
}
.barra-sup h1 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.barra-sup .crumb { color: var(--texto-tenue); font-size: .8rem; }
.barra-derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.contenido { padding: 22px; max-width: 1760px; width: 100%; }

/* --- 4. Tarjetas y rejillas -------------------------------------------- */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  /* Cada tarjeta es su propio contexto de apilamiento. La cabecera pegajosa de
   * una tabla lleva z-index 10; sin este cerrojo ese 10 compite con TODA la
   * página y puede pintarse encima de una tarjeta vecina que va después en el
   * HTML. `isolation` lo consigue sin tocar la posición ni el layout. Los
   * <dialog> abiertos con showModal viven en la capa superior del navegador y
   * escapan de esto, que es justo lo que se quiere. */
  isolation: isolate;
}
.tarjeta-cab {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--borde-suave);
}
.tarjeta-cab h2, .tarjeta-cab h3 { margin: 0; }
.tarjeta-cab .derecha { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tarjeta-cuerpo { padding: 18px; }
.tarjeta-pie { padding: 12px 18px; border-top: 1px solid var(--borde-suave); background: var(--superficie-2); border-radius: 0 0 var(--radio) var(--radio); }

.rejilla { display: grid; gap: 16px; }

/* NINGÚN hijo de una rejilla puede empujar su propia columna.
 *
 * Sin esto, un ítem de grid tiene `min-width: auto`, que vale su MIN-CONTENT.
 * El min-content de una tarjeta con tabla ancha es el ancho de la tabla —que
 * `.tabla-envoltura` tenga overflow-x no lo evita: esa regla libra al elemento
 * que scrollea, no a la tarjeta que lo contiene, que no scrollea nada—. En la
 * pantalla de una operación eso medía 887px dentro de una columna de 855, y la
 * tarjeta de barras se salía 31px y se le montaba encima al recuadro del
 * cliente. Se veía como un problema de z-index y era de ancho: el ítem no
 * cabía y el navegador, obediente, lo dejaba desbordar.
 *
 * Con min-width:0 el ítem sí puede encoger y la tabla scrollea por dentro, que
 * es lo que `.tabla-envoltura` existe para hacer. */
.rejilla > *, .pila > * { min-width: 0; }

.rejilla.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla.g3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.rejilla.g4 { grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 11px; }
.rejilla.g4 .kpi-et svg { width: 13px; height: 13px; }
.rejilla.ancho-2 > .span2 { grid-column: span 2; }

/* PÁGINAS DE DOS COLUMNAS: la principal con tablas y la lateral con recuadros.
 *
 * Antes cada vista escribía su `grid-template-columns` en línea, y un estilo en
 * línea no lo alcanza ninguna media query: las dos columnas se quedaban puestas
 * a cualquier ancho. Medido el 16/9/2026 con los datos sembrados, a 1366 px la
 * tabla de barras de una venta se salía 213 px de su columna y el botón de la
 * última columna quedaba escondido detrás de una barra de desplazamiento.
 *
 * Ahora la proporción viaja como variable (`style="--columnas: 2fr 1fr"`) y por
 * debajo de 1366 px la página se apila: la lateral pasa debajo y la principal
 * tiene el ancho entero. */
.rejilla.columnas {
  grid-template-columns: var(--columnas, minmax(0, 1.6fr) minmax(0, 1fr));
  align-items: start;
}
.rejilla.columnas.estirar { align-items: stretch; }
@media (max-width: 1365px) {
  .rejilla.columnas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1279px) {
  /* Entre 1101 y 1279 px el menú lateral sigue fijo y el contenido se queda
     en ~800-1000 px. Un punto menos de letra y de relleno es lo que separa una
     tabla que cabe de una que obliga a desplazarse para ver su última columna. */
  table.tabla { font-size: .8rem; }
  table.tabla thead th { padding: 8px 7px; }
  table.tabla tbody td, table.tabla tfoot td { padding: 7px 7px; }
}

/* Bento: la fila de indicadores del panel */
.kpi {
  position: relative; overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 10px 13px;
}
.kpi::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--acento); opacity: .85;
}
.kpi.azul::after   { background: var(--azul); }
.kpi.verde::after  { background: var(--verde); }
.kpi.rojo::after   { background: var(--rojo); }
.kpi.naranja::after{ background: var(--naranja); }
.kpi.morado::after { background: var(--morado); }
.kpi-et {
  font-size: .655rem; text-transform: uppercase; letter-spacing: .085em;
  color: var(--texto-tenue); font-weight: 600; display: flex; align-items: center; gap: 5px;
}
.kpi-valor {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.12rem; font-weight: 600; margin: 1px 0 0; letter-spacing: -.02em;
}
.kpi-nota { font-size: .715rem; color: var(--texto-medio); line-height: 1.4; }
.kpi-nota .pos { color: var(--verde); }
.kpi-nota .neg { color: var(--rojo); }

/* --- 5. Tablas densas --------------------------------------------------- */

.tabla-envoltura { overflow-x: auto; border-radius: var(--radio); }
table.tabla { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.tabla thead th {
  position: sticky; top: 0; z-index: var(--z-tabla-cabecera);
  background: var(--superficie-2);
  text-align: left; font-weight: 600; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .07em; color: var(--texto-tenue);
  /* Las cabeceras SÍ pueden partirse en dos líneas. Con nowrap, «Costo
     entrada» o «Dif. finos · valor» fijaban el ancho de su columna aunque la
     cifra de debajo ocupara la mitad, y eso solo empujaba las tablas fuera. */
  padding: 10px 10px; white-space: normal; vertical-align: bottom;
  border-bottom: 1px solid var(--borde);
}
table.tabla tbody td { padding: 8px 10px; border-bottom: 1px solid var(--borde-suave); vertical-align: middle; }
table.tabla tbody tr { transition: background .14s ease; }
table.tabla tbody tr:hover { background: var(--superficie-2); }
table.tabla tbody tr.clicable { cursor: pointer; }
table.tabla tbody tr:last-child td { border-bottom: 0; }
table.tabla th.num, table.tabla td.num { text-align: right; }
table.tabla tfoot td {
  padding: 11px 10px; font-weight: 600; background: var(--superficie-2);
  border-top: 2px solid var(--borde);
}
table.tabla .principal-col { font-weight: 600; color: var(--texto); }
table.tabla.compacta tbody td { padding: 6px 10px; }

.codigo-barra {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-weight: 600; font-size: .82rem;
  background: var(--acento-tenue); color: var(--acento-alto);
  border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent);
  padding: 1px 8px; border-radius: 6px; letter-spacing: .03em;
}

.pos { color: var(--verde); }
.neg { color: var(--rojo); }
.cero { color: var(--texto-tenue); }
.tenue { color: var(--texto-tenue); }
.medio { color: var(--texto-medio); }

/* --- 6. Insignias ------------------------------------------------------- */

.insignia {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 99px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; line-height: 1.6;
}
.insignia::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.insignia.sin-punto::before { display: none; }
.insignia.gris    { background: var(--superficie-3); color: var(--texto-medio); border-color: var(--borde); }
.insignia.verde   { background: var(--verde-tenue);  color: var(--verde); }
.insignia.rojo    { background: var(--rojo-tenue);   color: var(--rojo); }
.insignia.ambar   { background: var(--acento-tenue); color: var(--acento-alto); }
.insignia.azul    { background: var(--azul-tenue);   color: var(--azul); }
.insignia.naranja { background: var(--naranja-tenue);color: var(--naranja); }

/* --- 7. Botones --------------------------------------------------------- */

.btn {
  /* flex-direction explícito: `.principal` es TAMBIÉN la columna del layout
     (flex en columna), y un `.btn.principal` con icono heredaba la columna y
     salía con el icono encima del texto. Visto el 18/9/2026. */
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
  background: var(--superficie-2); color: var(--texto);
  font-family: inherit; font-size: .85rem; font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
  min-height: 38px;
}
.btn:hover { background: var(--superficie-3); border-color: var(--texto-tenue); text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }
.btn.principal { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 600; }
.btn.principal:hover { background: var(--acento-alto); border-color: var(--acento-alto); }
.btn.peligro { background: transparent; border-color: color-mix(in srgb, var(--rojo) 40%, transparent); color: var(--rojo); }
.btn.peligro:hover { background: var(--rojo-tenue); border-color: var(--rojo); }
.btn.exito { background: var(--verde); border-color: var(--verde); color: #04140d; font-weight: 600; }
.btn.plano { background: transparent; border-color: transparent; }
.btn.plano:hover { background: var(--superficie-3); }
.btn.sm { padding: 5px 10px; font-size: .78rem; min-height: 30px; }
.btn.bloque { width: 100%; }
.btn.icono { padding: 8px; min-width: 38px; }

.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --- 8. Formularios ----------------------------------------------------- */

.campo { margin-bottom: 14px; }
.campo label, .etiqueta {
  display: block; margin-bottom: 5px;
  font-size: .78rem; font-weight: 600; color: var(--texto-medio);
}
.campo .ayuda { margin-top: 4px; font-size: .74rem; color: var(--texto-tenue); }
.campo .error { margin-top: 4px; font-size: .75rem; color: var(--rojo); }

input[type="text"], input[type="number"], input[type="date"], input[type="email"],
input[type="password"], input[type="search"], input[type="tel"], select, textarea {
  width: 100%;
  padding: 9px 11px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  color: var(--texto);
  font-family: inherit; font-size: .9rem;
  min-height: 40px;
  transition: border-color .16s ease, background .16s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--texto-tenue); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acento);
  background: var(--superficie);
  box-shadow: 0 0 0 3px var(--acento-tenue);
}
input::placeholder, textarea::placeholder { color: var(--texto-tenue); }
input[type="date"] { color-scheme: dark; }
:root[data-tema="claro"] input[type="date"] { color-scheme: light; }
textarea { min-height: 76px; resize: vertical; line-height: 1.5; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7891' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
  padding-right: 32px;
}
.casilla { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 5px 0; }
.casilla input[type="checkbox"], .casilla input[type="radio"] {
  width: 17px; height: 17px; min-height: 0; accent-color: var(--acento); cursor: pointer; flex: none;
}
.casilla span { font-size: .87rem; }

.fila-campos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fila-campos.dos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

fieldset { border: 1px solid var(--borde-suave); border-radius: var(--radio); padding: 14px 16px; margin: 0 0 16px; }
legend { padding: 0 8px; font-size: .78rem; font-weight: 600; color: var(--texto-medio); text-transform: uppercase; letter-spacing: .07em; }

/* Barra de filtros: siempre la misma forma en todas las pantallas */
.filtros {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: var(--radio);
}
.filtros .campo { margin: 0; min-width: 130px; }
.filtros .crece { flex: 1; min-width: 200px; }

/* Periodos de un clic. Van ARRIBA de la barra de filtros, no dentro: son el
   90% de las veces lo único que se toca, y meterlos entre los desplegables los
   escondería justo por ser lo más usado. */
.periodos {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.periodo {
  display: inline-block; padding: 5px 11px; border-radius: 99px;
  font-size: .78rem; font-weight: 500; text-decoration: none;
  color: var(--texto-medio);
  background: var(--superficie); border: 1px solid var(--borde-suave);
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.periodo:hover { color: var(--texto); border-color: var(--borde); background: var(--superficie-2); }
/* El retrato de la auditoría: plegado por defecto. Es lo que salva una
   discusión, pero abierto en cada fila haría la tabla ilegible. */
.retrato { margin-top: 4px; }
.retrato summary {
  cursor: pointer; font-size: .72rem; color: var(--texto-tenue);
  list-style: none; display: inline-flex; align-items: center; gap: 4px;
}
.retrato summary::before { content: "▸"; font-size: .8em; }
.retrato[open] summary::before { content: "▾"; }
.retrato summary::-webkit-details-marker { display: none; }
.retrato summary:hover { color: var(--acento); }
.retrato pre {
  margin: 6px 0 0; padding: 10px 12px; max-height: 260px; overflow: auto;
  background: var(--superficie-3); border: 1px solid var(--borde-suave);
  border-radius: var(--radio-sm); font-size: .7rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}

.paginacion { display: flex; align-items: center; justify-content: center; gap: 14px; }

.periodo.activo {
  color: var(--sobre-acento); background: var(--acento);
  border-color: var(--acento); font-weight: 600;
}

/* --- 9. Avisos y estados vacíos ---------------------------------------- */

.avisos { position: fixed; top: 14px; right: 14px; z-index: var(--z-aviso); display: grid; gap: 8px; max-width: 380px; }
.aviso {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radio);
  background: var(--superficie-3); border: 1px solid var(--borde);
  box-shadow: var(--sombra-alta); font-size: .87rem;
  animation: entra .22s ease;
}
.aviso.exito { border-left: 3px solid var(--verde); }
.aviso.error { border-left: 3px solid var(--rojo); }
.aviso.info  { border-left: 3px solid var(--azul); }
/* Sin JavaScript, el «logro» se ve como un aviso de éxito más. */
.aviso.logro { border-left: 3px solid var(--verde); white-space: pre-line; }
@keyframes entra { from { opacity: 0; transform: translateY(-6px); } }

/* «Deshacer» (29/9/2026): abajo en el centro, donde no tapa los avisos de
   arriba. Clase propia: ver el fallo 11 de CLAUDE.md. */
.barra-deshacer {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: var(--z-aviso);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 16px; border-radius: var(--radio);
  background: var(--superficie-3); border: 1px solid var(--borde);
  box-shadow: var(--sombra-alta); font-size: .87rem;
  animation: entra .22s ease;
  max-width: calc(100vw - 32px);
}
.barra-deshacer.saliendo { opacity: 0; transition: opacity .3s; }
.barra-deshacer span { white-space: nowrap; }
.historial-fila { padding: 10px 0; border-bottom: 1px solid var(--borde-suave); font-size: .87rem; }
.historial-fila:last-child { border-bottom: 0; }
.historial-fila.deshecho { opacity: .55; }

.nota {
  padding: 12px 14px; border-radius: var(--radio); font-size: .85rem;
  background: var(--superficie-2); border: 1px solid var(--borde-suave);
  border-left: 3px solid var(--azul);
}
.nota.alerta { border-left-color: var(--naranja); background: var(--naranja-tenue); }
.nota.grave  { border-left-color: var(--rojo); background: var(--rojo-tenue); }
.nota.bien   { border-left-color: var(--verde); background: var(--verde-tenue); }

.vacio {
  padding: 40px 20px; text-align: center; color: var(--texto-tenue); font-size: .9rem;
}
.vacio svg { width: 34px; height: 34px; opacity: .4; margin-bottom: 10px; }

/* --- 10. Gráficos ------------------------------------------------------- */

.grafico { width: 100%; height: auto; display: block; }
.g-rejilla { stroke: var(--borde-suave); stroke-width: 1; }
.g-eje { fill: var(--texto-tenue); font-size: 10px; font-family: var(--mono); }
.anillo { width: 100%; max-width: 170px; height: auto; }

.barras { display: grid; gap: 9px; }
.barra-fila { display: grid; grid-template-columns: minmax(90px, 1.2fr) 3fr minmax(90px, auto); gap: 10px; align-items: center; font-size: .82rem; }
.barra-et { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-medio); }
.barra-pista { height: 8px; background: var(--superficie-3); border-radius: 99px; overflow: hidden; }
.barra-valor { display: block; height: 100%; border-radius: 99px; transition: width .4s ease; }
.barra-num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .78rem; }

.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: .78rem; color: var(--texto-medio); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* --- 11. Línea de tiempo (trazabilidad de una barra) -------------------- */

.linea-tiempo { position: relative; padding-left: 26px; }
.linea-tiempo::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--borde); }
.hito { position: relative; padding: 0 0 18px; }
.hito::before {
  content: ""; position: absolute; left: -23px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--superficie); border: 2px solid var(--texto-tenue);
}
.hito.ingreso::before  { border-color: var(--azul); }
.hito.analisis::before { border-color: var(--morado); }
.hito.costo::before    { border-color: var(--naranja); }
.hito.venta::before    { border-color: var(--verde); }
.hito.fundicion::before{ border-color: var(--acento); }
.hito h4 { margin: 0; font-size: .88rem; }
.hito p { margin: 2px 0 0; font-size: .8rem; color: var(--texto-medio); }
.hito time { font-size: .72rem; color: var(--texto-tenue); font-family: var(--mono); }

/* --- 12. Pendientes ----------------------------------------------------- */

.pendiente {
  display: grid; grid-template-columns: 4px 1fr auto; gap: 14px; align-items: center;
  padding: 13px 16px 13px 0; border-bottom: 1px solid var(--borde-suave);
}
.pendiente:last-child { border-bottom: 0; }
.pendiente .marca-nivel { align-self: stretch; border-radius: 99px; background: var(--texto-tenue); }
.pendiente.grave .marca-nivel { background: var(--rojo); }
.pendiente.aviso .marca-nivel { background: var(--naranja); }
.pendiente.info  .marca-nivel { background: var(--azul); }
.pendiente h4 { margin: 0 0 2px; font-size: .88rem; font-weight: 600; }
.pendiente p { margin: 0; font-size: .8rem; color: var(--texto-medio); }
.pendiente .cifra { text-align: right; }
.pendiente .cifra strong { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .95rem; }

/* --- 13. Pestañas ------------------------------------------------------- */

.pestanas { display: flex; gap: 3px; border-bottom: 1px solid var(--borde-suave); margin-bottom: 18px; overflow-x: auto; }
.pestanas a {
  padding: 9px 14px; font-size: .85rem; font-weight: 500; color: var(--texto-medio);
  border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}
.pestanas a:hover { color: var(--texto); text-decoration: none; }
.pestanas a.activo { color: var(--acento-alto); border-bottom-color: var(--acento); }

/* --- 14. Modal ---------------------------------------------------------- */

dialog.modal {
  border: 1px solid var(--borde); border-radius: var(--radio-lg);
  background: var(--superficie); color: var(--texto);
  padding: 0; max-width: 640px; width: calc(100% - 32px);
  box-shadow: var(--sombra-alta);
}
/* Para lo que es una tabla y no un formulario: los movimientos de una cuenta
   no caben en 640px y salían con la mitad de las columnas apretadas. */
dialog.modal.ancho { max-width: 1040px; }
dialog.modal::backdrop { background: rgba(4, 7, 12, .68); backdrop-filter: blur(3px); }
dialog.modal .modal-cab { padding: 16px 20px; border-bottom: 1px solid var(--borde-suave); display: flex; align-items: center; gap: 12px; }
dialog.modal .modal-cuerpo { padding: 20px; max-height: 68vh; overflow-y: auto; }
dialog.modal .modal-pie { padding: 14px 20px; border-top: 1px solid var(--borde-suave); display: flex; gap: 8px; justify-content: flex-end; background: var(--superficie-2); }

/* Las ventanas entran suaves: un corte seco se siente a página vieja. */
dialog.modal[open] { animation: modal-entra .2s ease-out; }
dialog.modal[open]::backdrop { animation: velo-entra .2s ease-out; }
@keyframes modal-entra { from { opacity: 0; transform: translateY(10px); } }
@keyframes velo-entra { from { opacity: 0; } }
dialog.modal .modal-cab h3 { margin: 0; flex: 1; min-width: 0; }
dialog.modal .modal-sub { font-size: .8rem; color: var(--texto-tenue); margin-top: 2px; font-weight: 400; }
/* La confirmación propia, que sustituye al confirm() del navegador. */
dialog.modal.confirmar { max-width: 440px; }
dialog.modal.confirmar .modal-cuerpo { font-size: .92rem; line-height: 1.5; }

/* Lo que se usa poco va plegado: está, pero no ocupa la pantalla. */
.plegable > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; color: var(--texto-medio); padding: 4px 0;
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::before { content: "▸"; font-size: .8em; transition: transform .15s; }
.plegable[open] > summary::before { transform: rotate(90deg); }
.plegable > summary:hover { color: var(--acento); }
.plegable[open] > summary { margin-bottom: 8px; }

/* La cuenta de la reliquidación, en vivo dentro de la ventana. */
.cuenta-viva {
  display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--radio);
  background: var(--superficie-2); border: 1px solid var(--borde-suave); font-size: .86rem;
}
.cuenta-viva .entre > span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cuenta-viva .total { border-top: 1px solid var(--borde); padding-top: 8px; font-weight: 700; font-size: .95rem; }

/* La fila de botones de una operación. */
.acciones-op { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- 14 bis. El LOGRO: check verde a pantalla completa (18/9/2026) ------
   Pedido del dueño: «que se sienta a aplicación». Sólo lo pintan los pasos
   grandes —confirmar, cobrar o pagar, reliquidar—, y es la única excepción
   escrita a los 150–300ms del §7 de MASTER.md: dura lo que tarda en leerse
   y se va sola. Un clic o una tecla la quitan antes. */
.logro-capa {
  position: fixed; inset: 0; z-index: var(--z-logro);
  display: grid; place-items: center; padding: 16px; cursor: pointer;
  background: rgba(4, 7, 12, .62);
  background: color-mix(in srgb, var(--fondo) 78%, transparent);
  backdrop-filter: blur(5px);
  animation: velo-entra .18s ease-out;
}
.logro-capa.sale { animation: logro-sale .3s ease-in forwards; }
.logro-caja { display: grid; justify-items: center; gap: 16px; text-align: center; max-width: 460px; }
.logro-check { width: 124px; height: 124px; animation: logro-latido .35s .78s ease-out; }
.logro-check circle {
  fill: var(--verde-tenue); stroke: var(--verde); stroke-width: 4;
  stroke-dasharray: 327; stroke-dashoffset: 327;
  transform: rotate(-90deg); transform-origin: 62px 62px;
  animation: logro-trazo .55s cubic-bezier(.65, 0, .35, 1) forwards;
}
.logro-check path {
  fill: none; stroke: var(--verde); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 80; stroke-dashoffset: 80;
  animation: logro-trazo .35s .45s cubic-bezier(.65, 0, .35, 1) forwards;
}
/* Con su propio `to`: con opacity 0 de partida, una animación que sólo dice
   `from` va de 0 a 0 y el texto no aparece nunca. Pasó al estrenarlo. */
.logro-titulo { font-size: 1.35rem; font-weight: 700; color: var(--texto); opacity: 0; animation: logro-aparece .25s .6s ease forwards; }
.logro-detalle { font-size: .92rem; color: var(--texto-medio); line-height: 1.5; opacity: 0; animation: logro-aparece .25s .7s ease forwards; }
@keyframes logro-aparece { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes logro-trazo { to { stroke-dashoffset: 0; } }
@keyframes logro-latido { 50% { transform: scale(1.07); } }
@keyframes logro-sale { to { opacity: 0; } }

/* --- 15. Utilidades ----------------------------------------------------- */

.oculto { display: none !important; }
.solo-lectura { pointer-events: none; opacity: .6; }
.centrado { text-align: center; }
.derecha { text-align: right; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pila { display: grid; gap: 16px; }
.pila.sm { gap: 8px; }
.en-linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt { margin-top: 16px; }
.mb { margin-bottom: 16px; }
.chico { font-size: .8rem; }
.mayus { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; font-weight: 600; }

.cargando { position: relative; }
.cargando::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--superficie-3), transparent);
  animation: brillo 1.2s infinite;
}
@keyframes brillo { to { transform: translateX(100%); } }

/* HTMX: cualquier elemento que esté pidiendo datos se atenúa. */
.htmx-request { opacity: .55; transition: opacity .12s ease; }

/* --- 16. Impresión ------------------------------------------------------ */

@media print {
  .lateral, .barra-sup, .filtros, .acciones, .no-imprimir { display: none !important; }
  .app { display: block; }
  .contenido { padding: 0; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .tarjeta { border: 1px solid #ccc; box-shadow: none; }
  table.tabla thead th { background: #f0f0f0; color: #000; }
}

/* --- 17. Responsivo ----------------------------------------------------- */

/* 1100 y no 1000 (16/9/2026): a 1024 px el menú fijo dejaba 744 px de contenido
   y dieciséis tablas se salían. Desplegable, el contenido tiene 990. */
@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; }
  .lateral {
    position: fixed; inset: 0 auto 0 0; width: 260px;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--sombra-alta);
  }
  .lateral.abierto { transform: none; }
  .velo { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 19; }
  .contenido { padding: 16px; }
  body { font-size: 16px; }   /* 16px mínimo en móvil, o el navegador hace zoom */
}
@media (min-width: 1101px) { .solo-movil { display: none !important; } }

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

/* --- 18. Divisas (10/10/2026) -------------------------------------------
   Las piezas de los diseños aprobados por el dueño (dispersar, compras de
   USDT, retiros, cuentas de las SAS y corte de caja). Nombres propios a
   propósito: `.sub`, `.fila` y `.op` ya aparecen como trozo de otras clases
   (la lección de `.aviso` y `.nota`, CLAUDE.md §1). */

.sub-dato { display: block; font-size: .72rem; color: var(--texto-tenue); margin-top: 2px; white-space: nowrap; }
.sub-dato.neg { color: var(--rojo); }

.fichas { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ficha {
  padding: 4px 11px; border-radius: 99px; font-size: .76rem; font-weight: 500; cursor: pointer;
  color: var(--texto-medio); background: var(--superficie); border: 1px solid var(--borde-suave);
  font-family: inherit; text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.ficha.cifra { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ficha:hover { color: var(--texto); border-color: var(--borde); text-decoration: none; }
.ficha[aria-pressed="true"], .ficha.activa { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 600; }

.trm-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.trm-fila .campo { margin: 0; }
.ecuacion {
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .86rem;
  padding: 10px 12px; border-radius: var(--radio-sm); background: var(--superficie-2);
  border: 1px solid var(--borde-suave); color: var(--texto-medio); min-height: 40px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.ecuacion b { color: var(--texto); font-weight: 600; }

/* La tabla de líneas de la dispersión: cada fila es un formulario pequeño. */
table.lineas td { vertical-align: top; }
table.lineas select, table.lineas input { min-height: 36px; padding: 7px 9px; font-size: .85rem; }
table.lineas select.medio { width: 108px; }
/* min-width 0 en el campo: con el ancho de 100% de todo input, la columna se
   comía 286 px y la tabla se salía 7 a 1366 (medido el 10/10/2026). */
.llega { display: flex; gap: 6px; min-width: 160px; }
.llega input { min-width: 0; width: 130px; flex: 1 1 130px; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cta-caja { padding: 8px 0; color: var(--texto-medio); font-size: .85rem; }

/* El avance de lo asignado. Color y texto, nunca sólo color. */
.avance { display: grid; gap: 6px; }
.avance-pista { height: 10px; border-radius: 99px; background: var(--superficie-3); overflow: hidden; }
.avance-relleno { height: 100%; width: 0; border-radius: 99px; background: var(--acento); transition: width .25s ease, background .2s ease; }
.avance.completo .avance-relleno { background: var(--verde); }
.avance.pasado .avance-relleno { background: var(--rojo); }
.avance-texto { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .82rem; }
.avance-estado { font-weight: 600; }
.avance.completo .avance-estado { color: var(--verde); }
.avance.pasado .avance-estado { color: var(--rojo); }
.avance.falta .avance-estado { color: var(--naranja); }

/* Ranking de «a quién conviene»: la posición es información. */
.rank { display: grid; }
.rank-fila {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--borde-suave);
}
.rank-fila:last-child { border-bottom: 0; }
.rank-pos {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  background: var(--superficie-3); color: var(--texto-medio);
}
.rank-fila:first-child .rank-pos { background: var(--acento-tenue); color: var(--acento-alto); }
.rank-nombre { font-weight: 600; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-dato { font-size: .74rem; color: var(--texto-tenue); }
.rank-fila.usada { opacity: .5; }

/* Lo dispersado de una compra, en pequeño. */
.barrita { display: grid; gap: 3px; min-width: 110px; }
.barrita-pista { height: 6px; border-radius: 99px; background: var(--superficie-3); overflow: hidden; }
.barrita-pista i { display: block; height: 100%; border-radius: 99px; background: var(--verde); }
.barrita.parcial .barrita-pista i { background: var(--naranja); }

table.tabla td input.en-tabla { min-height: 34px; padding: 6px 9px; font-size: .85rem; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.tabla tr.apagada td { opacity: .45; }
table.tabla tr.apagada td:first-child { opacity: 1; }
table.tabla td.check { width: 34px; }
table.tabla td.check .casilla { padding: 0; }

/* Opciones grandes con radio (de dónde salen los USDT). */
.origenes { display: grid; gap: 8px; }
.origen {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; cursor: pointer;
  padding: 11px 13px; border-radius: var(--radio); border: 1px solid var(--borde-suave); background: var(--superficie-2);
  transition: border-color .15s, background .15s;
}
.origen:hover { border-color: var(--borde); }
.origen:has(input:checked) { border-color: var(--acento); background: var(--acento-tenue); }
.origen input { margin: 3px 0 0; accent-color: var(--acento); width: 16px; height: 16px; min-height: 0; }
.origen strong { display: block; font-size: .88rem; }
.origen span { font-size: .78rem; color: var(--texto-medio); }

/* El corte de caja: la ecuación del día de un vistazo. */
.ecuacion-dia { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1.15fr; gap: 10px; align-items: stretch; }
.ecuacion-dia .ec-signo { display: grid; place-items: center; font-family: var(--mono); font-size: 1.2rem; color: var(--texto-tenue); }
.ecuacion-dia .caja-ec { background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: var(--radio); padding: 12px 14px; }
.ecuacion-dia .caja-ec.final { border-color: color-mix(in srgb, var(--acento) 50%, transparent); background: var(--acento-tenue); }
.ecuacion-dia .ec-valor { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.12rem; font-weight: 600; }
@media (max-width: 900px) {
  .ecuacion-dia { grid-template-columns: 1fr; }
  .ecuacion-dia .ec-signo { display: none; }
}
.lista-corte { display: grid; }
.lista-corte .corte-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 8px 18px; border-bottom: 1px solid var(--borde-suave); font-size: .84rem; }
.lista-corte .corte-fila:last-child { border-bottom: 0; }
.lista-corte .corte-fila .num { white-space: nowrap; }
.lista-corte .corte-tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* La foto de referencia de cada barra (26/10/2026): el espectro y la pesa.
   Miniaturas cuadradas que abren la foto entera en otra pestaña. */
.fotos-barra { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.fotos-barra figure { margin: 0; display: grid; gap: 4px; min-width: 0; }
.fotos-barra img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio-sm); border: 1px solid var(--borde-suave); display: block; }
.fotos-barra figcaption { font-size: .74rem; color: var(--texto-tenue, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }