/* DISENO NUEVO (fase 4). Piloto en Fichas el 08-10-2026; Cristian lo aprobo ese mismo dia y se
 * extendio a todos los modulos.
 *
 * Referencia: la app de Cobranza de Juan, elegida por Cristian (docs/DISENO.md). Todo vive bajo
 * `.diseno-nuevo`: una pantalla lo pide con el bloque `clase_main` y cargando esta hoja. Si una
 * pantalla se ve mal, se le sacan esas dos lineas y vuelve al diseno anterior sin tocar las demas.
 *
 * Dos capas: primero lo COMUN a todas las pantallas (paleta, titulos, tarjetas, cifras, tablas,
 * botones, campos, modales), y al final lo propio de Fichas (clases nd-*).
 *
 * Como funciona: primero REDEFINE las variables semanticas de :root (texto, borde, superficie,
 * primario, estados) con la paleta nueva, asi las piezas comunes (tarjeta, tabla, boton) cambian
 * solas adentro de la pantalla piloto. Despues ajusta lo que la paleta sola no cambia: tipografia,
 * espacios, radios, sombra, foco y estados. Ningun color se escribe a mano: todos vienen de :root
 * (lo vigila scripts/regression_diseno_tokens.py).
 *
 * El menu lateral NO esta aca: vive en base.html, fuera de <main class="diseno-nuevo">, y sus
 * reglas estan en style.css (seccion MENU LATERAL, 10-10-2026).
 */

.diseno-nuevo {
    --color-fondo: var(--nube-50);
    --color-superficie: var(--blanco);
    --color-superficie-suave: var(--nube-50);
    --color-superficie-hundida: var(--nube-100);
    --color-texto: var(--tinta-700);
    --color-texto-fuerte: var(--tinta-900);
    --color-texto-secundario: var(--tinta-500);
    --color-texto-suave: var(--tinta-500);
    --color-texto-tenue: var(--tinta-400);
    --color-borde: var(--nube-300);
    --color-borde-suave: var(--nube-200);
    --color-borde-fuerte: var(--nube-300);
    --color-primario: var(--cobalto-600);
    --color-primario-hover: var(--cobalto-700);
    --color-exito: var(--bosque-700);
    --color-exito-texto: var(--bosque-700);
    --color-exito-fondo: var(--bosque-50);
    --color-error: var(--carmin-600);
    --color-error-texto: var(--carmin-600);
    --color-error-fondo: var(--carmin-50);
    --color-alerta: var(--miel-700);
    --color-alerta-texto: var(--miel-700);
    --color-alerta-fondo: var(--miel-50);
    --color-info: var(--cobalto-600);
    --color-info-texto: var(--cobalto-700);
    --color-info-fondo: var(--cobalto-50);
    --color-info-borde: var(--cobalto-200);
    --nd-radio: 15px;
    --nd-radio-control: 9px;
    --nd-sombra: var(--sombra-nueva);
    --nd-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    font-family: var(--nd-fuente);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-texto);
}

/* El foco de teclado se ve, con el color de la marca de accion. El del navegador (1px) se pierde. */
.diseno-nuevo :focus-visible {
    outline: 2px solid var(--color-primario);
    outline-offset: 2px;
}


/* =============================================================== 1. LO COMUN A TODAS LAS PANTALLAS */

/* --- titulos ----------------------------------------------------------------------------------
   El titulo de la pantalla es el h1 (o el h2 suelto) que va directo en el contenedor. */
.diseno-nuevo > h1,
.diseno-nuevo > h1.section-title {
    margin: 8px 0 6px; font-size: 26px; font-weight: 630; letter-spacing: -0.6px; line-height: 1.2;
    color: var(--color-texto-fuerte);
}
/* 56 pantallas usan un h2 como titulo: el PRIMERO va del tamano del de Fichas; los siguientes son
   titulos de seccion. */
.diseno-nuevo > h2:first-of-type:not(.section-title) {
    margin: 8px 0 6px; font-size: 26px; font-weight: 630; letter-spacing: -0.6px; line-height: 1.2;
    color: var(--color-texto-fuerte);
}
.diseno-nuevo > h2:not(:first-of-type, .section-title) {
    margin: 28px 0 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.2px;
    color: var(--color-texto-fuerte);
}
.diseno-nuevo .section-title {
    margin: 28px 0 10px; font-size: 16px; font-weight: 600; letter-spacing: -0.2px;
    color: var(--color-texto-fuerte);
}
.diseno-nuevo .card :is(h2, h3):not(.nd-producto) {
    font-size: 16px; font-weight: 600; letter-spacing: -0.2px; color: var(--color-texto-fuerte);
}
.diseno-nuevo .text-muted { color: var(--color-texto-suave); font-size: 13px; }
.diseno-nuevo > p.text-muted { font-size: 13.5px; line-height: 1.6; max-width: 80ch; }

/* --- superficies ------------------------------------------------------------------------------ */
.diseno-nuevo .card {
    border: 1px solid var(--color-borde-suave);
    border-radius: var(--nd-radio);
    box-shadow: var(--nd-sombra);
    padding: 22px 24px;
    margin-bottom: 18px;
}
/* El primer titulo de la tarjeta no suma su margen al relleno: quedaban 50 px arriba y 24 al lado. */
.diseno-nuevo .card > :first-child { margin-top: 0; }

/* --- cifras de arriba: sin caja, separadas por una linea fina, el rotulo arriba (como en la
   app de Juan y en piel.css). El HTML pone el numero primero; column-reverse lo da vuelta sin
   tocar las 10 plantillas que las usan. */
.diseno-nuevo .kpi-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0;
    margin: 0 0 26px; padding: 18px 0; background: transparent;
    border-top: 1px solid var(--color-borde); border-bottom: 1px solid var(--color-borde);
}
.diseno-nuevo .kpi-card {
    display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px;
    min-width: 0; padding: 2px 22px; margin: 0;
    background: transparent; box-shadow: none; border-radius: 0;
    border-left: 1px solid var(--color-borde);
}
.diseno-nuevo .kpi-card:first-child { border-left: 0; padding-left: 0; }
.diseno-nuevo .kpi-card .kpi-value {
    font-size: 28px; font-weight: 580; letter-spacing: -0.8px; line-height: 1.15;
    color: var(--color-texto-fuerte); font-variant-numeric: tabular-nums;
}
.diseno-nuevo .kpi-card .kpi-label { font-size: 12px; color: var(--color-texto-suave); }
/* el pie va bajo el numero: con column-reverse, order -1 lo deja abajo */
.diseno-nuevo .kpi-card .kpi-pie { order: -1; margin-top: 0; font-size: 12px; color: var(--color-texto-suave); }
.diseno-nuevo .kpi-card.alerta .kpi-value { color: var(--color-error-texto); }

/* --- tablas ------------------------------------------------------------------------------------ */
.diseno-nuevo table:not(.nd-datos) {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde-suave);
    border-radius: 12px;
    box-shadow: var(--nd-sombra);
}
.diseno-nuevo table:not(.nd-datos) th {
    background: var(--color-superficie); color: var(--color-texto-suave);
    font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
    padding: 10px 12px; border-bottom: 1px solid var(--color-borde);
}
.diseno-nuevo table:not(.nd-datos) td {
    font-size: 13.5px; padding: 10px 12px; color: var(--color-texto);
    border-bottom: 1px solid var(--color-borde-suave);
}
.diseno-nuevo table:not(.nd-datos) tbody tr:last-child > * { border-bottom: 0; }
.diseno-nuevo table:not(.nd-datos) tr:hover td { background: var(--color-superficie-suave); }
/* Adentro de una tarjeta o un modal la tabla no lleva su propia caja: seria una caja en otra. */
.diseno-nuevo :is(.card, dialog, .cmp-modal-caja) table:not(.nd-datos) {
    border: 0; border-radius: 0; box-shadow: none;
}

