/* =====================================================================
   ABACO Inversiones — tema
   Va DESPUES de la hoja comun de la suite ABACO (/suite/suite.css: tokens,
   letras, barra de la suite, cabecera, heroe, pie). Aqui solo lo propio, con
   los colores, radios y letras de la suite.

   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.

   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: las de la suite, que viajan dentro del producto
       (publico/suite/fuentes): Public Sans, Newsreader para los titulos e
       IBM Plex Mono para las cifras. Si no cargan, las del sistema. */
    --ab-font-sans: var(--font-letra);
    --ab-font-mono: var(--font-cifras);

    /* Superficies y texto */
    --ab-canvas: #f3f5f8;
    --ab-surface: #ffffff;
    --ab-surface-alt: #f4f7fb;
    --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.
       Con la suite ABACO pasa al «apagado» comun, #5b6270, que da algo mas. */
    --ab-muted: #5b6270;
    /* 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: #2f6fb0;

    /* Semanticos */
    --ab-pos: #1d7a4d;
    --ab-neg: #b1400f;
    --ab-aviso: #92400e;
    --ab-aviso-bg: #fdf3e2;
    --ab-aviso-bd: #f1d9b0;
    --ab-error: #9b2c2c;
    --ab-error-bg: #fbeaea;
    --ab-error-bd: #efc4c4;
    --ab-ok-bg: #e6f3ec;
    --ab-ok-bd: #bfe0cd;

    /* 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: 40px;
    --ab-radius-tile: 12px;
    --ab-radius-ctrl: 8px;
    --ab-gap: var(--ab-e4);
    --ab-pad-page: var(--ab-e5);
    --ab-pad-card: var(--ab-e4);
    /* Las tablas de la cartera y de los ciclos son densas: con 1200 px las
       columnas de texto se parten en cuatro y cinco lineas. Se conserva el
       ancho de siempre y la suite (cabecera, heroe, pie) lo toma tambien, para
       que el contenido siga alineado con la marca. */
    --ab-ancho-max: 1280px;
    --contenedor: 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-family: var(--font-titular); font-weight: 500; font-size: 34px; line-height: 1.2; letter-spacing: -0.01em; }
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; }
/* :where() deja el subrayado sin peso: los enlaces de la barra, la cabecera
   y el pie de la suite, que se declaran sin subrayado, no lo cogen. */
a:where(:hover) { text-decoration: underline; }

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

/* --- 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; }

/* --- El marco comun de la suite: lo que este tema le ajusta ----------
   La barra, la cabecera, la banda de demostracion, el heroe y el pie son
   los de suite.css. Las secciones del rol van en su fila de papeles. */
.ab-solo-movil, .ab-papeles .ab-solo-movil { display: none; }
.ab-cuenta .ab-avisos { gap: 6px; }
/* La cuenta cede sitio antes que desbordar: el nombre se recorta, y en
   pantallas medianas la etiqueta del rol se queda en la fila de secciones. */
.ab-cuenta { flex: 0 1 auto; min-width: 0; }
.ab-cuenta__nombre { min-width: 0; }
.ab-cuenta .ab-insignia { flex: none; }
@media (max-width: 1023px) { .ab-cuenta .ab-insignia { display: none; } }
.ab-heroe__nota { max-width: 40em; }
.ab-pagina > .ab-heroe:first-child { margin-top: calc(-1 * var(--ab-pad-page)); }
.ab-pagina > .ab-heroe + * { margin-top: var(--ab-e6); }

/* La etiqueta del rol en las pantallas de administracion. */
.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);
}

/* --- 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);
    /* suite.css le da 15px/24px a .ab-pagina; la altura de linea va en
       proporcion, o el texto de 11px de un pie de tarjeta saldria a 24px. */
    font-size: 15px;
    line-height: 1.5;
}
.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; }
/* suite.css deja SIN MARGEN y en gris todo parrafo de una tarjeta, y sin
   margen sus h3 (17px). Aqui las tarjetas llevan texto corrido: se les
   devuelve lo de este tema, clase por clase. */
