/* =============================================================================
   IMPUTACIÓN CONSIGNACIÓN — identidad visual. Scope `.ic-ui`.
   =============================================================================
   docs/RUNBOOK-IMPUTACION-CONSIGNACION.md. Ronda de mockups cerrada el
   23/09/2026: ganó la opción A, «el libro del mes».

   ── EL TRATAMIENTO ───────────────────────────────────────────────────────────
   CABECERA LITE, la de Compras (cp-ui.css), que es su módulo hermano: es una
   PANTALLA-TABLA que se trabaja como una cola. Acento NAVY y nada más; la única
   superficie navy rellena es el botón principal de la barra del armazón.
   CERO TOKENS PROPIOS: todo sale de core/tokens.css.

   ── LAS SEIS FAMILIAS DE COLOR QUE MUEREN ────────────────────────────────────
   índigo (Sincronizar, títulos, botones), esmeralda (Excel, vinculado), azul
   (imputado), rosa (candado CAE, NC), ámbar y rojo. Queda el vocabulario del
   manual §1.1: ámbar lo que falta imputar o pide algo, rojo el descubierto y lo
   que da negativo, verde lo que está bien en planta, navy lo vivo.

   ── ORDEN ────────────────────────────────────────────────────────────────────
    1. EL ARMAZÓN — hub, lienzo, avisos, chips, buscador, la grilla y el pie (etapa 1)
    2. LA TIRA DE OCAs VIVAS y los grupos de «Sin imputar» (etapa 2)
   ============================================================================= */


/* =============================================================================
   1. EL ARMAZÓN
   =============================================================================
   El scope va en un HIJO de `#page-imputacion-consignacion` y no en el propio
   `.page-content`: ese elemento se oculta con el `.hidden` de Tailwind (una
   clase) y cualquier `display` del módulo sobre él le ganaría. Compuesto SIN
   espacio (`.ic-ui.ic-hub`): con espacio no matchea y se cae en silencio. */
.ic-ui.ic-hub {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0; min-width: 0;
}
.ic-ui.ic-hub.hidden { display: none; }

.ic-ui .ic-shell {
    background: var(--canvas);
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex; flex-direction: column; flex: 1; min-height: 0;
}
/* El lienzo no scrollea: el que scrollea es la grilla (`.ic-scroll`). Si
   scrolleara el lienzo, la tira y los chips se irían con la lista. */
.ic-ui .ic-view {
    padding: 16px 0 0; background: var(--canvas);
    flex: 1; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column;
}

/* ── Los avisos: período cerrado, sello CAE, error ─────────────────────────── */
/* Eran tres cajas con borde de 2 px, ícono latiendo y mayúsculas gritadas. Acá
   son franjas con el color del estado y el texto que dice qué hacer. */
.ic-ui .ic-avisos { display: flex; flex-direction: column; gap: 8px; padding: 0 var(--gutter) 12px; }
.ic-ui .ic-avisos:empty { display: none; }
.ic-ui .ic-aviso {
    display: flex; gap: 11px; align-items: flex-start;
    border: 1px solid var(--hair-strong); border-left: 3px solid var(--muted);
    background: var(--surface); border-radius: 10px; padding: 10px 14px;
    font-size: 12.3px; color: var(--muted); line-height: 1.45;
}
.ic-ui .ic-aviso > .material-symbols-outlined { font-size: 20px; margin-top: 1px; }
.ic-ui .ic-aviso b { color: var(--ink); }
.ic-ui .ic-aviso .t { display: block; font-weight: 700; color: var(--ink); font-size: 12.8px; margin-bottom: 1px; }
.ic-ui .ic-aviso.cerrado { border-left-color: var(--navy); }
.ic-ui .ic-aviso.cerrado > .material-symbols-outlined { color: var(--navy); }
.ic-ui .ic-aviso.critico { border-color: var(--crit-hair); border-left-color: var(--crit); background: var(--crit-050); }
.ic-ui .ic-aviso.critico > .material-symbols-outlined,
.ic-ui .ic-aviso.critico .t { color: var(--crit); }
.ic-ui .ic-aviso ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ic-ui .ic-aviso li { color: var(--ink); }
.ic-ui .ic-aviso li .ic-b { margin-right: 6px; }

/* ── La barra: chips de bandeja, buscador y su ámbito ─────────────────────── */
/* Las bandejas comparten el render y sólo cambian un filtro en memoria: son
   CHIPS, no secciones (manual §7). Reemplazan a las cinco tarjetas de colores
   que sólo contaban y a los seis «filtrar…» por columna. */
.ic-ui .ic-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 0 var(--gutter) 12px;
}
.ic-ui .ic-bar .sp { flex: 1; }
.ic-ui .ic-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ic-ui .ic-chip {
    border: 1px solid var(--hair-strong); background: var(--surface);
    border-radius: 999px; padding: 5px 12px;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--muted);
    display: inline-flex; gap: 6px; align-items: center; cursor: pointer;
    transition: color .15s var(--curva), background .15s var(--curva),
                border-color .15s var(--curva), box-shadow .15s var(--curva);
}
.ic-ui .ic-chip:hover, .ic-ui .ic-chip:focus-visible {
    color: var(--navy); border-color: var(--navy-300); background: var(--navy-050); outline: none;
}
.ic-ui .ic-chip[aria-selected="true"] {
    border-color: var(--navy); background: var(--navy-050); color: var(--navy);
    box-shadow: inset 3px 0 0 var(--navy);
}
.ic-ui .ic-chip .c { font-size: 10.5px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.ic-ui .ic-chip[aria-selected="true"] .c { color: var(--navy-500); }
/* La bandeja que pide trabajo lleva su número en ámbar aunque no esté elegida:
   es lo que la pantalla tiene para decir antes de que nadie toque nada. */
.ic-ui .ic-chip.pide .c { color: var(--warn); }

.ic-ui .ic-search { position: relative; flex: 0 1 300px; min-width: 210px; }
.ic-ui .ic-search > .material-symbols-outlined {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    font-size: 18px; color: var(--faint); pointer-events: none;
}
.ic-ui .ic-search input {
    width: 100%; font: inherit; font-size: 12.6px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--hair-strong);
    border-radius: 9px; padding: 8px 12px 8px 36px;
    transition: border-color .15s var(--curva), box-shadow .15s var(--curva);
}
.ic-ui .ic-search input:focus { outline: none; border-color: var(--navy-300); box-shadow: 0 0 0 3px var(--navy-050); }
/* El ámbito es un <span> con texto y negritas: NO es flex (un flex parte la
   oración en pedazos — trampa ya pagada). */
