/* =====================================================================
   LicitaEnCuba — tema (heredado de ABACO Inversiones)
   Continuidad con el tema de ABACO Pro (documento 24 del proyecto).

   REGLA QUE MANDA SOBRE TODAS: NADA VIENE DE INTERNET. Ni fuentes, ni
   iconos, ni hojas de estilo, ni bibliotecas. La aplicacion tiene que abrir
   igual sin conexion.

   Bordes rectos, sin sombras ni degradados, separacion por linea sobre
   fondo gris, un solo acento. Monoespaciada reservada a cifras y
   metadatos. Es una herramienta de trabajo, no una pagina de presentacion.
   ===================================================================== */

:root {
    /* Tipografia: se empieza por las del sistema. En Windows, Segoe UI y
       Consolas. Las familias propias solo se usarian si algun dia se
       empaquetan dentro del producto. */
    --ab-font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ab-font-mono: 'IBM Plex Mono', ui-monospace, Consolas, 'Courier New', monospace;

    /* Superficies y texto */
    --ab-canvas: #eef0f4;
    --ab-surface: #ffffff;
    --ab-surface-alt: #f4f5f7;
    --ab-ink: #141a22;
    --ab-ink-2: #3d444f;
    --ab-ink-3: #5a6270;
    /* MEDIDO, no elegido a ojo. El anterior (#7b8291) daba 3,38:1 sobre el
       fondo gris de pagina, 3,54:1 sobre el gris de tarjeta y 3,86:1 sobre
       blanco, cuando el minimo para texto normal es 4,5:1. Y este color no
       viste texto decorativo: lo lleva «de la utilidad distribuible, no del
       aporte», el codigo del ciclo, las etiquetas de los indicadores y la
       marca «Declarado». Justo las aclaraciones que evitan un malentendido
       sobre dinero.
       Se oscurecio manteniendo la proporcion entre canales —el mismo
       matiz— hasta cumplir sobre los TRES fondos, con margen:
       4,91 · 5,13 · 5,60. Lo comprueba la suite de accesibilidad. */
    --ab-muted: #626874;
    /* Solo borde izquierdo de .ab-nota, nunca texto: le aplica el umbral de
       componente no textual, 3:1. Con #9aa1ad daba 2,60:1 sobre blanco; ahora 3,04 sobre el
       fondo mas exigente. */
    --ab-muted-2: #848a95;
    --ab-border: #dfe3e9;
    --ab-border-soft: #e7eaef;
    --ab-border-strong: #d9dde4;
    --ab-hover: #f3f5f8;

    /* Acento del producto. oklch() esta prohibido: los navegadores viejos
       no lo entienden y el boton principal saldria de un color raro. */
    --ab-acento: #1F4E79;
    --ab-acento-fuerte: #16385a;
    --ab-acento-suave: #e8eef5;
    /* El tono intermedio de la barra de captacion: lo comprometido y todavia
       no recibido. Estaba escrito a mano como `#9db8d1` en dos plantillas,
       duplicando el valor que ya tenia `.ab-avance__parte--comprometido`:
       cambiar el color en el tema no habria cambiado la leyenda. */
    --ab-acento-medio: #9db8d1;
    --ab-foco: #2b6cb0;

    /* Semanticos */
    --ab-pos: #1d7a4d;
    --ab-neg: #b1400f;
    --ab-aviso: #92400e;
    --ab-aviso-bg: #fffbeb;
    --ab-aviso-bd: #fde68a;
    --ab-error: #9b2c2c;
    --ab-error-bg: #fff5f5;
    --ab-error-bd: #fc8181;
    --ab-ok-bg: #f0fff4;
    --ab-ok-bd: #9ae6b4;

    /* Categoricos: cinco, asignados por indice, nunca elegidos a ojo */
    --ab-cat-1: #1a3f8f;
    --ab-cat-2: #1d7a4d;
    --ab-cat-3: #b1400f;
    --ab-cat-4: #6b3fa0;
    --ab-cat-5: #0d6b7d;

    /* Separacion: 4, 8, 12, 16, 24, 32 */
    --ab-e1: 4px;  --ab-e2: 8px;  --ab-e3: 12px;
    --ab-e4: 16px; --ab-e5: 24px; --ab-e6: 32px;

    --ab-control-h: 34px;
    --ab-radius-tile: 7px;
    --ab-radius-ctrl: 5px;
    --ab-gap: var(--ab-e4);
    --ab-pad-page: var(--ab-e5);
    --ab-pad-card: var(--ab-e4);
    --ab-ancho-max: 1280px;
}

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

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

body {
    margin: 0;
    font-family: var(--ab-font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ab-ink);
    background: var(--ab-canvas);
}