/* --- etiquetas de estado ----------------------------------------------------------------------- */
.diseno-nuevo .badge { border-radius: 999px; font-size: 11px; font-weight: 600; padding: 2px 9px; }
.diseno-nuevo .badge.ok { background: var(--color-exito-fondo); color: var(--color-exito-texto); }
.diseno-nuevo .badge.warn { background: var(--color-alerta-fondo); color: var(--color-alerta-texto); }
.diseno-nuevo .badge.danger { background: var(--color-error-fondo); color: var(--color-error-texto); }

/* --- botones -----------------------------------------------------------------------------------
   Los botones normales. NO los especiales, que tienen su propio dibujo y se deformarian: la X de
   los modales, copiar, el menu de acciones de Compras, los de reporte, los de Control Directivo. */
.diseno-nuevo :is(button:not(.copy-btn, .modal-close, .popup-close, .cmp-modal-cerrar, .cmp-btn,
        .cdir-boton-ok, .cdir-boton-aviso, .btn-sutil, .btn-sec, .rep-btn, .cmp-enlace, .cmp-menu-panel *), .nd-boton) {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 36px; padding: 7px 15px;
    border: 1px solid var(--color-primario);
    border-radius: var(--nd-radio-control);
    background: var(--color-primario); color: var(--color-texto-invertido);
    font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.diseno-nuevo :is(button:not(.copy-btn, .modal-close, .popup-close, .cmp-modal-cerrar, .cmp-btn,
        .cdir-boton-ok, .cdir-boton-aviso, .btn-sutil, .btn-sec, .rep-btn, .cmp-enlace, .cmp-menu-panel *), .nd-boton):hover {
    background: var(--color-primario-hover); border-color: var(--color-primario-hover);
}
.diseno-nuevo :is(button.secondary, .nd-boton-secundario) {
    background: var(--color-superficie); color: var(--color-texto); border-color: var(--color-borde);
}
.diseno-nuevo :is(button.secondary, .nd-boton-secundario):hover {
    background: var(--color-superficie-hundida); border-color: var(--color-borde);
}
.diseno-nuevo button.danger { background: var(--color-error); border-color: var(--color-error); }
/* El numero de la nota de venta en una tabla: pinchable y con forma de texto, no de boton. Es un
   <button> para que el teclado lo alcance, y sin esto el diseno nuevo se lo come y lo dibuja como
   un boton azul gigante que se lleva el ancho de la columna. */
.diseno-nuevo .cmp-enlace {
    display: inline; min-height: 0; padding: 0; border: 0; background: none;
    color: var(--color-primario); font: inherit; font-weight: 600;
    text-decoration: underline; cursor: pointer;
}
.diseno-nuevo .cmp-enlace:hover { color: var(--color-primario-hover); }

/* La tabla compacta, dentro del diseno nuevo. Va aca porque `.diseno-nuevo table:not(.nd-datos)
   td` le gana a cualquier regla de style.css: misma especificidad y esta hoja carga despues.
   Es para una tabla que de verdad no cabe -la supervision de compras lleva 15 columnas-, no para
   apretar las demas. */
.diseno-nuevo .cmp-tabla.cmp-tabla-compacta td,
.diseno-nuevo .cmp-tabla.cmp-tabla-compacta th { padding: 7px 8px; }

/* Las dos primeras columnas -los dias y el numero de nota de venta- se quedan quietas al deslizar
   la tabla a lo ancho.

   Por que hace falta: con 13 columnas -ya agrupadas- la tabla mide 1.172px y el contenedor da
   1.285 a 1.600px de pantalla, 1.051 a 1.366 y 965 a 1.280 (medido el 03-11-2026). O sea que en
   un notebook normal NO cabe, y no hay recorte razonable que la haga caber sin sacar columnas que
   la Direccion pidio. Deslizar esta bien; llegar a la columna Proveedor sin saber de que nota de
   venta se esta hablando, no.

   El ancho de la primera columna se fija para que la segunda sepa donde pegarse: con `width: 1%`
   dependia del texto y el borde izquierdo bailaba. */
/* `border-collapse: collapse` y `position: sticky` no se llevan: con collapse el navegador
   ignora el sticky de las celdas y la columna se va igual que las demas. Por eso esta tabla
   separa los bordes; el de abajo lo dibuja cada celda, asi que se ve igual. */
.diseno-nuevo .cmp-tabla-fija { border-collapse: separate; border-spacing: 0; overflow: visible; }
/* El producto no se deja apretar: aplastado a 100px parte el nombre en cuatro lineas y la fila
   crece justo lo que se queria evitar. Prefiere deslizar, que para eso las dos primeras columnas
   se quedan quietas. */
.diseno-nuevo .cmp-tabla-fija td:nth-child(3),
.diseno-nuevo .cmp-tabla-fija th:nth-child(3) { min-width: 195px; }
/* NO achicar la letra de esta tabla. Se probo el 03-11-2026 -0.82rem en td y th- y la tabla salio
   MAS ancha, no mas angosta: 1.232px contra 1.172px. Con `table-layout: auto` el ancho no lo fija
   la letra sino como se reparte el espacio entre columnas, y con texto mas chico el nombre del
   producto deja de envolver y se estira. Dos intentos antes de ese fallaron ademas por
   especificidad (`.diseno-nuevo table:not(.nd-datos) td` vale dos clases y dos elementos y le
   gana a casi todo), asi que la primera version parecia no hacer nada cuando en realidad lo que
   hacia era empeorarlo. */
/* El proveedor tampoco: apretado a 106px partia "DHL GLOBAL FORWARDING CHILE S.A." en tres lineas
   y esa fila quedaba 20px mas alta que las demas. */
.diseno-nuevo .cmp-tabla-fija td:nth-child(11),
.diseno-nuevo .cmp-tabla-fija th:nth-child(11) { min-width: 140px; }
/* Los botones de la fila, UNO SOBRE OTRO (Cristian, 03-11-2026). Apilados cuestan alto, y por eso
   el 02-11 se habian puesto al lado: estiraban todas las filas a 84px. Ahora no cuestan nada,
   porque la celda del producto ya ocupa dos lineas en casi todas las filas y la columna tiene
   espacio de sobra; de paso la columna se angosta, que es justo lo que le faltaba a la tabla.
   Se apilan con flex y no con `display: block` para que los dos midan igual de ancho. */
.diseno-nuevo .cmp-tabla-fija .cmp-acciones {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; white-space: nowrap;
}
.diseno-nuevo .cmp-tabla-fija .cmp-acciones .cmp-btn {
    display: inline-flex; justify-content: center; margin: 0;
}
.diseno-nuevo .cmp-tabla-fija th:first-child,
.diseno-nuevo .cmp-tabla-fija td:first-child { width: 46px; position: sticky; left: 0; z-index: 2; }
.diseno-nuevo .cmp-tabla-fija th:nth-child(2),
.diseno-nuevo .cmp-tabla-fija td:nth-child(2) { position: sticky; left: 46px; z-index: 2; }
/* Una celda pegada es transparente por omision y deja ver pasar las de atras. */
.diseno-nuevo .cmp-tabla-fija td:first-child,
.diseno-nuevo .cmp-tabla-fija td:nth-child(2) { background: var(--color-superficie); }
.diseno-nuevo .cmp-tabla-fija th:first-child,
.diseno-nuevo .cmp-tabla-fija th:nth-child(2) { background: var(--color-superficie-suave); z-index: 3; }
/* El borde que separa lo quieto de lo que se desliza, solo cuando de verdad se deslizo. */
.diseno-nuevo .cmp-tabla-fija th:nth-child(2),
.diseno-nuevo .cmp-tabla-fija td:nth-child(2) { border-right: 1px solid var(--color-borde-suave); }
/* Los titulos se quedan arriba al bajar por la tabla. Sin esto, a la fila 30 ya no se sabe que
   columna es cual y hay que subir a mirar (Cristian, 03-11-2026: *"al bajar en el detalle de la
   app se pierden los titulos y no se sabe que dato es"*).

   `position: sticky` se pega al contenedor que hace de scroll. Si la tabla scrollea con la
   PAGINA, ese contenedor es la ventana... salvo que un ancestro tenga overflow distinto de
   visible, y aca el envoltorio tiene `overflow-x: auto` para deslizar a lo ancho. Por eso el
   envoltorio lleva ademas una altura maxima (.cmp-tabla-alto): le da al sticky donde pegarse y
   de paso deja los filtros y las cifras siempre a la vista. */
.diseno-nuevo .cmp-tabla-fija thead th { position: sticky; top: 0; z-index: 4; }
/* Las dos esquinas -quietas a la izquierda Y arriba- tienen que pasar por encima de las dos. */
.diseno-nuevo .cmp-tabla-fija thead th:first-child,
.diseno-nuevo .cmp-tabla-fija thead th:nth-child(2) { z-index: 5; }
/* Con `border-collapse: separate` el borde de abajo del titulo se va con la celda al deslizar y
   deja ver las filas pasando por debajo. La sombra viaja pegada al titulo. */
.diseno-nuevo .cmp-tabla-fija thead th { box-shadow: 0 1px 0 var(--color-borde-suave); }
.diseno-nuevo .cmp-tabla-alto { max-height: calc(100vh - 230px); min-height: 420px; overflow: auto; }
/* Un boton que no se puede usar tiene que verse que no se puede usar. Antes era igual al que si. */
.diseno-nuevo button:not(.cmp-btn, .modal-close, .copy-btn):disabled,
.diseno-nuevo button:not(.cmp-btn, .modal-close, .copy-btn):disabled:hover {
    background: var(--color-superficie-hundida); color: var(--color-texto-suave);
    border: 1px dashed var(--color-borde); cursor: not-allowed;
}
/* El enlace con forma de boton: misma forma que los botones y el mismo azul de accion (era verde,
   un color que en el diseno nuevo quedo para "pagado / entregado", no para apretar). En una fila
   de tabla va como secundario: una accion por fila no compite con la de la pantalla. */
.diseno-nuevo .btn-link {
    display: inline-flex; align-items: center; min-height: 36px; padding: 7px 14px;
    border-radius: var(--nd-radio-control); font-size: 13.5px; font-weight: 600;
    background: var(--color-primario); color: var(--color-texto-invertido);
}
.diseno-nuevo .btn-link:hover { background: var(--color-primario-hover); }
.diseno-nuevo td .btn-link {
    min-height: 32px; padding: 5px 12px; font-size: 13px;
    background: var(--color-superficie); color: var(--color-texto-fuerte);
    border: 1px solid var(--color-borde);
}
.diseno-nuevo td .btn-link:hover { background: var(--color-superficie-hundida); }
/* Los de Compras: mas chicos, porque van en cada fila de una tabla. */
.diseno-nuevo .cmp-btn {
    border-radius: 8px; padding: 5px 11px; font-size: 12.5px; font-weight: 600;
    border-color: var(--color-borde); color: var(--color-texto);
}
.diseno-nuevo .cmp-btn-primario { color: var(--color-texto-invertido); border-color: var(--color-primario); }
.diseno-nuevo .cmp-btn-activo { background: var(--tinta-900); border-color: var(--tinta-900); color: var(--color-texto-invertido); }
.diseno-nuevo .cmp-btn-peligro { color: var(--color-texto-invertido); border-color: var(--color-error); }
/* Tiene que repetirse aqui: `.diseno-nuevo .cmp-btn` fija color y borde con mas especificidad y
   en una hoja que carga despues, asi que la variante declarada solo en style.css se pierde. Es
   la misma trampa que ya se habia pagado con .cmp-tabla-compacta. */
.diseno-nuevo .cmp-btn-alerta { border-color: var(--amarillo-500); color: var(--amarillo-900); }

/* --- enlaces sueltos: los que no traen clase salian en el azul y el subrayado del navegador. Los
   que tienen clase (botones, pildoras, "Volver") traen su propio dibujo y no se tocan. */
.diseno-nuevo :is(a:not([class]), a[class^="u-"]) { color: var(--color-primario); text-decoration: none; }
.diseno-nuevo :is(a:not([class]), a[class^="u-"]):hover { color: var(--color-primario-hover); text-decoration: underline; }

/* --- boton secundario (.btn-sec). No tenia regla en ninguna hoja: salia igual que el principal, y
   en una tabla quedaba un boton azul fuerte por fila ("Traspasar" seis veces, "Eliminar" igual que
   "Guardar"). Blanco con borde: la accion de la fila se ve, pero no compite con la de la pantalla. */
.diseno-nuevo button.btn-sec {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 34px; padding: 6px 13px;
    border: 1px solid var(--color-borde); border-radius: var(--nd-radio-control);
    background: var(--color-superficie); color: var(--color-texto-fuerte);
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.diseno-nuevo button.btn-sec:hover { background: var(--color-superficie-hundida); }

/* --- campos ------------------------------------------------------------------------------------ */
.diseno-nuevo label {
    font-size: 12px; font-weight: 600; color: var(--color-texto-secundario); margin-bottom: 6px;
}
.diseno-nuevo :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=file], [type=submit], [type=button], [type=range]), select, textarea) {
    border: 1px solid var(--color-borde);
    border-radius: var(--nd-radio-control);
    padding: 7px 10px;
    font-size: 13.5px;
    color: var(--color-texto-fuerte);
    background-color: var(--color-superficie);
}
.diseno-nuevo :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=file], [type=submit], [type=button], [type=range]), select) {
    min-height: 36px;
}
.diseno-nuevo :is(input, select, textarea):focus { border-color: var(--color-primario); }