.ic-ui .ic-ambito { font-size: 11.5px; color: var(--faint); line-height: 1.4; max-width: 46ch; }
.ic-ui .ic-ambito b { color: var(--muted); font-weight: 700; }

/* ── La caja y la grilla ───────────────────────────────────────────────────── */
.ic-ui .ic-caja {
    background: var(--surface);
    border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
    box-shadow: var(--e1);
    display: flex; flex-direction: column; flex: 1; min-height: 0;
}
.ic-ui .ic-scroll { overflow: auto; flex: 1; min-height: 0; }
.ic-ui table.ic-g { width: 100%; border-collapse: collapse; font-size: 12.8px; }
.ic-ui table.ic-g th {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface); color: var(--muted);
    font-size: .6rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
    text-align: left; padding: 9px 10px;
    border-bottom: 2px solid var(--ink); white-space: nowrap;
}
.ic-ui table.ic-g td {
    padding: 8px 10px; border-bottom: 1px solid var(--hair);
    color: var(--ink); vertical-align: middle; white-space: nowrap;
}
/* Envuelven sólo el cliente y «qué es»: texto de largo variable. */
.ic-ui table.ic-g td.wrap { white-space: normal; }
.ic-ui table.ic-g td.cli { white-space: normal; min-width: 150px; max-width: 220px; }
.ic-ui table.ic-g td.que { white-space: normal; min-width: 260px; font-size: 12px; color: var(--muted); line-height: 1.38; }
.ic-ui table.ic-g td.que b { color: var(--ink); }
.ic-ui table.ic-g tbody tr { transition: background .13s var(--curva); }
.ic-ui table.ic-g tbody tr:hover { background: var(--navy-050); }
.ic-ui table.ic-g .n { text-align: right; font-variant-numeric: tabular-nums; }
.ic-ui table.ic-g .mono {
    font-family: Consolas, "SF Mono", "Roboto Mono", monospace;
    font-weight: 700; font-variant-numeric: tabular-nums; color: var(--navy);
}
.ic-ui table.ic-g .sub { display: block; font-size: 10.5px; color: var(--faint); font-weight: 400; margin-top: 1px; }
.ic-ui table.ic-g .neg  { color: var(--crit); }
.ic-ui table.ic-g .mutv { color: var(--faint); }
.ic-ui table.ic-g .warnv { color: var(--warn); font-weight: 700; }
.ic-ui table.ic-g .okv  { color: var(--ok); font-weight: 700; }
.ic-ui table.ic-g .navv { color: var(--navy-500); font-weight: 700; }