.ab-tarjeta p { margin: 0 0 var(--ab-e3); color: inherit; }
.ab-tarjeta p.ab-sub { margin: 0; color: var(--ab-muted); }
.ab-tarjeta p.ab-separador { margin-top: var(--ab-e3); }
.ab-tarjeta p.ab-nota--aviso { color: var(--ab-aviso); }
.ab-tarjeta p.ab-aviso-fila__titulo { margin: 0 0 2px; }
.ab-tarjeta p.ab-aviso-fila__cuerpo { margin: 0; color: var(--ab-ink-2); }
.ab-tarjeta p.ab-aviso-fila__meta { margin: var(--ab-e1) 0 0; color: var(--ab-muted); }
.ab-tarjeta h3 { margin-bottom: var(--ab-e3); font-size: 15px; line-height: 1.25; font-weight: 600; }

/* 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 {
    /* suite.css usa este nombre para una fila flexible de enlace y flecha;
       aqui es una nota de texto corrido. */
    display: block;
    font-weight: 400;
    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;
}
/* Aqui .ab-cifra es una cifra dentro del texto (la pinta resultado()); en
   suite.css es una tarjeta de cifra, con marco y sombra. */
span.ab-cifra { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.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.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); }
/* En suite.css, .ab-sangrado es el heroe que ocupa todo el ancho de la
   ventana. Aqui sigue siendo el texto citado. */
.ab-sangrado:not(.ab-heroe) { width: auto; margin-left: 0; margin-right: 0; }
.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 ------------------------------------------------------ */
/* El boton sin modificador es el SECUNDARIO de la suite (blanco, letra
   marino); el principal lleva --principal. En suite.css es al reves, asi
   que el aspecto se fija aqui sin pisar los modificadores que usan la
   cabecera y el heroe (--secundario, --fantasma, --claro, --contorno,
   --chico, --grande). La altura es minima, no fija: con puntero grueso
   sube a 44 px. */
.ab-boton {
    height: auto;
    min-height: var(--ab-control-h);
    padding: 0 var(--ab-e4);
    border-radius: var(--ab-radius-ctrl);
    gap: var(--ab-e2);
}
.ab-boton:where(:not(.ab-boton--principal, .ab-boton--fantasma, .ab-boton--claro, .ab-boton--contorno)) {
    background: var(--ab-surface);
    color: var(--ab-acento);
    border-color: var(--borde-control);
}
.ab-boton:where(:not(.ab-boton--principal, .ab-boton--fantasma, .ab-boton--claro, .ab-boton--contorno)):hover { background: var(--marino-50); color: var(--ab-acento-fuerte); }
.ab-boton:hover { text-decoration: none; }
.ab-boton--principal { background: var(--ab-acento); border-color: var(--ab-acento); color: #fff; }
.ab-boton--principal:hover { background: var(--ab-acento-fuerte); border-color: var(--ab-acento-fuerte); color: #fff; }
.ab-boton--grande { min-height: 48px; }
.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); color: var(--ab-error); }
.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: 13px; padding: 0 var(--ab-e3); min-height: 32px; }
/* 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)); }
/* suite.css le pone un margen inferior de 16px a .ab-campo: aqui los separa
   la rejilla (.ab-campos), y el margen se sumaria. */
.ab-campo { display: flex; flex-direction: column; gap: var(--ab-e1); min-width: 0; margin: 0; }
.ab-campo input:is([type="checkbox"], [type="radio"]) { width: auto; height: auto; padding: 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="email"], input[type="password"], input[type="number"], input[type="date"], input[type="search"], select, textarea {
    height: auto;
    min-height: var(--ab-control-h);
    padding: 0 var(--ab-e3);
    /* El borde de un control tiene que verse: el de la suite llega a 3:1. */
    border: 1px solid var(--borde-control);
    border-radius: var(--ab-radius-ctrl);
    background: var(--ab-surface);
    color: var(--ab-ink);
    font: inherit;
    font-size: 15px;
    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; }

/* =====================================================================
   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: 27px; }
    .ab-pagina__acciones { margin-left: 0; width: 100%; }
    .ab-pagina__acciones .ab-boton { flex: 1 1 auto; }
}

/* En el movil, la cabecera con sesion deja los avisos y «Salir»; cambiar
   de rol pasa a la fila de secciones. */
@media (max-width: 640px) {
    .ab-cuenta .ab-solo-ancho { display: none; }
    .ab-papeles .ab-solo-movil { display: block; }
}

/* 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-papeles a { padding-top: var(--ab-e3); padding-bottom: 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-cabecera, .ab-papeles, .ab-pagina__acciones, .ab-pie { display: none; }
    body { background: #fff; }
    .ab-tarjeta { border-color: #999; box-shadow: none; break-inside: avoid; }
    .ab-banda-demo { border-bottom: 2px solid #000; color: #000; }
}