/* --- modales ----------------------------------------------------------------------------------- */
.diseno-nuevo dialog.modal,
.diseno-nuevo .cmp-modal-caja {
    border: 1px solid var(--color-borde-suave);
    border-radius: 16px;
}

/* --- asa para arrastrar columnas (Armar informe): es la unica pista de que se puede arrastrar,
   y en gris 300 quedaba en 1,5:1. tinta-400 da 4,67:1 sobre blanco. ---------------------------- */
.diseno-nuevo .inf-col-asa { color: var(--tinta-400); }

/* ==================================================================== 3. LO PROPIO DE COBRANZA
   (10-10-2026). Solo forma: ningun dato se esconde. El desglose por factura de la etapa
   (.cob-etapa-mix) y los avisos (.cob-aviso, .cob-porque) se dejan como estan a proposito. */

/* Filtro por etapa de la cartera: selector segmentado (patron 5 de docs/DISENO.md) en vez de una
   fila de pildoras con la activa en azul acero. */
.diseno-nuevo .cob-etapas {
    display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 6px 0 14px;
    background: var(--color-superficie-hundida); border: 1px solid var(--color-borde-suave);
    border-radius: 11px;
}
.diseno-nuevo .cob-etapa {
    gap: 7px; padding: 6px 13px; border: 0; border-radius: 8px;
    color: var(--color-texto-secundario); font-size: 13px; font-weight: 500;
}
.diseno-nuevo .cob-etapa:hover { color: var(--color-texto-fuerte); }
.diseno-nuevo .cob-etapa-activa {
    background: var(--color-superficie); color: var(--color-texto-fuerte);
    box-shadow: var(--sombra-1);
}
.diseno-nuevo .cob-etapa .cob-etapa-n { color: var(--color-texto-suave); font-size: 12px; }
.diseno-nuevo .cob-etapa-activa .cob-etapa-n { color: var(--color-primario); }