h1, h2, h3, h4 { margin: 0 0 var(--ab-e3); line-height: 1.25; font-weight: 600; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
h4 { font-size: 13px; color: var(--ab-ink-2); }
p { margin: 0 0 var(--ab-e3); }
a { color: var(--ab-acento); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--ab-foco);
    outline-offset: 1px;
}

/* --- Saltar al contenido --------------------------------------------
   Fuera de la pantalla hasta que recibe el foco, y entonces aparece
   arriba a la izquierda. No se usa display:none ni visibility:hidden:
   eso lo sacaria del orden de tabulacion y el enlace no serviria de
   nada, que es el error habitual. */
.ab-saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--ab-acento);
    color: #fff;
    padding: var(--ab-e2) var(--ab-e4);
    border-radius: 0 0 var(--ab-radius-ctrl) 0;
    font-weight: 600;
}
.ab-saltar:focus {
    left: 0;
    text-decoration: none;
}

/* El contenedor de una tabla ancha es enfocable para poder desplazarla con
   el teclado, y lleva nombre para que un lector de pantalla diga que es.
   Sin outline propio se enfocaria sin que nadie lo viera. */
.ab-tabla-envoltorio:focus-visible { outline: 2px solid var(--ab-foco); outline-offset: 2px; }

/* --- Aviso permanente de datos de demostracion --------------------- */
.ab-demo {
    background: var(--ab-aviso-bg);
    border-bottom: 1px solid var(--ab-aviso-bd);
    color: var(--ab-aviso);
    font-size: 12px;
    padding: var(--ab-e2) var(--ab-e4);
    text-align: center;
}
.ab-demo strong { font-weight: 600; }

/* --- Barra y navegacion -------------------------------------------- */
.ab-barra {
    background: var(--ab-surface);
    border-bottom: 1px solid var(--ab-border);
}
.ab-barra__fila {
    max-width: var(--ab-ancho-max);
    margin: 0 auto;
    padding: var(--ab-e2) var(--ab-e4);
    display: flex;
    align-items: center;
    gap: var(--ab-e4);
    flex-wrap: wrap;
    min-height: 54px;
}
.ab-marca {
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ab-ink);
    font-size: 15px;
    white-space: nowrap;
}
.ab-marca span { color: var(--ab-acento); font-weight: 600; }
.ab-barra__sesion {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--ab-e3);
    font-size: 12px;
    color: var(--ab-muted);
    flex-wrap: wrap;
}
.ab-rol {
    font-family: var(--ab-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--ab-acento-suave);
    color: var(--ab-acento-fuerte);
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius-ctrl);
    padding: 2px var(--ab-e2);
}

.ab-nav {
    background: var(--ab-surface);
    border-bottom: 1px solid var(--ab-border);
}
.ab-nav__fila {
    max-width: var(--ab-ancho-max);
    margin: 0 auto;
    padding: 0 var(--ab-e4);
    display: flex;
    gap: var(--ab-e1);
    overflow-x: auto;
}
.ab-nav__enlace {
    padding: var(--ab-e3) var(--ab-e3);
    color: var(--ab-ink-2);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    font-size: 13px;
}
.ab-nav__enlace:hover { background: var(--ab-hover); text-decoration: none; }
.ab-nav__enlace--activo {
    color: var(--ab-acento);
    border-bottom-color: var(--ab-acento);
    font-weight: 600;
}

/* --- Estructura de pagina ------------------------------------------ */
.ab-pagina {
    max-width: var(--ab-ancho-max);
    margin: 0 auto;
    padding: var(--ab-pad-page) var(--ab-e4) var(--ab-e6);
}
.ab-pagina__cabecera {
    display: flex;
    align-items: flex-start;
    gap: var(--ab-e4);
    flex-wrap: wrap;
    margin-bottom: var(--ab-e4);
}
.ab-pagina__cabecera h1 { margin-bottom: var(--ab-e1); }
.ab-pagina__acciones { margin-left: auto; display: flex; gap: var(--ab-e2); flex-wrap: wrap; }
.ab-sub { color: var(--ab-muted); font-size: 13px; margin: 0; }

.ab-tarjeta {
    background: var(--ab-surface);
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius-tile);
    padding: var(--ab-pad-card);
    margin-bottom: var(--ab-gap);
}
.ab-tarjeta > h2:first-child, .ab-tarjeta > h3:first-child { margin-top: 0; }

/* Un encabezado que abre una seccion DENTRO de una tarjeta se separa de lo
   anterior.
   -------------------------------------------------------------------
   Sin esto quedaba pegado: medido, 0 px entre «Resultados realizados» y el
   parrafo de encima en la cartera. Y el encabezado siguiente de esa misma
   tarjeta llevaba un `style="margin-top:20px"` escrito a mano — el mismo
   patron que el boton pegado a su campo: la regla faltaba en el tema y se
   estaba parcheando pantalla por pantalla, con un valor que ademas no esta
   en la escala.

   24 px (--ab-e5), no 16: entre dos tarjetas hay 16, y un encabezado que
   abre seccion dentro de una necesita al menos tanto aire para no leerse
   como una linea mas del bloque anterior. */