/* LA FRANJA de la izquierda es el ESTADO de la fila, nunca la bandeja. */
.ic-ui table.ic-g td:first-child { border-left: 3px solid transparent; padding-left: calc(var(--gutter) - 3px); }
.ic-ui table.ic-g th:first-child { padding-left: var(--gutter); }
.ic-ui table.ic-g th:last-child, .ic-ui table.ic-g td:last-child { padding-right: var(--gutter); }
.ic-ui table.ic-g tr.st-pend td:first-child { border-left-color: var(--warn); }
.ic-ui table.ic-g tr.st-par  td:first-child { border-left-color: var(--navy-300); }
.ic-ui table.ic-g tr.st-desc td:first-child { border-left-color: var(--crit); }
.ic-ui table.ic-g tr.st-desc td { background: var(--crit-050); }
.ic-ui table.ic-g tbody tr.st-desc:hover td { background: #fbe3e3; }
.ic-ui table.ic-g tr.st-imp  td:first-child { border-left-color: var(--navy-300); }
.ic-ui table.ic-g tr.st-anul td { color: var(--faint); }
.ic-ui table.ic-g tr.st-anul .mono { color: var(--faint); text-decoration: line-through; }
.ic-ui table.ic-g tr.st-lock td { color: var(--muted); }
.ic-ui table.ic-g tr.st-lock td:first-child { border-left-color: var(--hair-strong); }

/* Pastillas de estado y de candado. */
.ic-ui .ic-b {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
    padding: 1px 7px; border-radius: 5px; border: 1px solid; text-transform: uppercase;
    white-space: nowrap; vertical-align: middle;
}
.ic-ui .ic-b .material-symbols-outlined { font-size: 12px; }
.ic-ui .ic-b.nav { background: var(--navy-050); color: var(--navy-500); border-color: #cfdcf1; }
.ic-ui .ic-b.wrn { background: var(--warn-050); color: var(--warn); border-color: var(--warn-hair); }
.ic-ui .ic-b.ok  { background: var(--ok-050);  color: var(--ok);  border-color: var(--ok-hair); }
.ic-ui .ic-b.neg { background: var(--crit-050); color: var(--crit); border-color: var(--crit-hair); }
.ic-ui .ic-b.mut { background: #f4f6f9; color: var(--faint); border-color: var(--hair-strong); }
.ic-ui table.ic-g td .ic-b + .ic-b { margin-left: 4px; }

/* Acciones de fila: con RÓTULO, contorno fino. */
.ic-ui .ic-min {
    font: inherit; font-size: 11px; font-weight: 600; color: var(--navy);
    background: var(--surface); border: 1px solid var(--hair-strong);
    border-radius: 6px; padding: 3px 9px; cursor: pointer; white-space: nowrap;
    display: inline-block; line-height: 1.4;
    transition: background .13s var(--curva), border-color .13s var(--curva), color .13s var(--curva);
}
.ic-ui .ic-min:hover, .ic-ui .ic-min:focus-visible { background: var(--navy-050); border-color: var(--navy-300); outline: none; }
.ic-ui .ic-min.sug { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.ic-ui table.ic-g .acc { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.ic-ui table.ic-g .nada { font-size: 11px; color: var(--faint); font-style: italic; }

.ic-ui .ic-pie {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 9px var(--gutter); border-top: 1px solid var(--hair);
    background: #fafbfc; font-size: 11.5px; color: var(--muted);
}
.ic-ui .ic-pie b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ic-ui .ic-pie .sp { flex: 1; }
.ic-ui .ic-pie:empty { display: none; }

.ic-ui .ic-vacio { padding: 46px 26px; text-align: center; color: var(--faint); }
.ic-ui .ic-vacio .material-symbols-outlined { font-size: 32px; color: var(--hair-strong); }
.ic-ui .ic-vacio p { margin: 8px 0 0; font-size: 12.5px; }
.ic-ui .ic-vacio p b { color: var(--muted); }

@media (max-width: 640px) {
    .ic-ui .ic-shell { border-radius: 0; box-shadow: none; }
    .ic-ui .ic-avisos, .ic-ui .ic-bar { padding-left: 12px; padding-right: 12px; }
    .ic-ui .ic-search { flex: 1 1 100%; }
    .ic-ui .ic-ambito { max-width: none; }
    .ic-ui table.ic-g th:first-child, .ic-ui table.ic-g td:first-child { padding-left: 12px; }
    .ic-ui table.ic-g th:last-child, .ic-ui table.ic-g td:last-child { padding-right: 12px; }
    .ic-ui .ic-pie { padding: 9px 12px; }
}


/* =============================================================================
   2. LA TIRA DE OCAs VIVAS y los grupos de «Sin imputar» (etapa 2)
   =============================================================================
   Una tarjeta por OCA que puede recibir algo o espera su LP, y dos que agrupan
   (por recibir, liquidadas en el mes). El borde de arriba es el ESTADO: verde
   con azúcar en planta, navy cumplida esperando LP, ámbar si el LP que viene
   sale fuera de lo normal, rojo si da negativo. */
.ic-ui .ic-cap {
    display: flex; align-items: baseline; gap: 10px; padding: 0 var(--gutter) 7px;
    font-size: .6rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--faint);
}
.ic-ui .ic-cap span { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 11px; }
.ic-ui .ic-tira {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px; padding: 0 var(--gutter) 13px;
}
.ic-ui .ic-tira:empty { display: none; }
.ic-ui .ic-oc {
    background: var(--surface); border: 1px solid rgba(16, 32, 64, .06); border-radius: 12px;
    box-shadow: var(--e1); padding: 10px 12px 11px;
    display: flex; flex-direction: column; gap: 5px;
    border-top: 3px solid var(--hair-strong); min-width: 0;
}
.ic-ui .ic-oc.ok  { border-top-color: var(--ok); }
.ic-ui .ic-oc.nav { border-top-color: var(--navy-300); }
.ic-ui .ic-oc.wrn { border-top-color: var(--warn); }
.ic-ui .ic-oc.neg { border-top-color: var(--crit); }
.ic-ui .ic-oc.mut { background: #fafbfc; }
.ic-ui .ic-oc .h { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.ic-ui .ic-oc .num { font-family: Consolas, "SF Mono", monospace; font-weight: 700; color: var(--navy); font-size: 13px; white-space: nowrap; }
.ic-ui .ic-oc .who { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.ic-ui .ic-oc .big { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; color: var(--ink); }
.ic-ui .ic-oc .big small { font-size: .68rem; font-weight: 600; color: var(--faint); margin-left: 3px; }
.ic-ui .ic-oc .ln { font-size: 10.8px; color: var(--muted); display: flex; justify-content: space-between; gap: 6px; }
/* Un renglón por dato: el rótulo cede (elipsis) y la cifra no se parte. */
.ic-ui .ic-oc .ln span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ic-ui .ic-oc .ln b { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.ic-ui .ic-oc .ln b.wrn { color: var(--warn); } .ic-ui .ic-oc .ln b.ok { color: var(--ok); } .ic-ui .ic-oc .ln b.neg { color: var(--crit); }
/* La misma barra del picker del despacho: vendido · libre · a recibir. */
.ic-ui .ic-stk { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--hair); }
.ic-ui .ic-stk span { display: block; height: 100%; }
.ic-ui .ic-stk .lp { background: var(--navy-300); }
.ic-ui .ic-stk .vd { background: #9aa5b5; }
.ic-ui .ic-stk .lb { background: var(--ok); }
.ic-ui .ic-stk .ar { background: repeating-linear-gradient(135deg, #8fb6e0 0 4px, #dbe8f6 4px 8px); }
/* El «queda para gastos» por kilo contra la franja normal del mes. */
.ic-ui .ic-mg { position: relative; height: 8px; border-radius: 999px; background: var(--hair); margin-top: 3px; }
.ic-ui .ic-mg .band { position: absolute; top: 0; bottom: 0; background: #cfdcef; border-radius: 999px; }
.ic-ui .ic-mg .pt { position: absolute; top: -3px; width: 3px; height: 14px; border-radius: 2px; background: var(--ink); margin-left: -1px; }
.ic-ui .ic-mg .pt.wrn { background: var(--warn); } .ic-ui .ic-mg .pt.neg { background: var(--crit); }

/* Los grupos de «Sin imputar»: un renglón que nombra lo que se resuelve igual. */
.ic-ui table.ic-g tr.grp td {
    background: #fafbfd; font-size: 11px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--navy-500); padding: 6px 10px;
    border-bottom: 1px solid var(--hair-strong); position: sticky; top: 31px; z-index: 1;
}
.ic-ui table.ic-g tr.grp td:first-child { padding-left: var(--gutter); border-left-color: transparent; }
.ic-ui table.ic-g tr.grp td span { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: 8px; }
.ic-ui table.ic-g tbody tr.grp:hover { background: none; }

@media (max-width: 640px) {
    .ic-ui .ic-tira, .ic-ui .ic-cap { padding-left: 12px; padding-right: 12px; }
}



/* =============================================================================
   3. LA FICHA — imputar, re-imputar, desimputar y anular par (etapa 3)
   =============================================================================
   Cuelga del <body> y no tiene ancestro del módulo que le preste el scope: el
   compuesto `.ic-ui.ic-velo` va en su propio elemento. Eran cuatro modales
   Tailwind con cabecera índigo y botones de cuatro colores. Ahora una ficha:
   cabecera con qué se toca, cuatro números, y cada OCA candidata dice cuánto
   tiene EN PLANTA y qué le hace el comprobante a su LP (antes → después). */
.ic-ui.ic-velo {
    /* Por encima de la pila de avisos (core/avisos.css, 300): la ficha ancha
       de la cuenta llega hasta la esquina de la pila y sus botones quedaban
       debajo del aviso de pre-cargas (banco cuenta-lp, 27/10/2026). Una ficha
       se abre y se cierra en un rato; el aviso vuelve a verse al cerrarla. */
    position: fixed; inset: 0; z-index: 310;
    background: rgba(8, 20, 40, .55);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    font-size: 13px; color: var(--ink);
}
.ic-ui .ic-ficha {
    background: var(--surface); border-radius: 14px; width: 100%; max-width: 980px;
    max-height: calc(100vh - 32px); display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(8, 20, 40, .35); overflow: hidden;
}
.ic-ui .ic-ficha.chica { max-width: 560px; }
.ic-ui .ic-ficha .fh { padding: 15px 20px 12px; border-bottom: 1px solid var(--hair); display: flex; gap: 16px; align-items: flex-start; }
.ic-ui .ic-ficha .fh .tit { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.ic-ui .ic-ficha .fh .baj { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ic-ui .ic-ficha .fh .x {
    margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--faint);
    border-radius: 8px; padding: 2px; line-height: 0;
}
.ic-ui .ic-ficha .fh .x:hover, .ic-ui .ic-ficha .fh .x:focus-visible { color: var(--ink); background: var(--navy-050); outline: none; }
.ic-ui .ic-ficha .fb { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }

.ic-ui .ic-f4 { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--hair); }
.ic-ui .ic-f4 > div { padding: 9px 16px; border-right: 1px solid var(--hair); min-width: 0; }
.ic-ui .ic-f4 > div:last-child { border-right: 0; }
.ic-ui .ic-f4 .k { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--faint); }
.ic-ui .ic-f4 .v { font-size: 1.08rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ic-ui .ic-f4 .v.wrn { color: var(--warn); }
.ic-ui .ic-f4 .v.neg { color: var(--crit); }
.ic-ui .ic-f4 .d { font-size: .68rem; color: var(--faint); }

.ic-ui .ic-fc { display: grid; grid-template-columns: 290px 1fr; flex: 1; min-height: 0; }
.ic-ui .ic-fc .izq {
    padding: 14px 18px; border-right: 1px solid var(--hair); background: #fafbfd;
    font-size: 12.3px; color: var(--muted); display: flex; flex-direction: column; gap: 9px; line-height: 1.45;
}
.ic-ui .ic-fc .izq p { margin: 0; }
.ic-ui .ic-fc .izq b { color: var(--ink); }
.ic-ui .ic-ficha h5 {
    margin: 0; font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--faint);
}
.ic-ui .ic-fc .der { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ic-ui .ic-ficha .solo { padding: 14px 20px 16px; display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; color: var(--muted); }
.ic-ui .ic-ficha .solo p { margin: 0; line-height: 1.45; }
.ic-ui .ic-ficha .solo b { color: var(--ink); }

/* Una candidata: el radio (o la casilla) ES la fila entera. */
.ic-ui .ic-cand {
    display: grid; grid-template-columns: 18px 150px 1fr 240px; gap: 12px; align-items: center;
    border: 1px solid var(--hair-strong); border-radius: 10px; padding: 9px 12px; cursor: pointer;
    transition: border-color .13s var(--curva), background .13s var(--curva);
}
.ic-ui .ic-cand:hover { border-color: var(--navy-300); background: var(--navy-050); }
.ic-ui .ic-cand:has(input:checked) { border-color: var(--navy); box-shadow: inset 3px 0 0 var(--navy); background: #f7f9fd; }
.ic-ui .ic-cand input { accent-color: var(--navy); margin: 0; }
.ic-ui .ic-cand .o { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ic-ui .ic-cand .o .num { font-family: Consolas, "SF Mono", monospace; font-weight: 700; color: var(--navy); }
.ic-ui .ic-cand .o small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-ui .ic-cand .o .sug { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ok); }
.ic-ui .ic-cand .s { font-size: 11.5px; color: var(--muted); min-width: 0; }
.ic-ui .ic-cand .s b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ic-ui .ic-cand .s .ic-stk { margin-top: 5px; }
.ic-ui .ic-cand .e { font-size: 11.5px; line-height: 1.35; text-align: right; color: var(--muted); }
.ic-ui .ic-cand .e b { font-variant-numeric: tabular-nums; color: var(--ink); }
.ic-ui .ic-cand .e .wrn { color: var(--warn); font-weight: 800; }
.ic-ui .ic-cand .e .neg { color: var(--crit); font-weight: 800; }
.ic-ui .ic-cand .e .ok  { color: var(--ok); font-weight: 800; }
/* Anular par: casilla, comprobante, kg, $. */
.ic-ui .ic-cand.par { grid-template-columns: 18px 1fr 110px 140px; }
.ic-ui .ic-cand.par .n { text-align: right; font-variant-numeric: tabular-nums; }
.ic-ui .ic-cand.par .n.neg { color: var(--crit); }
.ic-ui .ic-cands { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; padding: 1px; }
.ic-ui .ic-cands .nada { font-size: 12px; color: var(--faint); padding: 8px 2px; }

.ic-ui .ic-campo { display: flex; flex-direction: column; gap: 4px; }
.ic-ui .ic-campo input {
    font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--hair-strong); border-radius: 8px;
    font-variant-numeric: tabular-nums; max-width: 220px;
}
.ic-ui .ic-campo input:focus { outline: none; border-color: var(--navy-300); box-shadow: 0 0 0 3px var(--navy-050); }
.ic-ui .ic-tiraw {
    background: var(--warn-050); border: 1px solid var(--warn-hair); color: var(--warn);
    border-radius: 9px; padding: 8px 12px; font-size: 12px; line-height: 1.4;
}
.ic-ui .ic-tiraw b { color: var(--warn); }
.ic-ui .ic-suma { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.ic-ui .ic-suma.cierra { color: var(--ok); }
/* El error de la acción: una tira, no un cartel del sistema. */
.ic-ui .ic-msg:empty { display: none; }
.ic-ui .ic-msg {
    border-radius: 9px; padding: 8px 12px; font-size: 12px; line-height: 1.45; white-space: pre-line;
    background: var(--crit-050); border: 1px solid var(--crit-hair); color: var(--crit);
}
.ic-ui .ic-msg.info { background: var(--navy-050); border-color: #cfdcf1; color: var(--navy-500); }

.ic-ui .ic-ficha .ff {
    display: flex; align-items: center; gap: 10px; padding: 11px 20px;
    border-top: 1px solid var(--hair); background: #fafbfc;
}
.ic-ui .ic-ficha .ff .sp { flex: 1; font-size: 11.5px; color: var(--muted); }
.ic-ui .ic-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px;
    font: inherit; font-size: .82rem; font-weight: 600; white-space: nowrap; cursor: pointer;
    border: 1px solid #d3dce8; background: var(--surface); color: var(--ink);
    transition: background .13s var(--curva), border-color .13s var(--curva);
}
.ic-ui .ic-btn:hover, .ic-ui .ic-btn:focus-visible { background: var(--navy-050); border-color: var(--navy-300); outline: none; }
.ic-ui .ic-btn.pri { background: var(--navy); border-color: var(--navy); color: #fff; }
.ic-ui .ic-btn.pri:hover, .ic-ui .ic-btn.pri:focus-visible { background: var(--navy-500); border-color: var(--navy-500); }
.ic-ui .ic-btn.peligro { color: var(--crit); border-color: var(--crit-hair); }
.ic-ui .ic-btn:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 760px) {
    .ic-ui .ic-fc { grid-template-columns: 1fr; }
    .ic-ui .ic-fc .izq { border-right: 0; border-bottom: 1px solid var(--hair); }
    .ic-ui .ic-f4 { grid-template-columns: repeat(2, 1fr); }
    .ic-ui .ic-cand { grid-template-columns: 18px 1fr; }
    .ic-ui .ic-cand .s, .ic-ui .ic-cand .e { grid-column: 2; text-align: left; }
}
.ic-ui .ic-cand .s .neg { color: var(--crit); font-weight: 800; }
.ic-ui .ic-ficha .mutv { color: var(--faint); }


/* =============================================================================
   4. LA CONCILIACIÓN y la leyenda de la barra (23/09, tras la primera prueba)
   =============================================================================
   El mayor del mes repartido en lo que va a un LP y lo que no. Borde izquierdo
   = estado: verde si todo el mayor está imputado, ámbar si falta. Las partes
   que faltan son botones: llevan a su bandeja. */
.ic-ui .ic-conc {
    margin: 0 var(--gutter) 13px; background: var(--surface);
    border: 1px solid rgba(16, 32, 64, .06); border-left: 3px solid var(--hair-strong);
    border-radius: 12px; box-shadow: var(--e1); padding: 10px 14px;
    display: flex; flex-direction: column; gap: 8px;
}
.ic-ui .ic-conc.ok { border-left-color: var(--ok); }
.ic-ui .ic-conc.wrn { border-left-color: var(--warn); }
.ic-ui .ic-conc .fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ic-ui .ic-conc .fila.kg { border-top: 1px solid var(--hair); padding-top: 8px; font-size: 12px; color: var(--muted); }
.ic-ui .ic-conc .fila.kg b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ic-ui .ic-conc .p { display: flex; flex-direction: column; line-height: 1.2; }
.ic-ui .ic-conc .p .k, .ic-ui .ic-conc .fila.kg > .k {
    font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--faint);
}
.ic-ui .ic-conc .p .v { font-size: 1.02rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.ic-ui .ic-conc .p.tot .v { font-size: 1.15rem; color: var(--navy); }
.ic-ui .ic-conc .p.wrn .v { color: var(--warn); }
.ic-ui .ic-conc .p.neg .v { color: var(--crit); }
.ic-ui .ic-conc .p[data-ir] { cursor: pointer; border-radius: 8px; padding: 2px 6px; margin: -2px -6px; }
.ic-ui .ic-conc .p[data-ir]:hover, .ic-ui .ic-conc .p[data-ir]:focus-visible { background: var(--navy-050); outline: none; }
.ic-ui .ic-conc .op { font-size: 1rem; font-weight: 700; color: var(--faint); }
.ic-ui .ic-conc .sp { flex: 1; }
.ic-ui .ic-conc .est { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.ic-ui .ic-conc .est .material-symbols-outlined { font-size: 18px; }
.ic-ui .ic-conc.ok .est { color: var(--ok); }
.ic-ui .ic-conc.wrn .est { color: var(--warn); }

/* La leyenda de la barra de las tarjetas, una sola vez. */
.ic-ui .ic-leg { display: inline-flex; flex-wrap: wrap; gap: 3px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.ic-ui .ic-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.ic-ui .ic-leg i.lp { background: var(--navy-300); }
.ic-ui .ic-leg i.vd { background: #9aa5b5; }
.ic-ui .ic-leg i.lb { background: var(--ok); }
.ic-ui .ic-leg i.ar { background: repeating-linear-gradient(135deg, #8fb6e0 0 3px, #dbe8f6 3px 6px); }
.ic-ui .ic-cap { flex-wrap: wrap; }

@media (max-width: 640px) {
    .ic-ui .ic-conc { margin-left: 12px; margin-right: 12px; }
}


/* =============================================================================
   5. EMPAREJAR EL AJUSTE (ronda 2, ganó A, 23/09/2026)
   =============================================================================
   La ficha: un control (cruzar / mismo comitente), una regla por OCA con
   dónde está y dónde quedaría —$/kg Y el importe total—, y los intercambios
   tildables. Punto claro = hoy; punto verde = después. */
.ic-ui .ic-emp-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 20px 2px; }
.ic-ui .ic-emp-nota { font-size: 11.5px; color: var(--muted); }
.ic-ui .ic-emp-tot { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); }
.ic-ui .ic-emp-tot b { color: var(--ink); }
.ic-ui .ic-emp-conlp { margin: 0 0 4px; font-size: 11.5px; color: var(--faint); }
.ic-ui .ic-seg { display: inline-flex; border: 1px solid var(--hair-strong); border-radius: 9px; overflow: hidden; }
.ic-ui .ic-seg button {
    font: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; border: 0; cursor: pointer;
    background: var(--surface); color: var(--muted);
}
.ic-ui .ic-seg button + button { border-left: 1px solid var(--hair-strong); }
.ic-ui .ic-seg button[aria-pressed="true"] { background: var(--navy-050); color: var(--navy); box-shadow: inset 0 -2px 0 var(--navy); }
.ic-ui .ic-seg button:focus-visible { outline: 2px solid var(--navy-300); outline-offset: -2px; }
.ic-ui .ic-ant { display: grid; grid-template-columns: 190px 1fr 190px; gap: 14px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 12.3px; }
.ic-ui .ic-ant .o b { font-family: Consolas, "SF Mono", monospace; color: var(--navy); }
.ic-ui .ic-ant .o small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-ui .ic-ant .v { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; line-height: 1.45; }
.ic-ui .ic-ant .v small { font-weight: 600; color: var(--muted); margin-left: 4px; }
.ic-ui .ic-ant .v .wrn { color: var(--warn); } .ic-ui .ic-ant .v .neg { color: var(--crit); } .ic-ui .ic-ant .v .ok { color: var(--ok); }
.ic-ui .ic-reg { position: relative; height: 10px; border-radius: 999px; background: var(--hair); }
.ic-ui .ic-reg .band { position: absolute; top: 0; bottom: 0; background: #cfdcef; border-radius: 999px; }
.ic-ui .ic-reg .pt { position: absolute; top: -4px; width: 4px; height: 18px; border-radius: 2px; margin-left: -2px; background: var(--ink); }
.ic-ui .ic-reg .pt.antes { opacity: .45; }
.ic-ui .ic-reg .pt.antes.wrn { background: var(--warn); } .ic-ui .ic-reg .pt.antes.neg { background: var(--crit); }
.ic-ui .ic-reg .pt.desp { background: var(--ok); opacity: 1; }
.ic-ui .ic-reg .pt.desp.wrn { background: var(--warn); } .ic-ui .ic-reg .pt.desp.neg { background: var(--crit); }
.ic-ui .ic-reg .fl { position: absolute; top: 4px; height: 2px; background: var(--ok); opacity: .55; }
.ic-ui .ic-sw {
    display: grid; grid-template-columns: 18px 1fr 22px 1fr 170px; gap: 12px; align-items: center;
    border: 1px solid var(--hair-strong); border-radius: 10px; padding: 9px 12px; cursor: pointer;
}
.ic-ui .ic-sw:has(input:checked) { border-color: var(--navy); box-shadow: inset 3px 0 0 var(--navy); background: #f7f9fd; }
.ic-ui .ic-sw input { accent-color: var(--navy); margin: 0; }
.ic-ui .ic-sw .leg { font-size: 12px; line-height: 1.35; color: var(--muted); min-width: 0; }
.ic-ui .ic-sw .leg b { color: var(--ink); }
.ic-ui .ic-sw .leg .mono { font-family: Consolas, "SF Mono", monospace; font-weight: 700; color: var(--navy); }
.ic-ui .ic-sw .leg .dir { display: block; font-size: 11px; color: var(--faint); }
.ic-ui .ic-sw .x { font-size: 18px; color: var(--faint); text-align: center; }
.ic-ui .ic-sw .e { font-size: 11.5px; text-align: right; line-height: 1.4; color: var(--muted); }
.ic-ui .ic-sw .e b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* Ronda 3 (24/10/2026): «Qué LP quedan armables» y las jugadas de una pata
   (colocar / netear) en la misma tarjeta que el intercambio. */
.ic-ui .ic-lp { display: grid; grid-template-columns: 160px 1fr 230px; gap: 14px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: 12.3px; }
.ic-ui .ic-lp .o b { font-family: Consolas, "SF Mono", monospace; color: var(--navy); }
.ic-ui .ic-lp .o small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-ui .ic-lp .s { color: var(--muted); line-height: 1.4; font-variant-numeric: tabular-nums; }
.ic-ui .ic-lp .e { text-align: right; font-weight: 700; color: var(--muted); line-height: 1.35; }
.ic-ui .ic-lp .e small { display: block; font-weight: 600; color: var(--faint); font-size: 11px; }
.ic-ui .ic-lp .e.ok { color: var(--ok); } .ic-ui .ic-lp .e.wrn { color: var(--warn); }
.ic-ui .ic-sw.una { grid-template-columns: 18px 1fr 22px 230px; }
.ic-ui .ic-sw .e .ok { color: var(--ok); } .ic-ui .ic-sw .e .wrn { color: var(--warn); } .ic-ui .ic-sw .e .neg { color: var(--crit); }
.ic-ui .ic-emp-sinlugar { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.ic-ui .ic-emp-sinlugar .mono { font-family: Consolas, "SF Mono", monospace; font-weight: 700; color: var(--navy); }

@media (max-width: 760px) {
    .ic-ui .ic-ant { grid-template-columns: 1fr; }
    .ic-ui .ic-ant .v { text-align: left; }
    .ic-ui .ic-lp { grid-template-columns: 1fr; }
    .ic-ui .ic-lp .e { text-align: left; }
    .ic-ui .ic-sw, .ic-ui .ic-sw.una { grid-template-columns: 18px 1fr; }
    .ic-ui .ic-sw .x, .ic-ui .ic-sw .e { grid-column: 2; text-align: left; }
}

/* ── Ronda 4 · la cuenta del LP (27/10/2026, ganó A) ─────────────────────────
   La tarjeta se abre con un clic (ya no lleva `title`); la ficha chica muestra
   la cuenta como tabla concepto · $ · $/kg, con los avisos y «Copiar». */
.ic-ui .ic-oc[data-compra] { cursor: pointer; transition: box-shadow .13s var(--curva), border-color .13s var(--curva); }
.ic-ui .ic-oc[data-compra]:hover, .ic-ui .ic-oc[data-compra]:focus-visible { box-shadow: var(--e2); outline: none; border-color: var(--navy-300); }
.ic-ui .ic-oc { position: relative; }
.ic-ui .ic-oc .ver { margin-top: 2px; font-size: 10.8px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 4px; }
.ic-ui .ic-oc .ver .material-symbols-outlined { font-size: 14px; }
.ic-ui .ic-oc .falta {
    position: absolute; top: -10px; right: 10px; background: var(--warn); color: #fff;
    font-size: 9.5px; font-weight: 800; letter-spacing: .04em; border-radius: 999px; padding: 2px 8px; line-height: 1.3; white-space: nowrap;
}
.ic-ui .ic-tira { padding-top: 6px; }
.ic-ui .ic-cta { width: 100%; border-collapse: collapse; font-size: 12.6px; font-variant-numeric: tabular-nums; }
.ic-ui .ic-cta td { padding: 5px 0; border-bottom: 1px solid var(--hair); vertical-align: baseline; color: var(--ink); }
.ic-ui .ic-cta td.n { text-align: right; white-space: nowrap; font-weight: 600; padding-left: 14px; }
.ic-ui .ic-cta td.k { text-align: right; white-space: nowrap; color: var(--muted); padding-left: 14px; width: 82px; }
.ic-ui .ic-cta td .q { color: var(--faint); font-size: 11px; }
.ic-ui .ic-cta tr.sub td:first-child { padding-left: 16px; color: var(--muted); }
.ic-ui .ic-cta tr.sub td.n { font-weight: 500; }
.ic-ui .ic-cta tr.sum td { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 800; padding-top: 7px; }
.ic-ui .ic-cta tr.sum td.k { font-weight: 800; color: var(--ink); }
.ic-ui .ic-cta tr.lp td { background: #fafbfd; }
.ic-ui .ic-cta .sig { display: inline-block; width: 14px; color: var(--faint); }
.ic-ui .ic-cta .ok { color: var(--ok); } .ic-ui .ic-cta .wrn { color: var(--warn); } .ic-ui .ic-cta .neg { color: var(--crit); }
.ic-ui .ic-ver { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; vertical-align: 1px; }
.ic-ui .ic-ver.ok { background: var(--ok-050); color: var(--ok); border: 1px solid var(--ok-hair); }
.ic-ui .ic-ver.wrn { background: var(--warn-050); color: var(--warn); border: 1px solid var(--warn-hair); }
.ic-ui .ic-ver.neg { background: var(--crit-050); color: var(--crit); border: 1px solid var(--crit-hair); }
/* El aviso de la ficha: ícono al canal, el texto fluye como párrafo
   (un flex partiría la oración con sus negritas). */
.ic-ui .ic-cta-av { position: relative; border-radius: 9px; padding: 9px 12px 9px 36px; font-size: 12px; line-height: 1.42; }
.ic-ui .ic-cta-av p { margin: 0; }
.ic-ui .ic-cta-av > .material-symbols-outlined { position: absolute; left: 11px; top: 9px; font-size: 17px; }
.ic-ui .ic-cta-av.wrn { background: var(--warn-050); border: 1px solid var(--warn-hair); color: #5a3a10; }
.ic-ui .ic-cta-av.wrn > .material-symbols-outlined, .ic-ui .ic-cta-av.wrn b { color: var(--warn); }
.ic-ui .ic-cta-av.neg { background: var(--crit-050); border: 1px solid var(--crit-hair); color: #5a1e1e; }
.ic-ui .ic-cta-av.neg > .material-symbols-outlined, .ic-ui .ic-cta-av.neg b { color: var(--crit); }
.ic-ui .ic-cta-av.ok { background: var(--ok-050); border: 1px solid var(--ok-hair); color: #1f4a37; }
.ic-ui .ic-cta-av.ok > .material-symbols-outlined, .ic-ui .ic-cta-av.ok b { color: var(--ok); }
.ic-ui .ic-ficha .ic-f4 .v small { font-size: .68rem; color: var(--faint); font-weight: 600; }
.ic-ui .ic-ficha .ic-f4 .v.ok { color: var(--ok); }
@media (max-width: 640px) {
    .ic-ui .ic-ficha .ic-f4 { grid-template-columns: 1fr 1fr; }
    .ic-ui .ic-ficha .ic-f4 > div:nth-child(2) { border-right: 0; }
    .ic-ui .ic-ficha .ic-f4 > div:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
    .ic-ui .ic-cta td.k { display: none; }
    .ic-ui .ic-ficha .ff { flex-wrap: wrap; }
    .ic-ui .ic-ficha .ff .sp { flex-basis: 100%; }
}
/* `hidden` pierde contra el display de autor (trampa ya pagada): el botón
   Sincronizar de la cuenta sólo existe cuando hay kilos fuera del snapshot. */
.ic-ui .ic-btn[hidden] { display: none; }
@media (max-width: 640px) {
    .ic-ui .ic-cta td .q { display: block; }
}

/* ── Ronda 5 · la cuenta como la Simulación LP (27/10/2026, ganó B) ──────────
   La ficha de la cuenta es ancha: las facturas del LP a la izquierda, la
   Simulación a la derecha (el modal M1 de LP). Los renglones son los de LP,
   en su orden, con dos decimales; debajo de cada uno, en chico, de dónde sale. */
.ic-ui .ic-ficha.ancha { max-width: 960px; }
.ic-ui .ic-cta.sim td.n { min-width: 150px; }
.ic-ui .ic-cta.sim tr.tot td { border-top: 1px solid var(--hair-strong); border-bottom: 0; font-weight: 800; padding-top: 7px; padding-bottom: 7px; }
.ic-ui .ic-cta.sim tr.gap td { padding-top: 13px; }
.ic-ui .ic-cta.sim tr.ajuste td { padding: 0 0 7px; font-size: 11.4px; color: var(--muted); }
.ic-ui .ic-cta.sim tr.ajuste td:first-child { padding-left: 16px; }
.ic-ui .ic-cta.sim tr.ajuste td.n { font-weight: 700; }
.ic-ui .ic-cta.sim tr.pagar td { border-top: 2px solid var(--navy); border-bottom: 0; padding-top: 9px; font-size: 15px; font-weight: 800; color: var(--navy); }
.ic-ui .ic-cta.sim tr.pagar td .q { color: var(--navy-300); font-weight: 600; }
.ic-ui .ic-ficha .nota { font-size: 11px; color: var(--faint); margin: 0; line-height: 1.4; }
.ic-ui .ic-ficha .ic-f4 .v.navy { color: var(--navy); }
.ic-ui .ic-fl { display: grid; grid-template-columns: 1fr 390px; flex: 1; min-height: 0; }
.ic-ui .ic-fl .izq { padding: 12px 18px 14px; border-right: 1px solid var(--hair); min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ic-ui .ic-fl .der { padding: 12px 18px 14px; background: #fafbfd; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.ic-ui .ic-fl .der .ic-cta td .q { display: block; }
.ic-ui .ic-fac { width: 100%; border-collapse: collapse; font-size: 12.3px; font-variant-numeric: tabular-nums; table-layout: fixed; }
.ic-ui .ic-fac th { text-align: left; font-size: .58rem; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 800; padding: 4px 0 5px; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.ic-ui .ic-fac td { padding: 5px 0; border-bottom: 1px solid var(--hair); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.ic-ui .ic-fac .n { text-align: right; padding-left: 12px; }
.ic-ui .ic-fac .mono { font-family: Consolas, "SF Mono", "IBM Plex Mono", monospace; font-weight: 700; color: var(--navy); }
.ic-ui .ic-fac .parte { color: var(--faint); font-size: 10.5px; font-weight: 500; }
.ic-ui .ic-fac tfoot td { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 800; padding-top: 7px; }
.ic-ui .ic-fac col.f { width: 44px; } .ic-ui .ic-fac col.c { width: 128px; } .ic-ui .ic-fac col.k { width: 70px; } .ic-ui .ic-fac col.p { width: 96px; }
@media (max-width: 640px) {
    /* en el teléfono: las facturas arriba y la Simulación abajo; la columna de
       pesos no reserva ancho (con dos decimales se salía de la ficha, que
       recorta y no scrollea a lo ancho) */
    .ic-ui .ic-cta.sim { font-size: 12px; }
    .ic-ui .ic-cta.sim td.n { min-width: 0; padding-left: 8px; }
    .ic-ui .ic-cta.sim tr.pagar td { font-size: 14px; }
    .ic-ui .ic-fl { grid-template-columns: 1fr; }
    .ic-ui .ic-fl .izq { border-right: 0; border-bottom: 1px solid var(--hair); }
    .ic-ui .ic-fac col.p, .ic-ui .ic-fac .p { display: none; }
}