/* "Ver: Todos / cada cobradora" de la jefatura: el mismo selector, no un boton verde. */
.diseno-nuevo .cob-ver-opcion {
    display: inline-flex; align-items: center; min-height: 32px; margin: 0; padding: 5px 12px;
    border: 1px solid var(--color-borde); border-radius: 8px;
    background: var(--color-superficie); color: var(--color-texto-secundario);
    font-size: 13px; font-weight: 500;
}
.diseno-nuevo .cob-ver-opcion:hover { background: var(--color-superficie-hundida); color: var(--color-texto-fuerte); }
.diseno-nuevo .cob-ver-opcion.cob-ver-activa {
    background: var(--color-info-fondo); border-color: var(--color-info-borde);
    color: var(--color-primario); font-weight: 600;
}

/* Las cifras de "Como se comporta" (ficha del cliente): del peso de las demas cifras de arriba. */
.diseno-nuevo .cob-porta-valor {
    font-size: 24px; font-weight: 580; letter-spacing: -0.5px; color: var(--color-texto-fuerte);
}
.diseno-nuevo .cob-porta-rotulo { font-size: 12px; }
.diseno-nuevo .cob-porta-pie { font-size: 12px; color: var(--color-texto-suave); }

/* El enlace de cada fila de la cartera: en una linea, no partido en "Ver / ficha". */
.diseno-nuevo .cob-ver-ficha { white-space: nowrap; font-weight: 600; text-decoration: none; color: var(--color-primario); }
.diseno-nuevo .cob-ver-ficha:hover { text-decoration: underline; }

/* ============================================ 4. LISTAS DE COMPRA AGIL Y LICITACIONES; COTIZACION
   (10-10-2026). Las dos listas comparten el dibujo (.lic-row). */

/* La lista va en una superficie blanca, como la de LicitaLAB: una fila por compra, separadas por
   una linea suave. Antes eran lineas sueltas sobre el fondo gris. */
.diseno-nuevo .lic-rows {
    margin-top: 10px; border: 1px solid var(--color-borde-suave); border-radius: 12px;
    background: var(--color-superficie); box-shadow: var(--nd-sombra); overflow: hidden;
}
.diseno-nuevo .lic-row { padding: 12px 18px; border-bottom: 1px solid var(--color-borde-suave); }
.diseno-nuevo .lic-row:last-child { border-bottom: 0; }
/* "Nada por aqui por ahora": con aire, no pegado al borde de la caja. */
.diseno-nuevo .lic-rows > p { margin: 0; padding: 16px 18px; color: var(--color-texto-suave); }
.diseno-nuevo .lic-row:hover { background: var(--color-superficie-suave); }
.diseno-nuevo .lic-row-cierre { color: var(--color-texto-fuerte); font-size: 13px; }
.diseno-nuevo :is(.lic-row-cierre, .lic-row-dias).urgente { color: var(--color-error-texto); }
.diseno-nuevo .lic-row-sub { font-size: 12.5px; color: var(--color-texto-suave); }
.diseno-nuevo .lic-row-titulo { color: var(--color-texto-fuerte); }

/* Una sola accion fuerte por fila: Cotizar. Detalle, Ver items, Ver cotizacion, No postular y
   Reportar van como secundarios del mismo tamano. Antes eran dos o tres botones verdes iguales. */
.diseno-nuevo :is(.lic-row-acciones, .lic-row-botones) :is(.btn-link, button) {
    min-height: 32px; margin: 0; padding: 5px 12px; font-size: 13px; font-weight: 600;
    background: var(--color-superficie); color: var(--color-texto-fuerte);
    border: 1px solid var(--color-borde); border-radius: 8px; text-decoration: none;
}
.diseno-nuevo :is(.lic-row-acciones, .lic-row-botones) :is(.btn-link, button):hover {
    background: var(--color-superficie-hundida); border-color: var(--color-borde);
}
.diseno-nuevo :is(.lic-row-acciones, .lic-row-botones) .lic-accion-principal {
    background: var(--color-primario); color: var(--color-texto-invertido); border-color: var(--color-primario);
}
.diseno-nuevo :is(.lic-row-acciones, .lic-row-botones) .lic-accion-principal:hover {
    background: var(--color-primario-hover); border-color: var(--color-primario-hover);
}

/* La ventana de cotizacion: sus tarjetas y los numeros de paso traen colores escritos en un
   <style> de la plantilla; aca toman la paleta nueva sin tocar ese bloque (ni su JavaScript). */
.diseno-nuevo .cotca-card {
    border-color: var(--color-borde-suave); border-radius: var(--nd-radio);
    box-shadow: var(--nd-sombra); padding: 20px 24px;
}
.diseno-nuevo .cotca-card h3 { font-size: 16px; font-weight: 600; color: var(--color-texto-fuerte); }
.diseno-nuevo .cotca-paso-num { background: var(--color-primario); font-weight: 650; }
.diseno-nuevo .cotca-campo label { color: var(--color-texto-secundario); font-size: 12px; font-weight: 600; }

/* ================================================================== 5. LO PROPIO DE COMPRAS (10-10-2026)
   El selector Compras / Gestion / Fuera de plazo / Ingresadas era una caja azul marino con el
   texto en azul encima: "Gestion" se leia a 2,6:1. Ahora es el selector segmentado claro de la
   cartera de cobranza (patron 5 de docs/DISENO.md). */
.diseno-nuevo .cmp-modulos {
    display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
    background: var(--color-superficie-hundida); border: 1px solid var(--color-borde-suave);
    border-radius: 11px;
}
.diseno-nuevo .cmp-modulos a {
    padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;
    color: var(--color-texto-secundario);
}
.diseno-nuevo .cmp-modulos a:hover { background: transparent; color: var(--color-texto-fuerte); }
/* El titulo de cada pantalla de Compras va dentro de .cmp-encabezado (junto al selector), asi que
   la regla del titulo suelto no lo alcanzaba: salia mas chico que en el resto de la app. */
.diseno-nuevo .cmp-encabezado h2 {
    margin: 8px 0 6px; font-size: 26px; font-weight: 630; letter-spacing: -0.6px; line-height: 1.2;
    color: var(--color-texto-fuerte);
}
.diseno-nuevo .cmp-modulos a.activo {
    background: var(--color-superficie); color: var(--color-texto-fuerte); font-weight: 600;
    box-shadow: var(--sombra-1);
}