.ab-tarjeta > h2:not(:first-child),
.ab-tarjeta > h3:not(:first-child),
.ab-tarjeta > h4:not(:first-child) { margin-top: var(--ab-e5); }
.ab-tarjeta__pie {
    margin: var(--ab-e3) calc(-1 * var(--ab-pad-card)) calc(-1 * var(--ab-pad-card));
    padding: var(--ab-e2) var(--ab-pad-card);
    border-top: 1px solid var(--ab-border-soft);
    background: var(--ab-surface-alt);
    font-size: 11px;
    color: var(--ab-muted);
    border-radius: 0 0 var(--ab-radius-tile) var(--ab-radius-tile);
}

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

/* --- Cifras --------------------------------------------------------
   font-variant-numeric: tabular-nums en TODA cifra. Sin eso, en una
   columna de importes las unidades no quedan una debajo de otra. */
.ab-cifra, .ab-tabla td, .ab-dato__valor, .ab-mono {
    font-variant-numeric: tabular-nums;
}
.ab-mono { font-family: var(--ab-font-mono); font-size: 12px; }
.ab-pos { color: var(--ab-pos); }
.ab-neg { color: var(--ab-neg); }

.ab-dato { display: flex; flex-direction: column; gap: 2px; }
.ab-dato__etiqueta { font-size: 11px; color: var(--ab-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ab-dato__valor { font-size: 18px; font-weight: 600; }
.ab-dato__valor--chico { font-size: 14px; font-weight: 500; }
.ab-dato__nota { font-size: 11px; color: var(--ab-muted); }
.ab-dato__nota--aviso { color: var(--ab-aviso); font-weight: 500; }

/* --- Bandeja de avisos ----------------------------------------------
   El contador lleva NUMERO, no un punto de color: «3» dice cuantos son y
   se lee igual en blanco y negro y para quien no distingue el rojo. */
.ab-avisos { gap: var(--ab-e2); }
.ab-avisos--hay { border-color: var(--ab-aviso-bd); background: var(--ab-aviso-bg); color: var(--ab-aviso); font-weight: 600; }
.ab-avisos__cuenta {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--ab-aviso);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.ab-aviso-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ab-e3); align-items: start; padding: var(--ab-e3) 0; border-bottom: 1px solid var(--ab-border-soft); }
.ab-aviso-fila:last-child { border-bottom: 0; }
.ab-aviso-fila--nuevo { border-left: 3px solid var(--ab-acento); padding-left: var(--ab-e3); margin-left: calc(-1 * var(--ab-e3) - 3px); }
.ab-aviso-fila__titulo { font-weight: 600; margin: 0 0 2px; }
.ab-aviso-fila__cuerpo { margin: 0; color: var(--ab-ink-2); font-size: 13px; max-width: 80ch; }
.ab-aviso-fila__meta { font-size: 11px; color: var(--ab-muted); margin-top: var(--ab-e1); }
.ab-aviso-fila__acciones { display: flex; flex-direction: column; gap: var(--ab-e2); align-items: flex-end; }
@media (max-width: 767px) {
    .ab-aviso-fila { grid-template-columns: minmax(0, 1fr); }
    .ab-aviso-fila__acciones { flex-direction: row; align-items: center; }
}

.ab-indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--ab-e4);
}
.ab-indicadores .ab-dato { border-left: 3px solid var(--ab-border); padding-left: var(--ab-e3); }

/* --- Tablas: NO se apilan, se desplazan ---------------------------- */
.ab-tabla-envoltorio { overflow-x: auto; margin: 0 calc(-1 * var(--ab-pad-card)); padding: 0 var(--ab-pad-card); }
.ab-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.ab-tabla th {
    text-align: left;
    background: var(--ab-surface-alt);
    border-bottom: 1px solid var(--ab-border-strong);
    padding: var(--ab-e2) var(--ab-e3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ab-ink-3);
    font-weight: 600;
    white-space: nowrap;
}
.ab-tabla td {
    padding: var(--ab-e2) var(--ab-e3);
    border-bottom: 1px solid var(--ab-border-soft);
    vertical-align: top;
}
/* CABECERA DE FILA, no de columna.
   En una tabla de pares —«Comprometido | 27 000,00 UM»— la primera celda es
   la cabecera de SU fila. Con <td>, un lector de pantalla lee «27 000,00 UM»
   y nada mas; con <th scope="row"> lee «Comprometido, 27 000,00 UM». Pero
   visualmente tiene que seguir siendo una celda normal: el estilo de arriba
   —fondo gris, mayusculas, 11px— es el de una cabecera de COLUMNA, y
   aplicarselo a 115 celdas convertiria cada tabla en un damero. */