/* ======================================================== 6. LO PROPIO DE CONTROL DIRECTIVO (10-10-2026)
   Las cuatro cifras de Supervision eran cajas blancas sueltas: ahora la fila de cifras de toda la
   app (rotulo arriba, numero grande, linea fina entre columnas). */
.diseno-nuevo .cdir-resumen {
    gap: 0; margin: 0 0 22px; padding: 16px 0;
    border-top: 1px solid var(--color-borde); border-bottom: 1px solid var(--color-borde);
}
.diseno-nuevo .cdir-dato {
    display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px;
    padding: 2px 22px; background: transparent; box-shadow: none; border-radius: 0;
    border-left: 1px solid var(--color-borde);
}
.diseno-nuevo .cdir-dato:first-child { border-left: 0; padding-left: 0; }
.diseno-nuevo .cdir-dato-valor {
    font-size: 28px; font-weight: 580; letter-spacing: -0.8px; color: var(--color-texto-fuerte);
    font-variant-numeric: tabular-nums;
}
.diseno-nuevo .cdir-dato-nombre { margin: 0; font-size: 12px; }
.diseno-nuevo .cdir-dato-alerta .cdir-dato-valor { color: var(--color-error-texto); }
/* "Semana anterior / siguiente" del informe: enlaces con forma de boton secundario (a.secondary no
   tenia regla y salian como texto subrayado). */
.diseno-nuevo a.secondary {
    display: inline-flex; align-items: center; min-height: 34px; padding: 6px 13px;
    border: 1px solid var(--color-borde); border-radius: var(--nd-radio-control);
    background: var(--color-superficie); color: var(--color-texto-fuerte);
    font-size: 13px; font-weight: 600; text-decoration: none;
}
.diseno-nuevo a.secondary:hover { background: var(--color-superficie-hundida); }

/* ===================================================== 7. PANEL DE DIRECTORIO (10-10-2026)
   Tablas de cifras (Ventas, Notas de venta, Estado de Resultados, Cobranza SCM): los numeros a la
   derecha y con cifras del mismo ancho, para que las unidades de mil queden una bajo la otra y un
   mes se compare con otro de un vistazo (patron 6 de docs/DISENO.md). La primera columna es el
   rotulo de la fila y queda a la izquierda. */
.diseno-nuevo .nd-tabla-cifras :is(th, td):not(:first-child) {
    text-align: right; font-variant-numeric: tabular-nums;
}
.diseno-nuevo .nd-tabla-cifras td:first-child { min-width: 150px; }

/* ========================================================== 8. ANALISIS MP (10-10-2026)
   Las opciones de Mas vendidos (canal, ranking, periodo) y las presentaciones de Buscar: la elegida
   salia como una etiqueta verde chica y las otras como botones azules grandes, o sea que lo que
   mas resaltaba era justo lo que NO estaba elegido. Ahora son pildoras iguales y la elegida va en
   el fondo de accion. */
.diseno-nuevo .mp-opcion {
    display: inline-flex; align-items: center; min-height: 30px; margin: 0 4px 4px 0; padding: 4px 12px;
    border: 1px solid var(--color-borde); border-radius: 999px;
    background: var(--color-superficie); color: var(--color-texto-secundario);
    font-size: 12.5px; font-weight: 500; text-decoration: none;
}
.diseno-nuevo a.mp-opcion:hover { background: var(--color-superficie-hundida); color: var(--color-texto-fuerte); }
.diseno-nuevo .mp-opcion-activa {
    background: var(--color-info-fondo); border-color: var(--color-info-borde);
    color: var(--color-primario); font-weight: 600;
}

/* ======================================================================= 2. LO PROPIO DE FICHAS */

.diseno-nuevo .nd-encabezado { margin: 8px 0 24px; }
.diseno-nuevo .nd-rotulo {
    margin: 0 0 8px; font-size: 10px; font-weight: 650; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--color-texto-suave);
}
.diseno-nuevo .nd-titulo {
    margin: 0; font-size: 28px; font-weight: 630; letter-spacing: -0.8px; line-height: 1.2;
    color: var(--color-texto-fuerte);
}
.diseno-nuevo .nd-bajada {
    margin: 8px 0 0; max-width: 72ch; font-size: 13.5px; line-height: 1.6;
    color: var(--color-texto-suave);       /* 4,85:1 sobre el fondo; antes 4,39:1 */
}

.diseno-nuevo .nd-buscador { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.diseno-nuevo .nd-buscador-campo { flex: 1; min-width: 260px; }
.diseno-nuevo .nd-buscador textarea { padding: 10px 12px; font-size: 14px; min-height: 76px; }
.diseno-nuevo .nd-buscador-acciones { display: flex; gap: 8px; }
.diseno-nuevo :is(.nd-buscador, .nd-acciones) :is(button, .nd-boton) { min-height: 40px; padding: 8px 16px; }

.diseno-nuevo .nd-producto {
    margin: 0 0 6px; font-size: 18px; font-weight: 650; letter-spacing: -0.25px;
    color: var(--color-texto-fuerte);
}
.diseno-nuevo .nd-nota { margin: 0; font-size: 12.5px; color: var(--color-texto-suave); }

/* Los datos del registro: rotulo chico a la izquierda, dato a la derecha, sin la columna gris. */
.diseno-nuevo .nd-datos {
    width: 100%; margin: 16px 0 0; border-collapse: collapse;
    background: transparent; box-shadow: none; border-radius: 0;
}
.diseno-nuevo .nd-datos th,
.diseno-nuevo .nd-datos td {
    padding: 10px 0; border-bottom: 1px solid var(--color-borde-suave);
    background: transparent; font-size: 14px; vertical-align: baseline;
}
.diseno-nuevo .nd-datos tr:last-child th,
.diseno-nuevo .nd-datos tr:last-child td { border-bottom: 0; }
.diseno-nuevo .nd-datos tr:hover td { background: transparent; }
.diseno-nuevo .nd-datos th {
    width: 220px; padding-right: 16px; font-size: 10.5px; font-weight: 650; letter-spacing: .06em;
    text-transform: uppercase; color: var(--color-texto-suave);
}
.diseno-nuevo .nd-datos td { color: var(--color-texto-fuerte); }
.diseno-nuevo .nd-datos .nd-cifra { font-variant-numeric: tabular-nums; }

.diseno-nuevo .nd-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 20px; }

/* Un estado que pide algo de la persona: fondo y texto del mismo tono, sin borde de color. */
.diseno-nuevo .nd-aviso {
    margin: 14px 0 0; padding: 10px 14px; border-radius: var(--nd-radio-control);
    background: var(--color-alerta-fondo); color: var(--color-alerta-texto); font-size: 13px;
}
/* Un error que frena la tarea (la glosa no se reconoce): mismo aviso, en el tono de error. */
.diseno-nuevo .nd-aviso-nota { font-size: .85em; color: var(--color-texto-suave);
                               margin: 4px 0 0; max-width: 60ch; }
.diseno-nuevo .nd-aviso-error { background: var(--color-error-fondo); color: var(--color-error-texto); }

/* El reporte: el enlace del desplegable alcanza 44px de alto para el dedo (antes 16px). */
/* EL REPORTE SE VE COMO BOTON (21-10-2026, pedido de Cristian: "que se note mas como un boton o
   algo mas notorio"). Era un enlace de 13,5px en gris azulado al pie de la pagina, y la pantalla
   donde vive es justo donde la vendedora se encuentra con un resultado malo.

   Sigue siendo un <summary> de un <details>: el formulario queda plegado y el acuse de envio se
   ve adentro al volver (ver el comentario de fichas.html). Lo unico que cambia es que el
   disparador parece lo que es - una accion - en vez de una nota al pie.

   `list-style: none` + `::-webkit-details-marker` sacan el triangulito en los dos motores; el
   estado abierto/cerrado se indica con el signo de la izquierda, que no depende del navegador. */
.diseno-nuevo .nd-reporte > summary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; min-height: 44px; box-sizing: border-box;
    border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-2);
    background: var(--color-superficie);
    color: var(--color-texto); font-size: 14px; font-weight: 600;
    cursor: pointer; list-style: none;
}
.diseno-nuevo .nd-reporte > summary::-webkit-details-marker { display: none; }
.diseno-nuevo .nd-reporte > summary:hover {
    background: var(--color-fondo); border-color: var(--color-primario);
    color: var(--color-primario);
}
.diseno-nuevo .nd-reporte > summary:focus-visible {
    outline: 2px solid var(--color-primario); outline-offset: 2px;
}
/* El signo de la izquierda: "!" cerrado, "x" abierto. Va en un <span> del propio summary para
   que un lector de pantalla no lo lea como parte del texto. */
.diseno-nuevo .nd-reporte > summary .nd-reporte-signo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex: none; border-radius: 50%;
    background: var(--color-primario); color: var(--blanco);
    font-size: 13px; font-weight: 700;
}
.diseno-nuevo .nd-reporte[open] > summary {
    border-color: var(--color-primario); color: var(--color-primario);
}

/* ============================================================================= telefono */
@media (max-width: 760px) {
    .diseno-nuevo > h1, .diseno-nuevo > h2:first-of-type:not(.section-title), .diseno-nuevo .nd-titulo { font-size: 24px; }
    .diseno-nuevo .card { padding: 18px; }
    /* dos cifras por fila: un monto de 13 caracteres a 28px no cabe en 170px y se montaba sobre el
       de al lado */
    .diseno-nuevo .kpi-card { padding: 2px 14px; }
    .diseno-nuevo .kpi-card .kpi-value { font-size: 21px; overflow-wrap: anywhere; }
    .diseno-nuevo :is(button:not(.copy-btn, .modal-close, .popup-close, .cmp-modal-cerrar, .cmp-btn,
            .cdir-boton-ok, .cdir-boton-aviso, .btn-sutil, .btn-sec, .rep-btn, .cmp-enlace, .cmp-menu-panel *), .nd-boton) { min-height: 44px; }
    .diseno-nuevo .kpi-card { padding: 8px 0; border-left: 0; }
    .diseno-nuevo :is(.nd-buscador, .nd-acciones) :is(button, .nd-boton) { min-height: 44px; }
    .diseno-nuevo .nd-buscador-acciones { width: 100%; }
    .diseno-nuevo .nd-buscador-acciones > * { flex: 1; }
    .diseno-nuevo .nd-datos th { width: 42%; }
}

/* ------------------------------------------------- Ficha del cliente: acciones e historial
   Pedido de Cristian (12-10-2026): los botones tambien arriba, porque con 294 facturas hay que
   bajar mucho para llegar a ellos. */
.diseno-nuevo .cob-acciones { display: flex; align-items: center; justify-content: space-between;
                              gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.diseno-nuevo .cob-acciones-botones { display: flex; gap: 8px; flex-wrap: wrap; }

/* LA DEUDA TOTAL. Mismo lenguaje visual que "Como se comporta", para que se lean como dos
   resumenes del mismo cliente y no como dos pantallas distintas. */
.diseno-nuevo .cob-deuda { display: flex; gap: 10px; flex-wrap: wrap; }
.diseno-nuevo .cob-deuda-dato { flex: 1 1 140px; min-width: 0; padding: 10px 12px;
                                border: 1px solid var(--color-borde-suave);
                                border-radius: var(--radio-3);
                                background: var(--color-superficie-suave); }
.diseno-nuevo .cob-deuda-total { border-color: var(--color-borde-fuerte);
                                 background: var(--color-superficie); }
.diseno-nuevo .cob-deuda-rotulo { font-size: 0.75rem; color: var(--color-texto-suave);
                                  text-transform: uppercase; letter-spacing: .03em; }
.diseno-nuevo .cob-deuda-valor { font-size: 1.15rem; font-weight: 700;
                                 font-variant-numeric: tabular-nums; margin-top: 2px; }
.diseno-nuevo .cob-deuda-total .cob-deuda-valor { color: var(--color-primario); }
.diseno-nuevo .cob-deuda-pie { font-size: 0.75rem; color: var(--color-texto-suave); }

/* EL HISTORIAL EN VENTANA. Ancho casi completo porque lo que se lee es el texto de la
   conversacion, que es largo. */
.diseno-nuevo .cob-dialogo {
    width: min(1100px, 94vw); max-height: 86vh; border: 1px solid var(--color-borde);
    border-radius: var(--radio-3); padding: 16px 18px; background: var(--color-superficie);
    color: var(--color-texto); overflow: auto;
}
.diseno-nuevo .cob-dialogo::backdrop { background: var(--color-velo); }
.diseno-nuevo .cob-dialogo-cabecera { display: flex; align-items: center;
                        justify-content: space-between;
                        gap: 12px; position: sticky; top: -16px; padding: 6px 0 10px;
                        background: var(--color-superficie); }
@media (max-width: 760px) { .diseno-nuevo .cob-deuda-dato { flex: 1 1 100%; } }

/* --------------------------------------------- Pagos por revisar: tabla compacta
   Pedido de Cristian (12-10-2026): el detalle se salia de la pantalla. Lo que la hacia ancha no
   eran las columnas sino el texto libre -la glosa del banco y la lista de facturas anotadas-,
   que no tiene largo maximo. Se recorta a una linea y el texto completo queda en el `title`. */
.diseno-nuevo .cob-compacta th,
.diseno-nuevo .cob-compacta td { padding: 6px 8px; vertical-align: top; }
.diseno-nuevo .cob-compacta td.num { text-align: right; font-variant-numeric: tabular-nums; }
.diseno-nuevo .cob-una-linea { max-width: 34ch; overflow: hidden; text-overflow: ellipsis;
                               white-space: nowrap; }

/* El numero de guia de FedEx en la ficha: con ese numero se busca el cedible firmado en el
   programa de FedEx. Monoespaciado porque se lee digito por digito para copiarlo. */
.diseno-nuevo .fx-guia { font-family: var(--fuente-mono); font-size: 0.72rem;
                         color: var(--color-texto-suave); }

/* Las combinaciones de facturas que suman exacto el monto de un abono (app/calce_propuesto.py).
   Se leen de un vistazo y se eligen con un boton: son una propuesta, no un calce. */
.diseno-nuevo .cob-propuesta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                               padding: 8px 10px; margin: 6px 0;
                               border: 1px solid var(--color-borde-suave);
                               border-radius: var(--radio-3);
                               background: var(--color-superficie-suave); }
.diseno-nuevo .cob-propuesta-detalle { display: flex; gap: 14px; flex-wrap: wrap;
                                       font-size: 0.85rem;
                                       font-variant-numeric: tabular-nums; }