.ab-tabla th[scope="row"] {
    background: transparent;
    border-bottom: 1px solid var(--ab-border-soft);
    padding: var(--ab-e2) var(--ab-e3);
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ab-ink);
    white-space: normal;
    vertical-align: top;
}
.ab-tabla tbody tr:hover { background: var(--ab-hover); }
.ab-tabla .ab-num { text-align: right; white-space: nowrap; }
/* Un valor que es TEXTO, no cifra: alineado a la derecha como la columna de
   al lado, pero sin nowrap. Con .ab-num la tarjeta estrecha de «Reglas de
   este acuerdo» recortaba «Capital -> utilidad -> cargos de la empresa» y
   obligaba a desplazar la tabla por dentro para leer una frase. */
.ab-tabla .ab-valor { text-align: right; }
/* Una fila de cifras seguida de su propia fila de texto: la linea divisoria
   va DEBAJO del par, no entre las dos, para que se lean como una sola fila.
   Nacio de la tabla de escenarios: con el supuesto como columna, la tabla
   se salia de la tarjeta y se perdia justo el rendimiento. */
.ab-tabla tr.ab-fila-sin-linea > td { border-bottom: 0; padding-bottom: 2px; }
.ab-tabla tr.ab-fila-sin-linea + tr > td { padding-top: 0; }
/* Segunda linea de una cabecera: la unidad o el matiz de la columna. */
.ab-tabla .ab-th-sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ab-muted); }
/* Tabla de muchas columnas estrechas: las CABECERAS pueden partirse en varias
   lineas. Sin esto son ellas, y no las cifras, las que fijan el ancho de cada
   columna —«UTILIDAD DEL CICLO» en mayusculas mide 156 px— y la ultima columna
   se sale de la tarjeta. Medido: 845 px de tabla en 797 de hueco. */
.ab-tabla--compacta th { white-space: normal; }
.ab-tabla--compacta th, .ab-tabla--compacta td { padding-left: 6px; padding-right: 6px; }
.ab-tabla--compacta th:first-child, .ab-tabla--compacta td:first-child { padding-left: var(--ab-e3); }
.ab-tabla--compacta th:last-child, .ab-tabla--compacta td:last-child { padding-right: var(--ab-e3); }
.ab-tabla tfoot td { font-weight: 600; border-top: 1px solid var(--ab-border-strong); background: var(--ab-surface-alt); }

/* Una tabla suelta dentro de una tarjeta (sin envoltorio propio) tambien
   tiene que desplazarse por dentro. Sin esto arrastraba a la pagina entera:
   medido en el navegador, 20 px de desplazamiento horizontal en la pantalla
   de inversion y 42 px en la de ABACO Pro. La medicion que decide es
   window.scrollX despues de intentar desplazar, no scrollWidth. */