/* LA BARRA DEL FLUJO SEMANAL (20-10-2026).
   El grafico ES la tabla: una barra por fila, con su ancho en porcentaje de la semana mas
   grande. Se lee igual que un grafico, se imprime, y no agrega una libreria entera para dibujar
   seis barras. El ancho lo calcula el servidor: una division por cero en Jinja no falla, deja la
   pantalla a medias sin decir por que.

   DOS REGLAS DE LA CASA QUE SE PISARON AL ESCRIBIR ESTO, y que la suite de diseno caza: el color
   va como variable de :root y no escrito a mano -si no, la proxima vez que cambie la paleta esta
   barra se queda con el azul viejo sin dar ningun error-, y la regla va bajo .diseno-nuevo o se
   aplicaria a toda la aplicacion. */
.diseno-nuevo .flujo-barra {
    height: 10px;
    min-width: 2px;
    border-radius: 5px;
    background: var(--azul-600);
    display: block;
}

/* LA BARRA DE MARCADO MULTIPLE DE COMPRA AGIL (20-10-2026).
   Aparece sola al marcar la primera casilla y se queda pegada abajo: quien marca cuarenta no
   tiene que subir a buscar el boton cada vez. */
.diseno-nuevo .ca-barra-grupo {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: var(--color-superficie);
    box-shadow: var(--sombra-3);
}

.diseno-nuevo .ca-casilla {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    flex: none;
    cursor: pointer;
}

/* LAS FACTURAS DE UN ENCARGO (SUP-04, 20-10-2026). Un cliente puede deber decenas de documentos
   y la lista va DENTRO de un formulario corto: sin alto maximo empuja el boton "Enviar el
   encargo" fuera de la pantalla y el formulario parece no tener boton. */
.diseno-nuevo .enc-facturas {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 190px; overflow-y: auto;
    border: 1px solid var(--color-borde); border-radius: var(--radio-2);
    padding: 6px 8px; background: var(--color-superficie);
}
.diseno-nuevo .enc-factura {
    display: grid; grid-template-columns: auto 1fr auto; gap: 8px;
    align-items: center; padding: 3px 2px; cursor: pointer; font-size: .88rem;
}
.diseno-nuevo .enc-factura:hover { background: var(--color-fondo); }

/* LOS DOCUMENTOS DE UN EXPEDIENTE (EXP-01, 22-10-2026). Van en una fila propia bajo el caso: son
   de largo variable y una columna con cinco archivos descuadra la tabla entera. */
.diseno-nuevo .cob-fila-docs > td { padding-top: 0; border-top: 0; }
.diseno-nuevo .cob-docs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.diseno-nuevo .cob-doc {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 12px; border: 1px solid var(--color-borde); border-radius: var(--radio-2);
    background: var(--color-superficie); text-decoration: none; font-size: .86rem;
    max-width: 320px;
}
.diseno-nuevo .cob-doc:hover { border-color: var(--color-primario); background: var(--color-fondo); }
.diseno-nuevo .cob-adjuntar > summary { cursor: pointer; font-size: .86rem; padding: 6px 0; }

/* LAS GESTIONES DEL CASO (06-11-2026). Van bajo la factura reclamada, en la pantalla de Facturas
   reclamadas. Se leen como una bitacora corta -lo ultimo primero- y no como filas de tabla: son
   historia, no trabajo pendiente.

   CERRADAS AL ENTRAR desde el 07-11-2026: con 161 casos abiertos la pantalla era un muro de
   texto. El resumen esta en la columna; esto es el detalle y se pide. */
/* LA TABLA DE RANGOS DEL SEMAFORO DE PAGO, al pie de la cartera (07-11-2026). Plegada: se
   consulta una vez y despues el color se entiende solo. */
.diseno-nuevo .cob-leyenda-pago > summary {
    font-size: .86rem; color: var(--color-texto-suave); padding: 6px 0;
}
.diseno-nuevo .cob-leyenda-pago table { max-width: 820px; }

.diseno-nuevo .cob-gestiones-caso { margin-bottom: 10px; }
.diseno-nuevo .cob-gestiones-caso > summary { padding: 4px 0; }
.diseno-nuevo .cob-gestiones-detalle {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 6px; padding-left: 10px;
    border-left: 2px solid var(--color-borde);
}
.diseno-nuevo .cob-gestion-linea { display: flex; flex-direction: column; gap: 1px; }

/* Devoluciones por revisar, arriba de la tabla de supervision.
   Deliberadamente NO parecen filas de la tabla: son una pregunta al supervisor, no trabajo
   pendiente. Confundir las dos cosas fue el error del 03-11-2026. */
.diseno-nuevo .cmp-devoluciones {
    border: 1px solid var(--color-borde-suave);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--color-superficie-suave);
}
.diseno-nuevo .cmp-devoluciones-titulo { margin: 0 0 4px; font-size: 1rem; }
.diseno-nuevo .cmp-devoluciones-bajada { margin: 0 0 12px; font-size: .85rem; opacity: .8; }
.diseno-nuevo .cmp-devolucion {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-top: 1px solid var(--color-borde-suave);
}
.diseno-nuevo .cmp-devolucion-datos { flex: 1 1 420px; font-size: .9rem; line-height: 1.45; }
.diseno-nuevo .cmp-devolucion-marca { display: block; margin-top: 4px; font-size: .82rem; opacity: .85; }
.diseno-nuevo .cmp-devolucion-marca-urgente { opacity: 1; font-weight: 600; }
.diseno-nuevo .cmp-devolucion-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.diseno-nuevo .cmp-devolucion-acciones input[type="text"] { min-width: 260px; }
/* La devolucion que NO tiene nota de credito: el cliente todavia la espera, y es la unica del
   bloque que pide una decision. Se marca con un filo en el borde y no con color de fondo: el
   fondo la haria competir con los avisos de error de la pantalla, y esto no es un error. */
.diseno-nuevo .cmp-devolucion-urgente {
    border-left: 3px solid var(--color-alerta);
    padding-left: 10px;
}

/* ------------------------------------------------------------------ TABLERO DE COBRANZA (tb-*)
 *
 * 06-11-2026. Replica la disposicion del tablero que Juan Sherman armo afuera -la mora grande a
 * la izquierda, los tramos a la derecha, y abajo los dos paneles- con el fondo de esta
 * aplicacion en vez del negro. Pedido textual de Cristian.
 *
 * Ningun color escrito a mano: todos salen de :root, que es lo que vigila
 * scripts/regression_diseno_tokens.py.
 */
.diseno-nuevo .tb-rotulo {
    margin: 0 0 2px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--color-texto-suave);
}
.diseno-nuevo .tb-selector { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.diseno-nuevo .tb-selector label { color: var(--color-texto-suave); }

/* Dos tarjetas por fila: la primera angosta y la segunda ancha, igual que la referencia. En
   pantalla chica se apilan, que es lo unico que la referencia no resuelve. */
.diseno-nuevo .tb-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
    gap: 16px;
    margin-bottom: 16px;
    align-items: start;
}
@media (max-width: 900px) { .diseno-nuevo .tb-fila { grid-template-columns: 1fr; } }
/* La fila de abajo se da vuelta: la tabla de morosos necesita el ancho -son nombres largos de
   corporaciones municipales- y el grafico de columnas se defiende en poco espacio. */
.diseno-nuevo .tb-fila-ancha-izq { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 900px) { .diseno-nuevo .tb-fila-ancha-izq { grid-template-columns: 1fr; } }

.diseno-nuevo .tb-card { padding: 18px 20px; }
.diseno-nuevo .tb-card-titulo { margin: 0; font-size: 16px; font-weight: 600; }
.diseno-nuevo .tb-card-nota {
    margin: 2px 0 14px;
    font-size: .82rem;
    color: var(--color-texto-suave);
}
.diseno-nuevo .tb-card-pie {
    margin: 12px 0 0;
    font-size: .85rem;
    color: var(--color-texto-suave);
    font-variant-numeric: tabular-nums;
}
.diseno-nuevo .tb-card-pie-largo { line-height: 1.5; margin-top: 14px; }
.diseno-nuevo .tb-sin-dato {
    margin: 10px 0 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--color-texto-suave);
}

/* La cifra que se ve desde la puerta. */
.diseno-nuevo .tb-cifra-gigante {
    margin: 4px 0 6px;
    font-size: 52px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--color-texto-fuerte);
    font-variant-numeric: tabular-nums;
}
.diseno-nuevo .tb-pastilla {
    display: inline-block;
    margin: 0;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
}
.diseno-nuevo .tb-pastilla-mal { color: var(--color-error-texto); background: var(--color-error-fondo); }
.diseno-nuevo .tb-pastilla-bien { color: var(--color-exito-texto); background: var(--color-exito-fondo); }

/* El medidor con la marca de la meta encima. */
.diseno-nuevo .tb-medidor {
    position: relative;
    height: 10px;
    margin-top: 14px;
    border-radius: 999px;
    background: var(--color-superficie-hundida);
    overflow: hidden;
}
.diseno-nuevo .tb-medidor-relleno { height: 100%; border-radius: 999px; }
.diseno-nuevo .tb-medidor-relleno.tb-mal { background: var(--color-error); }
.diseno-nuevo .tb-medidor-relleno.tb-bien { background: var(--color-exito); }
/* La marca va POR ENCIMA del relleno: tapada por la barra, la meta deja de verse justo cuando
   mas importa, que es cuando la mora la paso. */
.diseno-nuevo .tb-medidor-meta {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 14px;
    background: var(--color-texto-fuerte);
}
.diseno-nuevo .tb-medidor-escala {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: .7rem;
    color: var(--color-texto-suave);
}
.diseno-nuevo .tb-medidor-rotulo { position: absolute; transform: translateX(-50%); white-space: nowrap; }

/* Las barras horizontales por tramo. */
.diseno-nuevo .tb-barras { display: flex; flex-direction: column; gap: 10px; }
.diseno-nuevo .tb-barra-fila {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 150px;
    gap: 12px;
    align-items: center;
}
.diseno-nuevo .tb-barra-nombre { font-size: .82rem; color: var(--color-texto); }
.diseno-nuevo .tb-barra-pista {
    height: 22px;
    border-radius: 6px;
    background: var(--color-superficie-hundida);
    overflow: hidden;
}
.diseno-nuevo .tb-barra { display: block; height: 100%; border-radius: 6px; }
.diseno-nuevo .tb-tono-sano { background: var(--color-exito); }
.diseno-nuevo .tb-tono-leve { background: var(--turquesa-700); }
.diseno-nuevo .tb-tono-medio { background: var(--ambar-500); }
.diseno-nuevo .tb-tono-alto { background: var(--ambar-700); }
.diseno-nuevo .tb-tono-critico { background: var(--color-error); }
.diseno-nuevo .tb-barra-monto {
    text-align: right;
    font-size: .85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-texto-fuerte);
}
.diseno-nuevo .tb-barra-monto small {
    display: block;
    font-weight: 400;
    font-size: .72rem;
    color: var(--color-texto-suave);
}

.diseno-nuevo .tb-tabla { margin-top: 4px; }
.diseno-nuevo .tb-tabla td { font-size: .85rem; }

/* El grafico de columnas por mes. */
.diseno-nuevo .tb-columnas {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 150px;
    padding-top: 8px;
}
.diseno-nuevo .tb-columna {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    gap: 5px;
}
.diseno-nuevo .tb-columna-barra {
    display: block;
    width: 100%;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background: var(--color-primario);
}
.diseno-nuevo .tb-columna-rotulo { font-size: .7rem; color: var(--color-texto-suave); }

/* `cmp-tabla` trae un min-width de 1040px pensado para pantallas completas. Adentro de una
   tarjeta de media pantalla eso empuja el boton "Crear accion" fuera de la vista y obliga a
   desplazar a lo ancho para apretarlo. Aca la tabla se adapta a su tarjeta y el nombre del
   cliente envuelve, que es la unica columna que puede. */
.diseno-nuevo .tb-tabla { min-width: 0; }
.diseno-nuevo .tb-tabla td:first-child { min-width: 130px; line-height: 1.35; }
.diseno-nuevo .tb-tabla th.num, .diseno-nuevo .tb-tabla td.num { white-space: nowrap; }
.diseno-nuevo .tb-tabla .cmp-btn { padding: 4px 10px; font-size: .78rem; }

/* ------------------------------------------------------- RESULTADOS POR DEPARTAMENTO (er-*)
 * 06-11-2026. La fila de lo que no tiene centro de costo se marca sin esconderse: es un hueco
 * de la contabilidad, no un error de la pantalla, y repartirlo seria inventar. */
.diseno-nuevo .er-sin-asignar { background: var(--color-alerta-fondo); }
.diseno-nuevo .er-total td { border-top: 2px solid var(--color-borde-fuerte); }
.diseno-nuevo .er-notas { margin: 0; padding-left: 18px; font-size: .85rem; line-height: 1.6; }
.diseno-nuevo .er-notas li { margin-bottom: 8px; }

/* --- como viene la semana (licitaciones) -------------------------------------------------------
   Siete casillas con lo que cierra cada dia, arriba de las pestañas. Paulina, via Cristian
   (09-11-2026): las vendedoras se ordenan la semana con ese dato, y hasta hoy habia que contarlo
   a ojo recorriendo la lista.
   El dia sin nada se apaga en vez de desaparecer: un hueco en la semana es informacion -ahi hay
   espacio para tomar algo mas- y una casilla que falta se lee como un error de la pantalla. */
.diseno-nuevo .lic-semana {
    display: flex; gap: 6px; margin: 0 0 10px; flex-wrap: wrap;
}
.diseno-nuevo .lic-semana-dia {
    flex: 1 1 0; min-width: 62px; padding: 8px 4px; text-align: center;
    background: var(--color-superficie); border: 1px solid var(--color-borde-suave);
    border-radius: 10px; display: flex; flex-direction: column; gap: 1px;
}
.diseno-nuevo .lic-semana-etiqueta {
    font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--color-texto-suave);
}
.diseno-nuevo .lic-semana-numero {
    font-size: 20px; font-weight: 700; color: var(--color-texto-fuerte);
    font-variant-numeric: tabular-nums;
}
.diseno-nuevo .lic-semana-fecha { font-size: 11px; color: var(--color-texto-suave); }
.diseno-nuevo .lic-semana-dia.vacio .lic-semana-numero { color: var(--color-texto-suave); }
.diseno-nuevo .lic-semana-dia.es-finde { background: var(--color-superficie-hundida); }
/* Hoy lleva el color de la aplicacion y no rojo: rojo ya significa "cierra en 48 horas" en la
   fila de abajo, y dos rojos distintos en la misma pantalla se leen como el mismo aviso. */
.diseno-nuevo .lic-semana-dia.es-hoy {
    border-color: var(--color-primario); box-shadow: inset 0 0 0 1px var(--color-primario);
}
.diseno-nuevo .lic-semana-dia.es-hoy .lic-semana-etiqueta { color: var(--color-primario); }
.diseno-nuevo .lic-semana-resto { flex: 0 0 auto; min-width: 74px; border-style: dashed; }