.ab-tarjeta > table.ab-tabla,
.ab-tarjeta form > table.ab-tabla {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* --- Estados con PALABRA ademas de color ---------------------------
   En una impresion en blanco y negro, y para quien no distingue el rojo
   del verde, el color solo no dice nada. */
.ab-estado {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px var(--ab-e2);
    border-radius: var(--ab-radius-ctrl);
    border: 1px solid var(--ab-border);
    background: var(--ab-surface-alt);
    color: var(--ab-ink-2);
    white-space: nowrap;
}
.ab-estado--captacion { background: var(--ab-acento-suave); border-color: #bcd0e4; color: var(--ab-acento-fuerte); }
.ab-estado--ejecucion { background: #eef7f2; border-color: #b7dcc8; color: var(--ab-pos); }
.ab-estado--liquidacion { background: #f3eefa; border-color: #d6c7ea; color: var(--ab-cat-4); }
.ab-estado--cerrado { background: var(--ab-surface-alt); border-color: var(--ab-border-strong); color: var(--ab-ink-3); }
.ab-estado--cancelado, .ab-estado--rechazado { background: var(--ab-error-bg); border-color: var(--ab-error-bd); color: var(--ab-error); }
.ab-estado--revision { background: var(--ab-aviso-bg); border-color: var(--ab-aviso-bd); color: var(--ab-aviso); }
.ab-estado--borrador { background: var(--ab-surface-alt); border-color: var(--ab-border); color: var(--ab-muted); }
.ab-estado--retraso { background: var(--ab-aviso-bg); border-color: var(--ab-aviso-bd); color: var(--ab-aviso); }
.ab-estado--disputa, .ab-estado--suspension { background: var(--ab-error-bg); border-color: var(--ab-error-bd); color: var(--ab-error); }

/* --- Origen del dato: declarado / sincronizado / verificado --------- */
.ab-origen {
    font-family: var(--ab-font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ab-muted);
    border: 1px dashed var(--ab-border-strong);
    border-radius: var(--ab-radius-ctrl);
    padding: 1px 5px;
    white-space: nowrap;
}
.ab-origen--verificado { color: var(--ab-pos); border-color: var(--ab-ok-bd); border-style: solid; }
.ab-origen--sincronizado { color: var(--ab-cat-5); border-color: #b6d6dd; }

/* --- Piezas que estaban escritas a mano en las plantillas -------------
   Cada una aparecia identica en varios sitios como `style="..."`. Un estilo
   en linea no lo comprueba nadie, no lo hereda la pantalla siguiente y no
   cambia cuando cambia el tema: son reglas del tema que vivian fuera de el.
   -------------------------------------------------------------------- */

/* Un bloque separado del anterior por una linea, dentro de una tarjeta.
   Estaba 5 veces como `border-top:1px solid ...;padding-top:12px;margin-top:12px`. */
.ab-separador {
    border-top: 1px solid var(--ab-border-soft);
    padding-top: var(--ab-e3);
    margin-top: var(--ab-e3);
}

/* Texto citado o dependiente del de arriba: una respuesta a una opinion, una
   pregunta contestada. Estaba 5 veces como `padding-left:16px;border-left:3px solid ...`. */
.ab-sangrado { padding-left: var(--ab-e4); border-left: 3px solid var(--ab-border); }
.ab-sangrado--activo { border-left-color: var(--ab-acento-suave); margin-bottom: var(--ab-e3); }

/* La etiqueta de un termino en una lista de definiciones. Estaba 4 veces como
   `font-weight:600;font-size:12px;margin-top:10px` — con 10, que no esta en
   la escala. Ahora 12. */
.ab-termino { font-weight: 600; font-size: 12px; margin-top: var(--ab-e3); }

/* Un campo que ocupa la fila entera de una rejilla de campos. Estaba 9 veces
   como `grid-column:1/-1`. */
.ab-ancho-total { grid-column: 1 / -1; }

/* Un formulario de una sola accion que va en la misma linea que el texto.
   Estaba 3 veces como `display:inline`. */
.ab-en-linea { display: inline; }

/* --- Avisos --------------------------------------------------------- */
.ab-nota {
    border: 1px solid var(--ab-border);
    border-left: 3px solid var(--ab-muted-2);
    background: var(--ab-surface-alt);
    border-radius: var(--ab-radius-ctrl);
    padding: var(--ab-e3);
    margin-bottom: var(--ab-e3);
    font-size: 13px;
}
.ab-nota--aviso { background: var(--ab-aviso-bg); border-color: var(--ab-aviso-bd); border-left-color: var(--ab-aviso); color: var(--ab-aviso); }
.ab-nota--error { background: var(--ab-error-bg); border-color: var(--ab-error-bd); border-left-color: var(--ab-error); color: var(--ab-error); }
.ab-nota--ok { background: var(--ab-ok-bg); border-color: var(--ab-ok-bd); border-left-color: var(--ab-pos); color: var(--ab-pos); }
.ab-nota ul { margin: var(--ab-e2) 0 0; padding-left: var(--ab-e5); }
.ab-nota li { margin-bottom: var(--ab-e1); }

/* --- Estados de pantalla: cada uno se ve distinto ------------------- */
.ab-estado-pantalla {
    text-align: center;
    padding: var(--ab-e6) var(--ab-e4);
    border: 1px dashed var(--ab-border-strong);
    border-radius: var(--ab-radius-tile);
    background: var(--ab-surface);
    color: var(--ab-muted);
}
/* El nivel del encabezado lo manda la ESTRUCTURA del documento —para que un
   lector de pantalla pueda recorrerla sin saltos—, y el tamano lo manda el
   sitio donde esta. Son dos cosas distintas y aqui se separan: varios h3
   pasaron a h2 para cerrar saltos de nivel, y se siguen viendo igual. */
.ab-estado-pantalla h2,
.ab-estado-pantalla h3 { color: var(--ab-ink-2); font-size: 15px; }
.ab-rejilla--3 > .ab-tarjeta > h2:first-child,
.ab-estado-pantalla > h2 { font-size: 15px; }
form.ab-tarjeta > h2 { font-size: 15px; }
.ab-rejilla--3 > div > h3 { font-size: 13px; color: var(--ab-ink-2); }
.ab-estado-pantalla--error { border-color: var(--ab-error-bd); background: var(--ab-error-bg); color: var(--ab-error); }
.ab-estado-pantalla--sinpermiso { border-color: var(--ab-aviso-bd); background: var(--ab-aviso-bg); color: var(--ab-aviso); }
.ab-estado-pantalla--cargando { border-style: solid; }

/* --- Controles ------------------------------------------------------ */
.ab-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ab-e2);
    min-height: var(--ab-control-h);
    padding: 0 var(--ab-e4);
    border: 1px solid var(--ab-border-strong);
    border-radius: var(--ab-radius-ctrl);
    background: var(--ab-surface);
    color: var(--ab-ink);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.ab-boton:hover { background: var(--ab-hover); text-decoration: none; }
.ab-boton--principal { background: var(--ab-acento); border-color: var(--ab-acento); color: #fff; font-weight: 600; }
.ab-boton--principal:hover { background: var(--ab-acento-fuerte); }
.ab-boton--peligro { border-color: var(--ab-error-bd); color: var(--ab-error); }
/* Un boton que representa un estado ya puesto, no una accion pendiente. */
.ab-boton--marcado { border-color: #bcd0e4; background: var(--ab-acento-suave); color: var(--ab-acento-fuerte); font-weight: 600; }
.ab-boton--peligro:hover { background: var(--ab-error-bg); }
.ab-boton[disabled] { opacity: 0.55; cursor: not-allowed; }
/* Un boton dentro de un aviso: la accion que ese aviso concreto propone. */
.ab-boton--chico { font-size: 12px; padding: 4px var(--ab-e2); min-height: 28px; }
/* Un extremo del paginador cuando no hay hacia donde ir. Es un <span>, no un
   <button disabled>: no es un control desactivado que podria activarse, es
   que ese borde de la lista no existe. */
.ab-boton--inerte { color: var(--ab-muted); border-color: var(--ab-border); cursor: default; }

/* --- Paginador ------------------------------------------------------
   El primero del proyecto, y por eso vive aqui y no dentro de una
   pantalla: la siguiente lista larga que aparezca no tiene que inventar
   otro. Nacio en la auditoria, que es la tabla que mas crece y la unica
   que no se borra nunca. */
.ab-paginador {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ab-e3);
    flex-wrap: wrap;
    margin-top: var(--ab-e4);
}
.ab-paginador__cuenta { font-size: 12px; color: var(--ab-muted); }
.ab-nota__accion { margin-top: var(--ab-e2); }

.ab-campos { display: grid; gap: var(--ab-e3); }
.ab-campos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-campos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-campo { display: flex; flex-direction: column; gap: var(--ab-e1); min-width: 0; }
.ab-campo > label { font-size: 12px; color: var(--ab-ink-2); font-weight: 600; }
.ab-campo > .ab-ayuda { font-size: 11px; color: var(--ab-muted); }

/* La accion que cierra un formulario se separa de los campos.
   -------------------------------------------------------------------
   Sin esto el boton queda PEGADO al campo —medido: 0 px en la pantalla
   de entrada—, y un control pegado a otro se lee como parte del mismo
   bloque: parece un anexo del campo de correo, no el boton que envia el
   formulario.

   Va en el tema y no en cada pantalla a proposito. Estaba en tres sitios
   y uno de ellos ya lo llevaba parcheado con un `style="margin-top:8px"`
   escrito a mano: la senal de que el problema era del tema y se estaba
   resolviendo de uno en uno. Aqui se arregla una vez y alcanza tambien a
   la pantalla que alguien escriba manana.

   16 px, no 12: los campos se separan entre si con 12 (--ab-e3), asi que
   la accion necesita MAS para leerse como un bloque distinto y no como un
   campo mas de la lista. */
.ab-campos + .ab-boton,
.ab-campo + .ab-boton,
.ab-filtros + .ab-boton,
.ab-campos + .ab-acciones,
.ab-campo + .ab-acciones,
.ab-filtros + .ab-acciones { margin-top: var(--ab-e4); }

/* Varios botones seguidos al pie de un formulario. */
.ab-acciones { display: flex; gap: var(--ab-e2); flex-wrap: wrap; }
input[type="text"], input[type="number"], input[type="date"], input[type="search"], select, textarea {
    min-height: var(--ab-control-h);
    padding: 0 var(--ab-e2);
    border: 1px solid var(--ab-border-strong);
    border-radius: var(--ab-radius-ctrl);
    background: var(--ab-surface);
    color: var(--ab-ink);
    font: inherit;
    font-size: 13px;
    width: 100%;
    min-width: 0;
}
textarea { padding: var(--ab-e2); min-height: 80px; resize: vertical; }
input[type="number"] { font-variant-numeric: tabular-nums; text-align: right; }

.ab-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--ab-e3);
    align-items: end;
}

/* --- Barra de avance de la captacion -------------------------------- */
.ab-avance { background: var(--ab-surface-alt); border: 1px solid var(--ab-border); border-radius: var(--ab-radius-ctrl); height: 10px; overflow: hidden; display: flex; }
.ab-avance__parte { height: 100%; }
.ab-avance__parte--recibido { background: var(--ab-acento); }
.ab-avance__parte--comprometido { background: var(--ab-acento-medio); }
.ab-leyenda { display: flex; gap: var(--ab-e4); flex-wrap: wrap; font-size: 11px; color: var(--ab-muted); margin-top: var(--ab-e2); }
.ab-leyenda__punto { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: var(--ab-e1); vertical-align: -1px; }
/* El punto de la leyenda toma su color de la MISMA variable que la barra que
   explica. Escrito a mano en la plantilla, los dos podian separarse sin que
   nadie lo notara. */
.ab-leyenda__punto--recibido { background: var(--ab-acento); }
.ab-leyenda__punto--comprometido { background: var(--ab-acento-medio); }

/* --- Lista de oportunidades ----------------------------------------- */
.ab-lista { display: grid; gap: var(--ab-gap); }
.ab-oportunidad { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--ab-e4); }
.ab-oportunidad__lado { border-left: 1px solid var(--ab-border-soft); padding-left: var(--ab-e4); }
.ab-etiquetas { display: flex; gap: var(--ab-e2); flex-wrap: wrap; margin-bottom: var(--ab-e2); }

/* --- Cronologia ------------------------------------------------------ */
.ab-crono { list-style: none; margin: 0; padding: 0; }
.ab-crono li {
    position: relative;
    padding: 0 0 var(--ab-e3) var(--ab-e5);
    border-left: 1px solid var(--ab-border);
    margin-left: 5px;
}
.ab-crono li::before {
    content: '';
    position: absolute;
    left: -5px; top: 5px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--ab-surface);
    border: 2px solid var(--ab-acento);
}
.ab-crono li:last-child { border-left-color: transparent; }
.ab-crono__fecha { font-family: var(--ab-font-mono); font-size: 11px; color: var(--ab-muted); }

/* --- Pasos del calculo ---------------------------------------------- */
.ab-pasos { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.ab-pasos li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ab-e3);
    padding: var(--ab-e2) 0;
    border-bottom: 1px solid var(--ab-border-soft);
}
.ab-pasos__formula { display: block; font-size: 11px; color: var(--ab-muted); font-family: var(--ab-font-mono); }
.ab-pasos__valor { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Pie -------------------------------------------------------------- */
.ab-pie {
    max-width: var(--ab-ancho-max);
    margin: 0 auto;
    padding: var(--ab-e5) var(--ab-e4) var(--ab-e6);
    color: var(--ab-muted);
    font-size: 11px;
    border-top: 1px solid var(--ab-border);
}

/* =====================================================================
   Capa responsiva. TRES puntos de corte, y solo tres. Multiplicarlos es
   multiplicar los sitios donde algo se rompe sin que nadie lo vea.
   ===================================================================== */

@media (max-width: 1199px) {
    .ab-rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-rejilla--lateral { grid-template-columns: minmax(0, 1fr); }
    .ab-oportunidad { grid-template-columns: minmax(0, 1fr); }
    .ab-oportunidad__lado { border-left: 0; border-top: 1px solid var(--ab-border-soft); padding-left: 0; padding-top: var(--ab-e3); }
}

@media (max-width: 767px) {
    :root {
        --ab-pad-page: var(--ab-e4);
        --ab-pad-card: var(--ab-e3);
        --ab-gap: var(--ab-e3);
    }
    .ab-rejilla--2, .ab-rejilla--3, .ab-rejilla--4 { grid-template-columns: minmax(0, 1fr); }
    .ab-campos--2, .ab-campos--3 { grid-template-columns: minmax(0, 1fr); }
    h1 { font-size: 19px; }
    .ab-barra__fila { min-height: 0; }
    .ab-barra__sesion { width: 100%; margin-left: 0; }
    .ab-pagina__acciones { margin-left: 0; width: 100%; }
    .ab-pagina__acciones .ab-boton { flex: 1 1 auto; }
}

/* Con puntero grueso, ningun control baja de 44 px. La densidad de
   escritorio no se toca: va dentro de esta consulta. */
@media (pointer: coarse) {
    :root { --ab-control-h: 44px; }
    .ab-nav__enlace { padding: var(--ab-e4) var(--ab-e3); }
    .ab-boton { padding: 0 var(--ab-e4); }
}

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

@media print {
    .ab-barra, .ab-nav, .ab-pagina__acciones, .ab-pie { display: none; }
    body { background: #fff; }
    .ab-tarjeta { border-color: #999; break-inside: avoid; }
    .ab-demo { border-bottom: 2px solid #000; color: #000; }
}

/* =====================================================================
   Añadidos de LicitaEnCuba
   ===================================================================== */
.ab-huella { font-family: var(--ab-font-mono); font-size: 11px; background: var(--ab-surface-alt); border: 1px solid var(--ab-border); border-radius: var(--ab-radius-ctrl); padding: 1px 5px; cursor: help; }
.ab-huella-larga { font-family: var(--ab-font-mono); font-size: 11px; word-break: break-all; }
.ab-secciones { display: flex; flex-wrap: wrap; gap: var(--ab-e1) var(--ab-e3); margin: 0 0 var(--ab-e4); padding: 0; list-style: none; font-size: 13px; }
.ab-secciones a { color: var(--ab-acento-fuerte); }
.ab-llave { display: inline-block; font-family: var(--ab-font-mono); font-size: 12px; background: var(--ab-acento-suave); border: 1px solid #bcd0e4; padding: 2px 6px; border-radius: var(--ab-radius-ctrl); }
.ab-matriz td.ab-num small { display: block; color: var(--ab-muted); font-size: 10px; }
.ab-posicion { font-weight: 700; font-family: var(--ab-font-mono); }
.ab-senal { border-left: 3px solid var(--ab-aviso); padding-left: var(--ab-e2); margin-bottom: var(--ab-e2); font-size: 13px; }
.ab-senal--alta { border-left-color: var(--ab-error); }
.ab-senal--baja { border-left-color: var(--ab-muted-2); }
.ab-expediente td:first-child { white-space: nowrap; }
.ab-ok { color: var(--ab-pos); font-weight: 600; }
.ab-dos-llaves { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ab-gap); }
@media (max-width: 720px) { .ab-dos-llaves { grid-template-columns: 1fr; } }
.ab-tabla td.ab-largo { white-space: normal; max-width: 420px; }
textarea.ab-ancho-total { min-height: 80px; }
.ab-pre { white-space: pre-wrap; font-family: var(--ab-font-mono); font-size: 12px; background: var(--ab-surface-alt); border: 1px solid var(--ab-border); padding: var(--ab-e3); border-radius: var(--ab-radius-ctrl); overflow-x: auto; }
.ab-guion { margin: 0; padding-left: 20px; font-size: 13px; }
.ab-guion li { margin-bottom: var(--ab-e2); line-height: 1.45; }
.ab-expediente td.ab-largo { word-break: break-word; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------
   Encadena (documento 47). Misma herramienta, otra puerta: la marca lleva
   el verde de lo producido aqui, y las dos marcas de origen se distinguen
   por el texto, no solo por el color.
   --------------------------------------------------------------------- */
.ab-marca--encadena span { color: var(--ab-pos); }
.ab-nacional, .ab-importado {
    display: inline-block;
    padding: 0 var(--ab-e2);
    border: 1px solid;
    font-size: .8rem;
    line-height: 1.5;
    white-space: nowrap;
}
.ab-nacional { color: var(--ab-pos); border-color: var(--ab-ok-bd); background: var(--ab-ok-bg); }
.ab-importado { color: var(--ab-ink-3); border-color: var(--ab-border-strong); background: var(--ab-surface-alt); }
.ab-cobertura { display: flex; height: 10px; border: 1px solid var(--ab-border-strong); background: var(--ab-surface-alt); min-width: 120px; }
.ab-cobertura__nacional { background: var(--ab-pos); }
.ab-cobertura__sin { background: var(--ab-neg); opacity: .35; }
.ab-constancia { border: 2px solid var(--ab-ink-2); padding: var(--ab-e4, 16px); background: var(--ab-surface); }
.ab-constancia__folio { font-family: var(--ab-font-mono); font-size: 1.1rem; }

/* Entrar con un clic: un boton por cuenta de la demostracion. Manda el mismo
   formulario que escribir el correo y la contraseña. */
.ab-demo { list-style: none; margin: var(--ab-e3) 0 0; padding: 0; display: grid; gap: var(--ab-e2); }
.ab-demo form { margin: 0; }
.ab-demo__boton { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--ab-e3); min-height: 44px; padding: var(--ab-e2) var(--ab-e3);
    font: inherit; color: inherit; text-align: left; background: var(--ab-surface); border: 1px solid var(--ab-border); border-radius: var(--ab-radius-ctrl); cursor: pointer; }
.ab-demo__boton:hover { border-color: var(--ab-acento); background: var(--ab-acento-suave); }
.ab-demo__boton:focus-visible { outline: 2px solid var(--ab-acento); outline-offset: 2px; }
.ab-demo__texto { display: grid; gap: 2px; min-width: 0; }
.ab-demo__quien { font-size: 14px; font-weight: 600; color: var(--ab-ink); }
.ab-demo__correo { font-family: var(--ab-font-mono); font-size: 12px; color: var(--ab-muted); overflow-wrap: anywhere; }
.ab-demo__ir { flex: none; font-size: 13px; font-weight: 600; color: var(--ab-acento); }
@media (min-width: 760px) { .ab-demo--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .ab-demo { display: none; } }