/* =====================================================================
   style.css — Estilos del prototipo (simples y legibles).
   Un solo archivo para toda la app. Colores sobrios, sin dependencias.
   ===================================================================== */

:root {
    --azul:        #1f4e79;
    --azul-claro:  #2f6fa5;
    /* AZUL DEL PANEL LATERAL. Va aparte de --azul a propósito: el azul de marca se
       usa en títulos, enlaces y botones de todo el sistema, y ahí funciona sobre
       fondo blanco. El panel necesita ser MÁS OSCURO para que el texto blanco tenga
       contraste de sobra (11,4:1 contra los 7,4:1 de antes) — el azul de marca queda
       como acento del ítem activo, que es donde de verdad sirve. */
    --azul-panel:  #16324f;
    --gris-fondo:  #f4f6f9;
    --gris-borde:  #d9dee5;
    --gris-texto:  #33404f;
    --verde:       #2e7d52;
    --rojo:        #c0392b;
    --amarillo:    #b7791f;
    --sombra:      0 1px 3px rgba(0,0,0,.12);
    --radio:       8px;
    /* Alto común de todo control de formulario. Se define acá arriba porque la
       regla base de más abajo ya lo usa. */
    --control-alto: 34px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--gris-texto);
    background: var(--gris-fondo);
    line-height: 1.5;
}

h1 { font-size: 1.5rem; margin: 0 0 18px; color: var(--azul); }
h2 { font-size: 1.15rem; margin: 0 0 14px; color: var(--azul); }
a  { color: var(--azul-claro); }

/* ---------- Pantallas centradas (login, instalador, cambiar clave) ---------- */
.pantalla-centro {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}
.tarjeta {
    background: #fff;
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 28px;
    width: 100%;
    max-width: 380px;
}
.tarjeta.ancha { max-width: 620px; }

/* ---------- Marca (ícono de radar + texto) ---------- */
.marca {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--azul);
    line-height: 1.1;
}
.marca small { display: block; font-size: .7rem; font-weight: 600; color: var(--azul-claro); letter-spacing: .5px; }
.marca-centro { flex-direction: column; text-align: center; margin-bottom: 14px; gap: 6px; }

/* Ícono de radar */
.radar-icono { width: 40px; height: 40px; flex-shrink: 0; }
.marca-centro .radar-icono { width: 60px; height: 60px; }

/* El barrido del radar gira suavemente */
.radar-sweep {
    transform-box: view-box;
    transform-origin: 32px 32px;
    animation: radar-giro 4s linear infinite;
}
@keyframes radar-giro { to { transform: rotate(360deg); } }
/* Si el usuario prefiere menos movimiento, no animamos */
@media (prefers-reduced-motion: reduce) {
    .radar-sweep { animation: none; }
}

/* ---------- Formularios ---------- */
label { display: block; font-weight: 600; font-size: .9rem; margin: 12px 0 4px; }
/* LA BASE DE TODOS LOS CONTROLES. Antes solo cubría texto, clave y selector, y
   cada tipo nuevo (fecha, número, correo) caía al aspecto por defecto del
   navegador — de ahí que en una misma fila hubiera recuadros de distinto alto y
   las etiquetas quedaran desalineadas. Ahora los cubre a todos, con UN alto
   común (--control-alto), así una fila queda pareja sola.
   Cualquier regla con clase le gana, que es como los sitios ya afinados a mano
   (tablas, editor de cotización, columna de acciones) conservan su tamaño. */
input[type=text], input[type=password], input[type=date], input[type=number],
input[type=email], input[type=tel], input[type=url], input[type=search],
input:not([type]), select {
    width: 100%;
    box-sizing: border-box;
    /* EL ALTO SALE DEL PADDING, no se impone con `height`. Es deliberado:
       hay 61 reglas en el sistema que le ponen su propio padding a un control,
       y muchas son compactas a propósito (los campos dentro de las tablas).
       Con `height` fijo, esas combinaciones CORTABAN el texto — el selector de
       moneda del catálogo mostraba «USD (dólar» con la cola comida.
       Así, 7+7+18+2 = 34 px por defecto; y una regla que cambie el padding
       obtiene su propio alto coherente en vez de recortar lo que hay dentro. */
    padding: 7px 10px;
    line-height: 1.25;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    font-size: .9rem;
    font-family: inherit;
    color: #24303d;
    background: #fff;
}
input:focus, select:focus { outline: 2px solid var(--azul-claro); border-color: var(--azul-claro); }

.boton {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 18px;
    background: var(--azul);
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.boton:hover { background: var(--azul-claro); }
.boton-secundario { background: #64748b; }
.boton-mini {
    padding: 5px 10px;
    font-size: .82rem;
    background: var(--azul);
    color: #fff;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.boton-mini:hover { background: var(--azul-claro); }
.boton-peligro { background: var(--rojo); }
.boton-peligro:hover { background: #922b21; }

.input-mini {
    width: 130px !important;
    display: inline-block;
    padding: 5px 8px !important;
    font-size: .82rem !important;
}

/* ---------- Avisos (flash) ---------- */
.aviso {
    padding: 11px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: .92rem;
}
.aviso-ok    { background: #e6f4ec; color: var(--verde); border: 1px solid #b7e0c6; }
.aviso-error { background: #fbe9e7; color: var(--rojo);  border: 1px solid #f2c1bb; }

/* ---------- Layout con menú lateral ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: 240px;
    background: var(--azul-panel);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    flex-shrink: 0;
}
.sidebar .marca { color: #fff; margin-bottom: 20px; }
.sidebar .marca small { color: #b9d4ee; }

/* Logo de la empresa en el panel lateral */
.logo-empresa {
    background: #fff;
    border-radius: var(--radio);
    padding: 10px;
    margin-bottom: 14px;
    text-align: center;
}
.logo-empresa img { max-width: 100%; max-height: 70px; object-fit: contain; }

.usuario-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.1);
    border-radius: var(--radio);
    padding: 10px;
    margin-bottom: 20px;
}
.iniciales {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--azul);
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: .85rem;
}
.usuario-datos { display: flex; flex-direction: column; font-size: .82rem; overflow: hidden; }
.usuario-datos strong { font-size: .9rem; }
.usuario-datos span { color: #b9d4ee; }
.usuario-datos .rol { font-weight: 600; color: #fff; }

.menu { display: flex; flex-direction: column; gap: 3px; flex: 1; }
/* Sin `opacity`: la transparencia se ACUMULA con el color y era justo lo que dejaba
   estos encabezados por debajo del mínimo legible. El tono se elige directo. */
.menu-seccion {
    color: #9fc4e8; font-size: .66rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; margin: 15px 12px 5px;
}
.menu-seccion:first-child { margin-top: 4px; }
.menu-item {
    color: #fff;
    text-decoration: none;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.menu-ico { width: 18px; height: 18px; flex-shrink: 0; }
/* Sub-opción anidada (ej. Dashboard bajo Cotización). */
.menu-item.menu-subitem { margin-left: 16px; padding-top: 7px; padding-bottom: 7px; font-size: .88rem; }
.menu-item.menu-subitem::before { content: "└"; color: #7ba8d4; margin-right: -2px; }
.menu-item.menu-subitem .menu-ico { width: 15px; height: 15px; }
.menu-item:hover { background: rgba(255,255,255,.12); }
/* El ítem activo lleva el AZUL DE MARCA: sobre el panel más oscuro destaca solo, y
   así el azul de INTECOMP sigue presente en el panel en vez de desaparecer. */
.menu-item.activo { background: var(--azul-claro); color: #fff; font-weight: 700; }
.menu-item.activo::before { color: #cfe4f7; }
/* «Pronto» ya NO se marca borrando el texto (quedaba en 4,2:1, ilegible): el texto se
   lee bien y lo que avisa que aún no está es la etiqueta, que para eso está. */
.menu-item.proximamente { color: #c0d3e6; }
.menu-item .badge { margin-left: auto; }
.badge {
    font-size: .62rem;
    background: rgba(255,255,255,.25);
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}
.menu-item.activo .badge { background: rgba(255,255,255,.28); color: #fff; }
.badge-tu { background: var(--verde); color: #fff; }

.salir {
    margin-top: 16px;
    color: #fff;
    text-decoration: none;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 6px;
    text-align: center;
    font-size: .9rem;
}
.salir:hover { background: rgba(255,255,255,.12); }

.contenido { flex: 1; padding: 28px 32px; max-width: 1100px; }

/* ---------- Bloques de contenido ---------- */
.bloque {
    background: #fff;
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 20px 22px;
    margin-bottom: 22px;
}

/* Formulario en rejilla (para crear usuarios/empresas) */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 16px;
    align-items: end;
}
.form-grid label { margin-top: 0; }
.form-boton { display: flex; align-items: end; }
.form-boton .boton { margin-top: 0; }
.check-linea { display: flex; align-items: center; }
.check-linea label { margin: 0; font-weight: 500; }
.check-linea input { width: auto; margin-right: 6px; }

.ayuda { font-size: .82rem; color: #6b7683; }

/* ---------- Tabla de usuarios ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th, .tabla td {
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid var(--gris-borde);
    vertical-align: middle;
}
.tabla th { background: #eef2f7; font-size: .8rem; text-transform: uppercase; letter-spacing: .3px; }
.fila-inactiva { opacity: .55; }

/* ALINEACION ARRIBA en la tabla de oportunidades y seguimiento (usuaria 2026-09-08:
   «o esta todo centrado, o esta todo en el superior... yo creo que es mejor todo
   alineado a superior»). Estas filas tienen celdas de alturas muy distintas —el folio
   ocupa dos lineas, el organismo con su titulo cuatro, la columna de acciones seis— y
   centradas cada dato flota a una altura distinta: no se puede leer en vertical.
   Va en las DOS pantallas porque comparten la misma tabla; dejar una centrada y la otra
   arriba seria peor que el problema. El encabezado se queda como esta. */
.tabla-oportunidades td { vertical-align: top; }

.estado { font-size: .78rem; font-weight: 700; padding: 3px 8px; border-radius: 10px; }
.estado-ok  { background: #e6f4ec; color: var(--verde); }
.estado-off { background: #f1f2f4; color: #6b7683; }

.acciones { white-space: nowrap; }
.inline { display: inline-block; margin: 2px 0; }

/* ---------- Tarjetas de empresa ---------- */
.empresa-card {
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio);
    padding: 14px 16px;
    margin-bottom: 12px;
}
.empresa-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.empresa-identidad { display: flex; align-items: center; gap: 12px; }
.logo-mini {
    width: 56px; height: 56px;
    object-fit: contain;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    background: #fff;
    flex-shrink: 0;
}
.logo-vacio {
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; color: #9aa4b0; text-align: center; line-height: 1.1;
}
.empresa-acciones { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crear-admin { margin-top: 12px; }
.crear-admin summary { cursor: pointer; font-weight: 600; color: var(--azul-claro); font-size: .9rem; }
.crear-admin .form-grid { margin-top: 12px; }

/* ---------- Panel de bienvenida ---------- */
.panel-bienvenida .tarjetas-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.tarjeta-info {
    background: #fff;
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio);
    padding: 14px 16px;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
}
.tarjeta-info .etiqueta { font-size: .78rem; color: #6b7683; text-transform: uppercase; letter-spacing: .3px; }
.tarjeta-info strong { font-size: 1.1rem; margin-top: 4px; }

/* ---------- Placeholder "Próximamente" ---------- */
.proximamente-box {
    text-align: center;
    background: #fff;
    border: 1px dashed var(--gris-borde);
    border-radius: var(--radio);
    padding: 50px 20px;
}
.proximamente-icono { font-size: 3rem; }

/* ---------- Instalador ---------- */
.lista-pasos { padding-left: 20px; }
.lista-pasos li { margin: 4px 0; }
.centro { text-align: center; }
code {
    background: #eef2f7;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .88em;
    color: #24303d;
}
/* Un código DENTRO de un botón: el botón tiene letra blanca y el badge fondo
   claro, así que sin esto el número quedaba blanco sobre blanco. */
.boton code, .boton-mini code { color: #1f4e79; background: #fff; font-weight: 600; }

/* ---------- Responsivo simple ---------- */
@media (max-width: 720px) {
    .app { flex-direction: column; }
    .sidebar { width: 100%; }
    .contenido { padding: 18px; }
}

/* =====================================================================
   Estado de sincronización (Hito 2)
   ===================================================================== */
.intro { color: var(--gris-texto); max-width: 70ch; line-height: 1.5; }

.cards-resumen {
    display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0 24px;
}
.card-num {
    background: #fff; border: 1px solid var(--gris-borde); border-radius: var(--radio);
    box-shadow: var(--sombra); padding: 14px 18px; min-width: 150px; flex: 1 1 150px;
    display: flex; flex-direction: column; gap: 4px;
}
.card-num .num { font-size: 1.7rem; font-weight: 700; color: var(--azul); line-height: 1.05; white-space: nowrap; }
/* Tarjetas de dinero: número más chico (cabe el monto completo). */
.card-num.money .num { font-size: 1.05rem; color: var(--verde); }
.card-num .lbl { font-size: .8rem; color: #64748b; text-transform: uppercase; letter-spacing: .3px; }
.card-num .hint { font-size: .72rem; color: #94a3b8; margin-top: 2px; }
/* Monto en verde bajo el conteo (valorización "plata en juego"). */
.card-num .card-money {
    font-size: 1rem; font-weight: 700; color: var(--verde); line-height: 1.1;
    white-space: nowrap; margin-top: 4px; padding-top: 6px; border-top: 1px solid #eef2f7;
}
.card-num.con-monto { min-width: 170px; flex-basis: 170px; }

/* Banner de "monto disponible" (motivacional) */
.monto-banner { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.mb-item { background: #fff; border: 1px solid var(--gris-borde); border-radius: var(--radio);
    padding: 10px 18px; display: flex; flex-direction: column; box-shadow: var(--sombra); flex: 1 1 180px; }
.mb-lbl { font-size: .74rem; color: #64748b; text-transform: uppercase; letter-spacing: .3px; }
.mb-num { font-size: 1.1rem; font-weight: 700; color: var(--verde); margin-top: 2px; white-space: nowrap; }
.mb-total { background: linear-gradient(135deg, #0d9488, #2e7d52); border: 0; flex: 1 1 240px; }
.mb-total .mb-lbl { color: #d1fae5; }
.mb-total .mb-num { color: #fff; font-size: 1.2rem; }

/* Dashboard */
.dash-h2 { margin: 22px 0 10px; font-size: 1.05rem; color: var(--azul); border-bottom: 2px solid var(--gris-borde); padding-bottom: 4px; }
.dash-alertas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.alerta-box { border: 1px solid var(--gris-borde); border-radius: var(--radio); padding: 12px 14px; background: #fff; }
.alerta-box h3 { margin: 0 0 8px; font-size: .92rem; }
.alerta-box ul { margin: 0; padding-left: 18px; font-size: .85rem; line-height: 1.6; }
.alerta-roja { border-left: 4px solid var(--rojo); }
.alerta-ambar { border-left: 4px solid #e6b800; }
@media (max-width: 800px) { .dash-alertas { grid-template-columns: 1fr; } }

.panel-sync {
    background: #fff; border: 1px solid var(--gris-borde); border-radius: var(--radio);
    box-shadow: var(--sombra); padding: 18px; margin-bottom: 26px;
    display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start;
}
/* Un .panel-sync es una FILA flex, y eso es a propósito: sirve para poner el botón
   «Sincronizar ahora» al lado de «última corrida». Pero un título, un párrafo o una
   fila de tarjetas NO son columnas de esa fila. Si compiten por el ancho con lo que
   tienen al lado, las tarjetas se aprietan hasta su mínimo (150 px) y el número, que
   lleva `white-space: nowrap`, SE SALE DEL MARCO. Pasó en «Detalle de las oportunidades
   abiertas» con 6.059 de 6.059 (2026-09-07): sólo se veía cuando NO había pendientes,
   porque ahí aparece el párrafo «✓ Todas...» al lado de las tarjetas en vez del botón.
   Cada una de estas piezas ocupa la fila completa; el botón junto a «última corrida»
   sigue igual. */
.panel-sync > h2,
.panel-sync > h3,
.panel-sync > p,
.panel-sync > .card-num-fila,
.panel-sync > .diag-tarjetas,
.panel-sync > .act-cron { flex: 1 1 100%; }
/* «última corrida» es la excepción: ESA sí va al lado del botón, y por eso el panel
   es una fila. Su regla propia manda sobre estas. */
/* El `gap: 24px` del panel es para separar el boton de «ultima corrida» AL LADO.
   Al apilar titulo, parrafo y tarjetas en filas propias, esos mismos 24 px entre
   filas dejan la pantalla muy suelta: se aprieta solo el vertical y el horizontal
   queda igual. */
.panel-sync { row-gap: 6px; }
/* 🔴 LA EXCEPCION QUE ME COSTO UN ERROR (2026-09-07): dentro de `.cat-cargas` estos
   paneles son `flex-direction: column`. En una COLUMNA, `flex-basis: 100%` no significa
   «todo el ancho» sino «TODO EL ALTO», asi que la regla de arriba estiraba los parrafos,
   empujaba el titulo al fondo y sacaba el texto del recuadro. Aca se devuelven a su
   comportamiento normal.
   REGLA: antes de escribir `flex: 1 1 100%` sobre los hijos de un contenedor, comprobar
   que ese contenedor sea una FILA en TODOS los sitios donde se usa. */
.cat-cargas .panel-sync > h3,
.cat-cargas .panel-sync > p,
.cat-cargas .panel-sync > .card-num-fila,
.cat-cargas .panel-sync > .diag-tarjetas,
.cat-cargas .panel-sync > .act-cron { flex: 0 1 auto; }
/* Y el `row-gap: 6px` tampoco: aca el panel es una columna, asi que ese gap separa
   titulo, parrafos y formulario DENTRO de la tarjeta. Con 6 px quedaba mas apretado
   que antes, y el catalogo no era lo que habia que arreglar: se devuelve a sus 24. */
.cat-cargas .panel-sync { row-gap: 24px; }

.panel-sync form { margin: 0; }
.panel-sync .hint { display: block; margin-top: 8px; font-size: .82rem; color: #64748b; }
.panel-sync .ultima-corrida { flex: 1 1 320px; }
.ultima-corrida h3 { margin: 0 0 8px; font-size: 1rem; }
.ultima-corrida ul { margin: 0; padding-left: 18px; font-size: .9rem; line-height: 1.6; }
.log-pre {
    background: #0f172a; color: #cbd5e1; padding: 10px; border-radius: 6px;
    font-size: .78rem; max-height: 220px; overflow: auto; white-space: pre-wrap;
}
.tabla-scroll { overflow-x: auto; }
.tabla code { font-size: .82rem; color: var(--azul-claro); }

/* Auditoría y rescate de oportunidades (sync.php, súper-admin) */
.audit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 14px 0; }
.audit-card { background: #fff; border: 1px solid var(--gris-borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px; }
.audit-card h3 { margin: 0 0 8px; font-size: 1rem; }
.audit-card .hint { font-size: .82rem; color: #64748b; margin: 0 0 10px; }
.audit-card input[type=text], .audit-card textarea { padding: 7px 9px; border: 1px solid #cdd6e0; border-radius: 6px; font-size: .9rem; }
.audit-card .boton { margin-top: 2px; }
.audit-result { background: #f1f6fc; border: 1px solid #cfe0f2; border-radius: var(--radio); padding: 14px 16px; margin: 12px 0 24px; font-size: .92rem; }
.txt-error { color: #c0392b; font-weight: 600; }
.txt-ok { color: #2e7d52; font-weight: 600; }

/* Botones "Actualizar ahora" (dólar/UF/UTM) en Sincronización */
.act-cron { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.act-cron form { margin: 0; }

/* Asignar un producto SIN oferta (de otro proveedor) desde el buscador de la coti */
.asignar-propio { font-size: .82rem; }
.asignar-propio form { display: inline-flex; gap: 6px; align-items: center; margin-top: 5px; flex-wrap: wrap; }
.asignar-propio input, .asignar-propio select { padding: 4px 6px; border: 1px solid #cdd6e0; border-radius: 5px; font-size: .82rem; }

/* Parámetros del motor de cotización (transportes.php) */
.pm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 8px 0 14px; }
.pm-grupo { border: 1px solid var(--gris-borde); border-radius: var(--radio); padding: 12px 14px; margin: 0; }
.pm-grupo legend { font-weight: 700; color: #1f4e79; padding: 0 6px; font-size: .92rem; }
.pm-grupo label { display: block; font-size: .84rem; color: #45505c; margin: 8px 0; font-weight: 500; }
.pm-grupo input, .pm-grupo select { display: block; width: 100%; box-sizing: border-box; margin-top: 4px;
    padding: 7px 9px; border: 1px solid #cdd6e0; border-radius: 6px; font-size: .92rem; }
.pm-ayuda { display: block; font-weight: 400; font-size: .76rem; color: #7a8896; margin-top: 3px; }
.pm-acciones { margin-top: 6px; }

/* Mensaje contextual (flash con destino): junto a "Cargar detalle" o dentro de "Traer oportunidad" */
.msg-inline { display: inline-block; margin: 4px 0 0; padding: 6px 10px; border-radius: 6px;
              font-size: .8rem; line-height: 1.3; font-weight: 500; }
.msg-inline.msg-error { background: #fdecea; border: 1px solid #f5c6cb; color: #b0281a; }
.msg-inline.msg-ok    { background: #eaf7ee; border: 1px solid #bfe3c9; color: #1f7a3d; }
.det-items .msg-inline { display: block; }

/* "Traer oportunidad por código" en Oportunidades */
.traer-op { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px;
            background: #f1f6fc; border: 1px solid #cfe0f2; border-radius: var(--radio); }
.traer-op .msg-inline { margin: 0; flex: 1 1 320px; }
.traer-op-lbl { font-weight: 600; color: #1f4e79; }
.traer-op input[type=text] { padding: 6px 9px; border: 1px solid #cdd6e0; border-radius: 6px; font-size: .9rem; width: 190px; }
.traer-op .boton { margin: 0; }
.traer-op .hint { font-size: .82rem; color: #64748b; }

/* =====================================================================
   HITO 3 — Configuración de filtros + Pantalla de oportunidades
   ===================================================================== */

/* Estas pantallas usan TODO el ancho disponible (tablas anchas). */
.contenido { max-width: none; }

.tabla tr.inactiva { opacity: .5; }
.vacio { color: #6b7683; font-style: italic; }
.muted { color: #6b7683; }

/* Pills / etiquetas */
.pill { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; display: inline-block; }
.pill-on   { background: #e6f4ec; color: var(--verde); }
.pill-off  { background: #f1f2f4; color: #6b7683; }
.pill-cat  { background: #e8eef7; color: var(--azul); }
.pill-anexo{ background: #fff3cd; color: var(--amarillo); margin-left: 6px; }
.pill-monit { background: #e2ecfb; color: #1c4fa3; margin-left: 6px; }
.pill-estrat { background: #fde2e0; color: #b3122d; margin-left: 6px; }
.config-org { margin-bottom: 18px; }

/* ---------- Configuración ---------- */
.intro-config { max-width: 80ch; color: var(--gris-texto); }
.selector-empresa { margin: 6px 0 16px; }
.selector-empresa select { width: auto; min-width: 260px; }
.empresa-actual { margin: 0 0 14px; }

.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--gris-borde); margin-bottom: 20px; flex-wrap: wrap; }
.tab {
    padding: 9px 16px; text-decoration: none; color: var(--gris-texto);
    border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; font-weight: 600; font-size: .9rem;
}
.tab:hover { background: #eef2f7; }
.tab.activo { background: #fff; border-color: var(--gris-borde); color: var(--azul); position: relative; top: 2px; }

.config-grid { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; }
/* El formulario de crear/editar va SIEMPRE primero (arriba a la izquierda) para
   que se vea sin desplazarse, incluso cuando la lista es larga. */
.config-form { order: -1; }
.config-lista, .config-form {
    background: #fff; border: 1px solid var(--gris-borde); border-radius: var(--radio);
    box-shadow: var(--sombra); padding: 18px 20px;
}
.config-form { border-top: 3px solid var(--azul); }
.config-form textarea, .config-form input[type=text] {
    width: 100%; padding: 8px 10px; border: 1px solid var(--gris-borde); border-radius: 6px; font-size: .95rem; font-family: inherit;
}
.config-form textarea { resize: vertical; }
.form-botones { display: flex; gap: 8px; align-items: center; }
.variantes { font-size: .85rem; color: #4b5563; max-width: 420px; }
.inline-edit { display: flex; gap: 6px; align-items: center; }
.inline-edit input[type=text] { width: 220px; padding: 5px 8px; border: 1px solid var(--gris-borde); border-radius: 5px; }
.inline-edit .boton-mini { margin: 0; }
.fila-categoria td { background: #f0f4fa; font-weight: 700; color: var(--azul); font-size: .82rem; text-transform: uppercase; letter-spacing: .3px; }
.acciones .boton-mini { margin: 1px 2px; }
@media (max-width: 900px) { .config-grid { grid-template-columns: 1fr; } }

/* ---------- Pantalla de oportunidades: filtros ---------- */
.filtros {
    background: #fff; border: 1px solid var(--gris-borde); border-radius: var(--radio);
    box-shadow: var(--sombra); padding: 16px 18px; margin-bottom: 18px;
}
.filtros-fila { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed #e5e9ef; }
.filtros-fila:last-child { border-bottom: 0; }
.filtro-bloque { display: flex; flex-direction: column; gap: 6px; }
.filtro-titulo { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #6b7683; }
.filtro-campo { display: flex; flex-direction: column; font-size: .8rem; font-weight: 700; color: #6b7683; text-transform: uppercase; letter-spacing: .3px; margin: 0; }
.filtro-campo select, .filtro-campo input { margin-top: 4px; min-width: 150px; font-weight: 400; text-transform: none; }
.buscador input { min-width: 260px; }

.chips-check { display: flex; flex-wrap: wrap; gap: 6px; max-width: 460px; }
.chips-scroll { max-height: 96px; overflow-y: auto; padding: 2px; }
.monto-exacto { display: flex; gap: 6px; margin-top: 6px; }
.monto-exacto input { width: 100px; padding: 4px 6px; font-size: .82rem; border: 1px solid var(--gris-borde); border-radius: 5px; }
.chip-check {
    display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 5px 10px;
    background: #eef2f7; border: 1px solid var(--gris-borde); border-radius: 16px; font-size: .85rem; font-weight: 500; cursor: pointer;
}
.chip-check input { width: auto; margin: 0; }
.chip-check:has(input:checked) { background: var(--azul); color: #fff; border-color: var(--azul); }

.filtro-conector .radio { display: block; margin: 2px 0; font-weight: 400; font-size: .85rem; }
.filtro-conector .radio input { width: auto; margin-right: 5px; }

.chips-mon { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-cat-etq { font-size: .72rem; font-weight: 700; color: #6b7683; text-transform: uppercase; margin-left: 8px; }
.chip-cat-etq:first-child { margin-left: 0; }
.chip-mon {
    display: inline-block; padding: 4px 10px; background: #e8eef7; color: var(--azul);
    border-radius: 14px; font-size: .82rem; text-decoration: none; border: 1px solid #d3ddec;
}
.chip-mon:hover { background: #d7e2f2; }
.chip-mon.on { background: var(--azul); color: #fff; border-color: var(--azul); }

.filtros-acciones { align-items: flex-end; }
.chk-vencidas { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-weight: 500; font-size: .85rem; color: #6b7683; white-space: nowrap; }
.chk-vencidas input { width: auto; margin: 0; }
.filtros-acciones .boton, .filtros-acciones .boton-secundario { margin-top: 0; }
/* Aplicar filtros · Limpiar · Sin asignar → mismo tamaño exacto */
.btn-filtro-ig { min-width: 130px; text-align: center; box-sizing: border-box; }
/* Botón "Sin asignar" cuando está activo (filtro encendido) */
.btn-sa-on { background: #2e7d46; border-color: #2e7d46; color: #fff; }
.btn-sa-on:hover { background: #276b3c; }

/* ---------- Botones de tiempo (colores de urgencia) ---------- */
.filtros-tiempo { flex-direction: column; align-items: stretch; }
.botones-tiempo { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-tiempo {
    display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 6px 11px;
    border-radius: 16px; font-size: .82rem; font-weight: 600; cursor: pointer;
    background: #eef2f7; color: var(--gris-texto); border: 1px solid var(--gris-borde); text-decoration: none;
}
.btn-tiempo input { display: none; }
.btn-tiempo .conteo { font-weight: 400; opacity: .8; }
.btn-tiempo.on { color: #fff; box-shadow: inset 0 0 0 2px rgba(0,0,0,.15); }

/* Colores de tramo (rojo intenso = urgente -> azul = lejano) */
.tramo-vencida.on, .tramo-badge.tramo-vencida { background: #94a3b8; color: #fff; }
.tramo-t1.on,  .tramo-badge.tramo-t1  { background: #b3122d; color: #fff; }
.tramo-t3.on,  .tramo-badge.tramo-t3  { background: #d33115; color: #fff; }
.tramo-t6.on,  .tramo-badge.tramo-t6  { background: #e8590c; color: #fff; }
.tramo-t12.on, .tramo-badge.tramo-t12 { background: #f08c00; color: #fff; }
.tramo-t24.on, .tramo-badge.tramo-t24 { background: #d9a200; color: #fff; }
.tramo-t36.on, .tramo-badge.tramo-t36 { background: #94a41c; color: #fff; }
.tramo-t48.on, .tramo-badge.tramo-t48 { background: #4c9a2a; color: #fff; }
.tramo-t60.on, .tramo-badge.tramo-t60 { background: #2e7d52; color: #fff; }
.tramo-t72.on, .tramo-badge.tramo-t72 { background: #14919b; color: #fff; }
.tramo-t96.on, .tramo-badge.tramo-t96 { background: #1c6fb0; color: #fff; }
.tramo-mas.on,  .tramo-badge.tramo-mas  { background: #2f6fa5; color: #fff; }

/* ---------- Barra de resultados / exportar ---------- */
/* Resumen arriba y la barra de acciones SIEMPRE alineada a la izquierda
   (independiente de la empresa / del largo del resumen). */
.barra-resultados { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.barra-resultados .resumen { font-size: .95rem; }
.exportar { display: flex; align-items: center; gap: 8px; font-size: .85rem; flex-wrap: wrap; }
.exportar-titulo { font-weight: 700; color: var(--verde); }
/* .boton-excel usa el MISMO tamaño/forma/letra que .boton (regla: botones homogéneos);
   solo cambia el color. Se usa como class="boton boton-excel". */
.boton-excel { margin: 0; background: var(--verde); }
.boton-excel:hover { background: #23603f; }

/* ---------- Tabla de oportunidades ---------- */
.tabla-oportunidades { font-size: .86rem; }
.tabla-oportunidades thead th { position: sticky; top: 0; }
/* Tabla compacta para que entre más en una pantalla. */
.tabla-oportunidades th, .tabla-oportunidades td { padding: 6px 8px; }
.col-org { max-width: 340px; }
.titulo-op, .desc-op { overflow: hidden; text-overflow: ellipsis; }

/* Encabezados ordenables (clic para ordenar) */
.th-orden { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.th-orden:hover { text-decoration: underline; }
.th-orden.activo { color: var(--azul); }
.ord-inact { opacity: .35; font-size: .85em; }

/* Filtro en el encabezado (botón ▾ + popover) */
.ayuda-filtros { font-size: .82rem; color: #6b7683; margin: 6px 0 0; }
.th-filtrable { white-space: nowrap; }
.btn-filtro-col {
    border: 1px solid var(--gris-borde); background: #fff; color: var(--azul-claro);
    font-size: .72rem; padding: 0 5px; border-radius: 4px; cursor: pointer; margin-left: 4px; line-height: 1.6; vertical-align: middle;
}
.btn-filtro-col:hover { background: #eef2f7; }
.btn-filtro-col.activo { background: var(--azul); color: #fff; border-color: var(--azul); }
.fbadge { display: inline-block; margin-left: 3px; background: #fff; color: var(--azul); border-radius: 8px; padding: 0 4px; font-size: .68rem; font-weight: 700; }

.col-filtro-pop {
    display: none; position: fixed; z-index: 1000; background: #fff;
    border: 1px solid var(--gris-borde); border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.20);
    padding: 10px; width: 250px; text-transform: none; letter-spacing: 0;
}
.col-filtro-pop.abierto { display: block; }
.cfp-titulo { font-size: .78rem; font-weight: 700; color: var(--azul); margin-bottom: 6px; }
.cfp-buscar { width: 100%; padding: 5px 8px; margin-bottom: 6px; border: 1px solid var(--gris-borde); border-radius: 5px; font-size: .82rem; }
.cfp-toolbar { display: flex; gap: 10px; margin-bottom: 6px; }
.mini-link { background: none; border: 0; color: var(--azul-claro); cursor: pointer; font-size: .78rem; padding: 0; text-decoration: underline; }
.mini-link:hover { color: var(--azul); }
.cfp-lista { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.cfp-lista .chip-check { border: 0; background: transparent; padding: 2px; border-radius: 0; font-weight: 400; font-size: .85rem; }
.cfp-lista .chip-check:has(input:checked) { background: transparent; color: var(--azul); font-weight: 600; }
.cfp-acc { margin-top: 8px; text-align: right; }
.cfp-acc .boton-mini { margin: 0; }

/* Fila de filtros por columna (bajo los títulos) */
.fila-filtros th { background: #f4f7fb; padding: 4px 6px; text-transform: none; letter-spacing: 0; }
.fila-filtros input { width: 100%; min-width: 68px; padding: 3px 6px; font-size: .8rem; border: 1px solid var(--gris-borde); border-radius: 4px; }
.fila-filtros .boton-mini { margin: 0; width: 100%; }
.col-check { width: 30px; text-align: center; }
.col-check input { width: auto; }
.col-id code { font-weight: 700; }
.col-id a { text-decoration: none; color: var(--azul-claro); white-space: nowrap; }
.col-id a:hover code { text-decoration: underline; }
.clip { display: inline-block; margin-left: 6px; font-size: .78rem; color: #6b7683; white-space: nowrap; }
.col-cierre { white-space: nowrap; }
.col-fecha { white-space: nowrap; font-size: .8rem; color: #4b5563; }
.col-region { max-width: 150px; white-space: normal; font-size: .82rem; }
/* Descripción como columna: letra chica, recortada a 3 líneas */
.col-desc { max-width: 260px; }
.col-desc span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .76rem; color: #64748b; line-height: 1.3; }
.tramo-badge { font-size: .8rem; font-weight: 700; padding: 3px 9px; border-radius: 10px; display: inline-block; }
.fecha-cierre { display: block; font-size: .74rem; color: #6b7683; margin-top: 2px; }
.col-org strong { display: block; font-size: .86rem; }
.titulo-op { display: block; font-size: .82rem; color: #4b5563; margin-top: 2px; }
.desc-op { display: block; font-size: .78rem; color: #6b7683; margin-top: 3px; font-style: italic; }
.col-monto { text-align: right; white-space: nowrap; font-weight: 600; color: var(--gris-texto); }
th.col-monto { text-align: right; }

/* Badge de estado oficial de Mercado Público */
.estado-badge { font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; display: inline-block; }
.est-publicada { background: #e6f4ec; color: var(--verde); }
.est-adjudicada { background: #e2ecfb; color: #1c4fa3; }
.est-cerrada { background: #eceff3; color: #64748b; }
.est-negativo { background: #fbe9e7; color: var(--rojo); }
.est-otro { background: #f1f2f4; color: #4b5563; }

/* Datos rápidos dentro del detalle */
.det-datos { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .84rem; margin-bottom: 10px; padding: 8px 10px; background: #eef2f7; border-radius: 6px; }
.llamado { font-size: .76rem; color: var(--amarillo); }
.fuente-etq { font-size: .72rem; background: #eef2f7; padding: 1px 7px; border-radius: 8px; color: #4b5563; }
.col-trabajo { white-space: nowrap; }
.col-trabajo .inline { display: block; margin-top: 3px; }
.boton-tomar { margin: 0; padding: 8px 14px; background: #0d9488; color: #fff; border: 0;
    border-radius: 6px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.boton-tomar:hover { background: #0b7d73; }
/* Catálogo (Matriz): subir archivo y buscar */
/* Dos zonas de carga del catálogo (Mayorista / Base Maestra), lado a lado. */
.cat-cargas { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:26px; }
.cat-cargas .panel-sync { margin-bottom:0; flex-direction:column; }
.cat-cargas .panel-sync h3 { margin:0 0 12px; font-size:1.05rem; }
.cat-cargas .panel-sync h4 { margin:14px 0 6px; font-size:.9rem; color:#556579; }
.cat-check { display:block; margin-top:10px; font-size:.82rem; color:#556579; font-weight:400; line-height:1.4; }
.cat-check input { margin-right:6px; }
@media (max-width: 900px) { .cat-cargas { grid-template-columns:1fr; } }
/* Productos: cabecera, buscador en línea, paginación y desglose por proveedor. */
.cat-prod-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 0 10px; }
.cat-prod-head .boton, .cat-prod-head .boton-excel { margin-top:0; }
.cat-barra2 { display:flex; align-items:center; gap:8px; margin:0 0 12px; flex-wrap:wrap; }
.cat-barra2 input[type=search] { flex:1; min-width:220px; padding:9px 12px; border:1px solid var(--gris-borde); border-radius:8px; font-size:.92rem; }
.cat-barra2 .boton { margin:0; }
/* Filtros bajo el buscador (mayorista + stock), en una misma línea. Botones chicos, mismo tamaño. */
.filtros-linea { display:flex; align-items:center; gap:10px 24px; flex-wrap:wrap; margin:0 0 12px; }
.filtros-linea .filtro-prov { margin:0; }
.filtro-prov { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:0 0 12px; }
.filtro-prov .fp-lbl { font-size:.8rem; color:#7a8aa0; font-weight:600; }
.fp-btn { display:inline-block; padding:5px 12px; font-size:.8rem; font-weight:600; border:1px solid var(--gris-borde);
    border-radius:6px; background:#fff; color:var(--azul); text-decoration:none; }
.fp-btn:hover { background:#eef2f7; }
.fp-btn.on { background:var(--azul); color:#fff; border-color:var(--azul); }
/* Botones de stock con los colores de "disponible": verde (con) / rojo (sin). */
.fp-btn.fp-con { color:#1c7a44; border-color:#bfe3cd; }
.fp-btn.fp-con:hover { background:#eaf6ef; }
.fp-btn.fp-con.on { background:#1a7a43; color:#fff; border-color:#1a7a43; }
.fp-btn.fp-sin { color:#b23b3b; border-color:#e2b8b8; }
.fp-btn.fp-sin:hover { background:#fdeeee; }
.fp-btn.fp-sin.on { background:#c0392b; color:#fff; border-color:#c0392b; }
.fp-form { display:inline-flex; align-items:center; gap:7px; margin:0; }
.fp-select { padding:5px 8px; font-size:.8rem; border:1px solid var(--gris-borde); border-radius:6px; background:#fff; color:var(--azul); font-weight:600; }
.cat-pag { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.82rem; color:#556579; margin:10px 0; flex-wrap:wrap; }
.cat-pag-ctrl { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cat-pag .pp, .cat-pag .pg { display:inline-block; padding:4px 9px; border:1px solid var(--gris-borde); border-radius:7px; text-decoration:none; color:var(--azul-claro); background:#fff; }
.cat-pag .pp.on { background:var(--azul); color:#fff; border-color:var(--azul); font-weight:700; }
.cat-pag .pg.off { color:#b4bcc7; border-color:#eef1f5; }
.cat-pag .pg-num { padding:0 4px; font-weight:600; color:#334; }
.prod-card { border:1px solid var(--gris-borde); border-radius:10px; background:#fff; margin-bottom:10px; overflow:hidden; }
.prod-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:12px 14px; }
.prod-nom { color:var(--azul); font-size:1rem; }
.prod-head .pn { font-size:.8rem; color:#556579; margin-top:4px; line-height:1.5; }
.prod-head .pn code { color:var(--azul-claro); }
.ficha-si { font-size:.95rem; }
.prov-tabla { width:100%; border-collapse:collapse; font-size:.86rem; }
.prov-tabla th { text-align:left; font-weight:600; color:#7a8aa0; font-size:.72rem; text-transform:uppercase; letter-spacing:.3px; padding:6px 14px; border-top:1px solid var(--gris-borde); background:#f7f9fc; }
.prov-tabla td { padding:8px 14px; border-top:1px solid var(--gris-borde); }
.prov-tabla .r { text-align:right; white-space:nowrap; }
.prov-tabla .c { text-align:center; }
.prov-tabla tr.fila-off td { color:#9aa6b5; }
.pill-si { background:#e3f4ea; color:#1c7a44; font-size:.72rem; padding:3px 9px; border-radius:20px; font-weight:600; }
.pill-no { background:#fbe6e6; color:#b23b3b; font-size:.72rem; padding:3px 9px; border-radius:20px; font-weight:600; }
.tag-otro { background:#eef1f5; color:#667; font-size:.66rem; padding:2px 6px; border-radius:5px; text-transform:uppercase; }
.candado { color:var(--azul-claro); }
.aviso-obligatorio { background:#fbe6e6; border:1px solid #e0a0a0; border-left:5px solid #c0392b; color:#8a1f1f;
    border-radius:8px; padding:12px 16px; margin:0 0 16px; font-size:.92rem; line-height:1.5; }
.aviso-obligatorio strong { color:#a3241f; }
.pill-btn { border:none; cursor:pointer; font-family:inherit; }
.prio-num { display:inline-block; min-width:18px; font-weight:700; color:var(--azul); margin-right:4px; }
.mini-off { color:#d3d9e0; padding:0 5px; }
/* Editor de producto (producto.php). */
.ed-form { background:#fff; border:1px solid var(--gris-borde); border-radius:10px; padding:18px; margin-bottom:18px; }
.ed-form h3 { margin:16px 0 8px; font-size:1rem; color:var(--azul); }
.ed-form h3:first-child { margin-top:0; }
.ed-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px 16px; }
.ed-campo { display:flex; flex-direction:column; gap:5px; font-size:.82rem; color:#556579; font-weight:600; }
.ed-campo input, .ed-campo select { padding:8px 10px; border:1px solid var(--gris-borde); border-radius:8px; font-size:.9rem; font-weight:400; }
.ed-campo input:disabled { background:#f2f4f7; color:#98a2b3; }
.ed-lock { font-weight:400; font-style:normal; color:#b23b3b; font-size:.72rem; }
.perm-card { border:1px solid var(--gris-borde); border-radius:10px; margin-bottom:10px; background:#fff; padding:12px 14px; }
.perm-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.perm-card-top .perm-nom { font-weight:700; color:var(--azul); }
.perm-grupos { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.perm-grupo { border:1px solid #eef1f5; border-radius:8px; padding:10px 12px; }
.perm-grupo-tit { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:#7a8aa0; font-weight:700; margin-bottom:7px; }
.perm-grupo label { display:flex; align-items:center; gap:6px; font-size:.86rem; color:#445; padding:3px 0; }
.cat-subir { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
.cat-subir label { display:flex; flex-direction:column; font-size:.82rem; color:#556579; gap:5px; font-weight:600; }
/* Sin padding propio: heredan el de la base y quedan del mismo alto entre si. */
.cat-subir input[type="file"] { border-radius:8px; }
.cat-subir select { border-radius:8px; width:auto; min-width:150px; }
.cat-buscar { display:flex; gap:10px; align-items:center; margin:10px 0 16px; flex-wrap:wrap; }
.cat-buscar input[type="search"] { flex:1 1 320px; max-width:480px; padding:9px 12px; border:1px solid var(--gris-borde); border-radius:8px; font-size:.92rem; }
/* Descartar (selección): rojo claro, letra blanca (mismo tamaño que Asignar). */
.boton-descartar-sel { margin: 0; padding: 8px 14px; background: #d9534f; color: #fff; border: 0;
    border-radius: 6px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.boton-descartar-sel:hover { background: #c9302c; }
.trabajo-nueva { font-size: .78rem; color: #6b7683; }
.trabajo-estado { font-size: .78rem; font-weight: 700; color: var(--azul); }
.trabajo-ini { display: inline-block; margin-left: 4px; background: var(--azul); color: #fff; font-size: .7rem; padding: 1px 6px; border-radius: 8px; font-weight: 700; }

/* Borde izquierdo de la fila según su tramo de urgencia */
.fila-op td:first-child { border-left: 4px solid transparent; }
.tramo-borde-vencida td:first-child { border-left-color: #94a3b8; }
.tramo-borde-t1  td:first-child { border-left-color: #b3122d; }
.tramo-borde-t3  td:first-child { border-left-color: #d33115; }
.tramo-borde-t6  td:first-child { border-left-color: #e8590c; }
.tramo-borde-t12 td:first-child { border-left-color: #f08c00; }
.tramo-borde-t24 td:first-child { border-left-color: #d9a200; }
.tramo-borde-t36 td:first-child { border-left-color: #94a41c; }
.tramo-borde-t48 td:first-child { border-left-color: #4c9a2a; }
.tramo-borde-t60 td:first-child { border-left-color: #2e7d52; }
.tramo-borde-t72 td:first-child { border-left-color: #14919b; }
.tramo-borde-t96 td:first-child { border-left-color: #1c6fb0; }
.tramo-borde-mas td:first-child { border-left-color: #2f6fa5; }

/* Paginación (compacta y liviana) */
.paginacion { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: center; margin: 10px 0; }
.paginacion .boton-mini {
    margin: 0; padding: 3px 9px; font-size: .78rem; font-weight: 600;
    background: #fff; color: var(--azul-claro); border: 1px solid var(--gris-borde);
}
.paginacion .boton-mini:hover { background: #eef2f7; }
.paginacion .pag-info { font-size: .82rem; color: #6b7683; margin: 0 6px; }
.paginacion .pag-off { color: #aab2bd; border-color: #e5e9ef; background: #fafbfc; cursor: default; }

/* Selector "por página" */
.por-pagina { font-weight: 400; font-size: .85rem; color: #6b7683; }
.por-pagina select { width: auto; display: inline-block; padding: 2px 6px; font-size: .85rem; }

/* Detalle expandible */
.fila-detalle td { background: #f8fafc; }
.detalle-cont { padding: 6px 4px; }
.det-desc { font-size: .85rem; color: #4b5563; margin: 0 0 10px; }
/* Gestión interna dentro del detalle */
.det-gestion { margin: 0 0 12px; padding: 8px 12px; background: #f0fdfa; border: 1px solid #99e6df; border-radius: 6px; }
.det-gestion h4 { margin: 0 0 6px; font-size: .82rem; color: #0d9488; text-transform: uppercase; letter-spacing: .3px; }
.det-gestion form { margin: 0; }
/* Botón "Asignar" individual, junto al título "Gestión interna" (asignación de a una). */
.dg-asignar-una { display: inline-block; margin-left: 19px; vertical-align: middle; }
.dg-asignar-una .boton-mini { margin: 0; text-transform: none; letter-spacing: 0; }
.dg-estado { margin: 0 0 8px; font-size: .88rem; }
.dg-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dg-acciones .boton-mini { margin: 0; }
.dg-cotizar { display: flex; gap: 6px; align-items: center; }
/* LOG / comentarios */
.log-lista { margin: 0 0 8px; padding-left: 18px; font-size: .85rem; line-height: 1.5; }
.log-comentar { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.log-comentar input[type=text] { flex: 1; max-width: 480px; padding: 5px 8px; border: 1px solid var(--gris-borde); border-radius: 5px; font-size: .85rem; }
.log-comentar .boton-mini { margin: 0; }
.dg-cotizar input[type=text] { padding: 4px 8px; border: 1px solid var(--gris-borde); border-radius: 5px; font-size: .82rem; width: 92px; }

/* Colores de las acciones de gestión (Hito 4) */
.btn-cotizar   { background: #3b9ae1; color: #fff; }
.btn-cotizar:hover { background: #2f86c9; }
.btn-adjudicar { background: #2e7d52; color: #fff; }
.btn-adjudicar:hover { background: #23603f; }
.btn-perdida, .btn-descartar { background: #e08a8a; color: #fff; }
.btn-perdida:hover, .btn-descartar:hover { background: #d06e6e; }
.btn-liberar   { background: #f0c419; color: #3a3413; }
.btn-liberar:hover { background: #dcb206; }
.btn-log       { background: var(--azul); color: #fff; }
.btn-log:hover { background: var(--azul-claro); }

.det-descripcion { margin: 0 0 12px; }
.det-descripcion h4 { margin: 0 0 4px; font-size: .82rem; color: var(--azul); text-transform: uppercase; letter-spacing: .3px; }
.det-descripcion p { margin: 0; font-size: .88rem; color: #374151; line-height: 1.5; }
.det-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.det-items h4, .det-adjuntos h4 { margin: 0 0 6px; font-size: .82rem; color: var(--azul); text-transform: uppercase; letter-spacing: .3px; }
.det-items ul, .det-adjuntos ul { margin: 0 0 8px; padding-left: 18px; font-size: .85rem; }
.det-items li, .det-adjuntos li { margin: 3px 0; }

/* Tabla de ítems/productos dentro del detalle (tabulada) */
.tabla-items { width: 100%; border-collapse: collapse; font-size: .82rem; background: #fff; }
.tabla-items th, .tabla-items td { padding: 5px 8px; border-bottom: 1px solid var(--gris-borde); text-align: left; vertical-align: top; }
.tabla-items th { background: #eef2f7; font-size: .72rem; text-transform: uppercase; letter-spacing: .3px; }
.tabla-items .num { text-align: right; white-space: nowrap; }
.tabla-items th.num { text-align: right; }
.tabla-items code { font-size: .78rem; }
@media (max-width: 900px) { .det-cols { grid-template-columns: 1fr; } }

/* =====================================================================
 *  SUPERVISIÓN (monitoreo de actividad dentro de la app)
 * ===================================================================== */
.sup-periodos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.sup-pchip {
    display: inline-block; padding: 5px 12px; border: 1px solid var(--gris-borde);
    border-radius: 20px; background: #fff; color: var(--azul-claro); text-decoration: none;
    font-size: .82rem; font-weight: 600;
}
.sup-pchip.on { background: var(--azul); color: #fff; border-color: var(--azul); }

.sup-tabla th, .sup-tabla td { padding: 7px 8px; }
.sup-tabla td.r, .sup-tabla th.r { text-align: right; }
.sup-tabla td.c, .sup-tabla th.c { text-align: center; }
.sup-tabla tr.sup-sel { background: #eef4ff; }

.sup-estado { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.sup-estado.sup-on  { background: #e3f6ea; color: var(--verde); }
.sup-estado.sup-on::before  { content: "🟢 "; }
.sup-estado.sup-rec { background: #fdf3e2; color: var(--amarillo); }
.sup-estado.sup-rec::before { content: "🟡 "; }
.sup-estado.sup-off { background: #eef0f3; color: #7a8699; }
.sup-estado.sup-off::before { content: "⚪ "; }

/* Línea de tiempo del detalle por usuario */
.sup-timeline { border-left: 3px solid var(--gris-borde); margin: 4px 0 10px; padding-left: 0; }
.sup-dia {
    font-weight: 700; color: var(--azul); font-size: .82rem; text-transform: capitalize;
    background: #f0f4fa; padding: 5px 10px; margin: 10px 0 4px -3px; border-left: 3px solid var(--azul);
}
.sup-ev { display: flex; align-items: baseline; gap: 10px; padding: 4px 10px; font-size: .88rem; border-bottom: 1px solid #f0f2f5; }
.sup-ev-hora { color: #8a97a8; font-variant-numeric: tabular-nums; min-width: 42px; font-size: .82rem; }
.sup-ev-ico { min-width: 18px; }
.sup-ev-negocio  .sup-ev-txt { color: var(--azul); }
.sup-ev-catalogo .sup-ev-txt { color: var(--verde); }

/* --- Módulo Cotización: cupo y botón de "Cargar detalle" (Etapa 2) --- */
.cupo-detalle { display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
    padding: 4px 10px; font-size: .84rem; color: #34506e; background: #eef4fb;
    border: 1px solid #d5e3f2; border-radius: 999px; }
.cupo-detalle strong { color: var(--azul); font-variant-numeric: tabular-nums; }
.cargar-detalle { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.cargar-detalle p { margin: 0; }
.btn-cargar-detalle { background: var(--azul); color: #fff; border-color: var(--azul); }
.btn-cargar-detalle:hover { filter: brightness(1.08); }

/* --- Módulo Cotización (Etapa 2) --- */
/* Toda la línea de la COTIZACIÓN va en azules; el verde es de la etapa siguiente
   (Adjudicada), así que no se mezcla acá. «Cotizar» y «Retomar» ocupan el mismo
   lugar y son la misma acción en distinto momento, por eso comparten el tono. */
.btn-cotizar-op { background: #1f4e79; color: #fff; border-color: #1f4e79; margin-left: 8px; }
.btn-cotizar-op:hover { background: #163a5a; }
.coti-cab-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.coti-params { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 10px; }
.coti-params label { display: flex; flex-direction: column; font-size: .82rem; color: #4a5a6a; gap: 2px; }
.tabla-coti { width: 100%; }
.tabla-coti td, .tabla-coti th { font-size: .84rem; vertical-align: top; }
.tabla-coti .num { white-space: nowrap; }
.coti-req { width: 20%; font-size: .8rem; color: #4a5a6a; white-space: normal; line-height: 1.3; }
.col-producto { width: 26%; white-space: normal; line-height: 1.35; }
.prod-buscar { margin-top: 6px; }
.inline-mini { display: inline; margin: 0; }
.coti-checks { white-space: nowrap; }
.chk-btn { border: 1px solid #cdd6e0; background: #f6f8fb; border-radius: 5px; padding: 2px 6px; font-size: .76rem; cursor: pointer; margin: 1px; }
.chk-btn.chk-on { background: #e3f4e9; border-color: #2e7d52; color: #2e7d52; font-weight: 600; }
.coti-acc { white-space: nowrap; }
.coti-tot-grid { display: flex; gap: 24px; flex-wrap: wrap; align-items: stretch; }
.tabla-tot { width: 100%; }
.tabla-tot td { padding: 4px 8px; }
.tabla-tot .tot-sub td { border-top: 2px solid #d5e3f2; font-weight: 600; }
.sem-pill { color: #fff; padding: 2px 10px; border-radius: 999px; font-size: .8rem; margin-left: 8px; }
.coti-acciones-final { display: flex; align-items: center; gap: 14px; margin-top: 14px; }

/* --- Cotización: encabezado ordenado en secciones --- */
.coti-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 20px; margin: 10px 0 4px; padding: 10px 12px; background: #f6f8fb; border: 1px solid #e3e9f0; border-radius: 8px; }
.coti-datos > div { display: flex; flex-direction: column; }
.coti-datos .dl { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #8a97a8; }
.coti-datos .dv { font-size: .92rem; color: #24303d; font-weight: 600; }
.coti-form-secciones { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; margin-top: 8px; }
.coti-fs { border: 1px solid #dbe3ec; border-radius: 8px; padding: 8px 14px 12px; display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.coti-fs legend { font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; color: #4a5a6a; padding: 0 6px; font-weight: 600; }
.coti-fs label { display: flex; flex-direction: column; font-size: .8rem; color: #4a5a6a; gap: 3px; }
.coti-fs label.chk-inline { flex-direction: row; align-items: center; gap: 6px; }
.coti-fs input[type=number], .coti-fs input[type=text], .coti-fs select { padding: 5px 7px; border: 1px solid #cdd6e0; border-radius: 5px; }
.coti-fs input[type=number] { width: 90px; }
.coti-fs-acc { align-self: flex-end; }
.con-lupa { display: inline-flex; align-items: stretch; }
.con-lupa input { border-radius: 5px 0 0 5px; width: 150px; }
.lupa { border: 1px solid #cdd6e0; border-left: none; border-radius: 0 5px 5px 0; background: #eef2f7; cursor: not-allowed; padding: 0 8px; }

/* --- Cotización: cuadro cliente + ficha de costos en cascada --- */
.coti-cuadro { flex: 1 1 360px; max-width: 480px; display: flex; flex-direction: column; }
.coti-cuadro h4 { margin: 0 0 6px; font-size: .95rem; color: var(--azul); }
.tabla-cascada td.num { font-variant-numeric: tabular-nums; }
.tabla-cascada .resta td { color: #6a7684; }
.tabla-cascada .tot-sub td { border-top: 2px solid #d5e3f2; font-weight: 600; color: #24303d; }
.fila-fin td { background: #f6f8fb; border-top: 1px dashed #cdd6e0; border-bottom: 1px dashed #cdd6e0; }
.fin-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.fin-inline .chk-inline { flex-direction: row; align-items: center; gap: 6px; font-size: .82rem; }
.fin-inline label { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: #4a5a6a; }
.fin-inline select { padding: 3px 6px; border: 1px solid #cdd6e0; border-radius: 5px; }

/* Cotización: línea de indicadores financieros (dólar, UF, UTM) */
.coti-indicadores { background: #eef4fb; border-color: #d5e3f2; }
.coti-indicadores .dv { color: var(--azul); }

/* Cotización: ofertas por proveedor (precio + stock) en el buscador */
.ofertas-cel { min-width: 320px; }
.oferta-op { display: flex; align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px solid #f0f2f5; }
.oferta-op:last-child { border-bottom: none; }
.op-prov { min-width: 100px; font-weight: 600; color: #24303d; }
.op-precio { min-width: 110px; font-variant-numeric: tabular-nums; }
.op-stock { min-width: 70px; font-size: .82rem; }
.op-stock.stock-si { color: #2e7d52; }
.op-stock.stock-no { color: #d9534f; }

/* Cotización: resumen Venta − Costos = Margen (horizontal, arriba, visible sin scroll) */
.coti-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 14px; padding: 9px 16px;
    background: #f0f6fc; border: 1px solid #d5e3f2; border-radius: 8px; font-size: .9rem; }
.coti-resumen .cr-op { color: #8a97a8; font-weight: 700; font-size: 1.05rem; }
.coti-resumen strong { color: #24303d; }
/* Cotización: semáforo de presupuesto — 3 recuadros compactos del mismo tamaño */
.presu-sem { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin: 8px 0 2px; }
.ps-box { padding: 4px 6px; border-radius: 5px; font-size: .66rem; line-height: 1.15; text-align: center;
    border: 1px solid #e0e0e0; background: #f4f5f7; color: #9aa3ad; opacity: .5; }
.ps-box.on { opacity: 1; font-weight: 700; color: #fff; }
.ps-a.on { background: #d9534f; border-color: #d9534f; }
.ps-b.on { background: #c58a00; border-color: #c58a00; }
.ps-c.on { background: #2e7d52; border-color: #2e7d52; }
.fila-presu td { color: #6a7684; }
.cf-nota { font-size: .78rem; margin: 6px 0; }
/* Cotización: tamaños de letra homogéneos en las tablas de totales */
.tabla-tot td { font-size: .85rem; padding: 4px 8px; }
.tabla-tot .tot-sub td { font-size: .9rem; }
/* Cotización: barra de filtros del buscador (mayorista + stock) */
.cf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.cf-lbl { font-size: .82rem; color: #6a7684; font-weight: 600; }
.cf-chip { display: inline-block; padding: 4px 12px; border: 1px solid #cdd6e0; border-radius: 6px; background: #fff;
    color: #34506e; font-size: .84rem; text-decoration: none; }
.cf-chip:hover { background: #f2f6fb; }
.cf-chip.on { background: var(--azul); color: #fff; border-color: var(--azul); }
.cf-chip.cf-verde { color: #2e7d52; }
.cf-chip.cf-rojo { color: #d9534f; }
.cf-chip.cf-verde.on { background: #2e7d52; color: #fff; border-color: #2e7d52; }
.cf-chip.cf-rojo.on { background: #d9534f; color: #fff; border-color: #d9534f; }

/* Cotización: quitar las flechas (spinners) de los campos numéricos (se escriben directo) */
.tabla-coti input[type=number], .coti-fs input[type=number], .fin-inline input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.tabla-coti input[type=number]::-webkit-inner-spin-button, .tabla-coti input[type=number]::-webkit-outer-spin-button,
.coti-fs input[type=number]::-webkit-inner-spin-button, .coti-fs input[type=number]::-webkit-outer-spin-button,
.fin-inline input[type=number]::-webkit-inner-spin-button, .fin-inline input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none; margin: 0; }

/* Cotización: cantidad pedida por MP en el requerimiento */
.req-cant { display: inline-block; background: #eef4fb; color: #1f4e79; font-weight: 700; font-size: .74rem;
    padding: 1px 7px; border-radius: 4px; margin-bottom: 3px; }

/* Oportunidades: cantidad pedida del ítem, resaltada */
.item-cant { color: #1f4e79; font-size: 1rem; background: #eef4fb; padding: 1px 8px; border-radius: 4px; }

/* Cotización: subtotal del costo logístico (antes del Mg Vta Neto) */
.tabla-cascada .subt-log td { border-top: 1px dashed #cdd6e0; font-style: italic; color: #4a5a6a; }

/* Cotización: encabezados numéricos pueden ir en 2 líneas (columnas más angostas) */
.tabla-coti thead th.num, .tabla-coti thead th { white-space: normal; vertical-align: bottom; line-height: 1.15; }

/* Cotización: columna cantidad pedida + ficha técnica por línea */
.col-pedida { width: 60px; }
.req-cant { color: #1f4e79; font-size: 1rem; }
.ficha-tec { margin-top: 5px; font-size: .8rem; }
.ficha-no { color: #b7791f; }
.ficha-edit { margin-left: 6px; font-size: .78rem; }
.ficha-form { margin-top: 5px; }
.ficha-form input[type=url] { padding: 4px 7px; border: 1px solid #cdd6e0; border-radius: 5px; font-size: .8rem; }
/* Peso y dimensiones bajo el producto en el buscador de la cotización */
.prod-pesos { margin-top: 4px; font-size: .78rem; color: #55606b; }
.prod-pesos .peso-edit { margin-left: 6px; font-size: .78rem; }
.peso-form { margin-top: 5px; }
.peso-form input[type=number] { padding: 3px 5px; border: 1px solid #cdd6e0; border-radius: 5px; font-size: .78rem; }
/* Editar nombre comercial desde el buscador de la cotización */
.nc-edit { margin-left: 6px; font-size: .82rem; text-decoration: none; }
.nc-form { margin-top: 5px; }
.nc-form input[type=text] { padding: 4px 7px; border: 1px solid #cdd6e0; border-radius: 5px; font-size: .82rem; }

/* Cotización: CHECK en vertical (ahorra ancho) */
.coti-checks { display: flex; flex-direction: column; gap: 3px; align-items: stretch; }
.coti-checks .inline-mini { display: block; margin: 0; }
.coti-checks .chk-btn { display: block; width: 100%; text-align: left; }

/* Cotización: ciclo de vida (botones + estados) */
.boton-enviar { background: #2f6fa5; }
.boton-generar { background: #2e7d52; border-color: #2e7d52; }
.boton-generar:hover { filter: brightness(1.08); background: #2e7d52; }
.est-pill { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.est-pend { background: #fbf1d6; color: #b7791f; }
.est-aprob { background: #e3f4e9; color: #2e7d52; }
.est-gen { background: #eaeef2; color: #4a5a6a; }
.coti-acc-sep { flex: 1; min-width: 8px; }
.coti-acciones-final { flex-wrap: wrap; }
/* Cotización: precio unit + total de línea */
.pu-u { font-size: .7rem; }
.linea-total { font-size: .78rem; color: #4a5a6a; }
/* Cotización: fuentes más chicas en la tabla de líneas para que alcance todo */
.tabla-coti td, .tabla-coti th { font-size: .78rem; }
.tabla-coti td { padding: 6px 6px; }
.tabla-coti input[type=number], .tabla-coti input[type=text] { font-size: .78rem; padding: 4px 5px; }
.tabla-coti .chk-btn { font-size: .72rem; padding: 2px 5px; }

/* Cotización: Cambiar + Eliminar juntos dentro de la celda del producto */
.prod-acciones { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.prod-cambiar { font-size: .74rem; padding: 4px 8px; }

/* Cotización: observaciones / comentarios */
.coti-obs { margin: 14px 0; }
.coti-obs label { font-weight: 600; font-size: .9rem; }
.coti-obs textarea { width: 100%; max-width: 720px; padding: 8px 10px; border: 1px solid #cdd6e0; border-radius: 6px; font-family: inherit; font-size: .88rem; margin-top: 4px; }
.obs-jefe { background: #fbf1d6; border: 1px solid #ecd9a5; border-radius: 6px; padding: 8px 12px; font-size: .85rem; }

/* Cotización: observaciones dentro del cuadro, botón a la derecha del textarea */
.coti-obs { margin-top: 12px; flex: 1 1 auto; display: flex; flex-direction: column; }
.obs-lbl { font-weight: 600; font-size: .8rem; display: block; margin-bottom: 3px; }
.obs-row { display: flex; gap: 8px; align-items: stretch; flex: 1; }
.obs-row textarea { flex: 1; width: auto; max-width: none; height: 100%; min-height: 60px; padding: 6px 9px; border: 1px solid #cdd6e0; border-radius: 6px; font-family: inherit; font-size: .84rem; margin: 0; resize: vertical; }
.obs-row .boton { margin-top: 0; white-space: nowrap; align-self: flex-start; }
.boton-enviar { text-align: center; line-height: 1.12; }

/* Cotización: botones de la fila de acciones homogéneos (mismo alto/letra; solo cambia color) */
.coti-acciones-final { align-items: center; }
.coti-acciones-final .boton { margin-top: 0; display: inline-flex; align-items: center; justify-content: center;
    line-height: 1.15; font-size: .95rem; padding: 9px 16px; }
.coti-acciones-final .boton-mini { font-size: .82rem; padding: 6px 12px; }

/* ---- SUBCOTIZACIÓN (anexo) ---- */
.anexo-toggle { margin-top: 5px; }
.anexo-btn-on { border-style: dashed; }
.anexo-cab td { background: #eef4fb; border-top: 2px solid #1f4e79; }
.anexo-cab .coti-req strong { color: #1f4e79; }
.anexo-req-txt { font-size: .82rem; margin: 2px 0 4px; }
.anexo-cab-params label { margin-right: 12px; font-size: .82rem; }
.anexo-hijo td { background: #f7fafd; }
.anexo-hijo > td:first-child { border-left: 3px solid #9cc0e6; color: #9cc0e6; font-weight: 700; }
.anexo-hijo-req { font-size: .85rem; }
.anexo-ctrl td { background: #f7fafd; border-bottom: 2px solid #cddcec; padding-top: 4px; padding-bottom: 8px; }
.anexo-acciones { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.anexo-map .map-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.anexo-map label { font-size: .85rem; display: flex; flex-direction: column; gap: 3px; }

/* ---- Dashboard de cotizaciones ---- */
.dash-cards { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.dash-card { flex: 1; min-width: 160px; background: #f4f8fc; border: 1px solid #dbe6f1; border-radius: 8px; padding: 12px 14px; }
.dash-card .dc-lbl { display: block; font-size: .8rem; color: #6a7684; }
.dash-card .dc-val { display: block; font-size: 1.3rem; font-weight: 700; color: #1f4e79; margin-top: 3px; }
.dash-card.dc-margen { background: #eef7f0; border-color: #cfe6d6; }
.dash-card.dc-margen .dc-val { color: #2e7d52; }
/* Botones de resultado de cotización */
.boton-res.res-ganada { background: #2e7d52; color: #fff; }
.boton-res.res-no_ganada { background: #b0562f; color: #fff; }
.boton-res.res-anulada { background: #7a7f87; color: #fff; }
.est-snap { background: #eef2f7; color: #48607a; }
.est-ganada { background: #2e7d52; color: #fff; }
.est-no_ganada { background: #b0562f; color: #fff; }
.est-anulada { background: #7a7f87; color: #fff; }
.coti-acc-sep2 { display: inline-block; width: 100%; height: 0; margin: 6px 0; border-top: 1px dashed #d5dee8; }

/* ---- Buscador de producto: etiquetas de nombre comercial / técnico ---- */
.nm-tag { display: inline-block; font-size: .66rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; vertical-align: middle; letter-spacing: .3px; }
.nm-nc { background: #1f4e79; color: #fff; }
.nm-nd { background: #e7edf3; color: #48607a; }
.col-nombres { line-height: 1.5; }

/* ---- Flete en la cotización ---- */
.flete-auto-info { flex-basis: 100%; margin: 8px 0 0; padding: 8px 12px; background: #eef4fb; border: 1px solid #d5e3f2; border-radius: 6px; font-size: .9rem; color: #33404f; }
.flete-auto-info.muted { background: #f6f8fa; color: #6a7684; }
.coti-fs-flete label { min-width: 116px; }
/* El select "Tipo (zona extrema)" necesita más ancho para "Extremo Terrestre" (hay espacio en su fila) */
.coti-fs-flete label.lbl-tipo { min-width: 160px; }
.coti-fs-flete label.lbl-tipo select { width: 160px; max-width: 160px; }
/* Origen/Destino: letra más chica + campo más ancho para alcanzar a leer la comuna */
.coti-fs-flete input[type=text][name=origen], .coti-fs-flete input[type=text][name=destino_comuna] {
    width: 130px; max-width: 130px; font-size: .72rem; letter-spacing: -.2px; }
.coti-fs-flete label:has(input[name=origen]), .coti-fs-flete label:has(input[name=destino_comuna]) { min-width: 130px; }

/* ---- Despacho/Flete + Plazos compactos (al lado de Parámetros de venta) ---- */
.coti-fs-flete label, .coti-fs-plazos label { font-size: .74rem; }
.coti-fs-flete select, .coti-fs-flete input[type=text], .coti-fs-flete input[type=number] { width: 108px; max-width: 108px; box-sizing: border-box; font-size: .8rem; padding: 4px 6px; }
.coti-fs-flete { gap: 6px 8px; }
.coti-fs-plazos { gap: 8px 10px; }
.coti-fs-flete, .coti-fs-plazos { padding: 6px 10px 8px; }
/* Ancho acotado: los campos se acomodan en 2 líneas (el check "Precio incluye flete" cae abajo)
   y el bloque cabe AL LADO de Parámetros de venta */
/* Columna izquierda (Parámetros + banner flete + botón) fija; Despacho/Plazos se empujan a la derecha */
.coti-col-izq { display: flex; flex-direction: column; gap: 8px; flex: 0 0 210px;
    align-self: flex-start; width: 210px; max-width: 210px; box-sizing: border-box; }
.coti-col-izq .coti-fs-acc { margin: 0; }
/* Columna derecha = Despacho + Plazos como bloque, empujado a la derecha (Plazos pega al margen derecho) */
.coti-col-der { display: flex; flex-wrap: nowrap; gap: 12px; align-items: flex-start; }
.coti-fs-flete { flex: 0 0 auto; width: 450px; max-width: 450px; align-items: flex-start; align-content: flex-start; }
.coti-fs-plazos { flex: 0 0 auto; }
/* Slot central: llena el espacio entre Parámetros y Despacho y CENTRA el banner + botón (arriba).
   Así Despacho/Plazos quedan a la derecha sin moverse, y el banner queda parejo entre columnas. */
.flete-slot { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start; gap: 7px; }
.flete-mini { box-sizing: border-box; width: 100%; max-width: 210px; padding: 8px 11px; font-size: .74rem; display: flex; flex-direction: column; gap: 2px; }
.flete-mini .fm-l { display: block; line-height: 1.3; }
.flete-mini .fm-monto { font-weight: 700; }
/* Botón Guardar debajo del banner: MISMO ancho exacto del recuadro celeste (210, border-box), compacto */
.flete-slot .coti-fs-acc { box-sizing: border-box; width: 100%; max-width: 210px; margin: 0; align-self: center; display: flex; }
.boton-slot { box-sizing: border-box; width: 100%; padding: 6px 10px; font-size: .82rem; line-height: 1.15; }
.coti-fs-flete .chk-inline { flex-basis: 100%; margin-top: 2px; }
/* Plazos: columna vertical angosta, aprovecha el espacio a la derecha del Despacho */
.coti-fs-plazos { flex: 0 0 auto; max-width: 220px; flex-direction: column; align-items: stretch; gap: 5px; }
.coti-fs-plazos label { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; white-space: nowrap; }
.coti-fs-plazos .plazo-ro { font-size: .74rem; color: #4a5a6a; white-space: nowrap; }
.coti-fs-plazos input[type=number] { width: 56px; }
/* Parámetros de venta angosto: etiqueta arriba, campo abajo (2 líneas) y sin recuadros grandes */
.coti-fs-param { flex: 0 0 auto; align-items: flex-end; width: 100%; box-sizing: border-box; }
.coti-fs-param label { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; font-size: .74rem;
    white-space: normal; max-width: 62px; line-height: 1.15; min-height: 50px; }
.coti-fs-param input[type=number] { width: 58px; padding: 4px 6px; }
/* Campos de edición más justos en todo el bloque Despacho/Plazos */
.coti-fs-flete input, .coti-fs-flete select, .coti-fs-plazos input { padding: 4px 6px; }

/* ---- Panel de Guías de despacho (agrupación por mayorista + confirmación) ---- */
.guias-panel { margin-top: 10px; padding: 10px 12px; background: #f7f9fc; border: 1px solid #dbe4ef; border-radius: 8px; }
.guias-head { font-size: .9rem; margin-bottom: 8px; }
.guias-head .muted { font-weight: 400; font-size: .82rem; }
.guias-tabla { border-collapse: collapse; margin: 0 0 8px; min-width: 340px; }
.guias-tabla th, .guias-tabla td { padding: 4px 12px; border-bottom: 1px solid #e6ecf3; font-size: .85rem; text-align: left; }
.guias-tabla th.num, .guias-tabla td.num { text-align: right; }
.guias-tabla tfoot td { border-top: 2px solid #cdd9e6; border-bottom: none; font-weight: 600; }
.guias-tabla input[type=number] { text-align: right; }
/* Tabla a la izquierda; bloque de confirmación pegado a la derecha (de derecha a izquierda) */
.guias-body { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.guias-acc { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.guias-estado { font-size: .82rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.guias-estado.ok { background: #e3f4e9; color: #2e7d52; }
.guias-estado.auto { background: #eef4fb; color: #2f6fa5; }
.boton-sec { background: #5a6b7d; border-color: #5a6b7d; }
/* Detalle del flete por guía (chequeo contra el tarifario) */
.flete-det-guias { margin-top: 10px; padding: 10px 12px; background: #f2f8f6; border: 1px solid #bfe0d6; border-radius: 8px; }
.fdg-head { margin-bottom: 6px; font-size: .85rem; }
.fdg-tabla { border-collapse: collapse; min-width: 340px; }
.fdg-tabla th, .fdg-tabla td { padding: 4px 12px; border-bottom: 1px solid #dcebe5; font-size: .85rem; text-align: left; }
.fdg-tabla th.num, .fdg-tabla td.num { text-align: right; }
.fdg-tabla tfoot td { border-top: 2px solid #c4ddd3; border-bottom: none; }
.fdg-tabla tfoot tr.fdg-total td { border-top: none; }

/* ---- Módulo Clientes ---- */
.cli-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.cli-form label { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; color: #4a5a6a; }
.cli-form input { padding: 6px 8px; border: 1px solid #cdd6e0; border-radius: 6px; font-size: .9rem; }
.cli-form input[readonly] { background: #eef2f7; color: #667; }
.badge-mp { display: inline-block; background: #e3eefb; color: #1f4e79; font-weight: 700; font-size: .72rem; padding: 1px 8px; border-radius: 4px; }

/* Picker de cliente/contacto en el encabezado de la cotización */
.coti-cliente-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 8px 0 4px; padding: 8px 10px; background: #f7f9fc; border: 1px solid #dbe4ef; border-radius: 8px; }
.cli-pick-lbl { font-size: .82rem; color: #4a5a6a; }
.cli-pick-lbl select { margin-left: 6px; padding: 4px 8px; max-width: 340px; }

/* Recuadro Condición de venta = FILA PROPIA (~6cm), bajo Parámetros y el botón Guardar.
   flex-basis:100% lo baja a su propia línea; el fieldset mide ~6cm y va a la izquierda. */
/* LAS TRES CAJAS, DEL MISMO ANCHO Y SIN ESPACIOS (2026-08-27). Medido en pantalla:
   Parámetros iba en 186, el botón de la solicitud en 210 y Condición de venta en 227.
   Y Condición terminaba al pie de todo, con media pantalla en blanco encima —al 75%
   de zoom se veía un recuadro suelto abajo—. Ahora las tres van en 210 y Condición
   vive DENTRO de la columna izquierda, pegada bajo Parámetros. */
.coti-fs-cond { flex: 0 0 auto; width: 100%; max-width: 210px; box-sizing: border-box;
    flex-direction: row; flex-wrap: nowrap; align-items: flex-end; gap: 8px; padding: 6px 10px 8px; }
.coti-fs-cond .cond-lbl { display: flex; flex-direction: column; gap: 3px; font-size: .72rem; color: #4a5a6a; }
.coti-fs-cond select { padding: 4px 6px; font-size: .8rem; }
/* 118 + 62 de validez + 8 de separacion + 20 de padding + 2 de borde = 210 exactos:
   con 122 el contenido empujaba la caja a 214 y no calzaba con las otras dos. */
.coti-fs-cond select[name=forma_pago] { width: 118px; max-width: 118px; }
.coti-fs-cond select[name=validez] { width: 62px; max-width: 62px; }

/* ---- Hoja de Presupuesto (documento interno imprimible) ---- */
.presup-doc { background: #fff; border: 1px solid #dbe4ef; border-radius: 10px; padding: 22px 26px; margin-top: 12px; }
.presup-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid #1f4e79; padding-bottom: 10px; margin-bottom: 12px; }
.presup-titulo { color: #1f4e79; font-size: 1.4rem; margin: 0; }
.presup-folio { color: #4a5a6a; font-size: .85rem; margin-top: 2px; }
.presup-badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: .78rem; font-weight: 700; }
.presup-badge.ok { background: #e3f4e9; color: #2e7d52; }
.presup-badge.warn { background: #fbf1d6; color: #b7791f; }
.presup-datos { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.presup-datos td { padding: 4px 10px 4px 0; }
.presup-datos .dl { display: block; font-size: .68rem; letter-spacing: .04em; color: #8a97a6; text-transform: uppercase; }
.presup-datos .dv { font-weight: 600; color: #24303d; }
.presup-h3 { color: #1f4e79; font-size: 1rem; margin: 16px 0 6px; }
.presup-items { width: 100%; font-size: .82rem; }
.presup-items th, .presup-items td { padding: 5px 8px; border-bottom: 1px solid #eef2f7; }
.presup-items th.num, .presup-items td.num { text-align: right; }
.presup-items tfoot td { border-top: 2px solid #cdd9e6; font-weight: 600; background: #f7f9fc; }
.presup-items td.neg { color: #c0392b; }
.presup-ficha { display: flex; gap: 24px; flex-wrap: wrap; }
.presup-cascada { border-collapse: collapse; min-width: 320px; flex: 1; }
.presup-cascada td { padding: 4px 10px; border-bottom: 1px solid #eef2f7; font-size: .85rem; }
.presup-cascada td.num { text-align: right; font-variant-numeric: tabular-nums; }
.presup-cascada tr.resta td { color: #6a7684; }
.presup-cascada tr.sub td { border-top: 1px solid #cdd9e6; font-weight: 700; }
.presup-cascada tr.sem td { font-weight: 700; }
.presup-cascada tr.sem-fila td:first-child { color: #6a7684; }
.presup-pie { margin-top: 14px; font-size: .74rem; color: #8a97a6; text-align: center; }
@page { margin: 14mm; }
@media print {
    .sidebar, .no-print, .flash, .barra-superior { display: none !important; }
    .contenido { margin: 0 !important; max-width: none !important; padding: 0 !important; }
    body { background: #fff !important; }
    .presup-doc { border: none; border-radius: 0; padding: 2mm; }
}

/* Hoja de presupuesto: el % del margen va ANTES del monto (mantiene alineada la columna de pesos) */
.presup-cascada .mg-pct { color: #6a7684; font-weight: 400; font-size: .82em; margin-right: 4px; }

.presup-h3-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.presup-pesos { font-size: .72rem; color: #6a7684; margin-top: 3px; }
.presup-pesos.muted { color: #b7791f; }
.presup-items { font-size: .78rem; }

/* Alerta de empaque (impresoras / Brother): dimensiones encarecen el flete */
.warn-empaque { margin-top: 5px; padding: 5px 8px; background: #fdf3d6; border: 1px solid #e8c877; border-radius: 5px;
    color: #8a5a00; font-size: .72rem; line-height: 1.3; }

/* Hoja de presupuesto: marca para curar nombres comerciales */
.nc-flag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; font-size: .64rem; font-weight: 700;
    text-decoration: none; vertical-align: middle; white-space: nowrap; }
.nc-flag.nc-rev { background: #fbf1d6; color: #8a5a00; border: 1px solid #e8c877; }
.nc-flag.sin-nc { background: #fdecea; color: #a3251f; border: 1px solid #e6a9a4; }

/* ===== Documento imprimible de la COTIZACIÓN (formato cliente aprobado) ===== */
.coti-pdf { background:#fff; color:#24303d; max-width:820px; margin:12px auto; padding:26px 30px; border:1px solid #dbe4ef;
    border-radius:8px; font-size:12px; line-height:1.4; }
.cp-membrete { display:flex; gap:16px; align-items:flex-start; }
.cp-logos { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.cp-logo1 { height:42px; } .cp-logo2 { height:44px; }
.cp-empresa { font-size:10.5px; color:#6a7684; }
.cp-empresa .cp-razon { font-size:11px; font-weight:700; color:#24303d; margin-bottom:2px; }
.cp-wsp { display:flex; align-items:center; gap:5px; margin-top:2px; }
.cp-wsp-ico { height:12px; }
.cp-titulo { background:#1f4e79; color:#fff; font-weight:700; font-size:15px; padding:7px 12px; border-radius:4px; margin:16px 0 12px; }
.cp-cab { display:flex; gap:0; border:1px solid #e6ecf3; border-radius:6px; }
.cp-cab-col { flex:1; padding:9px 14px; font-size:11px; }
.cp-cab-col + .cp-cab-col { border-left:1px solid #e6ecf3; }
.cp-cab-col div { margin:2px 0; }
.cp-l { color:#8a97a6; }
.cp-saludo { font-size:11px; margin:12px 0 8px; }
.cp-detalle { width:100%; border-collapse:collapse; }
.cp-detalle th { background:#1f4e79; color:#fff; font-size:10.5px; padding:6px 8px; text-align:left; }
.cp-detalle th.num, .cp-detalle td.num { text-align:right; }
.cp-detalle td { padding:7px 8px; border-bottom:1px solid #eef2f7; vertical-align:top; }
.cp-ficha { color:#2f6fa5; text-decoration:underline; text-decoration-color:#bcd0e6; font-size:10.5px; }
.cp-stock { font-size:10px; color:#6a7684; font-style:italic; margin:6px 0 0; }
.cp-mt { display:flex; align-items:center; gap:16px; margin:10px 0 4px; border-top:1px solid #d5e3f2; padding-top:8px; }
.cp-marcas { flex:1; max-width:360px; height:auto; opacity:.9; }
.cp-tot { flex:0 0 auto; min-width:230px; border-collapse:collapse; }
.cp-tot td { padding:3px 8px; font-size:12px; }
.cp-tot td.num { text-align:right; font-variant-numeric:tabular-nums; }
.cp-tot tr.cp-line td { border-top:1px solid #d5e3f2; }
.cp-tot tr.cp-total td { border-top:1px solid #d5e3f2; font-weight:700; color:#1f4e79; font-size:13px; }
.cp-3col { display:flex; gap:0; margin:14px 0; border:1px solid #e6ecf3; border-radius:6px; }
.cp-col { flex:1; padding:9px 14px; font-size:11px; }
.cp-col + .cp-col { border-left:1px solid #e6ecf3; }
.cp-col div { margin:2px 0; }
.cp-h { font-weight:700; color:#1f4e79; font-size:12px; margin-bottom:4px; }
.cp-mp { display:flex; align-items:center; justify-content:center; flex:0 0 150px; }
.cp-mp img { max-width:140px; height:auto; }
.cp-nota { display:flex; gap:10px; margin:12px 0; }
.cp-nota-t { font-weight:700; color:#1f4e79; flex:0 0 auto; }
.cp-nota p { margin:0; font-size:10.5px; text-align:justify; }
.cp-despacho { font-size:10.5px; text-align:justify; margin:8px 0; }
.cp-pie { text-align:center; color:#1f4e79; font-weight:700; font-size:13px; margin-top:16px; }
@media print {
    .sidebar, .no-print, .flash, .barra-superior { display:none !important; }
    .contenido { margin:0 !important; max-width:none !important; padding:0 !important; }
    body { background:#fff !important; }
    .coti-pdf { border:none; border-radius:0; margin:0; padding:0; max-width:none; }
}

.cp-pie a { color: inherit; text-decoration: none; }

/* Cotización imprimible: columnas fijas (colgroup) + totales tabulados bajo Precio unit./Total */
.cp-detalle{ table-layout:fixed; }
/* El Part Number no pasa de ~20 caracteres: sin un ancho fijo, la tabla le daba
   la mitad del espacio sobrante y el Detalle quedaba apretado (usuario 2026-08-22). */
.cp-detalle col.c1{ width:118px; }
.cp-detalle col.c3{ width:54px; } .cp-detalle col.c4{ width:104px; } .cp-detalle col.c5{ width:104px; }
.cp-detalle td{ word-wrap:break-word; overflow-wrap:anywhere; }
.cp-totgrid{ margin-top:2px; }
.cp-totgrid td{ border-bottom:none; padding:3px 8px; }
.cp-totgrid .cp-tl{ text-align:right; color:#24303d; }
.cp-totgrid .cp-ta{ text-align:right; font-variant-numeric:tabular-nums; }
.cp-totgrid tr.cp-line .cp-tl, .cp-totgrid tr.cp-line .cp-ta{ border-top:1px solid #d5e3f2; }
.cp-totgrid tr.cp-total .cp-tl, .cp-totgrid tr.cp-total .cp-ta{ font-weight:700; color:#1f4e79; font-size:13px; border-top:1px solid #d5e3f2; }
.cp-marcas-cell{ vertical-align:middle; padding-left:0; }
.cp-marcas{ max-width:340px; width:100%; height:auto; opacity:.9; }

/* Cotización imprimible: letra más grande (usa toda la hoja) + ocultar título app al imprimir */
.coti-pdf { font-size: 14px; max-width: 900px; }
.cp-empresa { font-size: 11.5px; } .cp-empresa .cp-razon { font-size: 12.5px; }
.cp-logo1 { height: 50px; } .cp-logo2 { height: 52px; }
.cp-titulo { font-size: 20px; padding: 10px 16px; margin: 20px 0 14px; }
.cp-cab-col { font-size: 12.5px; padding: 11px 16px; }
.cp-saludo { font-size: 13px; margin: 14px 0 10px; }
.cp-detalle th { font-size: 12px; padding: 8px; }
.cp-detalle td { font-size: 13.5px; padding: 9px 8px; }
.cp-qr { width: 66px; height: 66px; }
.cp-qr-lbl, .cp-qr-url { font-size: 10px; }
.cp-detalle col.c1 { width: 130px; }   /* ~20 caracteres, que es lo máximo de un Part Number */
.cp-detalle col.c4, .cp-detalle col.c5 { width: 115px; }
.cp-ficha { font-size: 12px; }
.cp-stock { font-size: 11.5px; }
.cp-tot td, .cp-totgrid td { font-size: 14px; padding: 4px 8px; }
.cp-totgrid .cp-tl { width: 115px; } .cp-totgrid .cp-ta { width: 115px; }
.cp-totgrid tr.cp-total .cp-tl, .cp-totgrid tr.cp-total .cp-ta { font-size: 16px; }
.cp-col { font-size: 12.5px; padding: 11px 16px; } .cp-h { font-size: 13.5px; }
.cp-nota p, .cp-despacho { font-size: 12px; }
.cp-nota, .cp-despacho { margin: 14px 0; }
.cp-pie { font-size: 18px; margin-top: 20px; }
.cp-marcas { max-width: 420px; }
.cp-mp { flex: 0 0 175px; } .cp-mp img { max-width: 170px; }
@media print { .contenido > h1 { display: none !important; } }

/* Cotización imprimible: Condiciones más ancha (vendedor ~1cm a la derecha) → "aceptación OC" en 1 línea */
.cp-3col .cp-col:nth-child(1) { flex: 1.2; }

/* Cronómetro de gestión de la cotización */
.tiempo-gestion { display:inline-block; background:#eef4fb; color:#1f4e79; font-size:.62em; font-weight:700;
    padding:2px 9px; border-radius:999px; vertical-align:middle; }

/* Aviso de ficha PDF no incrustable en la cotización */
.aviso-ficha{background:#fff4e5;border:1px solid #f0c48a;border-left:4px solid #e08a1e;color:#7a4a10;
  padding:10px 14px;border-radius:6px;margin:10px 0;font-size:.86rem;line-height:1.4}
.aviso-ficha ul{margin:6px 0;padding-left:20px}
.aviso-ficha .mono{font-family:monospace;color:#9a5a20}

/* Ficha técnica del producto: mensaje inline en bloque + botón X para eliminar */
.ed-form ~ .msg-inline, h3 + .msg-inline { display:block; margin:8px 0 }
.ficha-actual{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:8px 0}
.ficha-actual .ficha-item{display:inline-flex;align-items:center;gap:5px}
.btn-x-ficha{border:1px solid #e6b3b0;background:#fdecea;color:#b0281a;border-radius:50%;
  width:18px;height:18px;line-height:1;font-size:.72rem;cursor:pointer;padding:0;display:inline-flex;
  align-items:center;justify-content:center}
.btn-x-ficha:hover{background:#f7c9c5}

/* ===== Pantalla de ERRORES (registro de fallas y páginas lentas) ===== */
.err-cab{margin-bottom:14px}
.err-tarjetas{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}
.err-tarjeta{background:#fff;border:1px solid var(--gris-borde);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:12px 16px;min-width:150px;font-size:.82rem;color:var(--gris-texto)}
.err-tarjeta .err-num{display:block;font-size:1.6rem;font-weight:700;color:var(--azul);line-height:1.1}
.err-tarjeta-nuevo{border-color:#e6b8b3;background:#fff8f7}
.err-tarjeta-nuevo .err-num{color:var(--rojo)}
.err-barra{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;margin:14px 0 10px}
.err-tabs{display:flex;gap:6px}
.err-tab{padding:6px 14px;border:1px solid var(--gris-borde);border-radius:20px;background:#fff;
  color:var(--gris-texto);text-decoration:none;font-size:.85rem}
.err-tab.activo{background:var(--azul);border-color:var(--azul);color:#fff}
.err-acciones{display:flex;gap:8px}
.err-vacio{background:#fff;border:1px solid var(--gris-borde);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:24px;text-align:center}
.err-vacio p{margin:0 0 8px}
.tabla-errores{font-size:.84rem}
.tabla-errores th,.tabla-errores td{padding:7px 9px;vertical-align:top}
.err-fecha{white-space:nowrap;font-variant-numeric:tabular-nums}
.err-url{max-width:230px;word-break:break-all;font-size:.8rem;color:var(--azul-claro)}
.err-origen{font-size:.78rem}
.err-ref{font-size:.78rem;white-space:nowrap}
.err-pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.74rem;
  white-space:nowrap;font-weight:600}
.err-p-error{background:#fdecea;color:#a3271b;border:1px solid #f2c2bc}
.err-p-aviso{background:#fdf5e3;color:#8a6116;border:1px solid #efdfb6}
.err-p-lento{background:#eaf1f8;color:#1f4e79;border:1px solid #c5d8ea}
/* Aviso rojo del menú lateral: cuántas novedades hay sin revisar. */
.badge-alerta{background:var(--rojo);color:#fff;border-radius:10px;padding:1px 7px;
  font-size:.72rem;font-weight:700;margin-left:6px}

/* ===== Buscador de la pantalla Seguimiento ===== */
.seg-buscar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 14px}
.seg-buscar input[type=text]{flex:1;min-width:280px;max-width:520px;padding:8px 12px;
  border:1px solid var(--gris-borde);border-radius:var(--radio);font-size:.9rem}
.seg-buscar input[type=text]:focus{outline:none;border-color:var(--azul-claro);
  box-shadow:0 0 0 2px rgba(47,111,165,.15)}
.seg-resultado{font-size:.85rem;color:var(--gris-texto);opacity:.85}

/* ===== N° de Orden de Compra en Seguimiento (pivote de compra y venta) ===== */
.dg-adjudicar{display:flex;gap:6px;align-items:center}
.dg-adjudicar input[type=text]{padding:4px 8px;border:1px solid var(--gris-borde);
  border-radius:5px;font-size:.82rem;width:110px}
.dg-adjudicar input[type=text]:focus{outline:none;border-color:var(--verde);
  box-shadow:0 0 0 2px rgba(31,138,76,.15)}
.oc-num{display:inline-block;padding:2px 8px;border-radius:5px;background:#eaf5ee;
  border:1px solid #bfe0cb;color:#1f5340;font-size:.82rem;font-weight:600;white-space:nowrap}

/* ===== COMPETENCIA: cuántas empresas ya ofertaron (indicador vertical) ===== */
.col-comp{width:56px;text-align:center}
.comp{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:34px;padding:3px 5px;border-radius:6px;border:1px solid transparent;line-height:1.1}
.comp-n{font-size:.95rem;font-weight:700}
.comp-sube{font-size:.62rem;font-weight:600;opacity:.9;margin-top:1px}
.comp-libre{background:#eaf5ee;border-color:#bfe0cb;color:#1f5340}
/* `comp-baja` (el azul de 1 a 3) quedo sin uso el 2026-08-26: ese caso se fundio con
   el verde. Se deja definido por si alguna pantalla vieja todavia lo nombra. */
.comp-baja {background:#e8f0f9;border-color:#c3d8ee;color:#1f4e79}
.comp-media{background:#fdf3e0;border-color:#efdcb4;color:#8a6116}
.comp-alta {background:#fdeceb;border-color:#f2c4c0;color:#a3271b}
.comp-vacio{color:#b4b2a9;font-size:.85rem}

/* ===== Agregar un producto que NO está en el catálogo, desde la cotización ===== */
.prod-nuevo{margin-top:14px;border-top:1px dashed var(--gris-borde);padding-top:12px}
.pn-abrir{background:#eef4fa;border:1px solid #c3d8ee;color:var(--azul);border-radius:var(--radio);
  padding:7px 14px;font-size:.88rem;cursor:pointer;font-weight:600}
.pn-abrir:hover{background:#e2edf8}
.pn-form{margin-top:10px;background:#fbfcfd;border:1px solid var(--gris-borde);
  border-radius:var(--radio);padding:12px 14px}
/* PRODUCTO NUEVO — la rejilla solo REPARTE el ancho; el aspecto de cada control
   lo pone la normalización global (`.lf-campo` + el bloque del final). Antes tenía
   padding y borde propios y por eso los recuadros salían de distinto alto. */
.pn-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px 10px;margin-top:10px;align-items:end}
.pn-grid .lf-campo{min-width:0}
/* el ancho lo fija el bloque global del final: acá lo pisaría .lf-campo */
.pn-c2{grid-column:span 2}
.pn-c3{grid-column:span 3}
.pn-c4{grid-column:span 4}
.pn-ancho{grid-column:span 6}
.pn-fichas{grid-template-columns:repeat(6,1fr);margin-top:12px}
/* Aviso de ayuda: ícono a la izquierda y el texto corrido al lado (no en columnas). */
.pn-nota{display:flex;align-items:flex-start;gap:7px;margin:10px 0 0;padding:8px 10px;
         background:#fdf7e7;border:1px solid #e6d3a3;border-radius:6px;
         font-size:.78rem;line-height:1.45;color:#6b5720}
.pn-nota svg{flex:0 0 auto;margin-top:2px;color:#b3892a}
/* El CHECK que decide si se le arma la ficha propia. Se ve como una decisión,
   no como un aviso: fondo azul suave y la casilla a la izquierda. */
/* «Crear Ficha Propia»: abre el armador AQUÍ MISMO, sin salir de la pantalla.
   Es una acción secundaria, así que va con contorno; el botón sólido sigue siendo
   el de crear y asignar. Encendido (panel abierto) se rellena. */
.pn-ficha-zona{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;
               padding-top:12px;border-top:1px dashed var(--gris-borde)}
/* HIJO DIRECTO: escrito como descendiente alcanzaba también a los <span> de ayuda
   DENTRO del panel, y como esos van en columna el `flex-basis: 300px` se convertía
   en 300px de ALTO — un espacio enorme entre la etiqueta y su recuadro. Tercera vez
   hoy con el mismo patrón: una regla de contenedor no debe atravesar lo que contiene. */
.pn-ficha-zona > .muted{flex:1 1 300px;font-size:.76rem;line-height:1.4}
.btn-ficha-propia{background:#fff;color:var(--azul);border:1px solid #9dc3e6}
.btn-ficha-propia:hover{background:#eef4fa;color:var(--azul)}
.btn-ficha-propia.on{background:var(--azul);color:#fff;border-color:var(--azul)}
/* Apagado mientras el check del link esté marcado: se ve que existe y que hoy no
   corresponde, en vez de aparecer y desaparecer (que confunde más que ayudar). */
.btn-ficha-propia.apagado{background:#f2f5f8;color:#9aa6b4;border-color:#dbe2ea;cursor:not-allowed}
.btn-ficha-propia.apagado:hover{background:#f2f5f8;color:#9aa6b4}
/* El check que decide, dentro de la etiqueta del link. */
.pn-chk-link{width:14px;height:14px;margin:0 5px 0 0;vertical-align:-2px;cursor:pointer}

.pn-ficha-panel{flex:1 1 100%;margin-top:10px;padding:14px 16px;background:#fff;
                border:1px solid #c3d8ee;border-radius:8px}
.pn-ficha-campo{display:flex;flex-direction:column;gap:3px;margin:12px 0 0;
                font-size:.76rem;font-weight:600;color:#6a7684;text-transform:uppercase;
                letter-spacing:.04em}
.pn-ficha-campo .muted{text-transform:none;letter-spacing:0;font-weight:400;font-size:.74rem}
.pn-ficha-campo textarea{width:100%;box-sizing:border-box;padding:8px 10px;font-family:inherit;
                         font-size:.84rem;color:#24303d;border:1px solid #c7d2de;border-radius:6px;
                         text-transform:none;letter-spacing:0;font-weight:400;resize:vertical}
.pn-ficha-files{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.pn-ficha-files .lf-campo input[type=file]{width:290px}
.pn-ficha-pie{font-size:.74rem;margin:12px 0 0}
.pn-gris{font-size:.68rem;color:#6a7684;font-weight:400;font-style:normal;
         text-transform:none;letter-spacing:0}
.pn-nota-link{background:#eef4fa;border-color:#c3d8ee;color:#24303d}
.pn-nota-link svg{color:#1f4e79}
/* El desplegable de casillas dentro de una fila de formulario: sin la etiqueta
   «Mayorista:» al lado, y con la caja del mismo alto que los demás controles. */
.fp-solo{gap:0}
.fp-solo .fp-desplegar{height:var(--control-alto);box-sizing:border-box;min-width:150px;
                       justify-content:space-between}
/* Los nombres de rubro de Mercado Público son largos: el panel necesita más ancho
   que el de un proveedor («Ingram») o el nombre se parte en cuatro líneas. */
.fp-solo .fp-panel{min-width:330px;max-width:380px}

.pn-nota span{flex:1 1 auto}
.pn-ojo{color:var(--rojo);font-size:.7rem;text-transform:uppercase;letter-spacing:.3px}
.pn-pie{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.pn-pie > .muted{flex:1 1 260px;font-size:.76rem;line-height:1.4}
@media (max-width:1100px){ .pn-grid,.pn-fichas{grid-template-columns:repeat(2,1fr)}
  .pn-c2,.pn-c3,.pn-c4,.pn-ancho{grid-column:span 2} }

/* ===== Estado del sistema (¿está instalado Y funcionando?) ===== */
.est-version{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;background:var(--azul);
  color:#fff;border-radius:var(--radio);padding:12px 18px;margin-bottom:14px}
.est-vlabel{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;opacity:.75}
.est-vnum{font-size:1.15rem;font-variant-numeric:tabular-nums}
.est-vnota{font-size:.82rem;opacity:.85}
.est-resumen{padding:10px 16px;border-radius:var(--radio);margin-bottom:14px;font-size:.92rem}
.est-bien{background:#eaf5ee;border:1px solid #bfe0cb;color:#1f5340}
.est-mal {background:#fdeceb;border:1px solid #f2c4c0;color:#a3271b}
.est-lista{display:flex;flex-direction:column;gap:8px}
/* PERO SI ES UNA TABLA, no. Esta clase nacio para un contenedor y despues se uso en la
   tabla de casos: un display:flex sobre una tabla destruye la grilla —los titulos se
   apinan a la izquierda y no calzan con las celdas—. Se devuelve a su comportamiento. */
table.est-lista { display: table; width: 100%; }
table.est-lista thead, table.est-lista tbody { display: table-row-group; }
table.est-lista thead { display: table-header-group; }
table.est-lista tr { display: table-row; }
table.est-lista th, table.est-lista td { display: table-cell; }
.est-item{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--gris-borde);
  border-radius:var(--radio);padding:11px 14px;box-shadow:var(--sombra)}
.est-item.est-falla{border-color:#f2c4c0;background:#fffaf9}
.est-icono{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:.9rem}
.est-ok .est-icono{background:#eaf5ee;color:#1f5340;border:1px solid #bfe0cb}
.est-falla .est-icono{background:#fdeceb;color:#a3271b;border:1px solid #f2c4c0}
.est-cuerpo{display:flex;flex-direction:column;gap:2px}
.est-dato{font-size:.86rem;color:var(--gris-texto)}
.est-mal-txt{font-size:.82rem;color:#a3271b;margin-top:3px}

/* ===== Supervisión: actividad por día de un usuario ===== */
.tabla-pordia{font-size:.86rem}
.tabla-pordia th,.tabla-pordia td{padding:6px 9px}
.tabla-pordia .num{text-align:right;font-variant-numeric:tabular-nums}
.pd-fecha{white-space:nowrap}
.tabla-pordia tr.pd-finde{background:#fbfaf6}
.tabla-pordia tr.pd-finde .pd-fecha strong{color:var(--amarillo)}

/* ------- Ficha del comprador (comprador.php) -------
   El nombre del organismo en la lista abre su ficha. Subrayado punteado: se nota
   que se puede pinchar sin gritar (si no se nota, nadie lo usaría). */
.org-link { color: inherit; text-decoration: none; border-bottom: 1px dashed #1f4e79; }
.org-link:hover { color: #1f4e79; border-bottom-style: solid; }
.cmp-cab { background: #fff; border: 1px solid #e2e6ea; border-radius: 6px; padding: 14px 16px; margin-bottom: 14px; }
.cmp-nombre { margin: 0 0 8px; font-size: 1.15rem; color: #1f4e79; }
.cmp-datos { font-size: .85rem; border-collapse: collapse; }
.cmp-datos td { padding: 2px 14px 2px 0; }
.cmp-datos td:first-child { color: #6b7680; width: 90px; }
.cmp-falta { color: #9aa3ab; font-style: italic; }
.cmp-cards { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.cmp-card { flex: 1 1 150px; background: #fff; border: 1px solid #e2e6ea; border-radius: 6px;
            padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.cmp-num { font-size: 1.6rem; font-weight: 700; color: #1f4e79; line-height: 1.1; }
.cmp-lbl { font-size: .8rem; color: #444; }
.cmp-sub { font-size: .72rem; color: #8a939b; }
.cmp-money { font-size: .78rem; color: #2e7d52; font-weight: 600; }
.cmp-tit { font-size: .95rem; color: #1f4e79; margin: 18px 0 6px; }
.cmp-vacio { font-size: .85rem; color: #6b7680; background: #f7f9fb; border: 1px dashed #d5dde4;
             border-radius: 6px; padding: 10px 12px; }
.tabla-cmp { font-size: .82rem; width: 100%; }
.tabla-cmp .cmp-titulo { color: #444; }
.cmp-nota { font-size: .78rem; color: #6b7680; margin-top: 20px; border-top: 1px solid #e2e6ea; padding-top: 10px; }

/* ------- Explorar rubros (rubros.php) -------
   Ventana de solo lectura a lo que se compra fuera de la configuración. */
.rub-cobertura { font-size: .8rem; color: #5c6874; background: #f2f7fb; border: 1px solid #d7e3ee;
                 border-radius: 6px; padding: 8px 11px; margin-bottom: 14px; }
.tabla-rub { font-size: .82rem; width: 100%; }
.tabla-rub .rub-nombre { font-weight: 600; color: #1f4e79; }
.rub-muted { color: #8a939b; font-size: .78rem; }
/* SUBTITULOS DE «EXPLORAR RUBROS»: cada rubro bajo su grupo de «Tu mercado».
   La fila del subtitulo NO es una fila de datos, asi que se distingue por fondo y no
   por color de letra: si se pareciera a un rubro, se leeria como uno mas. */
.rub-sub-fila td { background: #eef2f7; border-top: 2px solid #dbe3ec; padding: 7px 10px; }
.rub-sub-fila.rub-sub-on td { background: rgba(18,112,127,.09); border-top-color: #a8cdd2; }
.rub-sub-n { font-weight: 700; color: var(--azul); font-size: .86rem; }
.rub-sub-on .rub-sub-n { color: #0f5b66; }
.rub-sub-dato { font-size: .74rem; color: #7a8694; margin-left: 10px; }
.rub-sub-etq { font-size: .68rem; font-weight: 700; padding: 1px 8px; border-radius: 999px;
               margin-left: 10px; border: 1px solid #cbd5e1; color: #7a8694; background: #fff; }
.rub-sub-si { color: #0f5b66; border-color: #a8cdd2; background: rgba(18,112,127,.12); }
.rub-sub-no { color: #7a5c00; border-color: #e0c98a; background: #fdf6e3; }

.rub-sub-vacio td { background: #f7f8fa; }
.rub-sub-vacio .rub-sub-n { color: #8a95a3; font-weight: 600; }
.rub-sub-vacio .rub-sub-dato { font-style: italic; }

.rub-nuevo { background: #2e7d52; color: #fff; font-size: .7rem; padding: 1px 6px; border-radius: 8px; }
.rub-ya { background: #e8edf2; color: #6b7680; font-size: .7rem; padding: 1px 6px; border-radius: 8px; }
.rub-mia td { background: #fbfcfd; }
.rub-titulo { font-size: 1.1rem; color: #1f4e79; margin: 4px 0 10px; }
.rub-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rub-chip { font-size: .76rem; padding: 3px 10px; border: 1px solid #d5dde4; border-radius: 12px;
            color: #44525f; text-decoration: none; background: #fff; }
.rub-chip:hover { border-color: #1f4e79; color: #1f4e79; }
.rub-chip-on { background: #1f4e79; color: #fff; border-color: #1f4e79; }
.rub-chip-n { opacity: .7; }
.rub-barra { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.rub-resumen { font-size: .8rem; color: #5c6874; }
.tabla-rub .rub-org { line-height: 1.3; }
.tabla-rub .rub-org .rub-muted { display: block; }

/* ------- Lista de compradores (compradores.php) ------- */
.cmpx-filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.cmpx-buscar { min-width: 280px; }
.cmpx-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.tabla-cmpx { font-size: .82rem; width: 100%; }
.tabla-cmpx .cmpx-org { line-height: 1.35; }
.tabla-cmpx .cmpx-org .rub-muted { display: block; }
.cmpx-gana { background: #2e7d52; color: #fff; padding: 1px 7px; border-radius: 8px; font-weight: 600; }
/* Bloque "Qué compra" dentro de la ficha del comprador */
.cmp-ayuda { font-size: .78rem; color: #6b7680; margin: 4px 0 12px; }
.cmp-sub-tit { font-size: .9rem; color: #1f4e79; margin: 14px 0 6px; }
.onu-cod { background: #eef4fa; color: #1f4e79; font-family: monospace; font-size: .75rem;
           padding: 1px 6px; border-radius: 3px; }
.tabla-cmp .cmp-titulo .rub-muted { display: block; }
.rub-chk { width: 26px; text-align: center; }
.rub-sel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.rub-sel-lbl { font-size: .78rem; color: #6b7680; margin-right: 2px; }

/* ------- QR de la ficha técnica en la cotización impresa (2026-08-22) -------
   Va DEBAJO del enlace, dentro de la misma celda: no se abre una columna nueva
   porque costaría ancho en todas las filas, incluidas las que no tienen ficha.
   El enlace clickeable se mantiene: el QR y la dirección SUMAN formas de llegar. */
.cp-qr-fila { display:flex; align-items:center; gap:8px; margin:5px 0 2px; }
.cp-qr { flex:none; width:58px; height:58px; }
.cp-qr-txt { min-width:0; }
.cp-qr-lbl { display:block; font-size:9px; color:#6b7680; line-height:1.3; }
.cp-qr-url { display:block; font-size:9px; color:#44525f; word-break:break-all; line-height:1.3; }
@media print { .cp-qr-fila { page-break-inside:avoid; } }

/* ------- Modificar el producto YA elegido, desde la línea de la cotización -------
   Antes había que pulsar «Cambiar» (que abre el buscador) y encontrarlo de nuevo
   solo para corregir un peso o el nombre comercial. (Usuario 2026-08-22.) */
.prod-modif { margin-top: 6px; background: #f7f9fb; border: 1px solid #dbe3ea; border-radius: 5px;
              padding: 7px 9px; }
.pm-estado { font-size: .72rem; color: #5c6874; margin-bottom: 5px; }
.pm-fila { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 5px; }
.pm-fila label { font-size: .7rem; color: #6b7680; }
.pm-nombre { flex: 1 1 260px; min-width: 180px; font-size: .78rem; }
.pm-num { width: 66px; font-size: .78rem; }
.pm-num::-webkit-outer-spin-button, .pm-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pm-num { -moz-appearance: textfield; }
.pm-ayuda { font-size: .68rem; color: #8a939b; line-height: 1.35; }
.ficha-temporal { font-size: .72rem; color: #8a5a00; background: #fff8e6; border: 1px solid #f0d79a;
                  border-radius: 4px; padding: 4px 7px; margin-top: 4px; line-height: 1.35; }

/* ------- «Cómo va esta cotización»: ✅ el sistema · ✋ una persona (2026-08-22) -------
   El contador "N de 9 automáticos" es la medida del avance hacia que el humano solo valide. */
.pasos-caja { background:#fff; border:1px solid #e2e6ea; border-radius:6px; margin-bottom:12px; }
.pasos-caja > summary { cursor:pointer; padding:8px 12px; display:flex; align-items:baseline;
                        gap:12px; flex-wrap:wrap; list-style:none; }
.pasos-caja > summary::-webkit-details-marker { display:none; }
.pasos-caja > summary::before { content:'▸'; color:#8a939b; margin-right:2px; }
.pasos-caja[open] > summary::before { content:'▾'; }
.pasos-tit { font-size:.76rem; font-weight:600; letter-spacing:.04em; color:#0f6e56; }
.pasos-leyenda { font-size:.72rem; color:#6b7680; }
.pasos-cuenta { margin-left:auto; font-size:.72rem; color:#5c6874; }
.pasos-tabla { width:100%; font-size:.78rem; border-collapse:collapse; margin:0 0 4px; }
.pasos-tabla td { padding:3px 12px; line-height:1.45; }
.pasos-tabla .paso-ico { width:26px; text-align:center; padding-left:12px; }
.pasos-tabla .paso-dato { text-align:right; font-size:.72rem; color:#8a939b; white-space:nowrap; }
.pasos-tabla tr.paso-pendiente { background:#fdf4e3; }
.pasos-tabla tr.paso-pendiente td { color:#633806; font-weight:500; }
.pasos-tabla tr.paso-pendiente .paso-dato { color:#8a5a00; font-weight:400; }
.pasos-pie { border-top:1px solid #eef2f6; padding:7px 12px; font-size:.72rem; color:#6b7680; line-height:1.45; }

/* ------- GESTIÓN DE VENTA (ventas.php / venta.php) — 2026-08-22 ------- */
.venta-nueva { background:#fff; border:1px solid #e2e6ea; border-radius:6px; padding:8px 12px; margin-bottom:14px; }
.venta-nueva > summary { cursor:pointer; font-size:.82rem; color:#1f4e79; font-weight:600; }
.venta-form { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:flex-end; margin-top:8px; }
.venta-form label { display:flex; flex-direction:column; gap:2px; font-size:.7rem; color:#6b7680; }
.venta-form input, .venta-form select { font-size:.8rem; }
.venta-form .venta-check { flex-direction:row; align-items:center; gap:5px; font-size:.75rem; color:#44525f; }
.venta-form .venta-ancho { flex:1 1 260px; }
.venta-cols { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.venta-caja { flex:1 1 320px; background:#fff; border:1px solid #e2e6ea; border-radius:6px; padding:10px 13px; }
.venta-caja h3 { margin:0 0 8px; font-size:.9rem; color:#1f4e79; }
.venta-ok { font-size:.8rem; color:#2e7d52; margin:4px 0; }
.tabla-venta { font-size:.82rem; width:100%; }
.venta-estado { font-size:.7rem; padding:2px 8px; border-radius:9px; background:#e8edf2; color:#44525f; }
.ve-aceptada, .vf-aceptada { background:#e3f3e8; color:#1f6b3a; }
.ve-recepcion_conforme, .vf-pagada { background:#2e7d52; color:#fff; }
.ve-rechazada, .ve-cancelada, .vf-rechazada { background:#fdeaea; color:#a32d2d; }
.ve-ok { color:#2e7d52; font-weight:600; font-size:.76rem; }
.venta-reclamos { border-top:1px dashed #dbe3ea; margin-top:8px; padding-top:8px; }
.venta-reclamos-tit { flex-basis:100%; font-size:.72rem; font-weight:600; color:#8a5a00; }
.venta-adjudicadas { border-left: 3px solid #2e7d52; margin-bottom: 14px; }
.venta-adjudicadas h3 { color: #1f6b3a; }

/* ---- Valorizar y comprar (comprar.php) ------------------------------------
   La pantalla donde se decide si la OC se acepta: confirmar a quién se le compra
   y ver el margen que queda HOY, con el mismo semáforo de la cotización. */
/* La fila del dólar: alineada abajo, como todas las filas de formulario del
   sistema, y con el campo del ancho que pide el dato (no uno gigante). */
.val-tc { display:flex; align-items:end; gap:12px; flex-wrap:wrap; margin:10px 0 16px; }
.val-tc-campo input[type=text] { width:110px !important; text-align:right;
                                 font-variant-numeric:tabular-nums; }
.val-tc-ref { font-size:.78rem; color:#6a7684; padding-bottom:8px; }
.val-tc-ref strong { color:#24303d; font-weight:600; }
/* (`.tabla-valorizar` se renombró a `.tabla-valorizar`; sus estilos viven al final,
   junto con la normalización de tipografía y recuadros de esa tabla.) */
.tabla-valorizar { width:100%; }
.val-sube { background:#fff7ed; }
.val-sinprecio { background:#fdf2f2; }
.val-alza { color:#c0392b; font-weight:600; }
.val-baja { color:#2a6b4a; font-weight:600; }
.val-resumen { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; margin-top:16px; }
.val-resumen .tabla-tot { flex:1; min-width:420px; max-width:640px; }
.val-resumen .tot-sep td { border-top:2px solid #dbe3ec; padding-top:8px; }
.val-resumen .tot-fuerte td { font-weight:700; font-size:1.02rem; color:#1f4e79; }
.val-semaforo { min-width:220px; border-radius:10px; padding:16px 18px; text-align:center; border:2px solid; }
.val-semaforo.sem-azul     { border-color:#2f6fb3; background:#eef5fc; color:#1f4e79; }
.val-semaforo.sem-amarillo { border-color:#d9a406; background:#fffaeb; color:#8a6400; }
.val-semaforo.sem-rojo     { border-color:#d9534f; background:#fdf2f2; color:#a02622; }
.val-semaforo.sem-gris     { border-color:#c7d2de; background:#f6f8fb; color:#5b6b7d; }
.val-sem-pct { font-size:2rem; font-weight:700; line-height:1.1; }
.val-sem-txt { font-weight:600; margin-top:2px; }
.val-sem-regla { font-size:.76rem; margin-top:8px; opacity:.8; }
.val-decision { margin-top:22px; border-top:2px solid #dbe3ec; padding-top:14px; }
.val-decision h3 { margin:0 0 8px; }
.val-motivo { display:block; max-width:720px; font-weight:600; font-size:.9rem; }
.val-motivo textarea { width:100%; margin-top:4px; padding:7px; border:1px solid #c7d2de;
                       border-radius:6px; font:inherit; font-weight:400; }
.val-botones { display:flex; gap:10px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.boton-verde { background:#2a6b4a; color:#fff; }
.boton-rojo  { background:#d9534f; color:#fff; }


/* Los dos botones del panel de ventas esperando: mismo tamano y misma linea.
   Solo cambia el color -- rojo la compra, verde la venta. */
.val-acc { white-space:nowrap; }
.val-acc, .val-acc-int { display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.btn-par {
    min-width:150px; padding:7px 12px; text-align:center; line-height:1.2;
    box-sizing:border-box; display:inline-block; font-size:.82rem; border-radius:5px;
}
.btn-compra { background:#d9534f; }
.btn-compra:hover { background:#c0392b; }
.btn-venta  { background:#2a6b4a; }
.btn-venta:hover  { background:#23603f; }
/* Costo escrito a mano en la valorización (cuando no hay cotización ni catálogo).
   Van en una caja propia para que el selector de moneda no se monte sobre la
   columna siguiente cuando la tabla queda apretada. */
.val-manual { white-space:nowrap; }
.val-manual .cm { display:flex; gap:4px; justify-content:flex-end; align-items:center; }
.val-manual input { width:78px; min-width:0; padding:4px 6px; border:1px solid #c7d2de;
                    border-radius:5px; text-align:right; font:inherit; font-size:.82rem; }
.val-manual select { width:56px; min-width:0; padding:4px 2px; border:1px solid #c7d2de;
                     border-radius:5px; font-size:.76rem; }
.tabla-valorizar th, .tabla-valorizar td { padding-left:7px; padding-right:7px; }
.nota-falta { margin:12px 0; padding:13px 17px; border-radius:9px; font-size:.93rem;
              background:#fff8e8; border:1px solid #d9a406; color:#5f4600; max-width:none; }
.val-guardar { margin:12px 0 0; }

/* ---- Reclamos MP (reclamar el proceso, sin OC ni factura) ---------------- */
.rec-nuevo { border:1px solid var(--linea,#dbe3ec); border-radius:10px; background:#fff;
             padding:12px 16px; margin:14px 0 18px; }
.rec-nuevo > summary { cursor:pointer; font-weight:600; color:#1f4e79; }
.rec-buscar { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin:14px 0; }
.rec-buscar label { font-weight:600; font-size:.9rem; }
.rec-buscar input { display:block; margin-top:4px; padding:6px 8px;
                    border:1px solid #c7d2de; border-radius:5px; font:inherit; }
.rec-form h4 { margin:16px 0 4px; }
.rec-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
            gap:12px 18px; margin:10px 0 14px; }
.rec-grid label, .rec-lbl { display:block; font-weight:600; font-size:.88rem; }
.rec-grid input, .rec-grid select, .rec-lbl input, .rec-lbl select {
    display:block; width:100%; margin-top:4px; padding:6px 8px;
    border:1px solid #c7d2de; border-radius:5px; font:inherit; font-weight:400; }
.rec-texto { width:100%; padding:8px 10px; border:1px solid #c7d2de; border-radius:6px;
             font:inherit; font-size:.93rem; }
.rec-cols { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.rec-col { flex:1; min-width:420px; }
.rec-col-lado { flex:0 0 320px; min-width:280px; }
.rec-log { list-style:none; margin:0; padding:0; font-size:.86rem; }
.rec-log li { padding:5px 0; border-bottom:1px solid #eef2f7; }
.rec-log li:last-child { border-bottom:none; }
.rec-plazo { display:inline-block; padding:2px 8px; border-radius:11px;
             font-size:.78rem; font-weight:600; white-space:nowrap; }
.rp-vencido { background:#fdecea; color:#a02622; }
.rp-urgente { background:#fdecea; color:#c0392b; }
.rp-pronto  { background:#fff5e0; color:#8a6400; }
.rp-holgado { background:#eaf4ec; color:#2a6b4a; }
.tabla-rec-cand { width:100%; font-size:.88rem; margin-top:8px; }

/* ---- La historia congelada de la cotización, dentro de la valorización ---- */
.hist-caja { border:1px solid #cfe0f0; border-left:5px solid #2f6fb3; background:#f7fbff;
             border-radius:0 9px 9px 0; padding:12px 18px; margin:14px 0 18px; }
.hist-caja > summary { cursor:pointer; font-weight:600; color:#1f4e79; font-size:.98rem; }
.hist-sello { font-size:.78rem; font-weight:400; color:#2a6b4a; background:#eaf4ec;
              padding:2px 8px; border-radius:11px; margin-left:8px; }
.hist-cols { display:flex; gap:26px; flex-wrap:wrap; margin-top:12px; }
.hist-bloque { flex:1; min-width:300px; }
.hist-bloque h4, .hist-h { margin:0 0 6px; font-size:.9rem; color:#1f4e79; }
.hist-h { margin-top:14px; }
.hist-tabla { width:100%; font-size:.86rem; border-collapse:collapse; }
.hist-tabla td { padding:3px 6px; border-bottom:1px solid #e6eef6; }
.hist-tabla td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hist-tabla tr:last-child td { border-bottom:none; }
.hist-fuerte td { font-weight:700; color:#1f4e79; border-top:2px solid #cfe0f0; }
.hist-sem { display:inline-block; width:10px; height:10px; border-radius:50%; margin-left:6px; }
.hist-sem.sem-azul{background:#2f6fb3} .hist-sem.sem-amarillo{background:#d9a406}
.hist-sem.sem-rojo{background:#d9534f} .hist-sem.sem-gris{background:#c7d2de}
.hist-scroll { overflow-x:auto; }
.hist-lineas { width:100%; font-size:.82rem; background:#fff; }
.hist-lineas code { font-size:.8rem; color:#1f4e79; }
.hist-obs { font-size:.88rem; background:#fff8e8; border:1px solid #e6d6a8;
            border-radius:6px; padding:8px 12px; margin-top:10px; }

/* ---- Observación por línea de la cotización (la ve el cliente en el PDF) ---- */
.obs-linea { margin-top:6px; }
.obs-texto { background:#fff8e8; border:1px solid #e6d6a8; border-left:3px solid #d9a406;
             border-radius:5px; padding:6px 9px; font-size:.8rem; color:#5f4600; margin-bottom:4px; }
.obs-edit { font-size:.76rem; color:#8a6400; text-decoration:none; border-bottom:1px dotted #d9a406; }
.obs-edit:hover { color:#5f4600; }
.obs-form { margin-top:6px; }
.obs-form textarea { width:100%; max-width:340px; padding:6px 8px; border:1px solid #c7d2de;
                     border-radius:5px; font:inherit; font-size:.8rem; display:block; margin-bottom:5px; }

/* Observación del producto en la cotización impresa: nota para el cliente, bajo el QR.
   Amarillo cálido con letra oscura — se lee como una nota del documento, no como alerta. */
.cp-obs { margin-top:5px; background:#fdf6e3; border:.8px solid #e0c98a;
          border-left:3px solid #d4a72c; border-radius:4px; padding:5px 8px;
          font-size:9.5px; line-height:1.42; color:#4a3c17; text-align:justify; }
@media print { .cp-obs { page-break-inside:avoid; } }
.coti-pdf.grande .cp-obs { font-size:11px; }

/* ---- Notas del día en Supervisión ---------------------------------------
   Un día en blanco es ambiguo: hay que poder decir por qué (licencia, permiso,
   trabajó fuera del sistema) o dejarlo marcado «por confirmar». */
.pd-vacio td { background:#fbfcfd; color:#8a97a4; }
.pd-ojo td { background:#fff8e8; }
.pd-ojo .pd-fecha { box-shadow:inset 3px 0 0 #d9a406; }
.pd-alerta { color:#a02622; }
.pd-th-nota { min-width:210px; }
.pd-nota { font-size:.8rem; min-width:210px; }
.pd-motivo { display:inline-block; padding:1px 8px; border-radius:11px; font-size:.74rem; font-weight:600; }
.pd-motivo.pm-ok   { background:#eaf4ec; color:#2a6b4a; }
.pd-motivo.pm-pend { background:#fdecea; color:#a02622; }
.pd-nota-txt { color:#44525f; margin-top:3px; line-height:1.35; }
.pd-firma { color:#9aa7b4; font-size:.7rem; margin-top:2px; }
.pd-add { font-size:.75rem; color:#2f6fb3; text-decoration:none;
          border-bottom:1px dotted #9dc0e4; display:inline-block; margin-top:3px; }
.pd-form { margin-top:6px; }
.pd-form select, .pd-form textarea { width:100%; margin-bottom:4px; padding:4px 6px;
          border:1px solid #c7d2de; border-radius:5px; font:inherit; font-size:.78rem; }
.sup-pend { border:1px solid #e6d6a8; border-left:5px solid #d9a406; background:#fff8e8;
            border-radius:0 9px 9px 0; padding:12px 18px; margin:14px 0; }
.sup-pend h3 { margin:0 0 4px; font-size:1rem; color:#8a6400; }
.sup-pend ul { margin:8px 0 0; padding-left:20px; font-size:.88rem; }
.sup-pend li { margin-bottom:4px; }

/* ---- Vendedores y equipos de venta --------------------------------------- */
.vd-cols { display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.vd-col { flex:1; min-width:420px; }
.vd-ficha { border:1px solid #dbe3ec; border-radius:9px; background:#fff;
            padding:12px 15px; margin-bottom:12px; position:relative; }
.vd-ficha.vd-off { opacity:.6; background:#fafbfc; }
.vd-cab { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.vd-cod { background:#1f4e79; color:#fff; font-weight:700; font-size:.82rem;
          padding:3px 10px; border-radius:6px; letter-spacing:.04em; }
.vd-cod-eq { background:#2a6b4a; }
.vd-cod-mini { background:#eef4fa; color:#1f4e79; font-weight:600; font-size:.76rem;
               padding:1px 7px; border-radius:5px; }
.vd-nombre { flex:1; padding:5px 8px; border:1px solid #c7d2de; border-radius:5px;
             font:inherit; font-weight:600; }
.vd-badge-off { background:#fdecea; color:#a02622; font-size:.72rem; padding:2px 8px; border-radius:11px; }
.vd-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
           gap:8px 14px; margin-bottom:9px; }
.vd-grid label, .vd-lbl { display:block; font-size:.82rem; font-weight:600; color:#4a5b6d; }
.vd-grid input, .vd-lbl input, .vd-lbl select { display:block; width:100%; margin-top:3px;
           padding:5px 7px; border:1px solid #c7d2de; border-radius:5px; font:inherit;
           font-weight:400; font-size:.85rem; }
.vd-chk { display:flex; align-items:center; gap:6px; font-weight:400; align-self:end; }
.vd-chk input { width:auto; margin:0; }
.vd-miembros { border-top:1px solid #eef2f7; margin-top:10px; padding-top:9px; font-size:.86rem; }
.vd-miembros ul { list-style:none; margin:7px 0; padding:0; }
.vd-miembros li { padding:4px 0; border-bottom:1px solid #f4f7fa; display:flex;
                  align-items:center; gap:8px; flex-wrap:wrap; }
.vd-miembros li:last-child { border-bottom:none; }
.vd-titular { background:#eaf4ec; color:#2a6b4a; font-size:.72rem; padding:2px 8px; border-radius:11px; }
.vd-link { background:#fff; border:1px solid #cfd8e2; color:#4a5866; border-radius:5px;
           padding:3px 9px; font-size:.74rem; font-weight:600; cursor:pointer;
           text-decoration:none; line-height:1.5; }
.vd-link:hover { background:#f3f7fa; border-color:#a9bccf; color:#1f4e79; }
.vd-link-x { color:#a02622; border-color:#e2c3c5; }
.vd-link-x:hover { background:#fbeff0; border-color:#c98d92; color:#7d1d20; }
.vd-add { display:flex; gap:7px; margin-top:7px; }
.vd-add select { flex:1; padding:4px 6px; border:1px solid #c7d2de; border-radius:5px; font-size:.82rem; }
.vd-nuevo { border:1px dashed #c7d2de; border-radius:9px; padding:10px 15px; margin-top:6px; }
.vd-nuevo > summary { cursor:pointer; font-weight:600; color:#1f4e79; font-size:.9rem; }
/* Solo el botón de eliminar va flotando arriba a la derecha: si la regla
   agarra todos los formularios de la ficha, se lleva también los enlaces
   «hacer titular» y «sacar» de cada integrante. */
.vd-ficha .vd-del { position:absolute; top:11px; right:12px; }
.vd-miembros .inline { display:inline; }
/* El selector de identidad en la cotización. */
.coti-identidad { display:flex; align-items:center; gap:8px; font-size:.82rem; margin-top:4px; }
.coti-identidad select { padding:3px 6px; border:1px solid #c7d2de; border-radius:5px; font-size:.8rem; }
/* Respaldo del precio: enlace INTERNO (nuestro costo). Nunca sale en documentos. */
.respaldo-interno { margin-top:4px; font-size:.76rem; }
.respaldo-interno a { color:#8a6400; }
.ri-nota { color:#9aa7b4; font-size:.72rem; }
.pn-publico { font-size:.68rem; color:#2a6b4a; font-weight:600; font-style:normal;
              text-transform:none; letter-spacing:0; }
.pn-interno { font-size:.68rem; color:#a02622; font-weight:600; font-style:normal;
              text-transform:none; letter-spacing:0; }
/* El costo en pesos, cuando se calcula desde el dólar, se marca como derivado. */
.costo-calc { display:block; font-size:.66rem; color:#9aa7b4; }
.costo_clp_edit { text-align:right; }

/* Nota INTERNA de la línea: solo para el equipo, nunca se imprime.
   Gris azulado a propósito, para no confundirla con la observación amarilla
   que SÍ ve el cliente. */
.nota-interna { margin-top:5px; }
.ni-texto { background:#eef2f7; border:1px solid #d5dee8; border-left:3px solid #64748b;
            border-radius:5px; padding:6px 9px; font-size:.8rem; color:#3c4a58; margin-bottom:4px; }
.ni-marca { display:block; font-size:.7rem; color:#8794a3; margin-top:2px; }
.ni-edit { font-size:.76rem; color:#5b6b7d; text-decoration:none; border-bottom:1px dotted #a8b6c4; }
.ni-edit:hover { color:#334155; }
.ni-form { margin-top:6px; }
.ni-form textarea { width:100%; max-width:340px; padding:6px 8px; border:1px solid #c7d2de;
                    border-radius:5px; font:inherit; font-size:.8rem; display:block; margin-bottom:5px; }

/* ---- Contexto del requerimiento en el buscador de productos --------------
   El nombre que trae Mercado Público es la etiqueta genérica del catálogo ONU y
   no sirve para buscar. Lo útil es lo que escribió el comprador, más el rubro y
   el código, que dicen a qué familia de productos apunta. */
.req-contexto { background:#f4f8fc; border:1px solid #cfe0f0; border-left:4px solid #2f6fb3;
                border-radius:0 8px 8px 0; padding:10px 14px; margin:10px 0 14px; }
.rc-cab { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
          color:#2f6fb3; font-weight:600; margin-bottom:5px; }
.rc-texto { font-size:.9rem; color:#24303d; line-height:1.4; margin-bottom:6px; }
.rc-datos { display:flex; gap:18px; flex-wrap:wrap; font-size:.8rem; color:#4a5b6d; }
.rc-datos strong { color:#1f4e79; font-weight:600; }
.rc-datos code { background:#e3edf7; color:#1f4e79; padding:1px 6px; border-radius:4px; }
.rc-sug { margin-top:8px; font-size:.8rem; color:#5b6b7d; }
.rc-chip { display:inline-block; margin:3px 4px 0 0; padding:2px 10px; border-radius:12px;
           background:#fff; border:1px solid #c7d2de; color:#1f4e79;
           text-decoration:none; font-size:.78rem; }
.rc-chip:hover { border-color:#2f6fb3; background:#eaf1f9; }
.rc-chip.on { background:#1f4e79; border-color:#1f4e79; color:#fff; }
/* Nota interna del producto en la Hoja de Presupuesto (documento interno). */
.presup-nota { margin-top:4px; font-size:.78rem; color:#3c4a58; background:#eef2f7;
               border-left:3px solid #64748b; border-radius:4px; padding:4px 8px; }

/* ---- Generador de ficha técnica ------------------------------------------ */
.fg-caja { border:1px solid #dbe3ec; border-radius:10px; background:#fff; padding:16px 20px; margin:14px 0; }
.fg-pn { font-size:.95rem; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid #eef2f7; }
.fg-pn code { background:#eef4fa; color:#1f4e79; padding:2px 8px; border-radius:5px; }
.fg-web { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:14px;
          background:#f4f8fc; border:1px solid #cfe0f0; border-radius:8px; padding:12px 14px; }
.fg-web label { flex:1; min-width:320px; }
.fg-aviso { background:#fff8e8; border:1px solid #d9a406; color:#5f4600;
            border-radius:8px; padding:10px 14px; margin:12px 0; font-size:.9rem; }
.fg-aviso.ok { background:#eef7f0; border-color:#2a6b4a; color:#1a5c28; }
.fg-listo { background:#eef7f0; border:1px solid #2a6b4a; color:#1a5c28;
            border-radius:8px; padding:12px 16px; margin:12px 0; }
.fg-cand { border:1px dashed #c7d2de; border-radius:8px; padding:10px 14px; margin-bottom:14px; }
.fg-cand > summary { cursor:pointer; font-size:.88rem; color:#1f4e79; font-weight:600; }
.fg-cand ul { max-height:220px; overflow-y:auto; font-size:.82rem; color:#4a5b6d; margin:8px 0; }
.fg-descargo { font-size:.8rem; color:#6b7680; background:#f6f8fb; border-left:3px solid #c7d2de;
               padding:8px 12px; border-radius:0 6px 6px 0; margin:14px 0; }
.fg-ml { flex-basis:100%; margin:8px 0 0; font-size:.82rem; color:#5f4600;
         background:#fff8e8; border:1px solid #e6d6a8; border-radius:6px; padding:8px 12px; }
.fg-img { background:#f6f8fb; border:1px solid #dbe3ec; border-radius:8px;
          padding:12px 14px; margin:14px 0; display:grid; gap:12px; }
.fg-img input[type=file] { display:block; margin-top:4px; font-size:.85rem; }
/* Invitación a generar la ficha, justo donde se acaba de crear el producto. */
.ficha-generar-cta { background:#f4f8fc; border:1px solid #cfe0f0; border-radius:8px;
                     padding:10px 14px; margin:10px 0 14px; font-size:.9rem;
                     display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
/* Pasos numerados del generador de ficha: copiar y pegar en cada recuadro. */
.fg-paso { border-left:3px solid #cfe0f0; padding-left:12px; margin:16px 0; }
.fg-num { display:inline-block; width:20px; height:20px; line-height:20px; text-align:center;
          background:#1f4e79; color:#fff; border-radius:50%; font-size:.74rem; margin-right:6px; }
.fg-como { background:#fff8e8; border:1px solid #e6d6a8; border-radius:8px;
           padding:10px 14px; font-size:.88rem; color:#5f4600; margin:12px 0 18px; }

/* ---- Expediente de un reclamo: la cadena de presentaciones ---------------
   Cada una con su N°, su copia, su comprobante y su respuesta. Lo que sirve
   después ante Contraloría es el expediente completo, no un reclamo suelto. */
.rec-exp { margin-top:18px; }
.rec-int { border:1px solid #dbe3ec; border-left:4px solid #2f6fb3; border-radius:0 8px 8px 0;
           padding:12px 16px; margin:12px 0; background:#fff; }
.rec-int-cgr { border-left-color:#a02622; background:#fdfafa; }
.rec-int-cab { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.rec-int-num { background:#1f4e79; color:#fff; font-size:.76rem; font-weight:700;
               padding:2px 9px; border-radius:11px; }
.rec-int-cgr .rec-int-num { background:#a02622; }
.rec-int-fecha { font-size:.78rem; color:#5b6b7d; }
.rec-int-fecha.ok { color:#2a6b4a; }
.rec-int-res { font-size:.74rem; background:#eef4fa; color:#1f4e79; padding:2px 9px; border-radius:11px; }
.rec-docs { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-bottom:10px; }
.rec-doc { border:1px dashed #c7d2de; border-radius:7px; padding:9px 11px; font-size:.82rem; }
.rec-doc.tiene { border-style:solid; border-color:#2a6b4a; background:#f6fbf7; }
.rec-doc-t { font-weight:600; color:#4a5b6d; font-size:.78rem; margin-bottom:5px; }
.rec-doc-sub input[type=file] { display:block; font-size:.76rem; margin-bottom:5px; max-width:100%; }
.rec-int-datos { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
                 gap:8px 12px; align-items:end; border-top:1px solid #eef2f7; padding-top:10px; }
.rec-int-datos label { font-size:.78rem; font-weight:600; color:#4a5b6d; }
.rec-int-datos input, .rec-int-datos select { display:block; width:100%; margin-top:3px;
        padding:5px 7px; border:1px solid #c7d2de; border-radius:5px; font:inherit;
        font-weight:400; font-size:.82rem; }
.rec-int-notas { grid-column:span 2; }
.rec-int-acciones { display:flex; gap:12px; align-items:center; flex-wrap:wrap;
                    border-top:1px solid #eef2f7; padding-top:14px; margin-top:6px; }
.rec-int-acciones button[disabled] { opacity:.45; cursor:not-allowed; }

/* ---- Denuncias reservadas -------------------------------------------------
   El resguardo que exige Mercado Público: rosado con letra roja, para que nadie
   suba un escrito que permita deducir quién denuncia. */
.den-resguardo { background:#fdecef; border:1px solid #f0b6c2; border-left:5px solid #c0392b;
                 border-radius:0 8px 8px 0; padding:12px 16px; margin:14px 0;
                 color:#c0392b; font-size:.92rem; line-height:1.45; }

/* El TIPO de reclamo es la primera pregunta: decide todo lo que viene después. */
.rec-tipo { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:14px 0 10px; }
.rec-tipo-t { font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
              color:#2f6fb3; font-weight:600; }
.rec-tipo-op { padding:6px 14px; border:1px solid #c7d2de; border-radius:20px; background:#fff;
               color:#1f4e79; text-decoration:none; font-size:.88rem; }
.rec-tipo-op:hover { border-color:#2f6fb3; background:#eaf1f9; }
.rec-tipo-op.on { background:#1f4e79; border-color:#1f4e79; color:#fff; font-weight:600; }
.rec-aviso-pago { background:#fff8e8; border:1px solid #e6d6a8; border-left:4px solid #d9a406;
                  border-radius:0 8px 8px 0; padding:10px 14px; margin:10px 0 14px;
                  font-size:.88rem; color:#5f4600; }
.rec-badge-tipo { font-size:.72rem; padding:2px 8px; border-radius:11px; white-space:nowrap; }
.rec-badge-tipo.tt-irregularidad { background:#eef4fa; color:#1f4e79; }
.rec-badge-tipo.tt-pago { background:#fff5e0; color:#8a6400; }

/* Reclamo por PAGO NO OPORTUNO: los datos de la factura y el botón que los trae. */
.rec-pago { border-left:4px solid #d9a406; }
.rec-buscafac { border-left:4px solid #2f6fb3; }
.rec-buscafac-form { display:flex; gap:10px; align-items:center; margin:10px 0; flex-wrap:wrap; }
.rec-buscafac-form input { padding:7px 10px; border:1px solid #c7d2de; border-radius:6px;
                           font:inherit; min-width:220px; }
.rec-traido { background:#eef7f0; border:1px solid #bfe0c8; border-radius:6px;
              padding:8px 12px; font-size:.88rem; margin:10px 0; }

/* ¿La oportunidad ya tiene cotización? El botón lo dice ANTES de hacer clic.
   Mismo tamaño y forma que los demás botones: solo cambia el color. */
/* La línea del proceso en azules, de más oscuro (la acción principal) a más
   claro (la secundaria), con «Cotizada» (#3b9ae1) como tono intermedio. */
.btn-retomar-coti { background:#1f4e79; color:#fff; border-color:#1f4e79; }   /* más OSCURO que Cotizada */
.btn-retomar-coti:hover { background:#163a5a; }
.btn-otra-coti { background:#a9cde9; color:#12364f; border-color:#a9cde9; }   /* más CLARO que Cotizada */
.btn-otra-coti:hover { background:#8fbde0; }
.coti-yatiene { font-size:.74rem; color:#5a6672; margin:0 6px 0 4px; white-space:nowrap; }
.cy-estado { padding:1px 6px; border-radius:9px; background:#eef2f6; }
.cy-borrador          { background:#fff5e0; color:#8a6400; }
.cy-pendiente_aprobacion { background:#fdecef; color:#a3272f; }
.cy-aprobada          { background:#eef4fa; color:#1f4e79; }
.cy-generada          { background:#eaf5ec; color:#2a6b4a; }
.cy-ganada            { background:#2a6b4a; color:#fff; }
.cy-no_ganada, .cy-reemplazada { background:#e9edf1; color:#5a6672; }


/* ===== Columna ACCIONES de Seguimiento =====================================
   Todo alineado como una sola columna: cada fila mide lo mismo y, dentro de
   ella, los recuadros se reparten el ancho en partes iguales. Da igual que un
   recuadro sea un campo de texto o un botón: ocupan lo mismo y miden lo mismo. */
.seg-acc { display:flex; flex-direction:column; gap:4px; width:262px; }
.seg-acc .sa-fila { display:flex; gap:4px; align-items:stretch; margin:0; }
.seg-acc .sa-fila > * { flex:1 1 0; min-width:0; display:flex; }
.seg-acc .sa-fila .boton-mini,
.seg-acc .sa-fila input[type=text] {
    width:100%; margin:0; box-sizing:border-box; min-height:27px;
    display:flex; align-items:center; justify-content:center; text-align:center;
}
.seg-acc .sa-fila input[type=text] { display:block; text-align:left; }
.seg-acc .btn-cotizar-op { margin-left:0; }
/* La fila final (＋ Nueva · LOG): si va solo el LOG, no se estira a todo el ancho. */
.seg-acc .sa-fila:last-child > * { max-width:calc(50% - 2px); }
.seg-acc .sa-nota { font-size:.72rem; color:#5a6672; text-align:center; margin:-1px 0 1px; }
.seg-acc .sa-nota .coti-yatiene { margin:0; }

/* ¿El proceso sigue abierto? Va pegado al botón de cotizar/retomar, porque si
   ya cerró no tiene sentido seguir con esa cotización. */
.cy-cierre { font-size:.72rem; padding:1px 7px; border-radius:9px; margin-left:6px;
             white-space:nowrap; background:#eef2f6; color:#4a5560;
             display:inline-flex; align-items:center; gap:4px; }
.cy-cierre.cc-cerrada { background:#f4e3e5; color:#9b2c33; font-weight:600; }
.cy-cierre.cc-abierta { background:#eaf5ec; color:#2a6b4a; }
.seg-acc .sa-nota .cy-cierre { margin-left:4px; }

/* El chip de cierre reusa los colores de tramo, pero en tamaño chico. */
.cy-cierre.tramo-badge { font-size:.72rem; font-weight:600; padding:1px 7px; }

/* =====================================================================
   FILAS ALTERNADAS + BOTONES DE ACCIÓN LIVIANOS
   ---------------------------------------------------------------------
   El problema que resuelve: con 7 botones rellenos por fila la pantalla se
   volvía un collage y ningún color destacaba. La regla es UN solo botón
   sólido por fila (la acción principal); todo lo demás va en contorno o
   discreto. El color no se pierde — pasa del fondo al borde y la letra —
   así que se sigue identificando por color, pero sin gritar.
   ===================================================================== */

/* --- 1. Filas alternadas (la paridad la pone PHP; la fila de detalle
       acompaña a la suya, por eso no se usa nth-child). --- */
/* Las filas de la tabla son transparentes, así que el gris que se ve es el de la
   página. Para el zebra basta pintar de BLANCO las impares y dejar las pares como
   estaban: «una en blanco y la otra en el color actual». */
.tabla tr.fila-op:not(.fila-par) > td { background: #fff; }
.tabla tr.fila-detalle:not(.fila-par) td { background: #fbfcfe; }
.tabla tr.fila-detalle.fila-par td { background: #f2f6fa; }

/* --- 2. Tamaño: 22 px de alto y letra de 11 px. Con ícono se lee igual. --- */
.seg-acc .boton-mini,
.seg-acc input[type=text],
.acciones .btn-cotizar-op, .acciones .btn-retomar-coti, .acciones .btn-otra-coti,
.det-items h4 .boton-mini {
    min-height: 22px; font-size: .69rem; padding: 2px 7px; letter-spacing: 0;
}
.seg-acc .boton-mini { gap: 4px; font-weight: 500; }
.seg-acc input[type=text] { font-size: .72rem; }
.seg-acc { width: 236px; gap: 3px; }
.seg-acc .sa-fila { gap: 3px; }

/* Los íconos heredan el color del botón (currentColor) y no se deforman. */
.ico { flex: 0 0 auto; vertical-align: -1px; }

/* --- 3. Nivel 2: CONTORNO. El estado que se marca conserva su color en el
       borde y la letra; al pasar el mouse se rellena para confirmar. --- */
.seg-acc .btn-cotizar {
    background: #fff; color: #1f5c8f; border: 1px solid #2f7fbf;
}
.seg-acc .btn-cotizar:hover { background: #2f7fbf; color: #fff; }
.seg-acc .btn-adjudicar {
    background: #fff; color: #23603f; border: 1px solid #2e7d52;
}
.seg-acc .btn-adjudicar:hover { background: #2e7d52; color: #fff; }

/* --- 4. Nivel 3: DISCRETO. Cierres y utilidades: casi sin peso.
       «Descartar» deja de ser rojo — no es una derrota, es TU decisión de no
       ofertar, y además es reversible. «LOG» deja de ser azul de marca: no es
       una etapa del proceso, es una herramienta. --- */
.seg-acc .btn-perdida {
    background: #fff; color: #a4565c; border: 1px solid #e2d3d4;
}
.seg-acc .btn-perdida:hover { background: #a4565c; color: #fff; border-color: #a4565c; }
.seg-acc .btn-descartar {
    background: #fff; color: #5f6b78; border: 1px solid #d9dee5;
}
.seg-acc .btn-descartar:hover { background: #5f6b78; color: #fff; border-color: #5f6b78; }
.seg-acc .btn-liberar {
    background: #fff; color: #8a6714; border: 1px solid #e6dcc4;
}
.seg-acc .btn-liberar:hover { background: #b07d12; color: #fff; border-color: #b07d12; }
.seg-acc .btn-log {
    background: #fff; color: #5f6b78; border: 1px solid #d9dee5;
}
.seg-acc .btn-log:hover { background: #5f6b78; color: #fff; border-color: #5f6b78; }

/* --- 5. La línea de la cotización, con la saturación bajada. --- */
.btn-cotizar   { background: #2f7fbf; }                 /* Cotizada: menos eléctrico */
.btn-adjudicar { background: #2e7d52; }                 /* Adjudicada: verde más sobrio */
.seg-acc .btn-otra-coti { background: #dbe9f5; color: #1f4e79; border-color: #cadff0; }
.seg-acc .btn-otra-coti:hover { background: #c3dcf0; }

/* Zebra para listados SIN filas de detalle: basta con nth-child. */
.tabla-zebra tbody tr:nth-child(odd) > td { background: #fff; }

/* =====================================================================
   INCIDENCIAS — contactos de clientes, con plazo de respuesta.
   ===================================================================== */

/* La alerta que aparece en CUALQUIER pantalla cuando algo se pasó del plazo.
   Va arriba del título a propósito: si estuviera al pie, no se vería. */
.inc-alerta { display:flex; align-items:center; gap:12px; padding:9px 14px; border-radius:8px;
              margin:0 0 14px; font-size:.88rem; border:1px solid; }
.inc-alerta-roja  { background:#fdecef; border-color:#e3b6bc; color:#8d2731; }
.inc-alerta-ambar { background:#fff6e3; border-color:#e6d3a5; color:#7d5c0c; }
.inc-alerta-txt { flex:1; }
.inc-alerta .boton-mini { background:#fff; color:inherit; border:1px solid currentColor; }

/* Plazo: mismo lenguaje de colores que la cuenta regresiva de Oportunidades. */
.inc-plazo { font-size:.74rem; padding:2px 8px; border-radius:10px; white-space:nowrap;
             display:inline-flex; align-items:center; gap:4px; }
.ip-vencida { background:#b3122d; color:#fff; font-weight:500; }
.ip-urgente { background:#e8590c; color:#fff; }
.ip-pronto  { background:#f0c419; color:#3a3413; }
.ip-holgado { background:#eaf2fa; color:#1f4e79; }
.ip-listo   { background:#eaf5ec; color:#2a6b4a; }
.ip-sin     { background:#eef2f6; color:#5a6672; }

.inc-nuevo  { font-size:.68rem; background:#fff5e0; color:#8a6400; padding:1px 6px; border-radius:9px; }
.inc-plat   { font-size:.7rem; background:#eef4fa; color:#1f4e79; padding:1px 6px; border-radius:9px; }
.inc-ok     { font-size:.72rem; color:#2a6b4a; }
.inc-tarde  { font-size:.72rem; color:#9b2c33; font-weight:500; }
.inc-justif { font-size:.7rem; background:#eef2f6; color:#5a6672; padding:1px 6px; border-radius:9px; }
.inc-tab-alerta { color:#9b2c33; font-weight:500; }

/* El recuadro que pide explicaciones cuando se pasó el plazo. Es el corazón
   del módulo: sin un lugar donde explicarse, la gente deja de mirar la alerta. */
.inc-vencida { background:#fdecef; border:1px solid #e3b6bc; border-left:5px solid #b3122d;
               border-radius:0 8px 8px 0; padding:12px 16px; margin:0 0 16px; }
.inc-vencida h3 { margin:0 0 6px; color:#8d2731; display:flex; align-items:center; gap:7px; }
.inc-vencida p { margin:0 0 6px; font-size:.9rem; color:#5a3236; }
.inc-yajust { background:#fff; border-radius:6px; padding:6px 10px; font-size:.84rem; }
.inc-caja-just { border-left:4px solid #d9a406; }
.inc-caja-cli  { border-left:4px solid #2f7fbf; }
.inc-nocotiza  { font-size:.82rem; color:#7d5c0c; background:#fff6e3; border-radius:6px;
                 padding:6px 10px; display:flex; align-items:flex-start; gap:6px; }

/* Formularios: rejilla que se acomoda sola al ancho disponible. */
.inc-nueva { background:#fff; border:1px solid var(--gris-borde); border-radius:10px;
             padding:10px 16px; margin:0 0 16px; }
.inc-nueva summary { cursor:pointer; font-weight:500; color:var(--azul);
                     display:flex; align-items:center; gap:7px; }
.inc-form h4 { margin:14px 0 4px; color:var(--azul); font-size:.95rem; }
.inc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px 14px; margin:8px 0; }
.inc-grid label, .inc-ancho { display:flex; flex-direction:column; gap:3px; font-size:.85rem; }
.inc-grid input, .inc-grid select, .inc-ancho textarea, .inc-ancho input {
    padding:6px 9px; border:1px solid var(--gris-borde); border-radius:6px; font:inherit; font-size:.88rem; }
.inc-ancho { margin:8px 0; }
.inc-grid label .rub-muted { font-size:.74rem; font-weight:400; }
.inc-chk { display:flex; align-items:center; gap:6px; }
.inc-form-motivo { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.inc-form-motivo label { display:flex; flex-direction:column; gap:3px; font-size:.85rem; }
.inc-form-motivo input, .inc-form-motivo select {
    padding:6px 9px; border:1px solid var(--gris-borde); border-radius:6px; font:inherit; }

.inc-archivos { list-style:none; margin:6px 0; padding:0; }
.inc-archivos li { display:flex; align-items:center; gap:10px; padding:5px 0;
                   border-bottom:1px solid #eef2f6; font-size:.88rem; }
.inc-archivos a { display:inline-flex; align-items:center; gap:5px; }
.inc-subir { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.inc-cerrar, .inc-anular { display:flex; gap:6px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.inc-cerrar input[type=text], .inc-anular input[type=text] {
    flex:1; min-width:120px; padding:5px 8px; border:1px solid var(--gris-borde); border-radius:5px; font-size:.82rem; }

/* Quién supervisa a quién. */
.inc-superv { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
              padding:8px 0; border-bottom:1px solid #eef2f6; }
.inc-superv-quien { min-width:200px; font-size:.88rem; }
.inc-superv-lista { display:flex; gap:10px; flex-wrap:wrap; flex:1; }
.inc-superv-lista label { display:flex; align-items:center; gap:4px; font-size:.82rem; }
.inc-dos-tablas { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:0 24px; }
.tabla-inc td { vertical-align:top; }

/* Los filtros de incidencias en UNA línea: son cuatro y se apilaban. */
.inc-filtros input[type=text], .inc-filtros input[type=date], .inc-filtros select {
    width:auto; padding:6px 9px; border:1px solid var(--gris-borde); border-radius:6px;
    font:inherit; font-size:.85rem; background:#fff;
}
.inc-filtros .cmpx-buscar { flex:1 1 220px; min-width:200px; }
.inc-filtros select { max-width:190px; }
.inc-filtros label { display:flex; align-items:center; gap:6px; font-size:.85rem; }

/* El cierre tiene que quedar respaldado por el correo enviado al cliente. */
.inc-respaldo { font-size:.7rem; background:#eaf5ec; color:#2a6b4a; padding:1px 7px;
                border-radius:9px; display:inline-flex; align-items:center; gap:4px; }
.inc-respaldo-ok { font-size:.82rem; color:#2a6b4a; display:flex; align-items:center; gap:5px; margin:6px 0; }
.inc-falta-respaldo { font-size:.82rem; color:#8d2731; background:#fdecef; border-radius:6px;
                      padding:7px 10px; margin:6px 0; }
.inc-cerrar select { padding:5px 8px; border:1px solid var(--gris-borde); border-radius:5px; font-size:.82rem; }
.inc-subir select { padding:5px 8px; border:1px solid var(--gris-borde); border-radius:5px; font-size:.82rem; }
/* Los campos de una misma fila se alinean por su base, así el input del RUT
   no se descuelga cuando su etiqueta ocupa menos líneas que las de al lado. */
.inc-grid { align-items: end; }

/* La cotización que salió de una incidencia, visible desde su ficha. */
.inc-coti-hecha { font-size:.85rem; background:#eef4fa; border:1px solid #cadff0; border-radius:6px;
                  padding:7px 10px; margin:6px 0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* =====================================================================
   PALETA LIVIANA — el color se gana, no se reparte.
   ---------------------------------------------------------------------
   Antes cada dato tenía su cápsula de color: nueve por fila compitiendo,
   y por eso lo urgente no destacaba. Acá el relleno queda SOLO para lo
   que exige acción hoy (cierre bajo 6 h); todo lo demás informa en texto.
   No toca los botones de acción, que ya están resueltos aparte.
   ===================================================================== */

/* --- Encabezado sin azul: la cabecera no es el dato --- */
.tabla th { background: #fafbfc; color: #67717d; font-weight: 500; border-bottom: 1px solid #e4e9ef; }

/* --- Zebra más marcado (el anterior casi no se distinguía) --- */
.tabla tr.fila-op:not(.fila-par) > td { background: #fff; }
.tabla tr.fila-op.fila-par > td      { background: #eef2f7; }
.tabla tr.fila-detalle:not(.fila-par) td { background: #fbfcfe; }
.tabla tr.fila-detalle.fila-par td       { background: #e9eef4; }
.tabla-zebra tbody tr:nth-child(odd) > td  { background: #fff; }
.tabla-zebra tbody tr:nth-child(even) > td { background: #eef2f7; }

/* --- Cuenta regresiva: relleno solo bajo 6 h; el resto, letra --- */
.tabla .tramo-badge {
    background: none !important; color: #5a6672 !important;
    font-weight: 500; padding: 2px 0; border-radius: 0;
}
/* Estas dos pintaban el texto de ambar. Se anulan: desde el 2026-08-26 las 12 y 24 h
   van en el mismo petroleo que el resto -solo los rojos se distinguen entre si-. */
.tabla .tramo-badge.tramo-t1,
.tabla .tramo-badge.tramo-t3,
.tabla .tramo-badge.tramo-t6 {
    color: #fff !important; padding: 2px 8px; border-radius: 10px; font-weight: 600;
}
.tabla .tramo-badge.tramo-t1 { background: #b3122d !important; }
.tabla .tramo-badge.tramo-t3 { background: #d33115 !important; }
.tabla .tramo-badge.tramo-t6 { background: #e8590c !important; }
.tabla .tramo-badge.tramo-vencida { color: #97a1ad !important; }

/* --- Estado de MP y etiquetas de fila: texto, sin cápsula --- */
.tabla .estado-badge, .tabla .fuente-etq, .tabla .badge-monitoreado, .tabla .badge-mp {
    background: none !important; border: 0 !important; padding: 0 !important;
    font-weight: 400; color: #67717d !important; font-size: .78rem;
}
.tabla .venta-estado { background: none !important; padding: 0 !important; font-weight: 500; }

/* --- Competencia: el número informa, el fondo no --- */
.tabla .comp-badge, .tabla .comp-num {
    background: none !important; color: #5a6672 !important; padding: 0 !important; font-weight: 500;
}
.tabla .comp-badge.comp-alto, .tabla .comp-num.comp-alto { color: #9b2c33 !important; }

/* --- Sin barra lateral de color: el cierre ya lo dice --- */
.fila-op td:first-child { border-left-color: transparent !important; }

/* --- El folio en azul de marca, no en celeste --- */
.tabla code { color: #1f4e79; }
/* El folio y las etiquetas de organismo: texto, no cápsula. */
.tabla code { background: none; padding: 0; }
.tabla .pill { background: none !important; border: 0 !important; padding: 0 !important;
               font-weight: 500; font-size: .76rem; }
.tabla .pill-monit  { color: #1f5c8f !important; }
.tabla .pill-estrat { color: #8a6714 !important; }

/* Verde suavizado: mismo peso visual que el azul de marca, sin competir con él.
   Los fondos claros también bajan de saturación para que acompañen. */
.tabla .rub-nuevas, .rub-nuevas { background: #e8f2ec !important; color: #2a6b4a !important; }
.card-money, .dash-money { color: #2e7d52; }
/* En Incidencias, «respondida el …» ya no es urgencia: va como texto. */
.tabla .inc-plazo.ip-listo, .tabla .inc-plazo.ip-holgado, .tabla .inc-plazo.ip-sin {
    background: none !important; padding: 2px 0; font-weight: 500;
}
.tabla .inc-plazo.ip-listo { color: #2a6b4a !important; }
.tabla .inc-plazo.ip-holgado { color: #5a6672 !important; }

/* =====================================================================
   PESTAÑAS — `.seg-tabs` nunca tuvo estilo: se veían como links crudos
   subrayados y pegados. Ahora son pestañas de verdad, con el contador
   como dato secundario y la activa marcada por un filete, no por color
   de fondo (más sobrio, y no compite con la tabla de abajo).
   ===================================================================== */
.seg-tabs {
    display: flex; flex-wrap: wrap; gap: 2px; align-items: flex-end;
    border-bottom: 1px solid #e0e6ed; margin: 0 0 14px;
}
.seg-tabs a {
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 8px 14px 7px; text-decoration: none;
    color: #67717d; font-size: .85rem; font-weight: 500;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    border-radius: 5px 5px 0 0; white-space: nowrap;
}
.seg-tabs a:hover { background: #f4f7fa; color: #24303d; text-decoration: none; }
.seg-tabs a.activa {
    color: #1f4e79; border-bottom-color: #1f4e79; background: #fff; font-weight: 600;
}
/* El número entre paréntesis es contexto, no el titular. */
.seg-tabs a .tab-n { color: #97a1ad; font-weight: 400; font-size: .8rem; }
.seg-tabs a.activa .tab-n { color: #5f83a6; }
/* La pestaña de lo vencido sí llama la atención, pero solo si hay algo. */
.seg-tabs a .tab-alerta { color: #a3272f; font-weight: 600; }
/* El aviso de la pestaña «Por cerrar»: qué se espera de ti en esta vista. */
.inc-aviso-cierre { font-size:.85rem; background:#f2f7fb; border:1px solid #d8e5f0;
                    border-radius:6px; padding:8px 12px; margin:0 0 12px; color:#33506b;
                    display:flex; align-items:flex-start; gap:7px; }

/* =====================================================================
   REGLAS GENERALES pedidas por el usuario (2026-08-23)
   ---------------------------------------------------------------------
   1) CEBRA EN TODO listado con líneas de datos.
   2) BOTONES AMIGABLES siempre: nunca el recuadro crudo del navegador
      («parecen menú de Visual Basic»). La causa era que `.btn-filtro-ig`
      solo fijaba el ancho: sin fondo ni borde, el <button> caía al estilo
      por defecto del sistema operativo.
   3) Los ENLACES de tabla no deben parecer «Word con hipervínculo».
   ===================================================================== */

/* --- 1. Cebra por defecto en TODAS las tablas. Las que llevan fila de
       detalle intercalada usan la paridad de PHP (.fila-par) y se excluyen
       acá para no desalinearse. --- */
.tabla:not(.tabla-nozebra) > tbody > tr:nth-child(odd) > td  { background: #fff; }
.tabla:not(.tabla-nozebra) > tbody > tr:nth-child(even) > td { background: #eef2f7; }
/* Las tablas con fila de detalle mandan sobre la regla anterior. */
.tabla tr.fila-op:not(.fila-par) > td,
.tabla tr.fila-detalle:not(.fila-par) td { background: #fff; }
.tabla tr.fila-op.fila-par > td      { background: #eef2f7; }
.tabla tr.fila-detalle.fila-par td   { background: #e9eef4; }
.tabla tr.fila-detalle:not(.fila-par) td { background: #fbfcfe; }

/* --- 2. Todo botón de filtro se ve como botón de la app --- */
.btn-filtro-ig, button.btn-filtro-ig, a.btn-filtro-ig {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 130px; min-height: 38px; padding: 8px 16px; margin: 0;
    background: #5a6b7d; color: #fff; border: 0; border-radius: 6px;
    font-family: inherit; font-size: .88rem; font-weight: 600; line-height: 1;
    text-decoration: none; cursor: pointer; box-sizing: border-box;
    transition: background .12s;
}
.btn-filtro-ig:hover { background: #4a5866; color: #fff; text-decoration: none; }
/* El que ejecuta la búsqueda es el principal de la fila: azul de marca. */
button.btn-filtro-ig[type=submit], .btn-filtro-ig.btn-primario { background: #1f4e79; }
button.btn-filtro-ig[type=submit]:hover, .btn-filtro-ig.btn-primario:hover { background: #163a5a; }
/* «Limpiar» es la acción más suave de las tres. */
a.btn-filtro-ig[href$="php"], .btn-filtro-ig.btn-suave {
    background: #fff; color: #5a6b7d; border: 1px solid #cfd8e2;
}
a.btn-filtro-ig[href$="php"]:hover, .btn-filtro-ig.btn-suave:hover {
    background: #f4f7fa; color: #24303d;
}

/* --- 3. Enlaces dentro de tablas: sin subrayado permanente --- */
.tabla a:not(.boton):not(.boton-mini) { text-decoration: none; color: #1f4e79; }
.tabla a:not(.boton):not(.boton-mini):hover { text-decoration: underline; }
.org-link { border-bottom: 0; }
.org-link:hover { border-bottom: 0; text-decoration: underline; }
/* El «← Volver a …» tampoco es un hipervínculo de Word. */
.volver-link {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
    background: #fff; color: #1f4e79; border: 1px solid #cfd8e2; border-radius: 6px;
    font-size: .88rem; font-weight: 600; text-decoration: none;
}
.volver-link:hover { background: #f4f7fa; text-decoration: none; }

/* --- OBS 2: los botones de Excel a la MISMA GAMA que «Asignar» (#0d9488),
       un tono más claro como pidió el usuario, en vez del verde puro que
       venían usando y que se veía de otra familia. --- */
.boton-excel { background: #14a098; }
.boton-excel:hover { background: #0d9488; }
.exportar-titulo { color: #0d7d74; }

/* --- OBS 1: la barra de filtros de Oportunidades, toda del mismo alto.
       El campo de búsqueda quedaba más bajo y angosto que los botones. --- */
.filtros-acciones { gap: 10px; }
.filtros-acciones .buscador input,
.filtros-acciones .boton,
.filtros-acciones .btn-filtro-ig {
    height: 38px; min-height: 38px; box-sizing: border-box; margin: 0;
}
.filtros-acciones .buscador input {
    min-width: 300px; padding: 0 12px; font-size: .9rem;
    border: 1px solid #cfd8e2; border-radius: 6px;
}
.filtros-acciones .boton {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 140px; padding: 0 18px; font-size: .92rem;
}
.filtros-acciones .chk-vencidas { height: 38px; align-self: flex-end; }

/* Los tres de la barra de exportar, del mismo alto entre sí. */
.exportar .boton { min-height: 38px; display: inline-flex; align-items: center; }

/* --- Filtro desplegable con CASILLAS (varias opciones a la vez) --- */
.filtro-pop { position: relative; display: inline-block; }
.filtro-pop > summary { list-style: none; cursor: pointer; }
.filtro-pop > summary::-webkit-details-marker { display: none; }
.filtro-pop[open] > summary { background: #eef2f7; color: #1f4e79; }
.fp-flecha { font-size: .7rem; opacity: .7; }
.filtro-pop-caja {
    position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 260px;
    max-height: 320px; overflow: auto; background: #fff; border: 1px solid #cfd8e2;
    border-radius: 8px; box-shadow: 0 6px 20px rgba(20,40,70,.14); padding: 10px;
}
.fp-acciones { display: flex; gap: 6px; margin-bottom: 8px; }
.fp-lista { display: flex; flex-direction: column; gap: 2px; }
.fp-lista label {
    display: flex; align-items: center; gap: 7px; padding: 4px 6px;
    border-radius: 4px; font-size: .85rem; cursor: pointer;
}
.fp-lista label:hover { background: #f4f7fa; }

/* --- Casilla de selección por fila y fila de filtro en la cabecera --- */
.col-chk { width: 34px; text-align: center; }
.col-chk input { cursor: pointer; }
.fila-filtro-col th { background: #f7f9fb; padding: 5px 8px; border-bottom: 1px solid #e4e9ef; }
.fila-filtro-col input.ffc {
    width: 100%; padding: 4px 8px; font-size: .78rem; font-weight: 400;
    border: 1px solid #d5dde6; border-radius: 4px; text-transform: none; letter-spacing: 0;
}
.ffc-nota { font-size: .74rem; color: #97a1ad; font-weight: 400; text-transform: none; letter-spacing: 0; }
/* OBS 8: el distintivo «nueva» en su propia columna, para que los folios
   queden tabulados aunque unas filas lo tengan y otras no. */
.col-nueva { width: 76px; text-align: center; padding-right: 4px !important; }
.col-folio { white-space: nowrap; }
.rub-nuevo { background: #14a098; color: #fff; font-size: .68rem; font-weight: 600;
             padding: 2px 8px; border-radius: 9px; display: inline-block; }
.rub-ya    { background: none; color: #97a1ad; font-size: .68rem; font-weight: 500; }

/* --- OBS 9: los 3 botones de cada fila de Configuración, del mismo tamaño y
       con jerarquía: Editar es la acción principal, Desactivar es secundaria y
       Eliminar deja de ser un bloque rojo repetido en cada fila (con 40 filas
       eran 40 alarmas). El rojo aparece al pasar el mouse, cuando de verdad
       estás por usarlo. --- */
.tabla .acciones-cfg { display: flex; gap: 6px; justify-content: flex-end; }
.tabla td .boton-mini { min-width: 92px; min-height: 28px; justify-content: center; margin: 0; }
.tabla td .boton-mini.boton-secundario {
    background: #fff; color: #5a6b7d; border: 1px solid #cfd8e2;
}
.tabla td .boton-mini.boton-secundario:hover { background: #5a6b7d; color: #fff; border-color: #5a6b7d; }
.tabla td .boton-mini.boton-peligro {
    background: #fff; color: #a4565c; border: 1px solid #e2d3d4;
}
.tabla td .boton-mini.boton-peligro:hover { background: #a4565c; color: #fff; border-color: #a4565c; }

/* --- OBS 10: perfiles de permisos. La lista de arriba resume quién tiene qué;
       cada usuario se despliega abajo, uno a la vez. --- */
.tabla-perm-resumen { margin-bottom: 18px; }
.perm-perfil { background: #eef4fa; color: #1f4e79; padding: 2px 9px; border-radius: 10px;
               font-size: .8rem; font-weight: 600; }
.perm-esp { background: #fff5e0; color: #8a6400; padding: 2px 9px; border-radius: 10px;
            font-size: .8rem; font-weight: 600; }
details.perm-card { background: #fff; border: 1px solid var(--gris-borde); border-radius: 10px;
                    padding: 0; margin: 0 0 10px; }
details.perm-card > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; cursor: pointer; list-style: none;
}
details.perm-card > summary::-webkit-details-marker { display: none; }
details.perm-card > summary:hover { background: #f7f9fb; }
details.perm-card[open] > summary { border-bottom: 1px solid var(--gris-borde); background: #f7f9fb; }
.perm-sum-estado { font-size: .82rem; color: #67717d; }
details.perm-card > form { padding: 14px 16px 18px; }
.perm-perfil-pick { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.perm-perfil-pick label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; }
.perm-perfil-pick select { padding: 7px 10px; border: 1px solid var(--gris-borde);
                           /* Mismo caso que .menu-seccion: "font: inherit" hacia que este
                              select heredara el .85rem y el peso 600 de su etiqueta, y quedaba
                              en 13,6 px negrita mientras todos los demas van en 14,4 normal.
                              Los controles se estilan GLOBAL (regla C3): aqui solo la familia. */
                           border-radius: 6px; font-family: inherit; min-width: 260px; }
.perm-perfil-pick .rub-muted { flex: 1; min-width: 200px; font-weight: 400; }
.perm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 22px; }
.perm-col h4 { margin: 0 0 6px; font-size: .8rem; text-transform: uppercase;
               letter-spacing: .3px; color: #67717d; }
.perm-col label { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: .87rem; }
.perm-heredado { color: #1f4e79; }
.perm-tag { font-size: .68rem; background: #eef4fa; color: #4a6b8a; padding: 1px 6px; border-radius: 8px; }
.perm-tag-esp { background: #fff5e0; color: #8a6400; }

/* --- «Marcar visibles» / «Quitar visibles» dejan de ser links subrayados
       («rasca y feo», dijo el usuario) y pasan a ser botones chicos de verdad.
       Vale para el popover de Oportunidades y para los nuevos. --- */
.mini-link {
    background: #fff; border: 1px solid #cfd8e2; color: #4a5866;
    border-radius: 5px; padding: 4px 10px; font-size: .76rem; font-weight: 600;
    text-decoration: none; cursor: pointer; line-height: 1.2;
}
.mini-link:hover { background: #eef2f7; color: #1f4e79; border-color: #b9c7d6; text-decoration: none; }
.cfp-toolbar { display: flex; gap: 6px; margin: 6px 0 8px; }

/* --- Los enlaces DENTRO DEL TEXTO tampoco deben parecer «link de Word».
       El subrayado permanente es lo que les da ese aspecto; se muestra solo
       al pasar el mouse, y el color de marca ya indica que es enlace. --- */
/* Qué es «un enlace dentro del texto»: uno que NO es un botón disfrazado.
   Se excluyen por el NOMBRE de la clase en vez de listarlas una por una: así
   cualquier clase futura que se llame *boton*, *btn*, *link* o *chip* queda
   fuera sola. Ir sumando :not(.x) a mano era ilegible y siempre se olvidaba
   alguna — así fue como los botones «Alcance» terminaron con letra azul oscura
   sobre fondo azul oscuro, o sea invisibles. */
:is(.intro, .ayuda, .cmp-nota, .rub-muted, p.muted, .cmp-vacio) a:not([class*="boton"]):not([class*="btn"]):not([class*="link"]):not([class*="chip"]) {
    color: #1f4e79; font-weight: 600; text-decoration: none;
    border-bottom: 1px solid #cadff0;
}
:is(.intro, .ayuda, .cmp-nota, .rub-muted, p.muted, .cmp-vacio) a:not([class*="boton"]):not([class*="btn"]):not([class*="link"]):not([class*="chip"]):hover {
    border-bottom-color: #1f4e79;
}

/* El subrayado grueso por defecto del navegador, fuera. */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- REGLA FIJA: ícono en cada título de sección. El SVG hereda el color del
       título (currentColor), así un h2 azul lleva su ícono azul. --- */
h2, h3 { display: flex; align-items: center; gap: 8px; }
h2 > .ico, h3 > .ico { flex: 0 0 auto; opacity: .85; }
/* Los títulos que llevan un botón al costado siguen empujándolo a la derecha. */
h2 > .boton, h2 > .boton-mini, h3 > .boton, h3 > .boton-mini { margin-left: auto; float: none !important; }

/* ---------- MODELO DE NEGOCIO ------------------------------------------
   Los cuatro modelos como tarjetas elegibles. Una sola tarjeta encendida
   (la vigente); el resto en reposo. Sigue la paleta liviana: el color marca
   lo elegido, no adorna las demás. */
.mn-pendiente { background:#fdf6e6; border:1px solid #d9b969; border-radius:8px;
                padding:11px 15px; margin:12px 0 16px; font-size:.9rem; color:#5f4a15; }
.mn-actual { display:flex; align-items:center; flex-wrap:wrap; gap:8px;
             background:#eaf5f3; border:1px solid #0d9488; border-radius:8px;
             padding:10px 15px; margin:12px 0 16px; font-size:.92rem; }
.mn-actual-etq { font-size:.68rem; letter-spacing:.09em; text-transform:uppercase;
                 font-weight:700; color:#0b6f66; }
.mn-sub { color:#0b6f66; font-weight:600; }
.mn-fecha { margin-left:auto; font-size:.78rem; }

.mn-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:12px; margin:14px 0; }
.mn-card { display:flex; flex-direction:column; gap:7px; cursor:pointer;
           background:#fff; border:1px solid var(--gris-borde); border-radius:9px; padding:14px 15px; }
.mn-card:hover { border-color:#a9bccf; }
.mn-card-on { border-color:#0d9488; background:#f3faf9; }
.mn-card-ro { cursor:default; opacity:.9; }
.mn-card-cab { display:flex; align-items:center; gap:8px; }
.mn-card-nom { font-weight:700; font-size:.95rem; color:var(--azul); }
.mn-card-on .mn-card-nom { color:#0b6f66; }
.mn-card-txt { margin:0; font-size:.82rem; color:var(--gris-texto); line-height:1.5; }
.mn-card-pie { margin-top:auto; padding-top:7px; border-top:1px solid #eef2f7;
               font-size:.73rem; color:#8c9bab; }

.mn-subs { margin:16px 0 6px; }
.mn-subs select { padding:6px 9px; border:1px solid #c7d2de; border-radius:6px;
                  font-size:.88rem; min-width:280px; }
.mn-acc { margin-top:16px; }
.mn-nota { margin-top:12px; font-size:.85rem; }
.mn-pie { margin-top:18px; padding-top:12px; border-top:1px solid #eef2f7; font-size:.82rem; }

/* ---------- Subagrupaciones y su tabla de costos ----------------------
   Frases completas y columnas del mismo ancho (regla del usuario); la letra
   se achica en vez de abreviar. */
.mn-ayudas { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 22px; }
.mn-ayuda { border: 1px solid var(--gris-borde); border-radius: 8px; background: #fff; }
.mn-ayuda > summary { cursor: pointer; padding: 9px 13px; font-size: .88rem;
                      display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mn-ayuda > summary strong { color: var(--azul); }
.mn-ayuda > summary .muted { font-size: .8rem; }
.mn-ayuda[open] > summary { border-bottom: 1px solid #eef2f7; }
.mn-ayuda-txt { padding: 4px 13px 11px 34px; }
.mn-ayuda-txt p { margin: 5px 0; font-size: .82rem; color: var(--gris-texto); line-height: 1.55; }
.mn-ayuda-off { opacity: .62; }

.tabla-costos { font-size: .78rem; table-layout: fixed; }
.tabla-costos th { font-size: .72rem; line-height: 1.3; vertical-align: bottom;
                   white-space: normal; padding: 8px 6px; text-align: center; }
.tabla-costos th:first-child { text-align: left; }
.tabla-costos td { padding: 7px 6px; }
.tabla-costos col, .tabla-costos th:not(:first-child) { width: 15%; }
.tabla-costos th:first-child { width: 25%; }
.mc-modalidad { font-weight: 600; }
.mc-hab { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.mc-celda { text-align: center; }
.mc-celda input { cursor: pointer; }
.tabla-costos tr.mc-off .mc-celda { opacity: .35; }
.tabla-costos tr.mc-off .mc-modalidad span { color: var(--gris-texto); font-weight: 400; }

/* ---------- POLÍTICA COMERCIAL ---------------------------------------- */
.pc-margen { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin: 14px 0 16px; }
.pc-margen > label { display: flex; flex-direction: column; gap: 5px;
                     font-size: .8rem; color: var(--gris-texto); font-weight: 600; }
.pc-op { font-size: 1.3rem; color: #8c9bab; padding-bottom: 7px; }
.pc-input { display: inline-flex; align-items: center; gap: 4px; }
.pc-input input { padding: 6px 8px; border: 1px solid #c7d2de; border-radius: 6px;
                  font-size: .9rem; width: 104px; }
.pc-input i { font-style: normal; color: #8c9bab; font-size: .85rem; }
/* Los dos extremos del margen son recuadros IGUALES en tamano: mismo padding, mismo
   ancho minimo y mismo alto. Lo unico que cambia es el color, que es lo que dice que
   uno es la meta (azul) y el otro la frontera (rosado). Es la misma regla de los
   botones: misma forma, distinto color. */
/* LAS DOS CAJAS, DEL MISMO TAMANO (usuaria 2026-09-08: «los recuadros azul y rojo que
   salgan del mismo tamano»). Antes solo compartian un `min-width`, que es un piso, no una
   medida: la azul lleva un campo de texto dentro y crecia sola por encima de la roja.
   Ahora el ancho es FIJO y el campo se acota para caber; `align-self: stretch` las deja
   ademas del mismo alto, aunque una tenga una linea mas que la otra. */
.pc-caja { display: flex; flex-direction: column; gap: 3px; padding: 7px 15px;
           border-radius: 8px; width: 178px; flex: 0 0 178px; box-sizing: border-box;
           align-self: stretch; justify-content: center; }
/* Los TRES campos de la fila del mismo ancho: al acotar el de la caja azul, el de
   tolerancia quedaba mas ancho y la fila se veia despareja. Es una fila de numeros
   cortos —un porcentaje de dos cifras—, asi que 68 px sobran para todos. */
.pc-margen .pc-input input { width: 68px; }
.pc-caja-etq { font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
               font-weight: 700; }
.pc-caja strong { font-size: 1.25rem; line-height: 1.1; }
.pc-caja .muted { font-size: .72rem; }
/* Objetivo: azul. Es la meta con la que nace cada cotizacion. */
.pc-caja-obj { background: #eef4fb; border: 1px solid #c3d8ee; }
.pc-caja-obj .pc-caja-etq { color: var(--azul); }
.pc-caja-obj .pc-input input { background: #fff; }
/* Limite: rosado. Es la frontera: bajo eso hace falta el V B del jefe. */
.pc-caja-lim { background: #fdeef2; border: 1px solid #f0c9d2; }
.pc-caja-lim .pc-caja-etq { color: #9d182b; }
.pc-caja-lim strong { color: #9d182b; }
/* La tolerancia queda en medio, sin recuadro: no es un extremo, es la resta. */
.pc-tol { padding-bottom: 7px; }

/* Se conserva el nombre viejo por si quedo alguna pantalla usandolo. */
.pc-limite { display: flex; flex-direction: column; gap: 2px; padding: 7px 15px;
             background: #fdeef2; border: 1px solid #f0c9d2; border-radius: 8px;
             min-width: 168px; box-sizing: border-box; }
.pc-limite-etq { font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
                 font-weight: 700; color: #9d182b; }
.pc-limite strong { font-size: 1.25rem; color: #9d182b; line-height: 1.1; }
.pc-limite .muted { font-size: .72rem; }

.pc-nota { display: flex; gap: 9px; align-items: flex-start; background: #fdf6e6;
           border: 1px solid #d9b969; border-radius: 8px; padding: 10px 14px;
           font-size: .83rem; color: #5f4a15; line-height: 1.55; }
.pc-nota svg { flex: 0 0 auto; margin-top: 2px; }

.pc-flete { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; }
.pc-opcion { display: flex; align-items: center; gap: 9px; cursor: pointer;
             border: 1px solid var(--gris-borde); border-radius: 8px;
             padding: 9px 14px; background: #fff; font-size: .87rem; }
.pc-opcion:hover { border-color: #a9bccf; }
.pc-opcion-on { border-color: #0d9488; background: #f3faf9; font-weight: 600; color: #0b6f66; }

.pc-iva { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; margin: 12px 0; }
.pc-iva > label:not(.pc-siNo) { display: flex; flex-direction: column; gap: 5px;
                                font-size: .8rem; color: var(--gris-texto); font-weight: 600; }
.pc-siNo { display: flex; align-items: center; gap: 7px; cursor: pointer;
           font-size: .88rem; padding-bottom: 7px; }
.pc-pie { font-size: .8rem; margin-top: 4px; }
.pc-guardar { margin-top: 16px; }
.pc-nuevo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.pc-permisos ul.simple li { font-size: .87rem; }

/* ---------- CELDA «PRODUCTO ELEGIDO» ordenada -------------------------
   Antes: enlaces sueltos a distinta altura y botones de tamaños distintos.
   Ahora: los tres bloques internos en un recuadro tabulado, y todas las
   acciones con la misma forma (regla: mismo tamaño y letra, solo cambia el
   color). Frases completas; la letra se achica en vez de abreviar. */

/* Acciones de la línea, con forma de botón chico */
.btn-linea {
    display: inline-flex; align-items: center; gap: 4px;
    background: #fff; border: 1px solid #cfd8e2; border-radius: 5px;
    padding: 2px 6px; font-size: .65rem; font-weight: 600; color: #4a5866;
    text-decoration: none; cursor: pointer; line-height: 1.45; white-space: nowrap;
}
.btn-linea:hover { background: #f3f7fa; border-color: #a9bccf; color: var(--azul); text-decoration: none; }
.btn-linea svg { flex: 0 0 auto; opacity: .75; }

/* Ficha técnica: el estado a la izquierda, las acciones como botones */
/* Todo en UNA fila: el estado y sus dos acciones. Solo se parte si la pantalla
   es de verdad angosta. */
.ficha-tec { display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
             margin-top: 5px; font-size: .7rem; }
.ficha-tec .btn-linea svg { width: 11px; height: 11px; }
.ficha-tec > a[target="_blank"] { color: var(--azul); }
.ficha-no { display: inline-flex; align-items: center; gap: 3px; color: #a8710f;
            font-weight: 600; white-space: nowrap; font-size: .69rem; }
.ficha-no svg { width: 12px; height: 12px; }

/* Los tres bloques internos, tabulados en un recuadro */
/* Rejilla de 2 columnas: arriba los dos INTERNOS (respaldo del precio y nota
   interna), abajo la observación del cliente, del ancho de los dos de arriba. */
.prod-extras {
    display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
    margin: 7px 0; padding: 7px 9px;
    background: #fbfcfd; border: 1px solid #e6ecf2; border-radius: 7px;
}
.prod-extras > .respaldo-interno { grid-column: 1; }
.prod-extras > .nota-interna     { grid-column: 2; }
.prod-extras > .obs-linea        { grid-column: 1 / -1; }
/* Con el formulario abierto ocupa las dos columnas: si no, el textarea queda
   a media columna y no se puede escribir. */
.prod-extras > .pe-ancho { grid-column: 1 / -1; }
.prod-extras > div { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 0; font-size: .74rem; }
/* El botón llena su celda, así los tres quedan tabulados. */
.prod-extras > div > .btn-linea { width: 100%; justify-content: flex-start; }
.prod-extras .obs-texto, .prod-extras .ni-texto {
    display: flex; align-items: flex-start; gap: 5px; width: 100%;
    color: var(--gris-texto); line-height: 1.5;
}
.prod-extras form { width: 100%; margin: 4px 0 0; }
.prod-extras textarea { width: 100%; }

/* Botonera final: todos del mismo alto y letra */
/* Los cuatro en UNA sola línea (Cambiar · Modificar · Quitar · Eliminar).
   Con producto asignado van SOLO CON ÍCONO y el nombre en el tooltip: así
   siempre caben y siempre miden exactamente lo mismo. El texto sigue en el
   HTML —lo lee un lector de pantalla— y se oculta a la vista.
   Sin producto, «Buscar producto» conserva su texto: es la acción principal
   de una línea vacía y un ícono solo sería críptico. */
.prod-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.prod-acciones form.inline { display: inline-flex; margin: 0; }
.prod-acciones .boton-mini,
.prod-acciones form.inline .boton-mini {
    display: inline-flex; align-items: center; gap: 4px; justify-content: center;
    min-height: 22px; min-width: 72px; margin: 0;
    padding: 2px 7px; font-size: .65rem; font-weight: 600; line-height: 1.45;
    box-sizing: border-box; white-space: nowrap;
}
.prod-acciones .boton-mini svg { width: 11px; height: 11px; }
.prod-acciones .boton-mini svg { flex: 0 0 auto; opacity: .8; }

/* Maestras del CHECK: dan por verificada una línea entera o toda la cotización.
   Van con permiso, así que se ven distintas de las tres casillas normales. */
.chk-maestra {
    display: inline-flex; align-items: center; gap: 4px; width: 100%;
    justify-content: center; margin: 0 0 4px; padding: 3px 6px;
    background: #eef4fb; border: 1px solid #c3d8ee; border-radius: 5px;
    font-size: .68rem; font-weight: 700; color: var(--azul); cursor: pointer;
    line-height: 1.5; box-sizing: border-box;
}
.chk-maestra:hover { background: #e2edf8; }
.chk-maestra.chk-on { background: #e6f5f2; border-color: #0d9488; color: #0b6f66; }
.th-check .chk-maestra.chk-cab { margin-top: 4px; width: auto; font-size: .66rem; }
.th-check { white-space: nowrap; }

/* ---------- Semáforo del presupuesto, con la paleta liviana ------------
   Antes el recuadro MÁS fuerte era «Dentro del presupuesto» —verde sólido—,
   que es justo el caso donde no hay nada que hacer, y los dos que exigen
   atención estaban apagados en gris. Al revés de la regla: relleno solo para
   lo que exige acción. Ahora el peso crece con la gravedad. */
.ps-box, .ps-box.on { color: inherit; }
.ps-box {
    padding: 5px 8px; border-radius: 6px; font-size: .68rem; line-height: 1.25;
    text-align: center; border: 1px solid #e6ecf2; background: #fff;
    color: #8c9bab; opacity: 1; font-weight: 500;
}
/* Todo bien: confirma, no grita. */
.ps-c.on { background: #f2faf7; border-color: #2e7d52; color: #26694a; font-weight: 600; }
/* Hay que decidir: se puede ofertar igual, pero excede el presupuesto. */
.ps-b.on { background: #fdf6e6; border-color: #c58a00; color: #8a6714; font-weight: 700; }
/* El único que bloquea el negocio: ahí sí, peso completo. */
.ps-a.on { background: #d9534f; border-color: #d9534f; color: #fff; font-weight: 700; }

/* Botonera solo-ícono: cuadrados idénticos. */
.prod-acciones.solo-ico .boton-mini,
.prod-acciones.solo-ico form.inline .boton-mini {
    width: 28px; min-width: 28px; height: 26px; min-height: 26px;
    padding: 0; gap: 0; justify-content: center;
}
.prod-acciones.solo-ico .ba-txt {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.prod-acciones.solo-ico .boton-mini svg { width: 13px; height: 13px; opacity: .9; }
/* Sin producto el botón conserva su texto. */
.prod-acciones:not(.solo-ico) .boton-mini { gap: 5px; }

/* ---------- Aviso de la pista de plazos (B3) --------------------------
   Mismo formato del aviso ámbar de empaque, como pidió el usuario. Va al pie
   del recuadro de Plazos: avisa, no bloquea. Cuando la cuenta CIERRA va
   discreto; el ámbar toma fuerza solo cuando FALTA pista (regla de la paleta:
   relleno solo para lo que exige acción). */
.pista-aviso {
    display: flex; align-items: flex-start; gap: 5px; width: 100%;
    margin-top: 6px; padding: 5px 8px; border-radius: 6px;
    font-size: .68rem; line-height: 1.4; box-sizing: border-box;
}
.pista-aviso svg { flex: 0 0 auto; margin-top: 1px; }
.pista-ok    { background: #f4f7fa; border: 1px solid #e2e9f0; color: #5a6b7d; }
.pista-corta { background: #fdf6e6; border: 1px solid #d9b969; color: #7a5c12; font-weight: 600; }

/* ---------- Modalidad de la línea (B1) ---------------------------------
   Etiqueta, no selector: la celda ya está cargada y cambiarla es la excepción
   (se hace desde «Modificar»). Discreta cuando viene deducida; con color
   cuando el vendedor la confirmó. */
.linea-modalidad {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 5px;
    padding: 2px 7px; border-radius: 5px; font-size: .67rem; font-weight: 600;
    background: #f4f7fa; border: 1px solid #e2e9f0; color: #5a6b7d;
}
.linea-modalidad svg { flex: 0 0 auto; opacity: .7; }
.lm-fijada { background: #eef4fb; border-color: #c3d8ee; color: var(--azul); }
.lm-auto { font-weight: 400; color: #8c9bab; font-size: .93em; }
.pm-modalidad { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
                margin-bottom: 9px; padding-bottom: 9px; border-bottom: 1px solid #eef2f7; }
.pm-modalidad label { display: flex; flex-direction: column; gap: 3px;
                      font-size: .72rem; color: var(--gris-texto); font-weight: 600; }
.pm-modalidad select { padding: 4px 7px; border: 1px solid #c7d2de; border-radius: 5px; font-size: .8rem; }
.pm-modalidad .muted { font-size: .7rem; }

/* ---------- Tabla de ofertas por proveedor, igual que las demás (B6) ---
   Tenía su propio estilo y se veía distinta del resto. Ahora comparte la
   cabecera, la cebra y el aire de `.tabla`. */
.prov-tabla th {
    color: #5a6b7d; font-size: .7rem; padding: 8px 14px;
    border-bottom: 1.5px solid var(--gris-borde); background: #fafbfc;
}
.prov-tabla > tbody > tr:nth-child(odd)  > td { background: #fff; }
.prov-tabla > tbody > tr:nth-child(even) > td { background: #eef2f7; }
.prov-tabla td { border-top: 0; border-bottom: 1px solid #eef2f7; }
.prov-tabla tr:last-child td { border-bottom: 0; }

/* Ítem del menú que es solo TÍTULO de sus sub-opciones (no enlaza a ninguna
   parte): «Cotización» encabeza a Cotizaciones MP y Otros canales. */
.menu-titulo { cursor: default; font-weight: 700; }
.menu-titulo:hover { background: transparent; }

/* ---------- Filtro de Mayorista como desplegable con casillas ----------
   Antes eran botones en fila: con los 3 de INTECOMP se ven bien, pero un
   cliente con veinte proveedores tendría una tira ingobernable. El
   desplegable ocupa lo mismo tenga 3 o 30. */
.fp-multi { position: relative; }
.fp-desplegar {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid #cfd8e2; border-radius: 6px;
    padding: 5px 11px; font-size: .8rem; font-weight: 600; color: #4a5866;
    cursor: pointer; line-height: 1.4; max-width: 260px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fp-desplegar:hover { background: #f3f7fa; border-color: #a9bccf; }
.fp-desplegar.on { background: var(--azul); border-color: var(--azul); color: #fff; }
.fp-flecha { opacity: .7; font-size: .8em; }
.fp-panel {
    display: none; position: absolute; z-index: 60; top: calc(100% + 4px); left: 0;
    min-width: 240px; max-width: 320px; background: #fff;
    border: 1px solid #cfd8e2; border-radius: 8px; padding: 10px;
    box-shadow: 0 6px 20px rgba(20,47,73,.13);
}
.fp-panel.abierto { display: block; }
.fp-buscar { width: 100%; padding: 5px 8px; margin-bottom: 7px;
             border: 1px solid #c7d2de; border-radius: 5px; font-size: .82rem; }
.fp-lista { display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow-y: auto; }
.fp-op { display: flex; align-items: center; gap: 7px; font-size: .84rem;
         padding: 3px 4px; border-radius: 4px; cursor: pointer;
         /* el texto SIEMPRE a la izquierda y la casilla sin encogerse: el panel se
            usa dentro de contenedores muy distintos y no puede heredar su alineación */
         text-align: left; font-weight: 400; line-height: 1.3; }
.fp-op input[type=checkbox] { flex: 0 0 auto; margin: 0; }
.fp-op:hover { background: #f3f7fa; }
.fp-panel-acc { display: flex; align-items: center; justify-content: space-between;
                gap: 10px; margin-top: 9px; padding-top: 8px; border-top: 1px solid #eef2f7; }
.fp-limpiar { font-size: .78rem; color: #5a6b7d; text-decoration: none; }
.fp-limpiar:hover { color: var(--azul); }

/* ---------- Alerta: producto sin peso ni dimensiones ------------------
   Es de SEGURIDAD, no informativa: sin peso el flete se calcula asumiendo
   1 kilo y el margen queda mal. Por eso lleva el signo rojo y pesa más que
   el aviso ámbar de empaque. No aparece cuando el flete no impacta. */
.warn-peso {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 6px; padding: 7px 10px; border-radius: 7px;
    background: #fbe9e9; border: 1px solid #d98b8b; border-left: 4px solid #c0392b;
    font-size: .72rem; line-height: 1.45; color: #7d1f1f;
}
.wp-signo {
    flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%;
    background: #c0392b; color: #fff; font-weight: 800; font-size: .72rem;
    display: grid; place-items: center; margin-top: 1px;
}

/* Alta de un transporte (courier nuevo o flota propia). */
/* TABULADO (regla C1, pedido de la usuaria 2026-08-29). Con flex y anchos escritos a
   mano cada campo empezaba donde caia y la fila no se leia como fila. Con grilla las
   columnas quedan declaradas: las etiquetas alineadas arriba, los campos abajo, y el
   boton en su propia columna a la misma altura que todo lo demas.
   Las proporciones siguen el largo real del dato: el codigo es corto, «Como calcula»
   es una frase. `minmax(0, ...)` para que un texto largo encoja en vez de desbordar. */
.tr-nuevo { display: grid; margin-top: 12px; gap: 10px 12px; align-items: end;
    grid-template-columns:
        minmax(0, 1.1fr)   /* Tipo          */
        minmax(0, .9fr)    /* Codigo        */
        minmax(0, 1.3fr)   /* Nombre        */
        minmax(0, 1.2fr)   /* Courier       */
        minmax(0, .9fr)    /* Origen        */
        minmax(0, 1.8fr)   /* Como calcula  */
        auto;              /* el boton      */ }
.tr-nuevo label { display: flex; flex-direction: column; gap: 4px; min-width: 0;
                  font-size: .76rem; color: var(--gris-texto); font-weight: 600; }
.tr-nuevo input[type=text], .tr-nuevo select {
    width: 100%; box-sizing: border-box; height: 34px;
    padding: 6px 8px; border: 1px solid #c7d2de; border-radius: 6px; font-size: .86rem; }
.tr-nuevo .tr-accion .boton { height: 34px; white-space: nowrap; }
/* En pantalla angosta la grilla de siete columnas no cabe: pasa a dos y el boton
   ocupa la fila completa, que es donde se espera encontrarlo al final del formulario. */
@media (max-width: 1100px) {
    .tr-nuevo { grid-template-columns: 1fr 1fr; }
    .tr-nuevo .tr-accion { grid-column: 1 / -1; }
}

/* Segundo nivel de anidación del menú: «Hacer cotización» cuelga de
   «Cotizaciones Otros Canales», que a su vez cuelga de «Cotización». */
.menu-subitem2 { padding-left: 42px; }

/* ---------- Gráfico de evolución de los dashboards ---------------------
   Barras en CSS, sin librerías: la altura es el volumen y el color dice si se
   cumplió. Sirve igual en Incidencias, Venta y Compra. */
.evo-grafico { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
               margin: 14px 0 6px; padding: 12px 14px 8px;
               background: #fbfcfd; border: 1px solid #e6ecf2; border-radius: 8px;
               min-height: 140px; overflow-x: auto; }
.evo-col { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 46px; }
.evo-n { font-size: .72rem; font-weight: 700; color: #5a6b7d; font-variant-numeric: tabular-nums; }
.evo-barra { width: 30px; border-radius: 4px 4px 0 0; background: #c3d8ee; }
.evo-ok    { background: #7fc4a4; }
.evo-medio { background: #e0bd6a; }
.evo-mal   { background: #d99a9a; }
.evo-mes { font-size: .68rem; color: #8c9bab; }
.evo-pct { font-size: .68rem; font-weight: 600; color: #5a6b7d; font-variant-numeric: tabular-nums; }
.evo-leyenda { font-size: .76rem; margin-top: 0; }
.num-alerta { color: #a4565c; font-weight: 700; }

/* ---------- Piezas comunes de los dashboards --------------------------- */
.dash-fechas { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 10px 0 16px; }
/* 🐛 HIJO DIRECTO, no descendiente. Escrito como `.dash-fechas label` alcanzaba
   también a las casillas de un desplegable anidado dentro de la fila (`.fp-op`),
   que quedaban en columna y centradas: la casilla encima del texto en vez de al
   lado. Una regla de CONTENEDOR no debe atravesar los componentes que contiene. */
.dash-fechas > label { display: flex; flex-direction: column; gap: 4px;
                     font-size: .76rem; color: var(--gris-texto); font-weight: 600; }
.dash-fechas input[type=date] { padding: 5px 8px; border: 1px solid #c7d2de; border-radius: 6px; font-size: .85rem; }

/* Barra de proporción dentro de una tabla: se lee sin comparar cifras. */
.dbar { display: inline-block; width: 78px; height: 7px; background: #eef2f7;
        border-radius: 4px; overflow: hidden; vertical-align: middle; margin-right: 7px; }
.dbar-in { display: block; height: 100%; border-radius: 4px; }
.dbar-ok    { background: #7fc4a4; }
.dbar-medio { background: #e0bd6a; }
.dbar-mal   { background: #d99a9a; }
.dbar-n { font-size: .74rem; color: #5a6b7d; font-variant-numeric: tabular-nums; }

/* Embudo de la venta: dónde cae el escalón. */
.embudo { display: flex; flex-direction: column; gap: 7px; margin: 14px 0; }
.emb-fila { display: flex; align-items: center; gap: 10px; }
.emb-paso { min-width: 130px; font-size: .8rem; font-weight: 600; color: var(--gris-texto); }
.emb-barra { flex: 1; height: 20px; background: #f4f7fa; border-radius: 5px; overflow: hidden; }
.emb-in { display: block; height: 100%; border-radius: 5px; background: var(--azul); }
.emb-1 { background: #2f6ea8; } .emb-2 { background: #3d87c4; }
.emb-3 { background: #5aa0d6; } .emb-4 { background: #7fc4a4; }
.emb-n { min-width: 96px; font-size: .8rem; font-weight: 700; color: var(--gris-texto);
         font-variant-numeric: tabular-nums; }
.emb-n .muted { font-weight: 400; }

/* Dos tablas lado a lado en un dashboard. */
.bloque-doble { display: grid; gap: 22px; }
@media (min-width: 900px) { .bloque-doble { grid-template-columns: 1fr 1fr; } }

/* Tarjeta con semáforo: relleno solo para lo que exige acción. */
.dash-card.sem-ok    { border-color: #2e7d52; }
.dash-card.sem-medio { border-color: #c58a00; background: #fdf9f0; }
.dash-card.sem-mal   { border-color: #c0392b; background: #fdf2f2; }

/* ---------- Tarjetas de los dashboards ---------------------------------
   🐛 `.dash-lbl`, `.dash-num` y `.dash-pie` NO tenían ninguna regla: los tres
   textos salían pegados en una sola línea («Órdenes de compra1en el período»).
   Venía así desde el módulo de Incidencias. */
.dash-card .dash-lbl {
    display: flex; align-items: center; gap: 5px;
    font-size: .74rem; font-weight: 600; color: #6a7684;
    text-transform: uppercase; letter-spacing: .04em; line-height: 1.3;
}
.dash-card .dash-lbl svg { flex: 0 0 auto; opacity: .75; }
.dash-card .dash-num {
    display: block; font-size: 1.55rem; font-weight: 700; color: var(--azul);
    line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums;
}
.dash-card .dash-pie {
    display: block; font-size: .73rem; color: #8c9bab; margin-top: 3px; line-height: 1.4;
}
.dash-card.sem-ok    .dash-num { color: #2e7d52; }
.dash-card.sem-medio .dash-num { color: #8a6714; }
.dash-card.sem-mal   .dash-num { color: #a4565c; }
.dash-tarjetas { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0; }

/* Filtro de fechas de los dashboards — los 5 usan este mismo componente.
   Campos del MISMO ancho, en una sola fila, alineados por su base. */
.dash-fechas { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 12px 0 18px; }
.dash-fechas > .df-campo { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.dash-fechas .df-campo > span {
    font-size: .72rem; font-weight: 600; color: #6a7684;
    text-transform: uppercase; letter-spacing: .04em;
}
.dash-fechas .df-campo input[type=date] {
    width: 158px; height: 32px; box-sizing: border-box;
    padding: 0 8px; border: 1px solid #c7d2de; border-radius: 6px;
    font-size: .85rem; font-family: inherit; color: #24303d; background: #fff;
}
.dash-fechas .df-campo input[type=date]:focus { outline: 2px solid #9dc3e6; outline-offset: 1px; }
/* 🐛 Estaba escrito como `.dash-fechas .df-boton`, o sea acotado al filtro de
   fechas: los MISMOS botones en otras pantallas salían con el estilo por
   defecto del navegador. La clase es global. */
.df-boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    height: 32px; box-sizing: border-box; min-width: 92px; padding: 0 14px;
    border: 1px solid var(--azul); border-radius: 6px; background: var(--azul);
    color: #fff; font-size: .82rem; font-family: inherit; cursor: pointer;
}
.df-boton:hover { background: #17395a; border-color: #17395a; }
.dash-fechas .df-extra { display: inline-flex; align-items: flex-end; gap: 8px; }
.dash-fechas .df-extra a {
    display: inline-flex; align-items: center; gap: 5px;
    height: 32px; box-sizing: border-box; padding: 0 14px;
    border: 1px solid #c7d2de; border-radius: 6px; background: #fff;
    color: #48607a; font-size: .82rem; text-decoration: none;
}
.dash-fechas .df-extra a:hover { background: #f4f8fc; border-color: #9dc3e6; }

/* ---------- Cebra de las tablas con FILA DE DETALLE intercalada -------------
   🐛 Seguimiento y Oportunidades meten un <tr> de detalle (oculto) después de
   cada fila de datos, así que `nth-child` cuenta dos por oportunidad y todas
   las filas de datos caen en la misma paridad: la cebra desaparece.
   Por eso estas tablas la marcan desde PHP con `.fila-par` (contador propio),
   y acá se apaga el `nth-child` para que no compita. */
.tabla-oportunidades > tbody > tr:nth-child(odd)  > td,
.tabla-oportunidades > tbody > tr:nth-child(even) > td { background: inherit; }
.tabla-oportunidades > tbody > tr.fila-op                  > td { background: #fff; }
.tabla-oportunidades > tbody > tr.fila-op.fila-par         > td { background: #eef2f7; }
.tabla-oportunidades > tbody > tr.fila-detalle             > td { background: #fbfcfe; }
.tabla-oportunidades > tbody > tr.fila-detalle.fila-par    > td { background: #e9eef4; }

/* Barra de páginas de Seguimiento — misma forma que la de Oportunidades. */
.seg-pagbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0 6px; font-size: .82rem; }
.seg-pagbar .paginacion { margin: 0 0 0 auto; }
.seg-pagbar .por-pagina { display: inline-flex; align-items: center; gap: 6px; color: #6a7684; }
.seg-pagbar .por-pagina select { padding: 3px 6px; border: 1px solid #c7d2de; border-radius: 5px; font-size: .82rem; }

/* ---------- Interés por mora, Ley 21.131 ---------------------------------- */
.ley-marco { background: #f4f8fc; border: 1px solid #dbe6f1; border-radius: 8px; padding: 14px 18px; margin-top: 6px; }
.ley-intro { margin: 0 0 8px; font-size: .9rem; color: #24303d; }
.ley-pilares { margin: 0; padding-left: 20px; font-size: .87rem; color: #3c4a58; line-height: 1.65; }
.ley-pilares li { margin-bottom: 5px; }
.ley-pilares li::marker { color: var(--azul); font-weight: 700; }
.ley-nota { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0;
            font-size: .82rem; color: #8a6714; background: #fdf9f0; border: 1px solid #ecdcb8;
            border-radius: 6px; padding: 8px 10px; }
.ley-nota svg { flex: 0 0 auto; margin-top: 2px; }
.ley-desde-fac { background: #f4f8fc; border-left: 3px solid var(--azul); padding: 8px 12px; border-radius: 0 6px 6px 0; }

.ley-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 12px 0 6px; }
/* 🐛 Estas reglas estaban acotadas a `.ley-form`, así que el MISMO campo en
   otra pantalla salía sin estilo. Y el selector cubría solo `input` genérico,
   no `type=email`, que en algunos navegadores hereda otra caja. Van globales y
   por TIPO, para que todos los recuadros midan exactamente lo mismo. */
.lf-campo { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.lf-campo > span { font-size: .72rem; font-weight: 600; color: #6a7684;
                   text-transform: uppercase; letter-spacing: .04em; }
.lf-campo input[type=text], .lf-campo input[type=email], .lf-campo input[type=number],
.lf-campo input[type=date], .lf-campo input[type=tel],  .lf-campo input[type=url],
.lf-campo select {
    width: 170px; height: 32px; box-sizing: border-box; padding: 0 8px;
    border: 1px solid #c7d2de; border-radius: 6px; font-size: .85rem; font-family: inherit;
    color: #24303d; background: #fff;
}
.lf-campo input:focus, .lf-campo select:focus { outline: 2px solid #9dc3e6; outline-offset: 1px; }
.lf-chico input, .lf-chico select { width: 96px; }
.ley-form input[type=number]::-webkit-outer-spin-button,
.ley-form input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ley-form input[type=number] { -moz-appearance: textfield; }
.lf-pie { font-size: .8rem; margin-top: 2px; }

.ley-vigente { display: flex; align-items: center; gap: 6px; font-size: .88rem; color: #23603f;
               background: #eef7f0; border: 1px solid #cfe6d6; border-radius: 6px; padding: 9px 12px; }
.ley-texto { width: 100%; box-sizing: border-box; font-family: Consolas, "Courier New", monospace;
             font-size: .8rem; line-height: 1.5; padding: 10px 12px; border: 1px solid #c7d2de;
             border-radius: 6px; background: #fbfcfe; color: #24303d; resize: vertical; }
.ley-tramo { font-size: .76rem; }
.ley-pie { display: flex; align-items: flex-start; gap: 6px; font-size: .8rem; margin-top: 12px; }

/* El caso traído (factura / OC / oportunidad) con su cliente y RUT. */
.ley-caso { background: #f4f8fc; border: 1px solid #dbe6f1; border-radius: 8px; padding: 12px 14px; margin: 10px 0; }
.lc-datos { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.lc-datos > div { display: flex; flex-direction: column; gap: 2px; }
.lc-datos span { font-size: .7rem; font-weight: 600; color: #6a7684;
                 text-transform: uppercase; letter-spacing: .04em; }
.lc-datos strong { font-size: .88rem; color: #24303d; }
.lc-ojo { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0;
          font-size: .8rem; color: #8a6714; background: #fdf9f0; border: 1px solid #ecdcb8;
          border-radius: 6px; padding: 7px 10px; }
.lc-ojo svg { flex: 0 0 auto; margin-top: 2px; }
.ley-deudor { display: flex; align-items: center; gap: 6px; margin: 2px 0 10px; font-size: .85rem; }
.dash-fechas .df-ancho { flex: 1 1 340px; }
.dash-fechas .df-ancho input[type=text] {
    width: 100%; height: 32px; box-sizing: border-box; padding: 0 8px;
    border: 1px solid #c7d2de; border-radius: 6px; font-size: .85rem; font-family: inherit;
    color: #24303d; background: #fff;
}

/* Factura pagada EN PARTE: ámbar, porque todavía deben plata. */
.vf-pagada_parcial { background: #fdf9f0; color: #8a6714; border: 1px solid #ecdcb8; }
.venta-recep input { border-color: #c58a00; }

/* ---------- Menú lateral: grupos que se expanden y se contraen -------------
   El menú creció hasta llenar la pantalla. Ahora cada ítem con sub-opciones es
   un grupo plegable; el que contiene la pantalla activa nace abierto. */
.menu-grupo { display: block; }
.menu-jefe { display: flex; align-items: stretch; }
.menu-jefe > .menu-item, .menu-jefe > .menu-titulo { flex: 1 1 auto; min-width: 0; }
.menu-flecha {
    flex: 0 0 auto; width: 26px; padding: 0; margin: 0;
    background: none; border: 0; cursor: pointer; color: inherit; opacity: .55;
    display: flex; align-items: center; justify-content: center;
}
.menu-flecha:hover { opacity: 1; background: rgba(255,255,255,.08); }
.menu-flecha::before {
    content: ''; width: 6px; height: 6px; display: block;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); margin-left: -2px;      /* apunta a la derecha: cerrado */
    transition: transform .15s ease;
}
.menu-grupo.abierto > .menu-jefe > .menu-flecha::before {
    transform: rotate(45deg); margin: -3px 0 0 0;      /* apunta abajo: abierto */
}
.menu-subs { display: none; }
.menu-grupo.abierto > .menu-subs { display: block; }
/* Un grupo cerrado que contiene la pantalla activa no debería existir, pero si
   pasara, el ítem activo igual se ve. */
.menu-subs .menu-item.activo { display: block; }

/* ---------- DETALLE INTERESES MORATORIOS (documento imprimible) ------------ */
.di-barra { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.di-hoja { background: #fff; padding: 26px 30px; border: 1px solid #dbe6f1; border-radius: 8px;
           color: #24303d; font-size: 13px; }
.di-membrete { display: flex; align-items: center; gap: 14px; padding-bottom: 12px;
               border-bottom: 2px solid var(--azul); }
.di-logo { max-height: 52px; max-width: 190px; }
.di-emp { display: flex; flex-direction: column; gap: 2px; }
.di-emp strong { font-size: 12.5px; line-height: 1.35; }
.di-emp span { font-size: 11.5px; color: #6a7684; }

.di-titulo { text-align: center; font-size: 19px; letter-spacing: .06em; color: var(--azul);
             margin: 20px 0 2px; display: block; }
.di-subtitulo { text-align: center; font-size: 12.5px; color: #6a7684; margin: 0 0 20px; }

.di-deudor { display: flex; flex-wrap: wrap; gap: 8px 34px; padding: 10px 14px; margin-bottom: 18px;
             background: #f4f8fc; border: 1px solid #dbe6f1; border-radius: 6px; }
.di-deudor > div { display: flex; flex-direction: column; gap: 1px; }
.di-deudor span { font-size: 9.5px; font-weight: 600; color: #6a7684;
                  text-transform: uppercase; letter-spacing: .05em; }
.di-deudor strong { font-size: 12.5px; }

.di-matriz, .di-tramos, .di-resumen { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.di-matriz th, .di-matriz td, .di-tramos th, .di-tramos td, .di-resumen th, .di-resumen td {
    border: 1px solid #dbe6f1; padding: 5px 8px; font-size: 11.5px; vertical-align: middle;
}
.di-matriz thead th, .di-tramos thead th, .di-resumen thead th {
    background: #eef2f7; color: var(--azul); font-size: 11px; text-align: center;
    text-transform: uppercase; letter-spacing: .03em;
}
.di-matriz td, .di-tramos td { text-align: center; }
.di-concepto { text-align: left !important; background: #fafbfc; font-weight: 600; width: 210px; }
.di-n { text-align: right !important; font-variant-numeric: tabular-nums; }
.di-sub { background: #f4f8fc; font-weight: 600; }
.di-corte td { border-top: 2px solid #9dc3e6; }
.di-fuerte td { font-weight: 600; }
.di-total td { background: var(--azul); color: #fff; font-weight: 700; font-size: 12.5px; }
.di-total .di-concepto { background: var(--azul); color: #fff; }
.di-facthead { background: #dbe6f1 !important; }
.di-sm { font-size: 10px !important; }
.di-tramos tfoot th { background: #f4f8fc; color: #24303d; text-transform: none; font-size: 11.5px; }
.di-resumen tfoot th { background: var(--azul); color: #fff; font-size: 12.5px; }

.di-estado { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 10px; font-weight: 600; }
.di-impaga  { background: #fdf2f2; color: #a4565c; border: 1px solid #eccccc; }
.di-parcial { background: #fdf9f0; color: #8a6714; border: 1px solid #ecdcb8; }
.di-pagada  { background: #eef7f0; color: #23603f; border: 1px solid #cfe6d6; }
.di-ojo { color: #c58a00; font-weight: 700; }

.di-h2 { font-size: 13.5px; color: var(--azul); margin: 22px 0 6px; text-transform: uppercase;
         letter-spacing: .04em; }
.di-nota { font-size: 11px; color: #6a7684; text-align: justify; margin: 0 0 10px; line-height: 1.55; }
.di-bloque-n { font-size: 11px; color: #6a7684; margin: 16px 0 4px; font-weight: 600; }

.di-pago { border: 1px solid #dbe6f1; border-radius: 6px; padding: 12px 14px; margin-top: 18px;
           background: #f4f8fc; }
.di-pago h3 { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--azul);
              margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.di-pago-datos { display: flex; flex-wrap: wrap; gap: 8px 30px; }
.di-pago-datos > div { display: flex; flex-direction: column; gap: 1px; }
.di-pago-datos span { font-size: 9.5px; font-weight: 600; color: #6a7684;
                      text-transform: uppercase; letter-spacing: .05em; }
.di-pago-datos strong { font-size: 12px; }
.di-sin-cuenta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #8a6714;
                 background: #fdf9f0; border: 1px solid #ecdcb8; border-radius: 6px; padding: 8px 11px; }
.di-pie-ojo { font-size: 10.5px; color: #8a6714; margin-top: 12px; }
.di-pie { font-size: 10.5px; color: #8c9bab; margin-top: 14px; text-align: justify; }

@media print {
    .barra-lateral, .menu, aside, .no-print, .salir { display: none !important; }
    .contenido { max-width: none !important; margin: 0 !important; padding: 0 !important; }
    .contenido > h1 { display: none; }
    .di-hoja { border: 0; padding: 0; }
    .di-matriz, .di-tramos, .di-resumen { page-break-inside: avoid; }
    .di-pago { page-break-inside: avoid; }
}
@page { margin: 12mm; }

/* Cuentas bancarias — el formulario de alta va en DOS líneas, en una rejilla de
   5 columnas iguales:
     línea 1  [ A nombre de ......... 4 columnas ] [ RUT ]
     línea 2  [ Banco ][ Tipo ][ N° cuenta ][ Correo ][ Activa + Agregar ]
   Así la razón social se ve completa y todos los recuadros miden lo mismo. */
.cta-nueva { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 14px; align-items: end; }
.cta-nueva .cta-nombre { grid-column: span 4; }
.cta-nueva .lf-campo { width: auto; }
.cta-nueva .lf-campo input, .cta-nueva .lf-campo select { width: 100% !important; box-sizing: border-box; }
/* La casilla ocupa el lugar de la etiqueta y el botón el del campo: todo queda
   a la misma altura que la fila de recuadros de al lado. */
.cta-accion { display: flex; flex-direction: column; gap: 4px; }
.cta-accion .pc-siNo { font-size: .72rem; font-weight: 600; color: #6a7684;
                       text-transform: uppercase; letter-spacing: .04em; }
.cta-accion .df-boton { width: 100%; }
@media (max-width: 1100px) {
    .cta-nueva { grid-template-columns: repeat(2, 1fr); }
    .cta-nueva .cta-nombre { grid-column: span 2; }
}
.cta-sm { width: 110px; } .cta-md { width: 140px; } .cta-lg { width: 210px; }
.tabla td .cta-sm, .tabla td .cta-md, .tabla td .cta-lg {
    height: 26px; box-sizing: border-box; padding: 0 6px; border: 1px solid #c7d2de;
    border-radius: 5px; font-size: .8rem; font-family: inherit;
}
.di-chk { width: 30px; text-align: center; }
.di-generar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.di-generar .lf-campo select { width: 260px; }

/* Las columnas de factura deben medir TODAS lo mismo. Sin `fixed`, el navegador
   reparte según el contenido y la última queda desproporcionada (las celdas de
   subtotal de las filas de arriba van vacías). Con `fixed`, concepto y subtotal
   toman su ancho y las facturas se reparten el resto en partes iguales. */
.di-matriz { table-layout: fixed; }
.di-matriz .di-concepto { width: 208px; }
.di-matriz .di-sub { width: 128px; }
.di-matriz td, .di-matriz th { overflow-wrap: anywhere; }

/* ---------- Cobranza: carga histórica de facturas -------------------------- */
.cob-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 14px; align-items: end; }
.cob-form .cob-ancho { grid-column: span 2; }
.cob-form .lf-campo input, .cob-form .lf-campo select { width: 100% !important; box-sizing: border-box; }
.cob-espacio { height: 15px; display: block; }
@media (max-width: 1100px) { .cob-form { grid-template-columns: repeat(2, 1fr); }
                             .cob-form .cob-ancho { grid-column: span 2; } }

.cob-subir { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.cob-subir .lf-campo input[type=file] { width: 320px; height: 32px; box-sizing: border-box;
    padding: 4px 6px; border: 1px solid #c7d2de; border-radius: 6px; font-size: .8rem; background: #fff; }

.cob-columnas { display: flex; gap: 34px; flex-wrap: wrap; margin: 12px 0; }
.cob-col-grupo h4 { font-size: .78rem; color: var(--azul); margin: 0 0 6px;
                    text-transform: uppercase; letter-spacing: .04em; }
.cob-col-grupo ul { margin: 0; padding-left: 0; list-style: none; font-size: .84rem; line-height: 1.8; }
.cob-col-grupo li { display: flex; align-items: center; gap: 6px; color: #3c4a58; }
.cob-col-grupo li svg { color: #2e7d52; }

/* 🐛 Iba con `display:flex` y cada <b> o <strong> suelto dentro del párrafo se
   convertía en una COLUMNA aparte: el texto salía partido en trozos. Va en
   bloque, con el ícono alineado en línea. */
.cob-ojo { display: block; font-size: .82rem; color: #8a6714; line-height: 1.6;
           background: #fdf9f0; border: 1px solid #ecdcb8; border-radius: 6px; padding: 9px 12px; }
.cob-ojo svg { vertical-align: -2px; margin-right: 5px; }

.cob-mapeo { border-left: 3px solid var(--azul); }
.cob-map-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 14px; margin: 12px 0 18px; }
.cob-map-grid .lf-campo select { width: 100% !important; box-sizing: border-box; }
.cob-obl { color: #a4565c; }
.cob-h4 { font-size: .82rem; color: var(--azul); margin: 16px 0 6px;
          text-transform: uppercase; letter-spacing: .04em; }
.cob-acciones { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
@media (max-width: 1100px) { .cob-map-grid { grid-template-columns: repeat(2, 1fr); } }
.di-falta { color: #a4565c; font-size: 10.5px; font-style: italic; }
.cob-sii { display: flex; align-items: flex-start; gap: 8px; background: #eef7f0; border: 1px solid #cfe6d6;
           border-radius: 6px; padding: 10px 13px; margin: 10px 0; font-size: .84rem; color: #23603f; line-height: 1.6; }
.cob-sii svg { flex: 0 0 auto; margin-top: 3px; }
.cob-notas { background: #fdf9f0; border: 1px solid #ecdcb8; border-radius: 6px; padding: 12px 14px; margin: 14px 0; }
.cob-notas h4 { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: #8a6714;
                margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.cob-notas .tabla-caja { margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTROLES DE FORMULARIO — NORMALIZACIÓN GLOBAL
   ───────────────────────────────────────────────────────────────────────────
   REGLA FIJA: en una fila de formulario, TODOS los controles miden y se ven
   igual — campos de texto, fechas, selectores, subida de archivos y botones.
   Esto va acá, GLOBAL, y no pantalla por pantalla: cada vez que se estilaba
   por separado aparecía un control con el aspecto por defecto del navegador
   («formato Visual Basic») o con otro alto, y el defecto solo se veía al
   mirar esa pantalla. Si se agrega un control nuevo, hereda esto solo.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --control-alto: 34px; }

/* Las filas de formulario del sistema. Un contenedor nuevo se suma acá. */
.dash-fechas, .ley-form, .cta-nueva, .cob-form, .cob-subir, .cob-acciones,
.di-generar, .cob-map-grid, .pc-nuevo, .pn-grid {
    align-items: end;
}

/* --- Campos: texto, número, fecha, correo, teléfono, selectores ---------- */
.dash-fechas input, .dash-fechas select,
.ley-form  input, .ley-form  select,
.cta-nueva input, .cta-nueva select,
.cob-form  input, .cob-form  select,
.cob-subir input, .cob-subir select,
.di-generar input, .di-generar select,
.cob-map-grid select,
.pn-grid input[type=text], .pn-grid input[type=url], .pn-grid select {
    height: var(--control-alto);
    box-sizing: border-box;
    padding: 0 9px;
    border: 1px solid #c7d2de;
    border-radius: 6px;
    font-size: .85rem;
    font-family: inherit;
    color: #24303d;
    background: #fff;
}
/* Las casillas no llevan alto de campo: son casillas. */
.dash-fechas input[type=checkbox], .ley-form input[type=checkbox],
.cta-nueva input[type=checkbox], .cob-form input[type=checkbox],
.cob-subir input[type=checkbox], .cob-acciones input[type=checkbox] {
    height: auto; padding: 0; border-radius: 3px;
}

/* --- Subida de archivos -------------------------------------------------
   El control nativo es el que peor se ve: cada navegador dibuja el suyo.
   Se le da la misma caja que a un campo y su botón interno se estiliza con
   ::file-selector-button, que es la forma correcta (no un truco de ocultarlo). */
input[type=file] {
    height: var(--control-alto);
    /* Ancho para que quepa «Sin archivos seleccionados» junto al boton. Sin esto
       el navegador deja el campo del ancho de su boton y parte el texto a media
       palabra con puntos suspensivos, que se ve como un control roto. */
    /* 320px es lo que mide el boton mas «Sin archivos seleccionados» completo: es el
       ancho que ya usaba la pantalla de cobranza, donde el texto si se veia entero. */
    min-width: 320px;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #c7d2de;
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: .82rem;
    color: #6a7684;
    cursor: pointer;
    line-height: calc(var(--control-alto) - 2px);
}
input[type=file]::file-selector-button {
    height: calc(var(--control-alto) - 2px);
    margin: 0 10px 0 0;
    padding: 0 14px;
    border: 0;
    border-right: 1px solid #c7d2de;
    border-radius: 5px 0 0 5px;
    background: #eef2f7;
    color: #24303d;
    font-family: inherit;
    font-size: .82rem;
    cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: #dbe6f1; }
input[type=file]:focus { outline: 2px solid #9dc3e6; outline-offset: 1px; }

/* --- Botones dentro de una fila de formulario ---------------------------
   `.boton` trae `margin-top:16px` y padding propio (sirve suelto en la página,
   no en una fila). Dentro de estas filas se alinea con los campos. */
.dash-fechas .boton, .ley-form .boton, .cta-nueva .boton, .cob-form .boton,
.cob-subir .boton, .cob-acciones .boton, .di-generar .boton,
.dash-fechas .df-boton, .ley-form .df-boton, .cta-nueva .df-boton,
.cob-form .df-boton, .cob-subir .df-boton, .cob-acciones .df-boton, .di-generar .df-boton,
.pn-pie .df-boton,
.df-boton {
    height: var(--control-alto);
    box-sizing: border-box;
    margin-top: 0;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 6px;
    font-size: .82rem;
    line-height: 1;
}
/* Los enlaces del costado (Limpiar, Cancelar) también van a la misma altura. */
.dash-fechas .df-extra a, .cob-acciones a.boton, .cob-subir a.boton {
    height: var(--control-alto);
    box-sizing: border-box;
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 16px;
    line-height: 1;
}

/* ---------- Interés Ley 21.131: flujo por organismo ----------------------- */
.il-paso { display: inline-flex; align-items: center; justify-content: center;
           width: 20px; height: 20px; border-radius: 50%; background: var(--azul); color: #fff;
           font-size: .72rem; font-weight: 700; margin-right: 2px; flex: 0 0 auto; }
.il-cab-acc { display: flex; gap: 8px; align-items: center; }
.il-param { margin-bottom: 4px; }
.il-sel { margin-top: 14px; }
/* Las que NO se pueden cobrar se ven, pero apagadas: sirven de contexto. */
.il-nocob > td { opacity: .5; }
.il-pl { width: 74px; text-align: center; }
.il-pl input { width: 58px !important; height: 26px !important; padding: 0 5px !important;
               text-align: center; font-size: .78rem !important; }
.il-plazos { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.ley-nota, .ley-pie { align-items: flex-start; }
.ley-nota span, .ley-pie span { flex: 1 1 auto; }

/* Las líneas de ayuda no se cortan a mitad de pantalla ------------------------
   `.intro` traía `max-width: 70ch` y `.intro-config` 80ch. Esa medida sirve para
   un texto largo de lectura corrida, pero estas son UNA frase de ayuda: con la
   pantalla ancha quedaban partidas en dos líneas dejando media pantalla vacía.
   Se sueltan para que usen el ancho disponible. */
.intro, .intro-config { max-width: none; }

/* ---------- Configuración: rubros MP y códigos ONU ------------------------
   Dos cuadros, igual que las otras pestañas: lo DISPONIBLE a la izquierda y lo
   ELEGIDO a la derecha. Acá no se escribe nada — los rubros y los códigos los
   define Mercado Público, así que solo se marcan. */
.cfg-cols { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.cfg-panel { flex: 1 1 420px; min-width: 340px; background: #fff; border: 1px solid #dbe6f1;
             border-radius: 8px; padding: 16px 18px; }
.cfg-panel.ro-izq { background: #fafbfc; }
.cfg-panel h3 { margin-top: 0; }

.ro-lista { max-height: 340px; overflow-y: auto; border: 1px solid #dbe6f1; border-radius: 6px;
            background: #fff; margin: 10px 0 12px; }
.ro-lista-alta { max-height: 460px; }
.ro-item { display: flex; align-items: flex-start; gap: 9px; padding: 7px 11px;
           border-bottom: 1px solid #eef2f7; font-size: .84rem; cursor: pointer; }
.ro-item:last-child { border-bottom: 0; }
.ro-item:hover { background: #f4f8fc; }
.ro-item input[type=checkbox] { margin-top: 2px; flex: 0 0 auto; }
.ro-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.4; }
.ro-txt .muted { font-size: .76rem; }
.ro-n { flex: 0 0 auto; font-size: .74rem; color: #8c9bab; font-variant-numeric: tabular-nums;
        background: #eef2f7; border-radius: 9px; padding: 1px 7px; align-self: center; }
.panel-detalles { margin-bottom: 16px; }
.panel-detalles h2 { margin-top: 0; }
.card-num-fila { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 14px; }

/* Marcar una oportunidad para reclamarla después. Va bajo el folio: la
   irregularidad se ve leyendo la oportunidad, y ahí no hay tiempo de escribir
   el fundamento — se marca en un clic y se reclama con calma. */
.marca-rec { display: block; margin: 3px 0 0; }
.btn-marca-rec {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; box-sizing: border-box;
    border: 1px solid #dbe6f1; border-radius: 5px; background: #fff;
    color: #8c9bab; cursor: pointer;
}
.btn-marca-rec:hover { border-color: #9dc3e6; color: var(--azul); background: #f4f8fc; }
/* Marcada: rojo suave, para que salte al recorrer la lista. */
.btn-marca-rec.on { border-color: #eccccc; background: #fdf2f2; color: #a4565c; }
.btn-marca-rec.on:hover { background: #f9e4e4; }
.btn-marca-rec .ba-txt { position: absolute; width: 1px; height: 1px; overflow: hidden;
                         clip: rect(0 0 0 0); white-space: nowrap; }
.rec-marcadas { border-left: 3px solid #a4565c; }
.rec-triaje { display: flex; flex-direction: column; gap: 5px; min-width: 232px; }
.rec-nomerito { display: flex; gap: 5px; align-items: center; margin: 0; }
.rec-nomerito input[type=text] { flex: 1 1 auto; min-width: 0; height: 24px; box-sizing: border-box;
    padding: 0 7px; border: 1px solid #c7d2de; border-radius: 5px; font-size: .78rem; font-family: inherit; }
.rec-nomerito-lista summary { display: flex; align-items: center; gap: 6px; cursor: pointer;
    font-weight: 600; color: #6a7684; font-size: .88rem; }

/* Dentro del panel de Configuración la fila es angosta (son dos columnas), así que
   el buscador se acota para que campo + rubro + botón quepan en UNA sola línea.
   Va acá, al final y por TIPO, porque `.dash-fechas .df-ancho input[type=text]`
   le ganaba en especificidad. */
.cfg-panel .dash-fechas { gap: 10px; }
.cfg-panel .dash-fechas .df-ancho { flex: 0 1 236px; }
.cfg-panel .dash-fechas .df-ancho input[type=text] { width: 100%; min-width: 0; }

/* El ancho al 100% es de la rejilla del producto nuevo y de nadie más: sus columnas
   ya reparten el espacio. Iba dentro del bloque compartido de controles y estiraba
   también las casillas de otras filas — una casilla al 100% empuja su texto fuera. */
.pn-grid input[type=text], .pn-grid input[type=url], .pn-grid select { width: 100%; }

/* Un campo deshabilitado tiene que VERSE deshabilitado. Va al final porque el bloque
   de normalización de controles fija `background:#fff` y le ganaba por orden. */
input:disabled, select:disabled, textarea:disabled {
    background: #f4f6f9; color: #9aa6b4; cursor: not-allowed;
}

/* Estado de la ficha en la lista del catálogo. Un producto SIN ficha no se
   distinguía de uno con ella, así que nadie iba a arreglarlo: ahora lo dice y
   lleva directo a la pantalla donde están las tres herramientas. */
.ficha-si { color: #2a6b4a; text-decoration: none; vertical-align: -1px; }
.ficha-si:hover { color: #1f5340; }
.ficha-falta { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem;
               color: #a4772a; text-decoration: none; white-space: nowrap; }
.ficha-falta:hover { color: #7d5a1f; text-decoration: underline; }

/* La zona de la ficha en el formulario de producto nuevo: subir el PDF oficial
   O armar una propia. Apagadas mientras el check del link esté marcado. */
.pn-subir-ficha { flex: 0 0 auto; }
.pn-subir-ficha input[type=file] { width: 250px; }
.pn-subir-ficha.apagado > span, .pn-o.apagado { color: #9aa6b4; }
.pn-o { font-size: .76rem; color: #6a7684; font-style: italic; }
/* Un campo deshabilitado tiene que verse deshabilitado también dentro de la rejilla,
   que fija su propio fondo blanco y le ganaba por especificidad. */
.pn-grid input:disabled, .pn-grid select:disabled,
.pn-ficha-zona input:disabled { background: #f4f6f9; color: #9aa6b4; cursor: not-allowed; }

/* Gestión Documental: estado de una guía de despacho. La pendiente lleva relleno
   —es plata despachada sin cobrar, o sea algo que hacer— y la facturada solo texto. */
.gd-pend { display:inline-flex; align-items:center; gap:3px; margin-left:6px; padding:1px 6px;
           background:#fdecef; border:1px solid #e6b8bf; border-radius:10px;
           font-size:.68rem; color:#a4565c; white-space:nowrap; }
.gd-ok   { display:inline-flex; align-items:center; gap:3px; margin-left:6px;
           font-size:.68rem; color:#2a6b4a; white-space:nowrap; }
.doc-cod { display:inline-block; padding:1px 5px; background:#eef2f7; border-radius:4px;
           font-family:ui-monospace,Consolas,monospace; font-size:.72rem; color:#1f4e79; }
.doc-chip { display:inline-block; margin:2px 5px 2px 0; padding:2px 8px; background:#f4f7fa;
            border:1px solid #dbe6f1; border-radius:12px; font-size:.74rem; color:#45505c; }
.doc-chip b { color:#1f4e79; margin-left:3px; }
.doc-tipos { margin:8px 0 12px; }
.doc-resumen { font-size:.9rem; margin:6px 0 10px; }
.doc-prev { margin-top:16px; padding:14px 16px; background:#fafbfc;
            border:1px solid #dbe6f1; border-radius:8px; }
.doc-vistas { margin-top:2px; }
.dash-cols { display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start; }
.dash-col { flex:1 1 420px; min-width:340px; }

/* Barra de paginación: cuántas se ven a la izquierda y el selector de tamaño a la
   derecha. Se repite arriba y abajo de la tabla — con 50 filas, volver a subir cansa. */
.pag-barra { display:flex; align-items:center; justify-content:space-between;
             gap:12px; flex-wrap:wrap; margin:0 0 10px; }
.pag-barra .muted { font-size:.82rem; }
.pag-pp { margin:0; }
.pag-pp label { display:inline-flex; align-items:center; gap:6px; margin:0;
                font-size:.82rem; font-weight:400; }
.pag-pp select { height:28px; padding:0 6px; border:1px solid #c7d2de; border-radius:5px;
                 font-size:.82rem; font-family:inherit; background:#fff; color:#24303d; }

/* Valorizar la compra: traer / actualizar / cambiar la cotización enlazada. */
.cmp-enlace { margin:14px 0; padding:14px 16px; background:#f4f8fc;
              border:1px solid #c3d8ee; border-radius:8px; }
.cmp-enlace h3 { margin:0 0 6px; font-size:1rem; }
.cmp-enlace .tabla { margin-top:10px; background:#fff; }
.cmp-enlace-ok { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
                 background:#f7faf8; border-color:#cfe3d6; }
.cmp-enlace-ok > .rub-muted { flex:1 1 260px; font-size:.78rem; }
.cmp-chk { display:inline-flex; align-items:center; gap:4px; margin:0 8px 0 0;
           font-size:.72rem; font-weight:400; color:#5a6b7d; }
.cmp-chk input { margin:0; }
.cmp-buscar { margin-top:10px; }
.cmp-cambiar { flex:1 1 100%; margin-top:4px; }
.cmp-cambiar > summary { cursor:pointer; font-size:.78rem; color:#5a6b7d;
                         display:inline-flex; align-items:center; gap:5px; list-style:none; }
.cmp-cambiar > summary::-webkit-details-marker { display:none; }
.cmp-cambiar > summary:hover { color:var(--azul); }

/* ── VALORIZAR LA COMPRA: tipografía y recuadros homogéneos ──────────────
   La tabla mezclaba tamaños porque cada control traía el suyo. Acá todo lo que
   va DENTRO de la tabla comparte una sola medida, y los números se alinean con
   cifras de ancho fijo para poder compararlos de un vistazo. */
.tabla-valorizar { font-size: .84rem; }
.tabla-valorizar th { font-size: .72rem; }
.tabla-valorizar td { vertical-align: middle; }
.tabla-valorizar .num { font-variant-numeric: tabular-nums; }
.tabla-valorizar select,
.tabla-valorizar input[type=text] {
    height: 28px; box-sizing: border-box; padding: 0 7px;
    border: 1px solid #c7d2de; border-radius: 5px;
    font-size: .82rem; font-family: inherit; color: #24303d; background: #fff;
}
.tabla-valorizar select { max-width: 165px; }
.tabla-valorizar .cm { display: flex; gap: 5px; justify-content: flex-end; align-items: center; }
.tabla-valorizar .cm input[type=text] { width: 92px; text-align: right; }
.tabla-valorizar .cm select { width: 62px; }
.tabla-valorizar code { font-size: .76rem; }
/* Los avisos de fila ganan a la cebra: son información, no decoración. */
.tabla-valorizar tr.val-sube > td    { background: #fff7ed; }
.tabla-valorizar tr.val-sinprecio > td { background: #fdf2f2; }

/* Decisión: un solo botón sólido, en el azul de marca. El verde sólido se salía
   de la paleta y competía con él. Rechazar va en contorno y se rellena al pasar
   el mouse: es la salida, no el camino habitual. */
.btn-aceptar-oc { background: var(--azul); color: #fff; display: inline-flex;
                  align-items: center; gap: 7px; }
.btn-aceptar-oc:hover { background: var(--azul-claro); color: #fff; }
.btn-rechazar-oc { background: #fff; color: #a4565c; border: 1px solid #e0b6bb;
                   display: inline-flex; align-items: center; gap: 7px; }
.btn-rechazar-oc:hover { background: #d9534f; color: #fff; border-color: #d9534f; }

/* CHECK del costo por línea: el mismo lenguaje ☐/✓ de la cotización. */
/* La casilla de «revisado»: el recuadro lo dibuja el CSS, no un carácter de
   texto. Un «☐» se ve distinto en cada equipo y parece un control roto. */
.chk-costo { background:#fff; border:1px solid #c7d2de; border-radius:5px; cursor:pointer;
             width:30px; height:26px; display:inline-flex; align-items:center;
             justify-content:center; color:#8a97a6; font-size:.95rem; padding:0; }
.chk-costo:hover { border-color:#9dc3e6; color:var(--azul); }
.chk-costo.on { background:#eaf5ee; border-color:#a8cbb6; color:#2a6b4a; }
.tabla-valorizar .col-chk { width:74px; text-align:center; }

/* De qué anexo de la cotización viene esta línea. */
.val-anexo { display:inline-block; margin-right:5px; padding:1px 6px; background:#eef2f7;
             border-radius:10px; font-size:.68rem; color:#1f4e79; white-space:nowrap; }

/* Lo que se va a generar, antes de generarlo. */
.val-oc-previa { margin:18px 0; padding:14px 16px; background:#f7f9fc;
                 border:1px solid #dbe6f1; border-radius:8px; }
.val-oc-previa h3 { margin:0 0 4px; font-size:1rem; }
.val-oc-previa .tabla { background:#fff; margin-top:10px; font-size:.84rem; }
.tabla-oc-previa code { font-size:.82rem; font-weight:600; }

/* «Actualizar desde la cotización» es una acción normal, no destructiva: va en el
   azul de marca. Estaba en rojo por reusar el botón de compra. */
.btn-traer { background:var(--azul); color:#fff; }
.btn-traer:hover { background:var(--azul-claro); color:#fff; }

/* Adjudicaciones que aún no tienen su N° de OC: se ven, y se ve que les falta. */
.adj-sin-num > td { background:#fffaf0; }
.adj-form { display:flex; gap:6px; align-items:center; margin:0; }
.adj-num { width:150px; height:26px; box-sizing:border-box; padding:0 7px;
           border:1px solid #e0c98a; border-radius:5px; font-size:.78rem; font-family:inherit; }
.adj-num:focus { outline:2px solid #9dc3e6; outline-offset:1px; }

/* «Adjudicada» bloqueada porque la cotización sigue en borrador: se ve que existe
   y por qué hoy no corresponde, en vez de desaparecer sin explicación. */
.adj-bloqueada { display:flex; align-items:center; justify-content:center; gap:5px;
                 min-height:22px; padding:0 8px; border:1px dashed #e0c98a; border-radius:5px;
                 background:#fffaf0; color:#8a6714; font-size:.69rem; cursor:help; }

/* Panel de adjudicaciones vacío: dice POR QUÉ está vacío, en vez de no decir nada. */
.adj-diag { display:flex; align-items:flex-start; gap:7px; margin:0 0 14px; padding:9px 12px;
            background:#f7f9fc; border:1px solid #dbe6f1; border-radius:7px;
            font-size:.79rem; line-height:1.45; color:#4a5a6a; }
.adj-diag svg { flex:0 0 auto; margin-top:2px; color:#5a7ea6; }
.adj-diag span { flex:1 1 auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTROLES DE FORMULARIO — AHORA POR DEFECTO, NO POR LISTA
   ───────────────────────────────────────────────────────────────────────────
   POR QUÉ SE REESCRIBIÓ (2026-08-24). El bloque anterior decía «GLOBAL» pero
   era una LISTA BLANCA de 10 clases: solo las pantallas nombradas ahí recibían
   el estilo. Se midió y **39 de las ~60 pantallas quedaban fuera**, con los
   controles en el aspecto por defecto del navegador. Por eso el mismo defecto
   —«formato Visual Basic», recuadros de distinto alto, etiquetas desalineadas—
   reaparecía cada vez que se construía una pantalla nueva: nadie se acordaba
   de sumar la clase a la lista, y solo se veía al mirar ESA pantalla.

   AHORA SE APLICA A TODO lo que esté dentro de `.contenido`, así una pantalla
   nueva lo hereda sin hacer nada.

   EL TRUCO ES `:where()`, que tiene especificidad CERO. Eso significa que
   CUALQUIER regla existente le gana automáticamente — incluida una de una sola
   clase. Así los sitios ya afinados a mano (los campos compactos dentro de las
   tablas, el editor de cotización con su fila de Parámetros/Despacho/Plazos,
   la columna de acciones de Seguimiento, los popovers de filtro) conservan
   su tamaño sin necesidad de escribir ni una excepción.

   Es decir: esto viste lo que NADIE vistió, y no toca nada de lo ya vestido.
   ═══════════════════════════════════════════════════════════════════════════ */

/* (la base de input/select vive arriba, en la regla de elemento) */

/* El textarea crece con su contenido: lleva el mismo aspecto pero sin alto fijo. */
:where(.contenido) :where(textarea) {
    box-sizing: border-box;
    padding: 8px 9px;
    border: 1px solid #c7d2de;
    border-radius: 6px;
    font-size: .85rem;
    font-family: inherit;
    line-height: 1.5;
    color: #24303d;
    background: #fff;
}

/* Subir archivos: el navegador lo dibuja a su manera y desentona con todo lo
   demás. Se le da la misma caja y su botón interno propio. */
/* (el campo de archivo se estiliza arriba, en la regla de elemento) */
:where(.contenido) :where(input[type=file])::file-selector-button {
    height: calc(var(--control-alto) - 2px);
    margin-right: 10px;
    padding: 0 12px;
    border: 0;
    border-right: 1px solid #c7d2de;
    border-radius: 5px 0 0 5px;
    background: #eef2f7;
    color: #33404f;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

/* Foco visible: hace falta para el teclado y para saber dónde estás escribiendo. */
:where(.contenido) :where(input, select, textarea):focus-visible {
    outline: 2px solid var(--azul-claro);
    outline-offset: 1px;
}

/* Una fila de formulario alinea sus controles por ABAJO. Como las etiquetas van
   encima y pueden ocupar una o dos líneas, sin esto los recuadros quedan a
   distinta altura aunque todos midan lo mismo. */
:where(.venta-form, .inc-form, .rec-grid, .vd-grid, .ed-grid, .config-form,
       .cmpx-filtros, .val-form, .pc-nuevo, .fg-como, .rec-int-datos) {
    align-items: end;
}

/* ── Fila de la valorización: recuadros parejos y sin texto cortado ────────── */
.tabla-valorizar .val-prov {
    width: 100%;
    min-width: 132px;
    max-width: 168px;      /* alcanza para «— no comprar —», el texto más largo */
}
/* Solo aparece cuando el mayorista elegido NO es el de la cotización. */
.val-cambio { display:block; margin-top:3px; font-size:.68rem; color:#8a6714;
              background:#fffaf0; border:1px solid #e8d9b0; border-radius:4px;
              padding:1px 5px; white-space:nowrap; }
.tabla-valorizar .cm input[type=text],
.tabla-valorizar .cm select,
.tabla-valorizar .val-prov {
    height: 30px;          /* el mismo alto para los tres controles de la fila */
    box-sizing: border-box;
    padding: 0 8px;
    font-size: .82rem;
    line-height: normal;
}
.tabla-valorizar .cm select { padding-right: 4px; }
.tabla-valorizar .cm input[type=text] { font-variant-numeric: tabular-nums; }
/* La casilla, del mismo alto que los demás controles y centrada en su columna. */
.chk-costo { width: 30px; height: 30px; display: inline-flex; align-items: center;
             justify-content: center; padding: 0; }

/* ── De dónde sale cada producto, en la valorización de la compra ─────────────
   Una línea «de bodega» no se le compra a nadie: ya es tuya. Se marca en verde
   suave porque no es un problema, es una forma de operar. */
.tabla-valorizar .val-mod { min-width: 138px; max-width: 168px; height: 30px;
                            box-sizing: border-box; padding: 0 8px; font-size: .8rem; }
.val-bodega { display: inline-block; padding: 2px 7px; border-radius: 4px;
              background: #eaf5ee; border: 1px solid #a8cbb6; color: #2a6b4a;
              font-size: .72rem; font-weight: 600; white-space: nowrap; }

/* ══ GESTIÓN DE COMISIONES ══════════════════════════════════════════════════ */
.com-caja { background:#fff; border:1px solid var(--gris-borde); border-radius:8px;
            padding:16px 18px; margin-bottom:18px; }
.com-caja > h2 { margin-top:0; }
.com-grid { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:end; margin-bottom:12px; }
.com-ancho  { flex:1 1 240px; }
.com-ancho2 { flex:2 1 340px; }
.com-chk { flex-direction:row !important; align-items:center; gap:6px; padding-bottom:8px; }
.com-chk input { width:auto; }
/* La nota que explica el tipo elegido: cambia con el selector, así el formulario
   dice qué significa lo que estás eligiendo en vez de dejarlo a la memoria. */
.com-nota { display:flex; align-items:flex-start; gap:7px; margin:0 0 12px; padding:8px 11px;
            background:#f4f8fc; border:1px solid #dbe6f1; border-radius:6px;
            font-size:.79rem; line-height:1.5; color:#44525f; }
.com-nota svg { flex:0 0 auto; margin-top:2px; color:#5a7ea6; }
.com-cero { border:1px solid var(--gris-borde); border-radius:6px; padding:10px 14px 4px; margin-bottom:14px; }
.com-cero legend { font-size:.78rem; font-weight:700; color:#44525f; padding:0 6px; }
.com-cero .muted { font-size:.76rem; margin:2px 0 8px; }

.com-meta { border:1px solid var(--gris-borde); border-radius:6px; padding:12px 14px; margin-bottom:12px;
            background:#fafbfc; }
.com-meta-cab { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.com-meta-cab .muted { font-size:.78rem; }
.com-meta-cab form { margin-left:auto; }
.com-tramos { max-width:520px; }
.com-tramos input { text-align:right; }
.com-meta-nueva { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-top:10px; }

.com-acciones { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0 18px; }
.com-sim { background:#f7fbff; border:1px solid #cfe0f0; border-radius:8px; padding:14px 16px; margin-bottom:20px; }
.com-sim > h2 { margin-top:0; }
.com-nopaga { opacity:.62; }

.com-persona { border:1px solid var(--gris-borde); border-radius:8px; margin-bottom:16px; overflow:hidden; }
.com-persona-cab { display:flex; align-items:center; gap:10px; padding:10px 14px;
                   background:#f4f7fa; border-bottom:1px solid var(--gris-borde); }
.com-persona-cab .muted { font-size:.8rem; }
.com-total { margin-left:auto; font-size:1.05rem; font-weight:700; color:#2a6b4a;
             font-variant-numeric:tabular-nums; }
.com-detalle { margin:0; }
.com-revertida { opacity:.6; text-decoration:line-through; }
.com-bono { padding:10px 14px 4px; border-top:1px solid var(--gris-borde); background:#fbfcfd; }
.com-bono > strong { display:flex; align-items:center; gap:6px; font-size:.85rem; color:#1f4e79; margin-bottom:6px; }
.com-bono .muted { font-size:.75rem; }

.com-est { display:inline-block; padding:2px 7px; border-radius:4px; font-size:.7rem; font-weight:600; }
.com-est-devengada { background:#eef4fb; border:1px solid #cfe0f0; color:#2f6fa5; }
.com-est-pagada    { background:#eaf5ee; border:1px solid #a8cbb6; color:#2a6b4a; }
.com-est-revertida { background:#fdecef; border:1px solid #e8b4bb; color:#a4565c; }
.com-est-anulada   { background:#f2f4f7; border:1px solid #dbe0e6; color:#6b7680; }

/* ═══════════════════════════════════════════════════════════════════════════
   BOTONES — UNA SOLA FORMA Y UN SOLO ALTO
   ───────────────────────────────────────────────────────────────────────────
   REGLA FIJA DEL USUARIO: todos los botones miden y se ven igual; LO UNICO que
   cambia es el color. Habia TRES geometrias distintas conviviendo en la misma
   pantalla — .boton (42 px, letra 1rem), .boton-mini (26 px, .82rem) y
   .df-boton (32 px) — y bastaba juntarlas en una fila para que se notara.

   Van todas al mismo alto que los campos (--control-alto), asi un boton al lado
   de un campo queda parejo, que es donde mas saltaba a la vista.

   LOS CONTEXTOS COMPACTOS NO SE TOCAN: las reglas de .tabla td, .seg-acc,
   .paginacion y .prod-acciones tienen mas especificidad y siguen mandando. Ahi
   los botones son chicos A PROPOSITO y asi deben quedar.
   ═══════════════════════════════════════════════════════════════════════════ */

.boton, .boton-mini, .df-boton, button.boton, a.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--control-alto);
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
}

/* El margen superior de .boton servia cuando iba suelto bajo un formulario, pero
   dentro de una fila de acciones lo descuadra. Se anula donde hay fila. */
.com-acciones .boton, .cab-flex .boton, .dash-fechas .boton,
.acciones .boton, .inline .boton, form.inline > .boton,
.com-meta-nueva .boton, .val-tc .boton {
    margin-top: 0;
}

/* El icono dentro del boton, siempre del mismo tamano. */
.boton > svg, .boton-mini > svg, .df-boton > svg { flex: 0 0 auto; }
.com-elige { margin-bottom: 12px; }
.com-elige .lf-campo { max-width: 320px; }

/* ── Crear cuenta (pantalla pública) ─────────────────────────────────────── */
.tarjeta-ancha { max-width: 620px; }
.reg-intro { font-size: .86rem; color: #4a5a6a; line-height: 1.55; margin: 0 0 16px;
             padding: 10px 13px; background: #f4f8fc; border: 1px solid #dbe6f1; border-radius: 7px; }
.reg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 14px; margin-bottom: 6px; }
.reg-ancho { grid-column: span 2; }
.reg-grid .lf-campo em { font-style: normal; font-weight: 400; color: #8a949e; }
.tarjeta h2 { font-size: .95rem; margin: 16px 0 6px; }
.tarjeta .muted { font-size: .78rem; margin: 0 0 8px; }
.reg-pie { margin-top: 16px; font-size: .84rem; color: #5a6b7d; text-align: center; }
.login-registro { margin-top: 16px; font-size: .84rem; color: #5a6b7d; text-align: center; line-height: 1.5; }
@media (max-width: 620px) { .reg-grid { grid-template-columns: 1fr; } .reg-ancho { grid-column: span 1; } }

/* Lo que NO está en el plan: se ve apagado, pero se ve. Lo que no se conoce
   no se compra, así que esconderlo sería trabajar en contra del negocio. */
.menu-bloqueado { color: #7d94ad; cursor: default; }
.menu-bloqueado svg { opacity: .7; }
.menu-subir { background: rgba(255,255,255,.12); font-weight: 600; }
.menu-subir:hover { background: rgba(255,255,255,.2); }

/* ══ MI PLAN ═══════════════════════════════════════════════════════════════ */
.plan-actual { display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between;
               padding:16px 20px; border-radius:9px; border:1px solid var(--gris-borde);
               background:#fff; margin-bottom:16px; }
.plan-prueba  { border-color:#a8cbb6; background:#f5fbf7; }
.plan-vencido { border-color:#e8b4bb; background:#fff8f8; }
.pa-etq { font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#7d8b99; }
.pa-nombre { font-size:1.35rem; font-weight:700; color:var(--azul); margin:2px 0 6px; }
.pa-estado { display:flex; align-items:center; gap:6px; font-size:.84rem; color:#4a5a6a; }
.pa-der { min-width:220px; }
.pa-num { font-size:1.6rem; font-weight:700; color:var(--azul); font-variant-numeric:tabular-nums; margin:2px 0 6px; }
.pa-num span { font-size:.85rem; font-weight:400; color:#7d8b99; }
.pa-barra { height:7px; background:#e8edf3; border-radius:4px; overflow:hidden; }
.pa-barra span { display:block; height:100%; background:var(--azul-claro); }
.pa-aviso { display:flex; align-items:center; gap:5px; margin-top:5px; font-size:.75rem; color:#a4565c; font-weight:600; }

/* LAS TARJETAS DE PLAN, SECCION POR SECCION ALINEADAS (2026-08-26).
   Antes `.plan-lista` llevaba `flex:1` y se comia todo el espacio sobrante; como el pie
   de cada tarjeta mide distinto (unas traen 'Bajar a este plan' y su aviso, otras solo
   el boton), la tabla de precios quedaba a distinta altura en cada una y se leia como un
   error de armado. Con `subgrid` cada seccion -titulo, precio, resumen, lista, tarifa,
   formulario, pie- es una FILA de la rejilla madre, asi que arrancan todas parejas.
   OJO: el `row-gap` de la madre se aplicaria DENTRO de cada tarjeta, asi que va en 0 y la
   separacion entre filas de tarjetas se hace con el margen de la tarjeta. */
.plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
             grid-template-rows:repeat(7,auto); gap:0 16px; margin-bottom:14px; }
.plan-card { display:grid; grid-template-rows:subgrid; grid-row:span 7; gap:0;
             margin-bottom:16px; }
/* Ya no absorbe el sobrante: cada fila mide lo que mide su contenido mas alto. */
.plan-lista { flex:none; }
/* Lo que va dentro de una fila se pega ARRIBA; si no, un bloque bajo se centraria en
   una fila alta y volveria a verse desalineado. */
.plan-card > * { align-self:start; }
.plan-card { position:relative; border:1px solid var(--gris-borde); border-radius:9px;
             padding:18px 18px 16px; background:#fff; }
.plan-card-actual { border-color:var(--azul-claro); box-shadow:0 0 0 2px rgba(47,111,165,.14); }
.plan-tag { position:absolute; top:-10px; left:16px; display:flex; align-items:center; gap:4px;
            padding:2px 9px; border-radius:10px; background:var(--azul-claro); color:#fff;
            font-size:.68rem; font-weight:700; }
.plan-card h3 { margin:0 0 4px; font-size:1.05rem; }
.plan-precio { font-size:1.5rem; font-weight:700; color:var(--azul); margin-bottom:8px; }
.plan-precio span { font-size:.78rem; font-weight:400; color:#7d8b99; margin-left:5px; }
.plan-resumen { font-size:.8rem; color:#5a6b7d; line-height:1.5; margin:0 0 12px; }
.plan-lista { list-style:none; padding:0; margin:0 0 14px; flex:1; }
.plan-lista li { display:flex; align-items:flex-start; gap:7px; padding:4px 0; font-size:.8rem; line-height:1.4; }
.plan-lista li.si   { color:#2a6b4a; }
.plan-lista li.no   { color:#a3aeb9; }
.plan-lista li.dato { color:#4a5a6a; border-top:1px solid #eef1f5; margin-top:4px; padding-top:8px; }
.plan-lista li em { font-style:normal; color:#8a949e; }
.plan-lista svg { flex:0 0 auto; margin-top:2px; }
.plan-meses { max-width:150px; margin-bottom:8px; }
.plan-nota { display:flex; align-items:flex-start; gap:7px; font-size:.78rem; }

/* ══ TU MERCADO — la matriz de 4×3 grupos ═════════════════════════════════ */
.mm-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:18px; }
.mm-card { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
           gap:6px; padding:18px 12px 14px; border:1.5px solid var(--gris-borde); border-radius:10px;
           background:#fff; cursor:pointer; font-weight:400; margin:0;
           transition:border-color .12s, box-shadow .12s, background .12s; }
.mm-card:hover { border-color:#9dc3e6; }
/* «Ver que hay aqui» dentro de la tarjeta del cajon: es un enlace, no parte del
   marcado, asi que se ve como enlace y no compite con la casilla. */
.mm-ver { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
          font-size: .74rem; color: #12707f; text-decoration: none;
          border: 1px solid #a8cdd2; background: rgba(18,112,127,.09);
          padding: 3px 10px; border-radius: 999px; align-self: center; }
.mm-ver:hover { background: rgba(18,112,127,.18); }

.mm-card.on { border-color:var(--azul-claro); background:#f5f9fd;
              box-shadow:0 0 0 2px rgba(47,111,165,.16); }
.mm-card input { position:absolute; opacity:0; width:0; height:0; }
.mm-ico { color:#6b8299; line-height:0; }
.mm-card.on .mm-ico { color:var(--azul); }
.mm-nombre { font-size:.9rem; font-weight:700; color:#24303d; line-height:1.25; }
.mm-ayuda  { font-size:.73rem; color:#6b7680; line-height:1.4; }
.mm-n { font-size:.7rem; font-weight:600; color:#2a6b4a; background:#eaf5ee;
        border:1px solid #c3e0cf; border-radius:9px; padding:1px 8px; margin-top:2px; }
/* El visto solo aparece cuando está elegido: un recuadro vacío en cada tarjeta
   ensucia una matriz de doce. */
.mm-tick { position:absolute; top:9px; right:9px; width:20px; height:20px; border-radius:50%;
           background:var(--azul-claro); color:#fff; display:none; align-items:center; justify-content:center; }
.mm-card.on .mm-tick { display:flex; }
.mm-pie { display:flex; align-items:center; gap:14px; }
.mm-cuenta { font-size:.83rem; color:#4a5a6a; font-weight:600; }
.mm-cuenta.falta { color:#8a6714; }
.mm-pie .boton:disabled { opacity:.5; cursor:not-allowed; }
@media (max-width:1100px) { .mm-grid { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:780px)  { .mm-grid { grid-template-columns:repeat(2, 1fr); } }
/* El mercado disponible en cada grupo: los dos canales por separado, porque son
   dos negocios distintos y dos planes distintos. */
.mm-mercado { display:flex; flex-direction:column; gap:3px; width:100%; margin-top:3px; }
.mm-canal { display:flex; align-items:baseline; justify-content:center; gap:4px;
            font-size:.7rem; padding:2px 7px; border-radius:9px; line-height:1.35; }
.mm-canal b { font-size:.82rem; font-weight:700; }
.mm-canal em { font-style:normal; font-weight:600; opacity:.85; }
.mm-agil { background:#eaf5ee; border:1px solid #c3e0cf; color:#2a6b4a; }
.mm-lic  { background:#eef4fb; border:1px solid #cfe0f0; color:#2f6fa5; }
.mm-sindato { font-size:.68rem; color:#a3aeb9; margin-top:3px; cursor:help; }
/* Selector de empresa del panel: solo sale cuando hay más de una que elegir. */
.empresa-sel { padding: 0 16px 12px; }
.empresa-sel label { display: block; font-size: .64rem; letter-spacing: .06em;
                     text-transform: uppercase; color: #9fb6cd; margin-bottom: 4px; }
.empresa-sel select { width: 100%; background: #1d3f63; color: #eaf2fa;
                      border: 1px solid #2b567f; border-radius: 6px;
                      padding: 6px 8px; font-size: .8rem; }
.empresa-sel select:focus { outline: 2px solid #4b8fc7; outline-offset: 1px; }

/* ─── Pantalla de planes: cuota por usuario, tarifa por periodo y reglas de pago ─── */
.pa-detalle { font-size: .72rem; color: #6c7a89; margin: 2px 0 5px; }

.plan-lista li.dato span { display: block; }
.plan-lista li.dato em { display: block; font-style: normal; font-size: .71rem;
                         color: #8a97a4; margin-top: 1px; }

/* La tarifa: lo que paga ESTA empresa con SU gente, en cada periodo. */
.plan-tarifa { width: 100%; border-collapse: collapse; margin: 12px 0 4px;
               font-size: .78rem; }
.plan-tarifa th { text-align: left; font-size: .66rem; letter-spacing: .05em;
                  text-transform: uppercase; color: #8a97a4; font-weight: 600;
                  padding: 0 0 5px; border-bottom: 1px solid #e4e9ef; }
.plan-tarifa th:last-child { text-align: right; }
.plan-tarifa td { padding: 5px 0; border-bottom: 1px solid #f0f3f6; }
.plan-tarifa td em { display: block; font-style: normal; font-size: .69rem; color: #2a6b4a; }
.plan-tarifa .pt-uf { text-align: right; font-weight: 600; color: #1f4e79;
                      font-variant-numeric: tabular-nums; white-space: nowrap; }

.plan-primero { font-size: .72rem; color: #8a6714; background: #fdf6e3;
                border-radius: 6px; padding: 6px 9px; margin: 8px 0 0;
                display: flex; align-items: flex-start; gap: 5px; line-height: 1.4; }

.plan-reglas { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.plan-reglas li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5;
                  background: #f7f9fb; border-radius: 7px; padding: 10px 13px; }
.plan-reglas li svg { flex: none; margin-top: 3px; color: #1f4e79; }
/* Dar acceso a otra empresa: los tres controles en una línea, alineados abajo. */
.me-form { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 0 0 16px; }
.me-form .lf-campo { min-width: 250px; }
.mm-tope { display: flex; align-items: flex-start; gap: 7px; background: #eef4fb;
           border: 1px solid #cfe0f0; border-radius: 7px; padding: 9px 12px;
           margin: 0 0 14px; font-size: .82rem; color: #2f6fa5; line-height: 1.45; }
.mm-tope svg { flex: none; margin-top: 2px; }
/* Con CUATRO planes, 258px de mínimo dejaba el Premium solo en una segunda fila.
   Se baja el mínimo para que los cuatro entren en una línea en pantalla ancha y
   caigan a dos por fila recién cuando de verdad no caben. */
.plan-grid { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* Configuración de sistemas: es del dueño de la plataforma, no del cliente.
   Se marca distinto para que se lea de inmediato que no es una función más. */
.menu-seccion-sistema { color: #ffd479; border-top: none; margin-top: 4px; }

/* Estado de cobro en la lista de empresas. */
.emp-cobro { display: inline-flex; align-items: center; gap: 4px; font-size: .73rem;
             padding: 3px 9px; border-radius: 11px; white-space: nowrap; }
.emp-cobro-activo    { background: #eaf5ee; color: #2a6b4a; border: 1px solid #c3e0cf; }
.emp-cobro-lectura   { background: #fdf6e3; color: #8a6714; border: 1px solid #e8d7a8; }
.emp-cobro-bloqueado { background: #fdecef; color: #a33;    border: 1px solid #e6c3c3; }
.emp-meses { height: 26px; font-size: .76rem; padding: 2px 6px; }
.boton-ok    { background: #2e7d52; border-color: #2e7d52; color: #fff; }
.boton-aviso { background: #fff; border: 1px solid #d9a441; color: #8a6714; }
.boton-aviso:hover { background: #8a6714; border-color: #8a6714; color: #fff; }
.emp-borrar summary { color: #a33; }
.emp-borrar-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-top: 6px; }
.emp-borrar-form .lf-campo { min-width: 280px; }

/* ─── Arma tu plan ─────────────────────────────────────────────────────────── */
.ap-marco { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
.ap-gayuda { font-size: .8rem; color: #8a97a4; margin: -6px 0 10px; }
.ap-mod { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start;
          border: 1px solid var(--gris-borde); border-radius: 8px; padding: 11px 14px;
          margin-bottom: 8px; background: #fff; cursor: pointer; }
.ap-mod.on { border-color: var(--azul-claro); box-shadow: 0 0 0 2px rgba(47,111,165,.12); }
.ap-mod input { position: absolute; opacity: 0; pointer-events: none; }
.ap-tick { width: 20px; height: 20px; border-radius: 5px; border: 1px solid #cfd8e2;
           display: flex; align-items: center; justify-content: center; color: transparent;
           background: #fff; margin-top: 1px; }
.ap-mod.on .ap-tick { background: var(--azul-claro); border-color: var(--azul-claro); color: #fff; }
.ap-txt b { display: block; font-size: .88rem; color: #24303d; }
.ap-txt b em { font-style: normal; font-weight: 400; font-size: .74rem; color: #8a97a4; }
.ap-txt > span { display: block; font-size: .78rem; color: #6c7a89; line-height: 1.45; margin-top: 2px; }
.ap-porque:not(:empty) { color: #2f6fa5 !important; font-weight: 600; margin-top: 4px !important; }
.ap-uf { font-weight: 700; color: var(--azul); font-size: .86rem; white-space: nowrap;
         font-variant-numeric: tabular-nums; }
.ap-obl { background: #f7f9fb; cursor: default; }
.ap-estrella { border-color: #d9a441; }
.ap-pronto { opacity: .68; cursor: default; }
.ap-pronto .ap-uf { color: #8a97a4; font-weight: 600; font-size: .76rem; }

.ap-cuenta { position: sticky; top: 16px; }
.ap-caja { border: 1px solid var(--azul-claro); border-radius: 10px; padding: 16px 18px; background: #fff; }
.ap-etq { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: #8a97a4; }
.ap-precio { margin: 4px 0 2px; }
.ap-precio span { font-size: 1.7rem; font-weight: 700; color: var(--azul); }
.ap-precio em { display: block; font-style: normal; font-size: .72rem; color: #8a97a4; }
.ap-total { font-size: .82rem; color: #24303d; margin: 8px 0 10px;
            border-top: 1px solid #eef2f6; padding-top: 9px; }
.ap-lista { list-style: none; padding: 0; margin: 0 0 10px; }
.ap-lista li { font-size: .76rem; color: #6c7a89; padding: 2px 0 2px 14px; position: relative; }
.ap-lista li::before { content: '·'; position: absolute; left: 4px; color: var(--azul-claro); font-weight: 700; }
.ap-nota { font-size: .73rem; color: #8a97a4; line-height: 1.45; margin: 0 0 10px;
           display: flex; gap: 5px; align-items: flex-start; }
.ap-ojo { background: #fdf6e3; color: #8a6714; border-radius: 6px; padding: 8px 10px; }
@media (max-width: 980px) { .ap-marco { grid-template-columns: 1fr; } .ap-cuenta { position: static; } }

/* ─── EL REGISTRO EN TRES PASOS ────────────────────────────────────────────── */
.pantalla-registro { background: #eef2f7; padding: 26px 16px 50px; }
.reg-caja { max-width: 860px; margin: 0 auto; background: #fff; border-radius: 12px;
            padding: 28px 32px 32px; box-shadow: 0 2px 14px rgba(31,78,121,.09); }
.reg-marca { margin-bottom: 12px; color: var(--azul); }
.reg-caja h1 { margin: 0 0 4px; }
.reg-sub { color: #6c7a89; margin: 0 0 16px; }
.reg-caja h2 { font-size: 1rem; margin: 22px 0 4px; }
.reg-ayuda { font-size: .8rem; color: #8a97a4; margin: 0 0 12px; line-height: 1.5; }

/* La cinta de pasos: dónde vas y cuánto falta. */
.reg-pasos { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.reg-pasos span { font-size: .76rem; padding: 5px 12px; border-radius: 14px;
                  display: inline-flex; align-items: center; gap: 5px; }
.rp-hecho { background: #eaf5ee; color: #2a6b4a; border: 1px solid #c3e0cf; }
.rp-aqui  { background: var(--azul); color: #fff; font-weight: 600; }
.rp-falta { background: #f2f5f8; color: #97a4b1; border: 1px solid #e2e8ee; }

.reg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; }
.reg-grid .lf-campo { min-width: 0; width: 100%; }
.reg-ancho2 { grid-column: span 2; }
.reg-ancho3 { grid-column: span 3; }
.reg-pie { display: flex; gap: 14px; align-items: center; margin-top: 22px; }
@media (max-width: 780px) {
    .reg-grid { grid-template-columns: 1fr 1fr; }
    .reg-ancho2, .reg-ancho3 { grid-column: span 2; }
}

/* Los giros del SII, en dos recuadros: buscar a la izquierda, elegidos a la derecha. */
.giro-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.giro-col { display: flex; flex-direction: column; gap: 6px; }
.giro-tit { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: #8a97a4; }
.giro-tit b { color: var(--azul); }
.giro-lista { border: 1px solid var(--gris-borde); border-radius: 8px; background: #fff;
              min-height: 168px; max-height: 230px; overflow-y: auto; padding: 6px; }
.giro-elegidos { background: #f7fafd; }
.gi-vacio { font-size: .78rem; color: #a3aeb9; padding: 10px; margin: 0; }
.gi-op { display: block; width: 100%; text-align: left; border: 0; background: none;
         padding: 6px 8px; border-radius: 5px; font-size: .8rem; color: #24303d; cursor: pointer; }
.gi-op:hover { background: #eef4fb; }
.gi-op code { background: #eef2f7; color: var(--azul); padding: 1px 5px; border-radius: 4px;
              font-size: .72rem; }
.gi-chip { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #cfe0f0;
           border-radius: 6px; padding: 5px 8px; margin-bottom: 5px; font-size: .79rem; }
.gi-chip span { flex: 1; line-height: 1.35; }
.gi-chip button { border: 0; background: none; color: #a33; font-size: 1.05rem; cursor: pointer;
                  line-height: 1; padding: 0 2px; }
@media (max-width: 780px) { .giro-dos { grid-template-columns: 1fr; } }

/* Paso 2: la foto de antes. */
.rp-bloque { border: 1px solid var(--gris-borde); border-radius: 9px; padding: 14px 16px 16px;
             margin: 0 0 14px; }
.rp-bloque legend { font-weight: 600; color: var(--azul); padding: 0 6px;
                    display: inline-flex; align-items: center; gap: 6px; }
.rp-ayuda { font-size: .78rem; color: #8a97a4; margin: 0 0 10px; }
.rp-campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; }
.rp-campos .lf-campo { width: 100%; min-width: 0; }
.rp-check { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: .84rem; cursor: pointer; }
.rp-margen { margin-top: 10px; }
.rp-margen.oculto { display: none; }
.rp-pie { display: flex; gap: 14px; align-items: center; margin-top: 18px; }
@media (max-width: 780px) { .rp-campos { grid-template-columns: 1fr; } }
/* En las rejillas de formulario el ancho lo reparte la rejilla, no el campo:
   `.lf-campo input` trae 170px fijos y ahí dejaba espacios entre columnas. */
.reg-grid .lf-campo input, .reg-grid .lf-campo select,
.rp-campos .lf-campo input, .rp-campos .lf-campo select,
.rp-margen .lf-campo input, .giro-col .lf-campo input { width: 100%; }

/* El registro usa la PÁGINA COMPLETA (pedido del usuario 2026-08-25): en una caja
   angosta los campos quedaban chicos y el formulario se veía apretado. Con cuatro
   columnas en pantalla ancha, cada dato tiene el espacio que le corresponde. */
.pantalla-registro { padding: 22px 26px 50px; }
.reg-caja { max-width: 1240px; padding: 30px 38px 36px; }
.reg-grid { grid-template-columns: repeat(4, 1fr); gap: 14px 18px; }
.reg-ancho2 { grid-column: span 2; }
.reg-ancho3 { grid-column: span 3; }
.giro-lista { min-height: 200px; max-height: 280px; }
.rp-campos { gap: 14px 18px; }
@media (max-width: 1180px) { .reg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .reg-grid { grid-template-columns: repeat(2, 1fr); }
                             .reg-ancho2, .reg-ancho3 { grid-column: span 2; } }
@media (max-width: 560px)  { .reg-grid { grid-template-columns: 1fr; }
                             .reg-ancho2, .reg-ancho3 { grid-column: span 1; } }
/* Los dos recuadros de giros arrancan y terminan en la misma línea: la cabecera de
   cada columna mide igual aunque una lleve buscador y la otra un título. */
.giro-dos { align-items: stretch; }
.giro-col { display: flex; flex-direction: column; gap: 0; }
.giro-cab { min-height: 56px; display: flex; flex-direction: column; justify-content: flex-end;
            gap: 3px; margin-bottom: 6px; }
.giro-sub { font-size: .72rem; color: #a3aeb9; }
.giro-col .giro-lista { flex: 1; }
/* El botón principal y el secundario, del mismo alto. */
.reg-pie .boton, .reg-pie .volver-link, .rp-pie .boton, .rp-pie .volver-link {
    min-height: var(--control-alto); display: inline-flex; align-items: center; margin: 0;
}
/* GIROS: el recuadro celeste mide lo mismo que el blanco MÁS su buscador (regla del
   usuario). Cada columna lleva su etiqueta arriba —de igual altura— y debajo el
   cuerpo ocupa todo lo que queda, así los dos empiezan y terminan en la misma línea. */
.giro-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.giro-col { display: flex; flex-direction: column; gap: 5px; }
.giro-cuerpo { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 240px; }
.giro-buscar { height: var(--control-alto); box-sizing: border-box; padding: 0 10px;
               border: 1px solid #c7d2de; border-radius: 6px; font-size: .85rem;
               font-family: inherit; color: #24303d; background: #fff; width: 100%; }
.giro-buscar:focus { outline: 2px solid #9dc3e6; outline-offset: 1px; }
.giro-col .giro-lista { flex: 1; min-height: 0; max-height: none; }

/* ─── Solicitud de servicio logístico ──────────────────────────────────────── */
.btn-logistica { background: #2f6fa5; border-color: #2f6fa5; }
.btn-logistica:hover { background: #24587f; border-color: #24587f; }
.log-panel { border: 1px solid var(--azul-claro); border-radius: 9px; background: #fff;
             padding: 14px 18px 16px; margin: 14px 0 16px;
             box-shadow: 0 0 0 2px rgba(47,111,165,.10); }
.log-panel h3 { margin: 0 0 4px; }
.log-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
.log-col { display: flex; flex-direction: column; gap: 9px; }
.log-tit { display: flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700;
           letter-spacing: .04em; text-transform: uppercase; color: var(--azul);
           border-bottom: 1px solid #eef2f6; padding-bottom: 5px; }
.log-col .lf-campo input, .log-col .lf-campo select { width: 100%; }
.log-col > div { display: flex; flex-direction: column; gap: 9px; }
.log-acc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
           margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef2f6; }
.log-acc .muted { font-size: .76rem; }
.oculto-form { display: none; }
@media (max-width: 900px) { .log-cols { grid-template-columns: 1fr; } }
/* El botón de la solicitud va del MISMO alto que «Guardar y recalcular»: en el slot
   de 210 px el nombre completo no cabe a la letra normal y se partía en dos líneas,
   dejando un botón más alto que el de arriba. */
.flete-slot .btn-logistica { font-size: .74rem; white-space: nowrap; letter-spacing: -.1px; }
/* El aviso de plazo dice primero el veredicto y debajo la cuenta: el número solo
   no servía porque no se veía de dónde salía. */
.pista-aviso { display: flex; flex-direction: column; gap: 3px; line-height: 1.4; }
.pista-tit { display: flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; }
.pista-cuenta { display: flex; align-items: baseline; gap: 5px; font-size: .71rem; }
.pista-cuenta b { white-space: nowrap; }
.pista-cuenta em { font-style: normal; opacity: .82; }
.pista-salida { font-size: .71rem; font-weight: 600; margin-top: 2px; }
/* La vigencia lleva la fecha adentro, así que el chip crece: se deja envolver. */
.emp-cobro { white-space: normal; line-height: 1.4; }
.emp-cobro em { font-style: normal; opacity: .8; }
/* El desplegable de días/meses va AL LADO de su botón, no encima: son una sola
   acción y separados se leen como dos cosas distintas. */
.empresa-acciones form.inline { display: inline-flex; align-items: center; gap: 6px; }
.emp-meses { width: auto; min-width: 96px; max-width: 118px; }
.emp-saldo { font-size: .7rem; color: #8a97a4; white-space: nowrap; }

/* ─── Planes y cupos (Configuración de sistemas) ───────────────────────────── */
.cp-sub { font-weight: 400; font-size: .66rem; color: #8a97a4; text-transform: none; letter-spacing: 0; }
.cp-sec { font-size: .7rem; }
.cp-uf { font-weight: 700; color: var(--azul); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-n { width: 92px; text-align: center; font-variant-numeric: tabular-nums; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 16px; margin: 8px 0 16px; }
.cp-item { border: 1px solid var(--gris-borde); border-radius: 8px; padding: 12px 14px; background: #fff; }
.cp-que { font-size: .74rem; color: #6c7a89; line-height: 1.45; margin: 7px 0 0; }
.cp-cambiado { font-size: .71rem; color: #8a6714; margin: 6px 0 0;
               display: flex; align-items: center; gap: 4px; }

/* ─── Arma tu plan: lo que ya tiene y lo que está bloqueado ────────────────── */
.ap-tiene { background: #f4f9f6; border-color: #c3e0cf; cursor: default; }
.ap-tiene .ap-tick { background: #2e7d52; border-color: #2e7d52; color: #fff; }
.ap-incl { font-style: normal; font-size: .72rem; color: #2a6b4a; font-weight: 600; }
/* Bloqueado NO es lo mismo que apagado: se ve que existe y se explica qué falta. */
.ap-bloq { opacity: .62; cursor: not-allowed; background: #fafbfc; }
.ap-bloq .ap-porque { color: #8a6714 !important; }
.ap-yatiene { display: flex; align-items: center; gap: 5px; font-size: .8rem; color: #2a6b4a;
              background: #eaf5ee; border-radius: 6px; padding: 6px 9px; margin: 4px 0 12px; }
.ap-etq2 { display: block; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ETIQUETAS DE DISTINTO LARGO — LA CAUSA DE LOS RECUADROS DESALINEADOS
   ───────────────────────────────────────────────────────────────────────────
   Es el mismo defecto que vengo arreglando pantalla por pantalla, y siempre por
   lo mismo: en una fila de campos, la etiqueta que ocupa DOS líneas empuja su
   recuadro un renglón más abajo que los de al lado. No es el recuadro el que
   está mal puesto — es la etiqueta la que mide distinto.

   Se arregla una sola vez y para todas: dentro de una rejilla de campos, el
   bloque de la etiqueta reserva el alto de dos líneas SIEMPRE, tenga una o dos,
   y el texto se apoya abajo. Así todos los recuadros arrancan a la misma altura
   sin importar qué diga la etiqueta.

   PARA UNA REJILLA NUEVA: se agrega su clase a esta lista y queda alineada sola.
   No hay que volver a resolverlo.
   ═══════════════════════════════════════════════════════════════════════════ */
.cp-grid .lf-campo > span,
.reg-grid .lf-campo > span,
.rp-campos .lf-campo > span,
.log-cols .lf-campo > span,
.pn-grid .lf-campo > span,
.me-form .lf-campo > span,
.cli-grid .lf-campo > span,
.giro-col .lf-campo > span {
    display: flex;
    align-items: flex-end;
    min-height: 2.05em;      /* dos líneas de la etiqueta, siempre */
    line-height: 1.02em;
}
/* Y la rejilla alinea sus celdas por abajo, para que un campo con texto de ayuda
   debajo no arrastre a los demás. */
.cp-grid, .reg-grid, .rp-campos, .log-cols, .cli-grid { align-items: start; }
.cp-item { display: flex; flex-direction: column; }
/* Cada casilla dice EN PALABRAS lo que su número significa: el mismo 0 quiere decir
   «sin tope» en un plan y «no incluye» en otro, y una nota al pie no lo resuelve. */
.cp-eco { font-size: .69rem; color: #8a97a4; text-align: center; margin-top: 3px; line-height: 1.3; }
.cp-eco-ojo { color: #8a6714; }
/* Qué suma cada plan sobre el anterior: es la diferencia lo que se recuerda, no la
   lista completa —los planes se acumulan y todos terminan diciendo casi lo mismo—. */
.cp-plan strong { display: block; }
.cp-suma { font-size: .74rem; color: #2a6b4a; line-height: 1.4; margin-top: 2px; }
.cp-suma b { color: #2a6b4a; font-size: .84rem; }
.cp-trae { font-size: .69rem; color: #a3aeb9; margin-top: 1px; }

/* ══ TARJETAS EN REJILLA: EL PIE SIEMPRE ABAJO ═══════════════════════════════
   En una rejilla todas las tarjetas de una fila quedan del MISMO ALTO, pero su
   contenido no: una descripción de dos líneas y otra de tres empujan el pie a
   alturas distintas y la fila entera se ve torcida.

   El arreglo NO es recortar los textos ni fijarles un alto —eso corta palabras
   y se rompe con el primer nombre largo—: es que el PIE de la tarjeta se pegue
   abajo con margin-top:auto. Así los datos quedan en la misma línea sin importar
   cuánto texto haya arriba, y da lo mismo si mañana un rubro cambia de nombre.

   UNA TARJETA NUEVA SOLO SUMA SU CLASE DE PIE ACÁ. No se estila por pantalla.
   (.plan-card ya lo resuelve por su cuenta con flex:1 en .plan-lista.) */
.mm-mercado, .mm-sindato { margin-top: auto; }

/* Y el pie necesita que ARRIBA haya algo que ceda el espacio sobrante: sin esto
   el margin-top:auto no tiene de dónde tomarlo cuando la tarjeta es justa. */
.mm-card { justify-content: flex-start; }

/* Un canal en cero se dibuja igual pero apagado: ocupa su fila —que es lo que
   mantiene la matriz derecha— y dice el dato sin competir por la atención. */
.mm-canal.mm-cero { background:#f6f8fa; border-color:#e4e9ee; color:#9aa5b0; }

/* ══ BUSCADOR DE CLIENTE ══════════════════════════════════════════════════════
   Reemplaza al desplegable corriente: se escribe y filtra por nombre o RUT, en
   cualquier parte del texto. Un solo componente para todo el sistema — ver
   src/buscador_cliente.php. Toma la forma de un campo normal, así que queda
   alineado con los demás de la fila sin tocar nada. */
.bc { position: relative; }
.bc-in { width: 100%; }
.bc-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
        display: flex; align-items: center; justify-content: center;
        width: 22px; height: 22px; padding: 0; margin: 0; border: 0; border-radius: 50%;
        background: none; color: #9aa5b0; cursor: pointer; }
.bc-x:hover { background: #eef1f5; color: #4a5a6a; }

/* La lista flota SOBRE el formulario: si empujara el contenido, cada letra que se
   escribe movería los campos de abajo. */
.bc-lista { position: absolute; z-index: 40; top: calc(100% + 3px); left: 0; right: 0;
            max-height: 290px; overflow-y: auto; background: #fff;
            border: 1px solid var(--gris-borde); border-radius: 8px;
            box-shadow: 0 8px 22px rgba(18,33,46,.13); padding: 4px; }
.bc-op { display: flex; align-items: baseline; gap: 8px; width: 100%; margin: 0;
         padding: 7px 10px; border: 0; border-radius: 6px; background: none;
         font: inherit; font-size: .84rem; text-align: left; color: #24303d;
         cursor: pointer; min-height: 0; }
.bc-op:hover, .bc-op.bc-foco { background: var(--azul-suave, #eaf0f6); }
.bc-nom { flex: 1; line-height: 1.3; }
.bc-rut { flex: none; font-style: normal; font-size: .76rem; color: #7d8994;
          font-variant-numeric: tabular-nums; }
.bc-nuevo { color: #5a6b7d; font-style: italic; border-bottom: 1px solid #eef1f5;
            border-radius: 6px 6px 0 0; margin-bottom: 3px; }
.bc-nada { margin: 0; padding: 10px 12px; font-size: .8rem; color: #7d8994; }
.bc-aviso { display: flex; align-items: center; gap: 5px; margin-top: 4px;
            font-size: .72rem; color: #8a6714; font-weight: 400; }

/* ══ CAMBIO DE PLAN ═══════════════════════════════════════════════════════════
   El aviso del cambio agendado va arriba de todo y con su botón de cancelar al
   lado: es plata y es una fecha, así que no puede quedar escondido. */
.plan-agendado { display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; background: #fbf1e3; border: 1px solid #e8c99a;
    border-radius: 9px; padding: 13px 16px; margin: 0 0 16px; }
.pa-txt { display: flex; align-items: flex-start; gap: 8px; font-size: .88rem;
    color: #24303d; line-height: 1.5; }
.pa-txt svg { flex: none; margin-top: 2px; color: #a8631a; }
.plan-agendado form { margin: 0; }

/* Bajar es una SALIDA, no el camino: discreto, pero a la vista. Esconderlo obliga
   a escribir un correo, y ahí es donde un cliente que solo quería ajustar se va. */
.plan-bajar { margin: 8px 0 0; text-align: center; }
.plan-bajar-btn { background: none; border: 1px solid var(--gris-borde);
    color: #7d8994; font-weight: 500; }
.plan-bajar-btn:hover { border-color: #c9a06a; color: #a8631a; background: #fdf8f1; }
.plan-pierde { display: flex; align-items: flex-start; gap: 5px; margin-top: 6px;
    font-size: .72rem; color: #8a6714; line-height: 1.4; text-align: left; }
.plan-pierde svg { flex: none; margin-top: 1px; }

/* ══ FIN DEL REGISTRO ══════════════════════════════════════════════════════════
   Lo primero que ve al terminar NO es la lista de precios: es que ya puede
   trabajar. Un registro que termina en un cobro se siente como una trampa; uno
   que termina en «ya estás andando» deja al cliente probando. */
.rpl-listo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: #eaf3ee; border: 1px solid #c3e0cf; border-radius: 12px;
    padding: 20px 24px; margin: 0 0 22px; }
.rpl-ico { flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 13px; background: #fff; color: #2a6b4a; }
.rpl-listo > div { flex: 1 1 380px; }
.rpl-listo h2 { margin: 0 0 5px; font-size: 1.18rem; color: #23603f; }
.rpl-listo p { margin: 0; font-size: .9rem; color: #3d5a4a; line-height: 1.55; }
.rpl-listo .boton { flex: none; margin: 0; }
.rpl-pie { margin-top: 18px; text-align: center; }

/* ══ DICCIONARIO COMPARTIDO ════════════════════════════════════════════════════
   A la vista en el Catálogo, no escondido en ajustes: el cliente tiene derecho a
   saber qué se comparte ANTES de que pase. El que se entera tarde no reclama, se va. */
.dicc { display: flex; gap: 16px; align-items: flex-start;
    background: #eef6f4; border: 1px solid #b9ddd4; border-radius: 12px;
    padding: 18px 22px; margin: 0 0 18px; }
.dicc-ico { flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 12px; background: #fff; color: #0d9488; }
.dicc-txt { flex: 1; }
.dicc h3 { margin: 0 0 8px; font-size: 1rem; color: #174f4a; }
.dicc p { margin: 0 0 8px; font-size: .87rem; color: #3d5a56; line-height: 1.55; text-align: justify; }
.dicc-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.dicc-form .boton-mini { margin: 0; }
.dicc-estado { font-size: .8rem; color: #4a6b66; }
/* Apagado: el mismo bloque en gris, para que se note que está desactivado sin
   tener que leer el texto. */
.dicc-off { background: #f4f6f8; border-color: var(--gris-borde); }
.dicc-off .dicc-ico { color: #8a949e; }
.dicc-off h3 { color: #4a5a6a; }
.dicc-off p, .dicc-off .dicc-estado { color: #6b7680; }

/* ══ TÉRMINOS Y CONDICIONES ════════════════════════════════════════════════════
   El texto va en <pre> con su propio salto de línea: son términos legales y los
   párrafos tienen que verse tal cual se aceptaron, no reflowed por el navegador. */
.term-hoja { max-width: 820px; margin: 0 auto; padding: 48px 24px 80px; }
.term-hoja h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 0 0 14px; color: var(--tinta); }
.term-meta { display: flex; align-items: center; gap: 7px; font-size: .88rem; color: var(--tinta2); margin: 0 0 6px; }
.term-hash { display: flex; align-items: flex-start; gap: 7px; font-size: .74rem;
    color: var(--tenue); margin: 0 0 24px; flex-wrap: wrap; }
.term-hash code { font-size: .72rem; word-break: break-all; background: none; color: var(--tenue); padding: 0; }
/* EL DOCUMENTO. Justificado, que es como se lee un contrato — y para eso term_html()
   rearma los párrafos antes de pintarlos (ver el porqué en src/terminos.php).
   Se dejó el monospace: justificar letra de ancho fijo abre espacios enormes entre
   palabras. `hyphens` corta al final del renglón y evita los rios de blanco. */
.term-texto { font-size: .97rem; line-height: 1.72; color: var(--tinta);
    text-align: justify; text-justify: inter-word; hyphens: auto; }
.term-texto p { margin: 0 0 15px; }
.term-doc-titulo { font-weight: 700; letter-spacing: .3px; text-align: center;
    color: var(--azul); margin: 0 0 22px !important; }

/* ⚠ display:block a la fuerza: la regla de los íconos pone `h2, h3 { display:flex }`
   y un contenedor flex IGNORA text-align, así que el título quedaría descolocado. */
.term-texto .term-sec, .term-texto .term-cl { display: block; text-align: left;
    hyphens: none; color: var(--azul); }
.term-texto .term-sec { font-size: 1.12rem; margin: 34px 0 14px;
    padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.term-texto .term-cl { font-size: .96rem; letter-spacing: .2px; margin: 26px 0 9px; }
.term-texto > :first-child { margin-top: 0; }

.term-lista { margin: 0 0 15px; padding-left: 22px; }
.term-lista li { margin-bottom: 7px; }

/* El cartel de borrador tiene que verse como advertencia, no como un párrafo más:
   es lo único que separa un texto de trabajo de uno que obliga a alguien. */
.term-aviso { background: #fdf6e3; border: 1px solid #e0c98a; border-left: 4px solid #d4a72c;
    border-radius: 8px; padding: 13px 16px; margin: 0 0 22px; text-align: left; }
.term-aviso strong { display: block; color: #8a6714; font-size: .9rem; margin-bottom: 5px; }
.term-aviso p { margin: 0; font-size: .89rem; color: #6b5410; text-align: justify; }
.term-pie { margin-top: 26px; text-align: center; }
.term-vacio { color: var(--tenue); }

/* El check del registro: al lado del botón, que es lo último que se lee. */
.reg-acepto { display: flex; align-items: flex-start; gap: 11px; margin: 20px 0 6px;
    padding: 14px 16px; background: #f4f7fa; border: 1px solid var(--gris-borde);
    border-radius: 9px; font-size: .87rem; line-height: 1.55; color: #3c5064; }
.reg-acepto input { flex: none; width: 18px; height: 18px; margin-top: 2px; min-height: 0; }
.reg-acepto a { color: var(--azul); font-weight: 600; }
.reg-acepto em { font-style: normal; color: #7b8b99; }
.reg-acepto small { display: block; margin-top: 5px; font-size: .78rem; color: #6b7d8e; }

/* ═════════════════════════════════════════════════════════════════════
   PLAN CORPORATIVO — cupo de accesos por módulo
   El total se recalcula mientras se escribe: si hubiera que guardar para
   saber cuánto da, nadie probaría dos combinaciones antes de cotizar.
   ═════════════════════════════════════════════════════════════════════ */
.corp-cifras { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
.corp-cifras > * { flex: 1 1 200px; }

.tabla-corp .n, .tabla-corp-cfg .n { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-corp tfoot td { border-top: 2px solid var(--azul); padding-top: 10px; font-size: .95rem; }
.corp-uf, .corp-desc { display: block; font-style: normal; font-size: .76rem; color: var(--tenue);
    font-weight: 500; }
/* Cero = no se puede asignar a nadie más. Es lo único que hay que ver de lejos. */
.corp-cero { color: #c0392b; font-weight: 700; }
.corp-nota { display: block; font-style: normal; font-size: .74rem; color: var(--tenue); margin-top: 2px; }
.corp-sinprecio { font-size: .74rem; color: #b07d1a; }
.corp-ia { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 6px;
    border-radius: 999px; background: rgba(31,78,121,.08); color: var(--azul);
    font-size: .68rem; font-weight: 700; }
.corp-sep td { background: rgba(31,78,121,.05); font-size: .8rem; color: var(--azul); font-weight: 700; }
.corp-sep em { font-style: normal; font-weight: 500; color: var(--tinta2); }
.tabla-corp-cfg .c-on { width: 44px; text-align: center; }
.corp-acc { width: 82px; text-align: right; }
.corp-acc:disabled { opacity: .45; }

.corp-pie { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end;
    justify-content: space-between; margin-top: 16px; }
.corp-desc-caja { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.corp-obs { flex: 1 1 320px; }
.corp-obs .lf-campo { width: 100%; }

/* El total en vivo, al lado del botón: el número y la acción juntos. */
.corp-total-vivo { display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    padding: 12px 16px; border-radius: 10px; background: rgba(31,78,121,.06);
    border: 1px solid rgba(31,78,121,.16); }
.ctv-lbl { font-size: .74rem; color: var(--tinta2); text-transform: uppercase; letter-spacing: .4px; }
.corp-total-vivo strong { font-size: 1.5rem; color: var(--azul); font-variant-numeric: tabular-nums; }
.corp-total-vivo em { font-style: normal; font-size: .78rem; color: var(--tenue); }
.corp-total-vivo .boton { margin-top: 8px; }

/* El contador junto a la casilla, en la matriz de permisos: es el que evita el
   error en el momento del error, no cuando ya se guardó. */
.corp-quedan { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
    font-size: .68rem; font-weight: 700; background: rgba(31,78,121,.08); color: var(--azul); }
.corp-quedan.cq-cero { background: rgba(192,57,43,.1); color: #c0392b; }
/* El tope de cada módulo sale de Funciones básicas: sin ese número no hay máximo
   que mostrar, y conviene que se note en vez de dejar un guion mudo. */
.corp-max { color: var(--tinta2); font-weight: 700; }
.corp-max-no { color: var(--tenue); font-weight: 400; }

/* Paso 1 del plan corporativo: el número de personas va SOLO, con su propio
   guardar. Es la decisión que fija el techo de todo lo demás, así que verla
   mezclada con el reparto invita a cambiarla justo cuando no debe cambiar. */
.corp-paso1 { display: flex; flex-wrap: wrap; align-items: end; gap: 18px;
    padding: 14px 18px; margin: 0 0 8px; border-radius: 10px;
    background: rgba(31,78,121,.05); border: 1px solid rgba(31,78,121,.14); }
.corp-paso1 .lf-campo { width: 110px; text-align: right; }
.cp1-dato { display: flex; flex-direction: column; gap: 2px; }
.cp1-dato em { font-style: normal; font-size: .72rem; color: var(--tinta2);
    text-transform: uppercase; letter-spacing: .3px; }
.cp1-dato strong { font-size: .98rem; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cp1-sub strong { color: var(--azul); font-size: 1.12rem; }
.corp-paso1 .boton { margin-top: 0; margin-left: auto; }

/* Franja de accesos disponibles, arriba de Usuarios: es donde el administrador
   reparte de verdad, así que el saldo tiene que estar ahí y no en otra pantalla. */
.corp-franja { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 14px; margin: 0 0 16px; border-radius: 10px;
    background: rgba(31,78,121,.05); border: 1px solid rgba(31,78,121,.14); }
.cf-tit { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem;
    font-weight: 700; color: var(--azul); text-transform: uppercase; letter-spacing: .3px;
    margin-right: 4px; }
.cf-item { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px;
    border-radius: 999px; background: #fff; border: 1px solid var(--linea); font-size: .78rem; }
.cf-item em { font-style: normal; color: var(--tinta2); }
.cf-item strong { font-size: .95rem; color: var(--azul); font-variant-numeric: tabular-nums; }
.cf-item i { font-style: normal; font-size: .72rem; color: var(--tenue); }
/* Cero = no se puede dar a nadie más sin quitárselo a otro. Es lo único urgente. */
.cf-item.cf-cero { border-color: rgba(192,57,43,.35); background: rgba(192,57,43,.06); }
.cf-item.cf-cero strong { color: #c0392b; }
.cf-ver { margin-left: auto; font-size: .78rem; }

/* ═════════════════════════════════════════════════════════════════════
   AGENTES IA — semáforo de cupo
   Mide el RITMO, no el saldo: un 50% consumido el día 25 va bien y el
   día 5 significa que el mes no llega. Por eso el color sale de la
   proyección, no del porcentaje.
   ═════════════════════════════════════════════════════════════════════ */
.ia-cupo { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px;
    border-radius: 999px; font-size: .76rem; border: 1px solid; white-space: nowrap; }
.ia-cupo b { font-size: .92rem; font-variant-numeric: tabular-nums; }
.ia-cupo svg { align-self: center; }

.ia-cupo.ia-verde    { background: rgba(46,125,82,.08);  border-color: rgba(46,125,82,.35);  color: #2a6b4a; }
.ia-cupo.ia-amarillo { background: rgba(212,167,44,.10); border-color: rgba(212,167,44,.45); color: #8a6714; }
.ia-cupo.ia-rojo     { background: rgba(192,57,43,.09);  border-color: rgba(192,57,43,.40);  color: #c0392b; }
.ia-cupo.ia-agotado  { background: rgba(192,57,43,.14);  border-color: #c0392b; color: #a03024; font-weight: 700; }

/* El panel largo: barra + proyección. Va donde se decide ampliar el plan. */
.ia-panel { border: 1px solid var(--linea); border-left-width: 4px; border-radius: 10px;
    padding: 11px 14px; margin: 0 0 10px; background: #fff; }
.ia-panel.ia-verde    { border-left-color: #2a6b4a; }
.ia-panel.ia-amarillo { border-left-color: #d4a72c; }
.ia-panel.ia-rojo     { border-left-color: #c0392b; }
.ia-panel.ia-agotado  { border-left-color: #a03024; background: rgba(192,57,43,.04); }
.iap-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.iap-cab strong { font-size: .92rem; color: var(--tinta); }
.iap-est { font-size: .78rem; font-weight: 700; }
.ia-verde  .iap-est { color: #2a6b4a; }
.ia-amarillo .iap-est { color: #8a6714; }
.ia-rojo   .iap-est, .ia-agotado .iap-est { color: #c0392b; }
/* La barra: el ancho es lo CONSUMIDO, así que llenarse es la mala noticia. */
.iap-barra { height: 6px; border-radius: 3px; background: #eef2f7; margin: 8px 0 7px; overflow: hidden; }
.iap-barra i { display: block; height: 100%; border-radius: 3px; }
.ia-verde .iap-barra i    { background: #2e7d52; }
.ia-amarillo .iap-barra i { background: #d4a72c; }
.ia-rojo .iap-barra i, .ia-agotado .iap-barra i { background: #c0392b; }
.iap-pie { font-size: .78rem; color: var(--tinta2); line-height: 1.45; }

/* «Sujeto a cupo mensual» va JUNTO AL PRECIO, no en la letra chica del pie. */
.ia-sujeto { display: block; margin-top: 5px; font-size: .74rem; color: var(--tenue); }

/* Interruptor de precios: se muestra el producto sin comprometer montos que
   todavía no están medidos. Va arriba y con casilla, no con campo numérico —
   un sí/no visto como «0» o «1» no se entiende. */
.cp-interruptor { border: 1px solid var(--linea); border-radius: 10px; padding: 13px 16px;
    margin: 0 0 18px; background: #fff; }
.cp-interruptor.cpi-on { border-color: rgba(212,167,44,.55); background: #fdf9ee; }
.cp-interruptor > label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.cpi-txt { display: flex; flex-direction: column; gap: 3px; }
.cpi-txt strong { font-size: .95rem; color: var(--tinta); }
.cpi-txt em { font-style: normal; font-size: .8rem; color: var(--tinta2); line-height: 1.45; }
.cpi-aviso { display: flex; align-items: flex-start; gap: 7px; margin: 10px 0 0;
    font-size: .8rem; color: #8a6714; }
/* El aviso en las pantallas del cliente cuando los precios están apagados. */
.precio-off { display: block; font-size: .78rem; color: var(--tenue); margin-top: 4px; }
.pp-conf { font-size: 1.05rem; color: var(--tinta2); }

/* ── Panel de agentes IA (public/agentes.php) ───────────────────────────
   Los seis semáforos en rejilla: con seis agentes, una columna obligaría a
   bajar para encontrar el que está en rojo. `ia_ritmo_todos()` ya los ordena
   por urgencia, así que lo rojo cae siempre en la primera fila. */
.ia-panels { display: grid; gap: 12px; margin: 14px 0 6px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ia-panels .ia-panel { margin: 0; }

/* La tabla del equipo: seis columnas de badges, una por agente. */
.tabla-ia th.n, .tabla-ia td.n { text-align: center; white-space: nowrap; }
.tabla-ia td.n { padding-top: 6px; padding-bottom: 6px; }
.tabla-ia th { font-size: .74rem; }
.ia-sin { font-size: .74rem; color: var(--tenue); font-style: normal; margin-left: 6px; }
.ia-yo { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 9px;
    background: rgba(31,78,121,.10); color: var(--azul); font-size: .7rem; font-weight: 700; }
.ia-guion { color: var(--tenue); }
.ia-que { font-size: .82rem; color: var(--tinta2); line-height: 1.45; }
.tabla-ia-cupos td.n em { font-style: normal; font-size: .78rem; color: var(--tenue); margin-left: 4px; }

/* El eco en plata de los márgenes: un porcentaje suelto no dice nada. */
.cp-eco-plata { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0;
    padding: 10px 12px; border-radius: 8px; background: #f4f9f9;
    border: 1px solid rgba(18,112,127,.18); font-size: .84rem; color: var(--tinta2); line-height: 1.55; }
.cp-eco-plata svg { flex: none; margin-top: 2px; color: #12707f; }
.cp-eco-plata strong { color: var(--azul); }

/* Pantalla de promociones (súper-admin). */
.promo-reglas { display: grid; gap: 10px; margin: 14px 0 18px; }
.promo-reglas p { display: flex; align-items: flex-start; gap: 9px; margin: 0;
    padding: 10px 13px; border-radius: 9px; background: #f7f9fb;
    border: 1px solid var(--linea); font-size: .86rem; line-height: 1.55; color: var(--tinta2); }
.promo-reglas svg { flex: none; margin-top: 2px; color: var(--azul); }
.promo-vig { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px;
    padding: 11px 15px; border-radius: 10px; background: #fdecef; border: 1px solid #e3b6bc;
    font-size: .88rem; color: #8d2731; }
.promo-chip { flex: none; padding: 3px 11px; border-radius: 20px; background: #c0392b;
    color: #fff; font-size: .76rem; font-weight: 800; }
.promo-grid { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.promo-c2 { grid-column: span 2; }
.promo-fs { margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 10px; }
.promo-fs legend { padding: 0 6px; font-size: .8rem; font-weight: 700; color: var(--tinta2); }
.promo-fs legend em { font-style: normal; font-weight: 400; color: var(--tenue); }
.promo-chks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 8px; }
.promo-chk { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--tinta2); }
.promo-et { font-size: .74rem; color: var(--tenue); margin-top: 2px; }
.promo-aplica { font-size: .8rem; color: var(--tinta2); }
.promo-est { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .74rem; font-weight: 700; }
.promo-vigente { background: rgba(46,125,82,.10); color: #2a6b4a; }
.promo-futura { background: rgba(31,78,121,.09); color: var(--azul); }
.promo-terminada, .promo-cortada { background: #eef2f7; color: var(--tenue); }
.promo-ej s { display: block; font-size: .76rem; color: var(--tenue); }
.promo-ej b { display: block; font-size: .92rem; color: #c0392b; }
.promo-ej span { display: block; font-size: .7rem; color: var(--tenue); }

/* La lista de precios por agente, dentro de «Arma tu plan». */
.tabla-ia-sueltos th.n, .tabla-ia-sueltos td.n { text-align: right; white-space: nowrap; }
.tabla-ia-sueltos td b { display: block; font-size: .92rem; color: #0f3f4a;
    font-variant-numeric: tabular-nums; }
.tabla-ia-sueltos td span { font-size: .74rem; color: var(--tenue); }

/* Corporativo: el nivel de cada agente (uno solo por agente; la cantidad va aparte). */
.corp-niv { max-width: 220px; font-size: .82rem; }
.corp-cupo { display: block; margin-top: 3px; font-size: .72rem; font-style: normal; color: var(--tenue); }

/* ── CONTRATOS Y PAGOS ──────────────────────────────────────────────────── */
.ctr-grid { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ctr-c2 { grid-column: span 2; }
.ctr-det { font-size: .8rem; color: var(--tenue); font-style: normal; display: block; }
.ctr-sin { color: var(--tenue); font-size: .8rem; }
.ctr-falta { display: block; font-size: .72rem; color: #c0392b; font-style: normal; }
.ctr-est { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: .74rem; font-weight: 700; }
.ctr-vigente  { background: rgba(46,125,82,.10); color: #2a6b4a; }
.ctr-borrador { background: rgba(212,167,44,.12); color: #8a6714; }
.ctr-vencido  { background: #eef2f7; color: var(--tenue); }
.ctr-anulado  { background: rgba(192,57,43,.09); color: #c0392b; }
/* Los totales: etiqueta a la izquierda y monto a la derecha, tabulados. */
.ctr-totales { max-width: 470px; margin: 16px 0 0; }
.ctr-totales p { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    margin: 0; padding: 6px 0; border-bottom: 1px solid #eef2f4; font-size: .88rem; color: var(--tinta2); }
.ctr-totales b { font-variant-numeric: tabular-nums; color: var(--tinta); }
.ctr-totales em { font-size: .74rem; color: var(--tenue); font-style: normal; }
.ctr-totales s { color: var(--tenue); }
.ctr-desc { color: #2a6b4a; }
.ctr-uf b { color: var(--tenue); font-weight: 600; }
.ctr-total { border-bottom: 0; border-top: 2px solid var(--azul); margin-top: 4px; padding-top: 9px; }
.ctr-total b { font-size: 1.18rem; color: var(--azul); }
.ctr-carrito { margin: 20px 0 0; padding: 18px 20px; border: 1px solid var(--linea);
    border-radius: 14px; background: #fbfdfd; }
.ctr-anular { display: flex; align-items: center; gap: 9px; margin-top: 22px; padding-top: 16px;
    border-top: 1px solid var(--linea); }
.ctr-anular input { max-width: 330px; }
.ctr-nota { margin-top: 14px; padding: 10px 13px; border-radius: 8px; background: #f7f9fb;
    font-size: .84rem; color: var(--tinta2); }
.ctr-suma td { border-top: 2px solid var(--linea); font-weight: 700; color: var(--tinta); }

/* ── INFO COMERCIAL ─────────────────────────────────────────────────────── */
.com-rut, .com-n { display: block; font-size: .72rem; color: var(--tenue); font-style: normal; }
.com-sin { color: var(--tenue); font-size: .82rem; }
.com-venc { display: block; font-size: .7rem; color: #c0392b; font-style: normal; font-weight: 700; }
.com-falta { color: #c0392b; }
.com-resta { font-style: normal; font-size: .7rem; color: #c0392b; }
.com-ia { display: inline-flex; align-items: center; gap: 3px; margin-left: 5px; padding: 1px 6px;
    border-radius: 10px; background: rgba(18,112,127,.10); color: #0f3f4a;
    font-size: .68rem; font-weight: 700; font-style: normal; }
.com-subir { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.com-previa { margin: 12px 0 0; padding: 16px 18px; border: 1px solid var(--linea);
    border-radius: 12px; background: #fbfdfd; }
.com-previa-res { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px;
    font-size: .88rem; color: var(--tinta2); line-height: 1.5; }
.com-previa-res svg { flex: none; margin-top: 2px; color: #2e7d52; }
.com-acciones { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.com-filtros { display: flex; align-items: center; gap: 9px; margin: 10px 0 12px; }
.com-asig { max-width: 190px; font-size: .78rem; }
.com-ojo { display: block; font-size: .72rem; color: #8a6714; font-style: normal; line-height: 1.35; }
/* Los títulos de cada fila de tarjetas: separan sin gritar. */
.com-fila-tit { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 8px;
    font-size: .96rem; color: var(--azul); }
.com-fila-tit svg { align-self: center; }
.com-fila-tit em { font-style: normal; font-size: .78rem; font-weight: 400; color: var(--tenue); }

/* Cada fila con su color, para no tener que leer el titulo para saber en cual estas.
   ⚠️ Va en el FILETE IZQUIERDO DE CADA TARJETA y no como fondo de la fila: las
   tarjetas traen su propio fondo y lo taparian. Y los nombres llevan `comrow-`
   porque `.com-total` ya existe en Gestion de Compra (otra cosa, otro color). */
.com-fila { margin: 0 0 4px; }
.com-fila .dash-card { border-left-width: 4px; }

.comrow-nuevos .com-fila-tit, .comrow-nuevos .com-fila-tit svg { color: #0f3f4a; }
.comrow-nuevos .dash-card { border-left-color: #12707f; background: rgba(18,112,127,.06); }

.comrow-renov .com-fila-tit, .comrow-renov .com-fila-tit svg { color: var(--azul); }
.comrow-renov .dash-card { border-left-color: var(--azul); background: rgba(31,78,121,.06); }

.comrow-total .com-fila-tit, .comrow-total .com-fila-tit svg { color: #3d4650; }
.comrow-total .dash-card { border-left-color: #5a6470; background: rgba(90,100,112,.07); }

/* ── VER UN DTE COMO DOCUMENTO ──────────────────────────────────────────── */
.dte { margin: 14px 0 0; padding: 22px 26px; border: 1px solid var(--linea);
    border-radius: 14px; background: #fff; }
.dte-cab { display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--linea); }
.dte-emisor { display: flex; flex-direction: column; gap: 2px; font-size: .82rem; color: var(--tinta2); }
.dte-emisor strong { font-size: 1rem; color: var(--azul); }
/* El recuadro rojo del folio, como en el documento real: es lo primero que se busca. */
.dte-folio { flex: none; min-width: 210px; padding: 12px 16px; text-align: center;
    border: 2px solid #c0392b; border-radius: 8px; color: #c0392b; }
.dte-tipo { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; }
.dte-folio strong { display: block; margin: 4px 0 2px; font-size: 1.3rem; }
.dte-rutemi { display: block; font-size: .76rem; }
.dte-partes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    padding: 16px 0; border-bottom: 1px solid var(--linea); }
.dte-partes > div { display: flex; flex-direction: column; gap: 2px;
    font-size: .82rem; color: var(--tinta2); }
.dte-partes strong { font-size: .92rem; color: var(--tinta); }
.dte-et { font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--tenue); margin-bottom: 3px; }
.dte-tabla { width: 100%; border-collapse: collapse; margin: 16px 0 0; }
.dte-tabla th { padding: 8px 10px; font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: var(--tenue); border-bottom: 1px solid var(--linea); text-align: left; }
.dte-tabla th.n, .dte-tabla td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dte-tabla td { padding: 9px 10px; font-size: .86rem; color: var(--tinta2);
    border-bottom: 1px solid #eef2f4; vertical-align: top; }
.dte-tabla td em { font-style: normal; font-size: .74rem; color: var(--tenue); }
.dte-glosa, .dte-cod { display: block; }
.dte-pie { display: flex; align-items: flex-start; justify-content: space-between;
    gap: 26px; flex-wrap: wrap; margin-top: 18px; }
.dte-refs { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; color: var(--tinta2); }
.dte-refs em { display: block; font-style: normal; font-size: .74rem; color: var(--tenue); }
.dte-tot { flex: none; min-width: 300px; margin: 0; }

/* Los módulos sueltos del armador de contratos, tabulados. */
.ctr-sub { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 8px;
    font-size: .96rem; color: var(--azul); }
.ctr-sub svg { align-self: center; }
.ctr-sub em { font-style: normal; font-size: .78rem; font-weight: 400; color: var(--tenue); }
.tabla-mods td { vertical-align: middle; }
.tabla-mods .c-on { width: 44px; text-align: center; }
.tabla-mods label { cursor: pointer; }
.mod-sec { font-size: .78rem; color: var(--tenue); }
.mod-nota { display: block; font-style: normal; font-size: .72rem; color: var(--tenue); }
/* Lo que el plan ya trae: se ve, pero no se puede marcar ni se cobra. */
.mod-incluido td { background: #f4f9f9; color: var(--tenue); }
.mod-tick { display: inline-flex; color: #2e7d52; }
.mod-tick-txt { font-size: .76rem; color: #2a6b4a; font-weight: 700; }
/* El informe congelado, cuando se abre uno guardado. */
.com-informe { margin: 16px 0 0; padding: 16px 18px; border: 1px solid var(--linea);
    border-radius: 12px; background: #fbfdfd; }
.com-informe h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px;
    font-size: .96rem; color: var(--azul); }
.com-informe h3 svg { align-self: center; }
.com-informe h3 em { font-style: normal; font-size: .78rem; font-weight: 400; color: var(--tenue); }

/* --- EL INTERRUPTOR DE MODO (super-admin <-> administrador de empresa) -------
   Va dentro del panel oscuro, asi que sus colores son los del panel. El estado
   ACTUAL se dice en texto y el boton ofrece siempre el contrario: si el boton
   dijera donde estas, no se sabria a donde lleva. */
.modo-sw { display: flex; flex-direction: column; gap: 5px; margin: 0 14px 4px;
    padding: 9px 11px; border-radius: 9px; background: rgba(255,255,255,.06); }
.modo-actual { font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: #9fc4e4; }
.modo-sw button { display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; width: 100%; padding: 6px 8px; border: 1px solid rgba(255,255,255,.22);
    border-radius: 7px; background: transparent; color: #fff; font-size: .74rem;
    font-weight: 600; cursor: pointer; line-height: 1.2; }
.modo-sw button:hover { background: rgba(255,255,255,.14); }
/* En modo empresa el recuadro se enciende: es un estado del que hay que poder salir,
   y que pase inadvertido es justo lo que no debe ocurrir. */
.modo-en { background: rgba(217,153,20,.20); border: 1px solid rgba(240,190,80,.45); }
.modo-en .modo-actual { color: #f6d68a; }

/* Super-administradores */
.sa-edit { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
    margin: 4px 0 10px; }
.sa-nuevo { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }

/* --- ELEGIR EN QUE EMPRESA TRABAJAR (al bajar de rol) -----------------------
   Se elige por el LOGO y no por una lista de texto: quien trabaja en varias
   empresas las reconoce por su marca mucho antes que por su razon social. */
.modo-elige { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px;
    margin: 4px 0 22px; }
/* Las tarjetas van del MISMO alto aunque un nombre ocupe dos lineas: si no, quedan
   escalonadas y se leen como un error de armado. */
.modo-elige form { display: flex; }
.modo-elige form { margin: 0; }
.modo-emp { display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 10px; min-height: 148px;
    width: 190px; padding: 16px 14px; border: 1px solid var(--linea); border-radius: 12px;
    background: #fff; cursor: pointer; text-align: center; }
.modo-emp:hover { border-color: var(--azul); box-shadow: 0 2px 10px rgba(31,78,121,.12); }
.modo-emp-logo { display: flex; align-items: center; justify-content: center;
    width: 100%; height: 62px; }
.modo-emp-logo img { max-width: 100%; max-height: 62px; object-fit: contain; }
/* Sin logo cargado, las iniciales: sigue habiendo algo que reconocer de un vistazo. */
.modo-emp-ini { display: flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 50%; background: var(--azul);
    color: #fff; font-weight: 700; font-size: 1.1rem; }
.modo-emp-nom { font-size: .84rem; font-weight: 600; color: var(--tinta); line-height: 1.3; }
.modo-emp-sop { font-size: .7rem; color: var(--tenue); }

/* Con tres roles el interruptor lleva dos botones: se apilan y comparten ancho. */
.modo-sw form { margin: 0; }

/* Los datos de la empresa que opera la plataforma. Tres columnas: los campos largos
   (razon social, giro, direccion) ocupan dos y los cortos una, asi cada uno tiene el
   ancho que pide. OJO: `.lf-campo` trae ancho FIJO, y dentro de una rejilla eso deja
   el campo flotando en una celda ancha -hay que soltarlo y estirar el input. */
.sa-emp { display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr));
    align-items: end; gap: 12px 16px; margin: 4px 0 22px; }
.sa-emp .lf-campo { width: auto; }
.sa-emp .lf-campo input { width: 100%; }
.sa-emp .sa-ancho { grid-column: span 2; }
.sa-emp .lf-campo em { font-style: normal; font-weight: 400; text-transform: none;
    color: var(--tenue); }
.sa-emp button { grid-column: 1 / -1; justify-self: end; }
@media (max-width: 900px) {
    .sa-emp { grid-template-columns: 1fr; }
    .sa-emp .sa-ancho { grid-column: span 1; } }

/* El boton VER vive en la celda del folio, bajo los adjuntos: se mira el numero y se
   abre el contenido, sin cruzar la tabla. Va separado de lo de arriba y a la izquierda,
   alineado con el folio.
   COLOR: verde petroleo SUAVE -el de la marca en la portada- y no relleno. Es una
   accion secundaria que se repite en CADA fila: 25 botones solidos por pantalla
   gritarian mas que Asignar y Descartar, que si son las acciones del negocio.
   Se escribe con `.boton-mini.ver-det` para ganarle a `.boton-secundario`.
   OJO CON LA ESPECIFICIDAD: `.tabla td .boton-mini.boton-secundario` (0,3,2) le gana a
   `.boton-mini.ver-det` (0,2,0), asi que el color no aplicaba. Hay que nombrar las tres
   clases dentro de la tabla. Es la tercera vez en el dia que muerde lo mismo. */
.tabla td .boton-mini.boton-secundario.ver-det, .boton.ver-det {
    display:inline-flex; margin:6px 0 0;
    background:rgba(18,112,127,.09); border:1px solid #a8ccd3; color:#0f3f4a;
    font-weight:600; }
.tabla td .boton-mini.boton-secundario.ver-det:hover, .boton.ver-det:hover {
    background:#12707f; border-color:#12707f; color:#fff; }

/* CIERRE + OFERTAS EN LA MISMA CELDA (2026-08-26). Se leen de corrido: faltan tantos
   minutos y lleva tantas ofertas. La usuaria pidio ademas achicar los dos -«muy grandes
   molestan»-: son un dato de un vistazo, no un titular. */
.col-cierre .tramo-badge { font-size:.70rem; padding:2px 7px; }
.cierre-of { margin-top:5px; }
.cierre-of .comp { font-size:.70rem; padding:1px 6px; }
.cierre-of .comp-n { font-size:.74rem; }
.cierre-of .comp-sube { font-size:.62rem; }
/* En la cabecera, `ofertas` va en minuscula y chico: la palabra que manda es Cierre. */
.th-of { display:inline-block; margin-left:6px; font-size:.66rem; text-transform:lowercase; }

/* VERDE PETROLEO EN LOS BOTONES DE OPORTUNIDADES (2026-08-26). Pedido de la usuaria:
   «asi conectan con los colores de la pagina principal». Es el mismo #0f3f4a de la
   portada y de la seccion de agentes, con letra blanca.
   Se deja UNA jerarquia dentro de la familia: Asignar -la accion del negocio- va en el
   tono oscuro, y los tres de Excel -una utilidad- en el tono medio. Cuatro botones del
   mismo color pegados se leen como un muro y ninguno destaca.
   OJO: hay que escribirlo despues de `.boton-excel` de la linea 2481, que le gana por
   orden; por eso este bloque va al final del archivo. */
.boton-tomar { background:#0f3f4a; color:#fff; }
.boton-tomar:hover { background:#0a2f38; }
.boton-excel { background:#12707f; color:#fff; }
.boton-excel:hover { background:#0f3f4a; }

/* VER y OFERTAS, ALINEADOS (2026-08-26). Son los dos ultimos elementos de celdas
   vecinas, pero lo que llevan encima mide distinto -folio + iconos contra la cuenta
   regresiva-, asi que quedaban a distinta altura. Se resuelve empujando AMBOS al pie
   de su celda: el contenido de arriba se queda arriba y estos dos caen a la misma
   linea. El `height:1px` del td es el truco de siempre para que el 100% del hijo
   resuelva contra el alto REAL de la fila. */
.tabla td.col-id, .tabla td.col-cierre { vertical-align: top; height: 1px; }
.tabla td.col-id > *:last-child, .tabla td.col-cierre > *:last-child { margin-bottom: 0; }
.cel-col { display: flex; flex-direction: column; height: 100%; }
.cel-col > .ver-det, .cel-col > .cierre-of { margin-top: auto; }
/* ⚠ Y HAY QUE NOMBRARLO COMPLETO (2026-08-27). La regla de arriba NO se aplicaba al
   boton Ver: mas abajo hay un `.tabla td .boton-mini.boton-secundario.ver-det` que le
   fija `margin: 6px 0 0`, y con cinco clases le gana al `margin-top: auto`. Resultado
   medido en el navegador: el boton quedaba 15 px MAS ARRIBA que el recuadro de ofertas,
   aunque los dos midieran 34 px de alto. Se repite el selector largo para empatarle. */
.tabla td .cel-col > .boton-mini.boton-secundario.ver-det,
.tabla td .cel-col > .cierre-of { margin-top: auto; }
/* Del mismo alto, para que no solo coincidan por abajo sino que se vean parejos. */
.cierre-of { display: flex; align-items: center; min-height: 34px; }
/* 34 px es el alto REAL del boton Ver (padding + borde incluidos), medido: con eso
   los dos recuadros calzan arriba y abajo, no solo por el pie. */
.tabla td .boton-mini.boton-secundario.ver-det { min-height: 28px; }

/* FECHA DE CIERRE en dos lineas y columna angosta (2026-08-26). El dato ya se muestra
   en dos -fecha arriba, hora abajo-, asi que el ancho lo estaba fijando el titulo. */
.col-fecha-th { white-space: normal; line-height: 1.25; }
.tabla th.col-fecha-th, .tabla td.col-fecha { width: 98px; }

/* TRABAJO: sin titulo y con la N en circulo (2026-08-26). */
/* Texto que se lee con lector de pantalla pero no ocupa lugar: la cabecera pierde la
   palabra a la vista, no para quien navega a ciegas. */
.vis-oculto { position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; }
.trab-n { display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; border-radius:50%; background:#0f3f4a; color:#fff;
    font-size:.76rem; font-weight:700; letter-spacing:0; }

/* ══ MENU CONTRAIBLE + BUSCADOR (2026-08-26) ══════════════════════════════════
   Con 80 items la barra se comia 240 px que la tabla de Oportunidades necesita.
   Contraida deja 64. La clave para que se USE es que al pasar el mouse se ASOME
   SOBRE el contenido en vez de empujarlo: el truco es dejarla en 240 y compensar
   con un margen negativo, asi su espacio en la fila sigue siendo 64 y la tabla no
   se mueve. Sin eso, uno se cansa de abrir y cerrar y la deja abierta para siempre. */
.sidebar { transition: width .12s ease; }
.sb-toggle { display:flex; align-items:center; gap:8px; width:100%; margin:0 0 12px;
    padding:7px 9px; border:1px solid rgba(255,255,255,.20); border-radius:8px;
    background:transparent; color:#cfe0f0; font-size:.74rem; font-weight:600;
    cursor:pointer; font-family:inherit; }
.sb-toggle:hover { background:rgba(255,255,255,.12); color:#fff; }
/* La flecha se dibuja con CSS: dos rayas en angulo, que se dan vuelta al contraer. */
.sb-ico { width:14px; height:14px; flex:none; position:relative; }
.sb-ico::before, .sb-ico::after { content:''; position:absolute; left:4px; width:7px;
    height:2px; background:currentColor; border-radius:1px; }
.sb-ico::before { top:4px; transform:rotate(-45deg); transform-origin:left center; }
.sb-ico::after  { top:8px; transform:rotate(45deg);  transform-origin:left center; }
.sb-min .sb-ico::before { transform:rotate(45deg); }
.sb-min .sb-ico::after  { transform:rotate(-45deg); }

.sb-buscar { position:relative; margin:0 0 10px; }
.sb-buscar input { width:100%; box-sizing:border-box; padding:7px 10px; border-radius:8px;
    border:1px solid rgba(255,255,255,.20); background:rgba(255,255,255,.08);
    color:#fff; font-size:.8rem; font-family:inherit; }
.sb-buscar input::placeholder { color:#9fc0dd; }
.sb-buscar input:focus { outline:none; border-color:#7fb3dd; background:rgba(255,255,255,.14); }
/* OJO: este `display:block` le gana al atributo `hidden`, asi que el aviso se apaga
   con la clase `.sb-off` y no con el atributo -que no hacia nada-. */
.sb-nada { display:block; margin-top:6px; font-size:.72rem; color:#f6d68a; }
/* Buscando, los grupos se abren solos: lo que calza no puede quedar escondido. */
.menu.buscando .menu-subs { display:block !important; }
.menu .sb-off, .sb-nada.sb-off { display:none !important; }

/* ── Contraida ─────────────────────────────────────────────────────────────── */
.sb-min .sidebar { width:64px; padding-left:8px; padding-right:8px; }
.sb-min .sidebar:not(:hover) .logo-empresa,
.sb-min .sidebar:not(:hover) .usuario-box,
.sb-min .sidebar:not(:hover) .modo-sw,
.sb-min .sidebar:not(:hover) .empresa-sel,
.sb-min .sidebar:not(:hover) .sb-buscar,
.sb-min .sidebar:not(:hover) .menu-seccion,
.sb-min .sidebar:not(:hover) .menu-titulo,
.sb-min .sidebar:not(:hover) .menu-flecha,
.sb-min .sidebar:not(:hover) .menu-subs,
.sb-min .sidebar:not(:hover) .marca-texto,
.sb-min .sidebar:not(:hover) .sb-txt { display:none !important; }
/* El texto del item se apaga con font-size 0 y el icono conserva su tamano. */
.sb-min .sidebar:not(:hover) .menu-item,
.sb-min .sidebar:not(:hover) .salir { font-size:0 !important; justify-content:center;
    padding-left:0; padding-right:0; gap:0; }
.sb-min .sidebar:not(:hover) .menu-ico { width:20px; height:20px; }
.sb-min .sidebar:not(:hover) .marca { justify-content:center; }
.sb-min .sidebar:not(:hover) .sb-toggle { justify-content:center; padding:7px 0; }
/* La insignia de avisos no se pierde al contraer: es lo unico que pide atencion. */
.sb-min .sidebar:not(:hover) .badge-alerta { font-size:.6rem !important; padding:0 4px; }

/* ── Asomarse ──────────────────────────────────────────────────────────────── */
.sb-min .sidebar:hover { width:240px; margin-right:-176px; position:relative; z-index:60;
    padding-left:16px; padding-right:16px; box-shadow:6px 0 22px rgba(0,0,0,.22); }

/* EL TIEMPO AL CIERRE, CENTRADO (2026-08-26). La celda es una columna flex y por
   defecto estira a sus hijos: la pastilla se iba a los 146 px de ancho de la columna
   con el texto pegado a la izquierda, en vez de ajustarse a lo que dice. Con
   `align-items:center` cada uno mide lo suyo y queda centrado -tanto la pastilla de
   color como los tramos que van en texto pelado-. */
.col-cierre .cel-col { align-items: center; }
.col-cierre .tramo-badge { text-align: center; }

/* LA ESCALA DEL TIEMPO AL CIERRE (2026-08-26, definida con la usuaria).
   Todos van en recuadro redondeado -eso lo pidio ella-, pero el color no se reparte
   parejo: se agrupan en TRES familias, que es lo que de verdad se decide al mirar.
     URGENTE  (<= 6 h)  relleno fuerte: rojo oscuro, rojo claro, naranjo.
     ATENCION (12-24 h) tinte ambar, letra oscura.
     CON TIEMPO (36 h en adelante) el MISMO verde petroleo suave del boton Ver.
   No se vuelve a los doce colores rellenos que se ordenaron en agosto: la FORMA es
   igual para todos y lo que cambia es cuanto PESA el color. */
.tabla .tramo-badge {
    padding: 2px 8px !important; border-radius: 10px !important; font-weight: 600;
    background: rgba(18,112,127,.09) !important; border: 1px solid #a8ccd3;
    color: #0f3f4a !important; }

/* --- Urgente: los unicos que gritan --- */
.tabla .tramo-badge.tramo-t1,
.tabla .tramo-badge.tramo-t3,
.tabla .tramo-badge.tramo-t6 { color: #fff !important; border-color: transparent; }
/* UN SOLO ROJO, DEGRADADO del mas oscuro al mas claro (2026-08-26). Antes el tercero
   era naranjo y se leia como otra cosa; con la misma tonalidad el ojo entiende que es
   la MISMA alarma bajando de intensidad, y ordenar por cierre se ve como un degrade.
   Es el mismo tono (352 grados) bajando saturacion y subiendo luminosidad. */
.tabla .tramo-badge.tramo-t1 { background: #75101f !important; }
.tabla .tramo-badge.tramo-t3 { background: #9d182b !important; }
.tabla .tramo-badge.tramo-t6 { background: #c33044 !important; }

/* SIN FAMILIA INTERMEDIA (correccion de la usuaria, 2026-08-26): el ambar de las 12 y
   24 h lo habia agregado yo por mi cuenta, ella nunca lo pidio. Solo hay DOS estados:
   urgente -los rojos- y con tiempo -el petroleo claro del boton Ver-. Dos estados se
   leen sin pensar; tres obligan a recordar que significa el del medio. */

/* --- Vencida: neutra, ya no hay nada que hacer --- */
.tabla .tramo-badge.tramo-vencida { background: #f4f5f7 !important; border-color: #e3e6ea;
    color: #97a1ad !important; }

/* LOS BOTONES DE TIEMPO, EN LOS MISMOS COLORES DE LA COLUMNA (2026-08-26).
   Se puede filtrar por la columna o por esta barra, asi que tienen que hablar el mismo
   idioma: si el rojo de la barra no es el rojo de la columna, hay que traducir cada vez.
   Mismas tres familias: rojos degradados / ambar / verde petroleo.
   BUG que arregla de paso: `.btn-tiempo.on` pintaba la letra de BLANCO para todos, y
   como Full horario no tiene color de tramo quedaba blanco sobre gris claro: invisible.
   Ahora cada estado activo declara su fondo Y su letra, ninguno hereda a medias. */
.btn-tiempo.on { color: #fff; }
/* Full horario en verde petroleo oscuro: es el que dice ver TODO, no un tramo. */
a.btn-tiempo.on:not([class*='tramo-']) { background: #0f3f4a; color: #fff;
    border-color: #0f3f4a; }

/* Urgente: el mismo rojo degradado de la columna. */
.tramo-t1.on  { background: #75101f !important; border-color: #75101f; color: #fff; }
.tramo-t3.on  { background: #9d182b !important; border-color: #9d182b; color: #fff; }
.tramo-t6.on  { background: #c33044 !important; border-color: #c33044; color: #fff; }
/* Todo lo que NO es urgente comparte UN color: el MISMO petroleo claro del recuadro
   de la columna y del boton Ver. Que se vea pulsado lo resuelve el filete interior de
   `.btn-tiempo.on`, no un color distinto. */
.tramo-t12.on, .tramo-t24.on, .tramo-t36.on, .tramo-t48.on, .tramo-t60.on,
.tramo-t72.on, .tramo-t96.on, .tramo-mas.on {
    background: rgba(18,112,127,.16) !important; border-color: #8fbecb;
    color: #0f3f4a !important; }
.tramo-vencida.on { background: #94a3b8 !important; border-color: #94a3b8; color: #fff; }

/* TODAS LAS ETIQUETAS DEL MISMO ANCHO (2026-08-26). Medido, iban de 53 px -«7 d 0 h»-
   a 78 -«23 h 45 min»-, y una columna de pastillas de distinto largo se lee como si
   estuvieran desordenadas. Con un ancho minimo comun quedan alineadas de arriba abajo
   y el texto centrado dentro; 82 px cubre la cadena mas larga que puede salir. */
.col-cierre .tramo-badge { min-width: 82px; box-sizing: border-box; }
/* El numero de ofertas, igual: esta en la misma columna y justo debajo. */
/* EL RECUADRO DE OFERTAS, SIEMPRE DEL MISMO PORTE (2026-08-26). Medido, el ancho ya
   era parejo pero el alto iba de 17 px -solo el numero- a 29 -numero mas la flecha del
   alza-, asi que la columna se veia escalonada. Se fija en 34, que es el alto exacto
   del boton Ver de la celda de al lado: los tres quedan alineados y la fila se lee
   como un bloque y no como tres piezas sueltas. Fuente y colores no se tocan. */
.cierre-of .comp { min-width: 44px; min-height: 34px; justify-content: center;
    box-sizing: border-box; }
/* El contenedor deja de imponer su propio alto: manda el de la etiqueta. */
.cierre-of { min-height: 34px; }

/* LOS BOTONES DE TIEMPO LLEVAN SU COLOR SIEMPRE (2026-08-26, pedido de la usuaria):
   «si una cierra en 29 minutos y en la columna sale roja, el boton que la incluye
   tambien deberia estar rojo». Tiene razon: si el color solo aparecia al pulsar, no
   habia forma de relacionar la barra con la columna sin probar.
   UNA SOLA REGLA, sin excepciones: APAGADO = tinte de su color · ENCENDIDO = solido.
   Asi se ve a que familia pertenece cada boton sin que la barra grite, y lo pulsado
   se distingue de un vistazo. Son dos familias, no doce: no hay riesgo de arcoiris. */
.btn-tiempo.tramo-t1  { background:#fbeef0; border-color:#d9a3ac; color:#75101f; }
.btn-tiempo.tramo-t3  { background:#fcf0f2; border-color:#e0aab3; color:#9d182b; }
.btn-tiempo.tramo-t6  { background:#fdf3f4; border-color:#e8bcc3; color:#c33044; }
.btn-tiempo.tramo-t12, .btn-tiempo.tramo-t24, .btn-tiempo.tramo-t36,
.btn-tiempo.tramo-t48, .btn-tiempo.tramo-t60, .btn-tiempo.tramo-t72,
.btn-tiempo.tramo-t96, .btn-tiempo.tramo-mas {
    background:rgba(18,112,127,.09); border-color:#a8ccd3; color:#0f3f4a; }
.btn-tiempo.tramo-vencida { background:#f1f3f5; border-color:#d3d8de; color:#6b7683; }

/* ENCENDIDO SIN CAMBIAR DE TONO (correccion de la usuaria, 2026-08-26: «estos deberian
   ser todos en el mismo tono, no entiendo que hace el verde oscuro ahi»). Tenia razon:
   al pulsar, el boton se iba a un relleno solido y parecia de otra familia. Ahora el
   color NO se mueve; lo que marca que esta pulsado es un filete grueso del mismo color
   y la letra en negrita. El tono sigue diciendo a que tramo pertenece, y el filete
   dice si esta aplicado: dos cosas distintas, dos senales distintas. */
.btn-tiempo.on { box-shadow: inset 0 0 0 2px currentColor; font-weight: 700; }
.btn-tiempo.tramo-t1.on, .btn-tiempo.tramo-t3.on, .btn-tiempo.tramo-t6.on,
.btn-tiempo.tramo-t12.on, .btn-tiempo.tramo-t24.on, .btn-tiempo.tramo-t36.on,
.btn-tiempo.tramo-t48.on, .btn-tiempo.tramo-t60.on, .btn-tiempo.tramo-t72.on,
.btn-tiempo.tramo-t96.on, .btn-tiempo.tramo-mas.on, .btn-tiempo.tramo-vencida.on {
    background: inherit; }
/* Cada uno conserva EXACTAMENTE el fondo de su familia al encenderse. */
.btn-tiempo.tramo-t1.on  { background:#fbeef0 !important; color:#75101f !important; }
.btn-tiempo.tramo-t3.on  { background:#fcf0f2 !important; color:#9d182b !important; }
.btn-tiempo.tramo-t6.on  { background:#fdf3f4 !important; color:#c33044 !important; }
.btn-tiempo.tramo-t12.on, .btn-tiempo.tramo-t24.on, .btn-tiempo.tramo-t36.on,
.btn-tiempo.tramo-t48.on, .btn-tiempo.tramo-t60.on, .btn-tiempo.tramo-t72.on,
.btn-tiempo.tramo-t96.on, .btn-tiempo.tramo-mas.on {
    background:rgba(18,112,127,.09) !important; color:#0f3f4a !important; }
.btn-tiempo.tramo-vencida.on { background:#f1f3f5 !important; color:#6b7683 !important; }
/* Full horario si va solido: no es un tramo, es el «ver todo» -otra cosa, otro peso-. */

/* LA CONFIRMACION TIENE QUE VERSE, ESTES DONDE ESTES (2026-08-26).
   Lo destapo un reporte de la usuaria: «no me avisa cuando esta guardado el mercado».
   El mensaje SI se generaba, pero vive arriba de todo, y desde que la pantalla conserva
   la posicion al guardar, ese arriba queda fuera de la vista: se guardaba bien y la
   persona no se enteraba. Con `sticky` el aviso viaja pegado al borde superior hasta
   que uno se desplaza mas alla de el, asi que se ve igual guardando en la fila 1 que en
   la 200. Es un mensaje de un solo uso: desaparece en la siguiente carga. */
.aviso { position: sticky; top: 10px; z-index: 40;
    box-shadow: 0 2px 10px rgba(15,63,74,.10); }

/* El diagnostico de rubros sin grupo: plegado y al pie, porque no es parte de elegir
   tu mercado sino de revisar que los datos de MP esten sanos. */
.mm-diag { margin: 26px 0 0; padding: 0 16px 14px; border: 1px solid var(--linea);
    border-radius: 10px; background: #fbfcfd; }
.mm-diag > summary { display: flex; align-items: center; gap: 8px; padding: 12px 0;
    cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--tinta2); }
.mm-diag > summary strong { color: #a3271b; }
.mm-diag > summary em { font-style: normal; font-weight: 400; color: var(--tenue); }
.mm-diag-ok { display: flex; align-items: center; gap: 7px; margin: 6px 0 0;
    font-size: .86rem; color: #2e7d52; }


/* ============ FLETE Y TRANSPORTES (fichas por courier) ============
   Los controles NO se estilan por pantalla: se apoyan en .pm-grid/.pm-grupo, que
   ya visten los campos del motor, para que todo quede del mismo alto y forma. */
.fl-cab h2 { display: flex; align-items: center; gap: 8px; }
.fl-badge { display: inline-block; padding: 1px 8px; border-radius: 999px;
    font-size: .70rem; font-weight: 700; letter-spacing: .02em; vertical-align: middle; }
.fl-b-gen { background: #eaf2fb; color: #1f4e79; }
.fl-b-con { background: #eef6ee; color: #2e7d52; }
.fl-b-ctr { background: #f4f1e6; color: #8a6714; }
.fl-b-flo { background: #f1eef7; color: #5b4a86; }
.fl-n { color: var(--tenue); font-variant-numeric: tabular-nums; width: 26px; }

.fl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px 14px; align-items: end; margin: 6px 0 10px; }
.fl-grid label { display: block; font-size: .84rem; color: #45505c; font-weight: 500; }
.fl-grid input, .fl-grid select { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; }
.fl-ayuda { display: block; margin-top: 3px; font-size: .74rem; color: var(--tenue); font-weight: 400; }
.fl-chk-mostrar { margin: 4px 0 10px; }
.fl-acciones { margin-top: 6px; }

/* El interruptor de cada tarjeta va EN el encabezado: apagarlo significa que esos
   valores no se consideran para ese courier. */
.fl-sw { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; }
.fl-sw input { width: auto; display: inline-block; margin: 0; }
.fl-par { display: flex; gap: 6px; margin-top: 4px; }
.fl-par input { flex: 1 1 auto; }
.fl-par select { flex: 0 0 108px; }

/* LA FORMULA, a la vista en cada convenio y en cada contrato. */
.fl-formula { margin-top: 12px; padding: 10px 14px; border: 1px solid var(--gris-borde);
    border-radius: var(--radio); background: #fafbfc; }
.fl-form-tit { display: flex; align-items: center; gap: 7px; font-weight: 700;
    font-size: .84rem; color: #1f4e79; margin-bottom: 8px; }
.fl-form-eq { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: #24303d; }
.fl-eq-ig { font-weight: 700; }
.fl-eq-frac { display: inline-flex; flex-direction: column; text-align: center; }
.fl-eq-num { padding: 0 8px 2px; border-bottom: 1.5px solid #24303d; }
.fl-eq-den { padding-top: 2px; font-variant-numeric: tabular-nums; }
.fl-form-pie { margin: 8px 0 0; font-size: .78rem; color: var(--tenue); }

.fl-on  { background: #e6f4ec; border-color: #b6ddc6; color: #2e7d52; }
.fl-off { background: #f3f4f6; border-color: var(--gris-borde); color: var(--tenue); }
.fl-divisor { display: block; margin-top: 3px; font-size: .70rem; color: var(--tenue); }

/* Rubros sin grupo: lo que hay dentro. */
/* align-items: flex-end alinea por la BASE de cada control. Con 'center', el campo que
   no tiene etiqueta arriba queda corrido respecto al que si la tiene. */
.rub-filtro { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 8px 0 12px; }
.rub-filtro > label { display: flex; flex-direction: column; gap: 5px;
                      font-size: .8rem; font-weight: 600; color: #4a5a6a; }
.rub-filtro input[type=text], .rub-filtro select { height: 34px; box-sizing: border-box;
                      padding: 6px 9px; border: 1px solid #c7d2de; border-radius: 6px;
                      font-size: .88rem; font-family: inherit; min-width: 230px; }
.rub-filtro .boton-mini { height: 34px; display: inline-flex; align-items: center; gap: 5px; }
.rub-filtro .muted { padding-bottom: 8px; }
.rub-sub { display: flex; align-items: center; gap: 7px; margin: 18px 0 4px; font-size: .92rem; }

/* Zona de riesgo del flete: eliminar o retirar, con el dano a la vista. */
.fl-zona-riesgo { border: 1px solid #e6c3c3; background: #fdf7f7; }
.fl-zona-riesgo h3 { color: #a33; }
.fl-dano th { font-weight: 500; color: #45505c; }
.fl-dano-alto { color: #a33; font-weight: 700; }
.fl-borrar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.fl-borrar label { font-size: .84rem; color: #45505c; }
.fl-borrar input { display: block; margin-top: 4px; width: 200px; }
.fl-btn-cab { float: right; font-size: .78rem; padding: 4px 10px; }


/* ============ MENU: SECCIONES PLEGABLES ============
   Cada seccion es un boton. Se abre sola la que contiene la pantalla activa, y
   lo que el usuario abre a mano se conserva mientras navega (localStorage). */
.menu-sec { margin-bottom: 2px; }
button.menu-seccion { display: flex; align-items: center; justify-content: space-between;
    width: 100%; box-sizing: border-box; background: none; border: 0; cursor: pointer;
    text-align: left;
    /* OJO: aqui decia "font: inherit", y esa abreviada REINICIA tamano, peso,
       estilo y familia de una sola vez. Como esta regla va despues y es mas
       especifica que .menu-seccion, le borraba su font-size .66rem y su peso 700:
       la banda salia en 16 px y peso 400, mas grande que los propios items del
       menu. Lo unico que hacia falta era heredar la FAMILIA. */
    font-family: inherit; }
.menu-sec-flecha { flex: 0 0 auto; width: 0; height: 0; margin-left: 8px;
    border-left: 4px solid currentColor; border-top: 4px solid transparent;
    border-bottom: 4px solid transparent; opacity: .75; transition: transform .12s ease; }
.menu-sec.abierta .menu-sec-flecha { transform: rotate(90deg); }
.menu-sec-body { display: none; }
.menu-sec.abierta .menu-sec-body { display: block; }

/* ============ EL COLOR DE LA BARRA DICE EN QUE ROL ESTAS ============
   Pedido de la usuaria (2026-08-27): quien tiene doble rol necesita darse cuenta
   de un vistazo si esta mandando la plataforma o una empresa. Una accion de
   super-administrador tocada por equivocacion afecta a TODOS los clientes, asi
   que el aviso tiene que llegar antes de leer nada. */
.sidebar.rol-super { background: var(--azul-panel); }
.sidebar.rol-admin { background: #14504f; }
.sidebar.rol-admin .marca small { color: #a9d6d0; }
.sidebar.rol-admin .menu-item.activo { background: #1d6b69; }
.sidebar.rol-admin .menu-item:hover { background: #1a605e; }
.sidebar.rol-admin .menu-seccion { color: #a9d6d0; }
.rol-chip { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px;
    font-size: .66rem; font-weight: 700; letter-spacing: .04em; }
.rol-super .rol-chip { background: #16406a; color: #cfe0f0; }
.rol-admin .rol-chip { background: #0e3f3e; color: #a9d6d0; }

/* Adonde se fueron los parametros del motor. */
.fl-mudanza { margin: 6px 0 0 18px; font-size: .84rem; color: #45505c; line-height: 1.8; }

/* ============ EL BUSCADOR DE PRODUCTO, ENTRE LAS LINEAS ============
   Va en su propia fila de la tabla, justo bajo la linea que se esta resolviendo.
   El color lo separa del resto: sin eso se confunde con una linea mas. */
.fila-buscador > td { padding: 0 !important; background: #eef4fb; border-left: 4px solid #1f4e79; }
.bloque-buscador { margin: 0; border: 0; border-radius: 0; background: #eef4fb; box-shadow: none; }
.bloque-buscador > h3 { display: flex; align-items: center; gap: 8px; }
.bus-plegar, .bus-cerrar { margin-left: auto; width: 26px; height: 26px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #b9d0e6; border-radius: var(--radio); background: #fff; color: #1f4e79;
    font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer; text-decoration: none; }
.bus-cerrar { margin-left: 0; }
.bus-plegar:hover, .bus-cerrar:hover { background: #dceaf7; }
/* Plegado: queda solo el titulo, y el resto del panel se esconde. */
.bloque-buscador.plegado > *:not(h3) { display: none; }

/* ============ LINEAS PLEGADAS MIENTRAS SE BUSCA UN PRODUCTO ============
   Con el buscador abierto, las demas lineas se resumen en una fila. Siguen a la
   vista —se sabe cuantas faltan y como va cada una— pero dejan de competir con
   lo que se esta trabajando. No se esconde nada: cambia como se dibuja. */
.linea-plegada > td { background: var(--gris-suave, #f4f6f9); padding: 5px 8px !important;
    font-size: .78rem; color: var(--tenue); border-top: 0.5px solid var(--gris-borde); }
.linea-plegada .lp-req { color: #45505c; }
.linea-plegada .lp-prod { margin-left: 8px; color: #2e7d52; display: inline-flex; align-items: center; gap: 3px; }
.linea-plegada .lp-sin { margin-left: 8px; color: var(--tenue); font-style: italic; }
.linea-plegada .lp-estado { text-align: center; white-space: nowrap; }
.linea-plegada .lp-ok { color: #2e7d52; font-weight: 700; }
.linea-plegada .boton-mini { padding: 2px 9px; font-size: .72rem; }

/* EL SELECTOR DE «POR PAGINA», DEL ALTO DE LOS DEMAS (2026-08-27). Medido: los otros
   selects de la app van entre 32 y 35 px y este quedaba en 25, asi que al lado del
   texto se leia como desalineado. Regla fija de la usuaria: los controles se estilan
   global y van todos del mismo alto. */
.por-pagina select { height: 32px; box-sizing: border-box; padding: 4px 8px; }

/* ============ CAJAS PLEGABLES DE LA COTIZACION (2026-08-27) ============
   Cada bloque se contrae con su (+)/(-) y recuerda como quedo. La del CLIENTE no
   lleva boton: es el contexto de todo lo demas y siempre se ve. */
.bloque > h3 { display: flex; align-items: center; gap: 8px; }
.caja-plegar { margin-left: auto; width: 24px; height: 24px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--gris-borde); border-radius: var(--radio); background: #fff;
    color: #1f4e79; font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer; }
.caja-plegar:hover { background: #eef4fb; border-color: #b9d0e6; }
.bloque.plegada > .caja-cuerpo { display: none; }
.bloque.plegada > h3 { margin-bottom: 0; }
/* La del cliente se distingue con un filete: es la que no se mueve. */
.caja-cliente { border-left: 4px solid #1f4e79; }

/* ============ ALERTA DE MULTAS (solo Compra Agil) ============
   Rosado suave a proposito: es un dato que hay que tener a la vista al decidir el
   plazo, no un error que haya que corregir. */
.alerta-multa { margin: 12px 0 4px; padding: 10px 14px; border-radius: var(--radio);
    background: #fdeef2; border: 1px solid #f0c8d4; }
.am-tit { display: flex; align-items: center; gap: 7px; font-weight: 700;
    font-size: .84rem; color: #a33a55; margin-bottom: 5px; }
.am-txt { margin: 0; font-size: .86rem; color: #6b2233; }
.am-txt strong { color: #a33a55; }
.am-pie { margin: 5px 0 0; font-size: .76rem; color: #8a5566; line-height: 1.5; }

/* ============ MENOS BLANCO EN CONDICIONES DEL DESPACHO (2026-08-27) ============
   Al 75% de zoom la fila se veia con espacios grandes: medido, PLAZOS mide 437 px y es
   quien fija el alto de toda la fila, asi que las otras tres cajas quedaban con 175 a
   230 px en blanco debajo. No se movio nada de lugar —eso lo pidio expreso: «solo
   puedes subir o bajar»—; lo que se aprieta es el ritmo vertical DENTRO de Plazos:
   los margenes de cada campo (12 + 4 por etiqueta, cuatro veces) y el recuadro del
   aviso. Con eso la fila baja sola y el blanco se va. */
.coti-fs-plazos { gap: 3px; padding: 6px 10px 6px; }
.coti-fs-plazos > label { margin-top: 4px; margin-bottom: 0; }
.coti-fs-plazos > .plazo-ro { line-height: 1.25; }
.coti-fs-plazos .pista-aviso { margin-top: 4px; padding: 5px 8px; line-height: 1.25; font-size: .68rem; }
.coti-fs-plazos .pista-aviso strong { display: inline; }

/* Despacho: mismo criterio, sin mover nada de sitio. */
.coti-fs-flete { padding: 6px 10px 6px; }
.coti-fs-flete > label { margin-bottom: 2px; }

/* El bloque del centro reparte su alto en vez de dejar todo el blanco abajo: el
   banner arriba y los dos botones repartidos, para que la columna se lea completa. */
.flete-slot { align-items: center; }

/* La columna izquierda tampoco necesita tanto aire entre sus dos cajas. */
.coti-col-izq { gap: 6px; }
.coti-fs-param { padding: 6px 10px 6px; }
.coti-fs-cond  { padding: 6px 10px 6px; }

/* ─────────────────────────────────────────────────────────────────────────
   CONDICIONES DEL DESPACHO EN MATRIZ 2×2 (pedido de la usuaria 2026-08-27)
   Las cuatro cajas venían en UNA sola fila y se comían todo el ancho de la
   pantalla, dejando el área de trabajo apretada. Ahora van en dos filas:

        ┌──────────────────┬──────────────────────────┐
        │ banner + botones │ Despacho / Flete         │
        ├──────────────────┼──────────────────────────┤
        │ Parámetros venta │ Plazos (días hábiles)    │
        │ Condición venta  │                          │
        └──────────────────┴──────────────────────────┘

   Es SOLO CSS: no se movió una línea del HTML. «Despacho / Flete» y «Plazos»
   son hermanos dentro de .coti-col-der, así que ese contenedor pasa a
   `display: contents` y sus dos hijos entran como celdas de la grilla por su
   cuenta. Así cada caja conserva intacto su contenido y su estilo interno
   —que costó muchas iteraciones afinar— y lo único que cambia es dónde se
   ubica cada una.
   ───────────────────────────────────────────────────────────────────────── */
.caja-despacho .coti-form-secciones {
    display: grid;
    grid-template-columns: 210px auto;
    justify-content: start;
    align-items: start;
    gap: 10px 14px;
}

/* El contenedor desaparece como caja; sus dos hijos pasan a ser celdas. */
.caja-despacho .coti-col-der { display: contents; }

/* Fila 1: los botones a la izquierda, el flete a la derecha. */
.caja-despacho .flete-slot    { grid-column: 1; grid-row: 1; }
.caja-despacho .coti-fs-flete { grid-column: 2; grid-row: 1; }

/* Fila 2: los parámetros de venta a la izquierda, los plazos a la derecha. */
.caja-despacho .coti-col-izq   { grid-column: 1; grid-row: 2; }
.caja-despacho .coti-fs-plazos { grid-column: 2; grid-row: 2; }

/* En pantalla angosta la matriz no cabe: vuelve a una sola columna y las
   cajas quedan en el orden en que están escritas en la página. */
@media (max-width: 720px) {
    .caja-despacho .coti-form-secciones { grid-template-columns: 1fr; }
    .caja-despacho .flete-slot,
    .caja-despacho .coti-fs-flete,
    .caja-despacho .coti-col-izq,
    .caja-despacho .coti-fs-plazos { grid-column: 1; grid-row: auto; }
    .caja-despacho .coti-fs-flete { width: 100%; max-width: 100%; }
    /* Apilado, los botones se leen mejor pegados al margen que centrados. */
    .caja-despacho .flete-slot { align-items: flex-start; }
}

/* ─────────────────────────────────────────────────────────────────────────
   PLAZOS: la caja se ensancha, las filas de días NO se mueven
   (pedido de la usuaria 2026-08-27)

   El aviso de «Alcanzas a entregar a tiempo» venía partido en cuatro o cinco
   líneas porque la caja medía 220 px. Ahora la caja toma el mismo ancho que
   «Despacho / Flete», que es la de arriba en su columna: 450 px.

   La parte importante: ensanchar la caja habría corrido las casillas de días
   hacia la derecha, porque cada fila reparte el espacio entre la etiqueta y su
   casilla. Para que eso NO pase, las filas de días se quedan con los 198 px
   que ya tenían medidos. Así Interno, Al cliente, Aceptar OC y Proveedor
   quedan exactamente donde están, y el ancho nuevo lo aprovecha solo el aviso.
   ───────────────────────────────────────────────────────────────────────── */
.caja-despacho .coti-fs-plazos { width: 450px; max-width: 450px; }

/* Las filas de días conservan su ancho de siempre: nada se corre. */
.caja-despacho .coti-fs-plazos > label,
.caja-despacho .coti-fs-plazos > .plazo-ro { max-width: 198px; }

@media (max-width: 720px) {
    .caja-despacho .coti-fs-plazos { width: 100%; max-width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────
   COLUMNA 1: más ancha y repartida en el alto de Despacho / Flete
   (pedido de la usuaria 2026-08-27)

   Tres cosas, y ninguna toca «Despacho / Flete», que queda tal cual:

   1. La columna 1 pasa de 210 a 380 px. Medido: el mensaje «Flete BLUE_CD
      calculado: $433.584 · terrestre» necesita 273 px de texto; con el
      relleno de la caja son 297, así que 335 lo deja en una línea con aire
      de sobra para un monto más grande.
   2. La fila 1 se estira al alto de Despacho / Flete (253 px) y reparte sus
      tres bloques: el aviso arriba, «Guardar y recalcular» al medio y
      «Solicitud Cotización Logística» abajo.
   3. La fila 2 —Parámetros y Condición de venta— toma el mismo ancho que la
      fila 1, como corresponde a una columna.

   Como la columna 1 crece, la columna 2 completa se corre a la derecha. Es
   el desplazamiento pedido: «Despacho / Flete» y «Plazos» conservan sus
   450 px y su contenido intacto, solo empiezan más a la derecha.
   ───────────────────────────────────────────────────────────────────────── */
.caja-despacho .coti-form-secciones { grid-template-columns: 380px auto; }

/* El aviso celeste NO se estira con la columna: conserva sus tres lineas juntas y
   el aire se reparte entre el aviso y los dos botones (eleccion de la usuaria
   2026-08-27). Sin esto hereda el flex-basis:100% de .flete-auto-info y, como la
   columna ahora tiene alto definido, sus lineas se separaban. */
.caja-despacho .flete-slot .flete-mini { flex: 0 0 auto; }

/* La fila 1 se estira al alto de la fila y reparte sus tres bloques. */
.caja-despacho .flete-slot { align-self: stretch; justify-content: space-between; }

/* El aviso y los dos botones ocupan todo el ancho de la columna. */
.caja-despacho .flete-slot .flete-mini,
.caja-despacho .flete-slot .coti-fs-acc { width: 100%; max-width: 100%; }

/* El aviso pasa de una línea por dato a filas que se acomodan: así el título
   y el monto comparten la primera línea, y las guías y el plazo bajan cada
   uno a la suya. */
.caja-despacho .flete-slot .flete-mini {
    flex-flow: row wrap;
    align-items: baseline;
    column-gap: 5px;
    row-gap: 2px;
}
.caja-despacho .flete-slot .flete-mini > .fm-l { flex: 0 0 auto; }
.caja-despacho .flete-slot .flete-mini > .fm-l:nth-child(n+3) { flex: 0 0 100%; }

/* Fila 2: mismo ancho que la fila 1. La columna izquierda traia su propio
   ancho fijo de 210 px, que hay que soltar para que tome el de la columna. */
.caja-despacho .coti-col-izq { width: 100%; max-width: 100%; }
.caja-despacho .coti-col-izq .coti-fs-param,
.caja-despacho .coti-col-izq .coti-fs-cond { width: 100%; max-width: 100%; }

/* ─────────────────────────────────────────────────────────────────────────
   DASHBOARD DE INICIO (2026-08-27)
   El Inicio pasó de ser una bienvenida a ser el trabajo del día. Las tarjetas de
   Empresa/Iniciales/Rol bajan a fichas chicas —ocupaban demasiado para lo poco que
   dicen— y el espacio lo toman los cuatro bloques.
   ───────────────────────────────────────────────────────────────────────── */
.ini-top { display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--gris-borde); }
.ini-hola { margin: 0; font-size: 1.02rem; color: #24303d; }
.ini-hola b { color: #1f4e79; }
.ini-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.ini-chips .chip { border: 1px solid var(--gris-borde); background: #fff; border-radius: 7px;
    padding: 4px 10px; line-height: 1.25; }
.ini-chips .et { display: block; font-size: .58rem; letter-spacing: .09em; text-transform: uppercase; color: #8496a5; }
.ini-chips .va { font-size: .8rem; font-weight: 700; color: #24303d; }

/* Filtro por persona: solo lo ve quien gestiona el equipo. */
.dash-filtro { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; background: #fff;
    border: 1px solid var(--gris-borde); border-radius: 10px; padding: 10px 13px; margin: 0 0 14px; }
.dash-filtro .lb { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #8496a5; font-weight: 700; }
.uchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cfdae3; background: #fff;
    border-radius: 999px; padding: 4px 12px; font-size: .83rem; color: #24303d; text-decoration: none; }
.uchip:hover { background: #eef4fb; }
.uchip .ini { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px;
    border-radius: 50%; background: #eef4fb; color: #1f4e79; font-size: .66rem; font-weight: 700; }
.uchip.on { background: #1f4e79; border-color: #1f4e79; color: #fff; }
.uchip.on .ini { background: rgba(255,255,255,.22); color: #fff; }
.uchip .n { color: #8496a5; font-size: .76rem; }
.uchip.on .n { color: #cfe0f0; }

.dash-blq { background: #fff; border: 1px solid var(--gris-borde); border-radius: 10px;
    padding: 13px 15px; margin: 0 0 14px; }
.dash-blq h3 { margin: 0 0 2px; font-size: .95rem; color: #1f4e79; display: flex; align-items: center; gap: 7px; }
.dash-blq .sub { font-size: .78rem; color: #8496a5; margin: 0 0 11px; }
.dash-vacio { color: #8496a5; font-size: .88rem; margin: 6px 0 0; }

.dash-tot { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin: 0 0 12px; }
.dash-tot .tt { border: 1px solid #eef1f5; border-radius: 8px; padding: 8px 11px; background: #fbfcfd;
    position: relative; overflow: hidden; }
.dash-tot .tt::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: #12707f; }
.dash-tot .tt.urg::before { background: #9d182b; }
.dash-tot .v { font-size: 1.35rem; font-weight: 700; color: #1f4e79; font-variant-numeric: tabular-nums; line-height: 1.2; }
.dash-tot .tt.urg .v { color: #9d182b; }
.dash-tot .tt.gan .v { color: #2e7d52; }
.dash-tot .tt.esp .v { color: #0e5a66; }
.dash-tot .tt.mar .v { color: #1f4e79; }
.dash-tot .l { font-size: .74rem; color: #6f8798; }

/* Barra de resultados: los tres trozos suman el total emitido. */
.barra-res { display: flex; height: 16px; border-radius: 8px; overflow: hidden; margin: 0 0 7px; border: 1px solid #e3e9ee; }
.barra-res span { display: block; }
.b-gan { background: #2e7d52; }
.b-esp { background: #12707f; }
.b-no  { background: #b8c4cd; }
.dash-leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .78rem; color: #4a5a6a; margin: 0 0 12px; }
.dash-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }

.dash-t { font-size: .84rem; }
.dash-t td small { display: block; color: #8496a5; font-size: .75rem; }
.dash-fol { font-family: Consolas, monospace; font-size: .78rem; color: #1f4e79; white-space: nowrap; }
.pill-r { display: inline-block; border-radius: 5px; padding: 2px 9px; font-size: .73rem; font-weight: 600; }
.pr-gan { background: rgba(46,125,82,.13); color: #20603d; }
.pr-esp { background: rgba(18,112,127,.12); color: #0e5a66; }
.pr-no  { background: #eef1f5; color: #6f8798; }

/* El embudo de la plata. Cada etapa es parte de la anterior. */
.emb { display: grid; grid-template-columns: repeat(4, 1fr); }
.et-p { position: relative; padding: 11px 13px; border: 1px solid var(--gris-borde); border-right: 0; }
.et-p:first-child { border-radius: 9px 0 0 9px; }
.et-p:last-child { border-right: 1px solid var(--gris-borde); border-radius: 0 9px 9px 0; }
.et-p .eb { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; }
.e1 .eb { background: #0e5a66; }
.e2 .eb { background: #12707f; }
.e3 .eb { background: #3f9aa5; }
.e4 .eb { background: #2e7d52; }
.et-p .lb { font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: #8496a5; }
.et-p .mt { font-size: 1.18rem; font-weight: 700; color: #24303d; font-variant-numeric: tabular-nums; line-height: 1.25; }
.et-p .ct { font-size: .75rem; color: #6f8798; }

/* Etapa cerrada: sin las Avanzadas se muestra que la etapa EXISTE, nunca su cifra.
   Enseñar el monto real regalaría lo que se vende; enseñar uno falso sería engañar. */
.et-p.lock { background: repeating-linear-gradient(-45deg,#fbfcfd,#fbfcfd 7px,#f4f7f9 7px,#f4f7f9 14px); }
.et-p.lock .lb, .et-p.lock .ct { color: #a8b6c1; }
.et-p.lock .mt { color: #c3cdd6; font-size: 1.05rem; letter-spacing: .08em; }
.et-p.lock .eb { background: #dbe3e9; }
.candado { display: inline-block; width: 11px; height: 11px; border: 1.6px solid #a8b6c1; border-bottom: 0;
    border-radius: 5px 5px 0 0; margin-right: 4px; vertical-align: -1px; position: relative; }
.candado::after { content: ""; position: absolute; left: -3px; top: 9px; width: 15px; height: 9px;
    background: #c3cdd6; border-radius: 2px; }

.brechas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 0; }
.brechas .br { border: 1px solid #eef1f5; background: #fbfcfd; border-radius: 8px; padding: 8px 11px; }
.brechas .bt2 { font-size: .72rem; color: #6f8798; }
.brechas .bv { font-size: .95rem; font-weight: 700; color: #24303d; font-variant-numeric: tabular-nums; }
.brechas .br.alerta { background: #fdeef2; border-color: #f0c9d2; }
.brechas .br.alerta .bv, .brechas .br.alerta .bt2 { color: #9d182b; }
.enganche { margin: 12px 0 0; border: 1px solid #cfe0ee; background: #eef4fb; border-radius: 9px;
    padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.enganche p { margin: 0; font-size: .86rem; color: #24303d; max-width: 70ch; }
.enganche b { color: #1f4e79; }

/* La tira de días. Los fines de semana se muestran aunque estén en cero: sacarlos
   perdería la noción de que el lunes hay tres y el sábado no se puede avanzar. */
.dash-tira { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; margin: 0 0 12px; }
.dash-tira .dia { flex: 0 0 auto; min-width: 74px; border: 1px solid var(--gris-borde); background: #fff;
    border-radius: 9px; padding: 7px 8px; text-align: center; }
.dash-tira .dl { font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; color: #8496a5; }
.dash-tira .dd { font-size: 1.05rem; font-weight: 700; color: #24303d; line-height: 1.15; }
.dash-tira .dn { display: inline-block; margin-top: 3px; font-size: .68rem; font-weight: 700;
    border-radius: 999px; padding: 1px 7px; background: rgba(18,112,127,.12); color: #0e5a66; }
.dash-tira .dia.hoy { border-color: #75101f; box-shadow: 0 0 0 2px rgba(117,16,31,.12); }
.dash-tira .dia.hoy .dd { color: #75101f; }
.dash-tira .dia.hoy .dn { background: #75101f; color: #fff; }
.dash-tira .dia.r1 .dn { background: #9d182b; color: #fff; }
.dash-tira .dia.r2 .dn { background: #c33044; color: #fff; }
.dash-tira .dia.vacio .dn { background: #eef1f5; color: #9fb0bd; }

.ag-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 8px 11px; border-radius: 7px; background: #f4f7f9; margin: 12px 0 0; }
.ag-cab h4 { margin: 0; font-size: .9rem; color: #1f4e79; }
.ag-cab .sub { margin: 0; font-size: .78rem; color: #8496a5; }
.ag-cab.rojo { background: #fdeef2; }
.ag-cab.rojo h4 { color: #75101f; }
.dash-reg { display: inline-block; border-radius: 5px; padding: 2px 8px; font-size: .75rem;
    font-weight: 700; white-space: nowrap; }
.dash-reg.t0 { background: #75101f; color: #fff; }
.dash-reg.t1 { background: #9d182b; color: #fff; }
.dash-reg.t2 { background: #c33044; color: #fff; }
.dash-reg.t3 { background: rgba(18,112,127,.12); color: #0e5a66; }

.per { display: inline-flex; align-items: center; gap: 8px; }
.per .ini { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border-radius: 50%; background: #eef4fb; color: #1f4e79; font-size: .7rem; font-weight: 700; flex: 0 0 auto; }
.per small { display: block; color: #8496a5; font-size: .75rem; }
.bar { height: 7px; background: #eef1f5; border-radius: 4px; overflow: hidden; min-width: 70px; }
.bar i { display: block; height: 100%; background: #2e7d52; border-radius: 4px; }
.ok2 { color: #2e7d52; font-weight: 700; }
.dash-t tfoot td { border-top: 2px solid var(--gris-borde); font-weight: 700; background: #f4f7f9 !important; }

@media (max-width: 760px) {
    .emb { grid-template-columns: 1fr 1fr; }
    .et-p, .et-p:first-child, .et-p:last-child { border-radius: 0; border-right: 1px solid var(--gris-borde); }
    .brechas { grid-template-columns: 1fr; }
}

/* Pantalla de configuración del dashboard. */
.dash-sens { display: inline-block; background: #fdf6e6; border: 1px solid #e6cf94; color: #7a5c12;
    border-radius: 5px; padding: 1px 7px; font-size: .64rem; font-weight: 700; }
.dash-cf-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px;
    flex-wrap: wrap; margin-top: 12px; }

/* ── Agenda: las dos tablas alineadas entre sí ────────────────────────────
   La de HOY y la de los próximos días son <table> distintas, así que cada una
   calculaba sus anchos por su cuenta y las columnas quedaban corridas: las
   iniciales de una no caían sobre las de la otra, y los botones tampoco.
   Con anchos fijos e idénticos se leen como una sola columna (regla C1). */
.dash-t { table-layout: fixed; width: 100%; }
.dash-t .c-cuando { width: 122px; }
.dash-t .c-quien  { width: 84px; }
.dash-t .c-folio  { width: 152px; }
.dash-t .c-monto  { width: 132px; }
.dash-t .c-estado { width: 108px; }
.dash-t .c-acc    { width: 104px; }
.dash-t td, .dash-t th { overflow: hidden; text-overflow: ellipsis; }
.dash-t td.acc { text-align: right; padding-right: 12px; }
.dash-t .dash-btn { min-width: 84px; text-align: center; margin: 0; }
/* El organismo es la única columna elástica: puede envolver, las demás no. */
.dash-t td:nth-child(4), .dash-t td:nth-child(5) { white-space: normal; }

/* ── Filtro por persona con equipos grandes ───────────────────────────────
   Con 30 personas los botones ocupaban cinco filas y buscar a alguien era leer,
   no elegir. Se muestran los 8 con más trabajo y el resto queda detrás de
   «+N más» y de un buscador. Con equipos de hasta 8 nada de esto aparece. */
.dash-filtro .uchip { padding: 3px 9px; font-size: .78rem; gap: 5px; }
.dash-filtro .uchip .ini { width: 18px; height: 18px; font-size: .6rem; }
.dash-filtro .uchip .n { font-size: .71rem; }
.dash-filtro .chips { display: flex; gap: 7px; flex-wrap: wrap; flex: 1; align-items: center; }
.uchip.mas { border-style: dashed; color: #1f4e79; font-weight: 600; cursor: pointer; background: #fff; }
.uchip.mas:hover { background: #eef4fb; }
.uchip.oculto { display: none; }
.dash-buscar { margin-top: 9px; display: none; }
.dash-buscar.on { display: block; }
.dash-buscar input { padding: 6px 10px; border: 1px solid var(--gris-borde); border-radius: 7px;
    font-size: .85rem; font-family: inherit; min-width: 250px; }
.dash-nadie { color: #8496a5; font-size: .8rem; margin: 7px 0 0; display: none; }
.dash-nadie.on { display: block; }

/* El logo del panel lateral es un enlace al Inicio. Tiene que seguir viéndose como
   un logo, no como un enlace: sin subrayado y sin color de vínculo. La única señal
   de que se puede pinchar es el cursor y un leve realce al pasar por encima. */
.marca-link { text-decoration: none; color: inherit; cursor: pointer; border-radius: 8px;
    transition: background .12s ease; }
.marca-link:hover { background: rgba(255,255,255,.10); }
.marca-link:focus-visible { outline: 2px solid rgba(255,255,255,.55); outline-offset: 2px; }

/* =====================================================================
 * CATÁLOGO — pestañas + Vinculación de códigos ONU   (2026-08-27)
 *
 * La vinculación es PESTAÑA y no tarjeta porque necesita el ancho completo:
 * son dos paneles enfrentados. Decisión de la usuaria.
 * =================================================================== */
.cat-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid #dde5ea;margin:0 0 14px}
.cat-tab{padding:7px 15px;border:1px solid #dde5ea;border-bottom:0;background:#eef2f6;
  border-radius:7px 7px 0 0;font-size:.85rem;color:#4a5a6a;margin-bottom:-2px;text-decoration:none}
.cat-tab:hover{background:#e4ebf1;color:#1f4e79}
/* La activa va en AZUL SOLIDO (usuaria 2026-08-29): con once pestanas, blanca sobre
   gris se distingue pero hay que buscarla. Mismo lenguaje que las pestanas del menu
   lateral y las de Estrategia: una sola forma de decir «aqui estas». */
.cat-tab.on{background:#1f4e79;color:#fff;font-weight:700;border-color:#1f4e79;
  box-shadow:0 -2px 6px rgba(31,78,121,.25)}
.cat-tab.on:hover{background:#1a4267;color:#fff}

.vo-sub{color:#6f8798;font-size:.86rem;margin:0 0 12px;max-width:96ch}
.vo-sub b{color:#24303d}
.vo-ay{font-size:.82rem;color:#6f8798;margin:0 0 11px;max-width:92ch}
.vo-ay b{color:#24303d}
.vo-nada{color:#8496a5;font-size:.85rem;font-style:italic;margin:10px 0 0}

/* La franja de avance: dice en qué punto va el trabajo, que es lo que hace
   que alguien vuelva mañana a seguir. */
.vo-avance{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid #dde5ea;
  border-radius:10px;padding:11px 15px;margin:0 0 13px;flex-wrap:wrap}
.vo-avance .cifra{font-size:1.3rem;font-weight:700;color:#1f4e79;font-variant-numeric:tabular-nums}
.vo-avance .lb{font-size:.77rem;color:#6f8798}
.vo-avance .barra{flex:1;min-width:150px;height:9px;background:#eef1f5;border-radius:5px;overflow:hidden}
.vo-avance .barra i{display:block;height:100%;background:#12707f;border-radius:5px}
.vo-avance .sep{width:1px;align-self:stretch;background:#e4ebf1}

.vo-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 11px}
.vo-t th.n,.vo-t td.n{text-align:right;font-variant-numeric:tabular-nums}
.vo-t td.acc{text-align:right;white-space:nowrap}
.vo-cod{font-family:Consolas,monospace;font-size:.8rem;color:#0e5a66;font-weight:700;white-space:nowrap}
.vo-cod.grande{font-size:1rem;background:rgba(18,112,127,.1);border-radius:6px;padding:2px 9px}
.vo-rubro{color:#6f8798;font-size:.8rem}
.vo-ok{display:inline-block;background:rgba(18,112,127,.13);color:#0e5a66;border-radius:5px;
  padding:1px 8px;font-size:.78rem;font-weight:700}
.vo-cero{color:#b3c0cb;font-size:.78rem}
.vo-elegido td{background:rgba(18,112,127,.07) !important;box-shadow:inset 3px 0 0 #12707f}

.vo-ficha h2{margin:0 0 4px}

/* Los dos paneles. En pantalla angosta se apilan solos. */
.vo-paneles{display:grid;grid-template-columns:1fr 1fr;gap:13px;align-items:start}
@media (max-width:1100px){.vo-paneles{grid-template-columns:1fr}}
.vo-panel{background:#fff;border:1px solid #dde5ea;border-radius:10px;overflow:hidden}
.vo-panel.vo-der{border-color:#b6d8c1}
.vo-cab{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #eef1f5;
  background:#f7fafc}
.vo-panel.vo-der .vo-cab{background:#f2f9f4}
.vo-cab h3{margin:0;font-size:.94rem;color:#1f4e79}
.vo-panel.vo-der .vo-cab h3{color:#20603d}
.vo-cab .vo-n{margin-left:auto;font-size:.78rem;color:#6f8798;font-variant-numeric:tabular-nums}
.vo-filtros{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 14px;
  border-bottom:1px solid #eef1f5;background:#fbfcfd}
.vo-filtros input[type=text]{flex:1;min-width:150px}
.vo-chk{display:flex;align-items:center;gap:6px;font-size:.82rem;color:#24303d;white-space:nowrap}

/* Alto fijo con desplazamiento propio: son listas de cientos de filas y así los
   dos paneles quedan a la misma altura y el botón siempre a la vista. */
.vo-lista{max-height:520px;overflow:auto}
.vo-tp{margin:0}
.vo-tp th.c-chk,.vo-tp td.c-chk{width:34px;text-align:center}
.vo-tp th.c-onus,.vo-tp td.c-onus{width:132px;text-align:right}
.vo-pn{font-family:Consolas,monospace;font-size:.78rem;color:#1f4e79;word-break:break-all}
.vo-nombre{font-size:.8rem;color:#4a5a6a;margin-top:2px}
.vo-badge{display:inline-block;background:#fdf6e6;color:#7a5c12;border:1px solid #e6cf94;
  border-radius:4px;padding:0 6px;font-size:.66rem;font-weight:700;margin-left:5px}
.vo-org{display:inline-block;border-radius:5px;padding:1px 8px;font-size:.7rem;font-weight:700}
.vo-org-manual{background:rgba(18,112,127,.13);color:#0e5a66}
.vo-org-aprendido{background:#eef4fb;color:#1f4e79}
.vo-org-generada{background:#f0f7f2;color:#20603d}
.vo-veces{font-size:.72rem;color:#8496a5;margin-top:3px}
.vo-pie{padding:11px 14px;border-top:1px solid #eef1f5;background:#fafcfd;text-align:right}
.vo-vacio{color:#4a5a6a;font-size:.87rem}

/* =====================================================================
 * CATÁLOGO — pestañas Reglas, Auditoría y Nombres comerciales (2026-08-27)
 * =================================================================== */

/* ---------- comunes a las tres ---------- */
.cr-sub,.au-sub,.nc-sub{color:#6f8798;font-size:.86rem;margin:0 0 13px;max-width:98ch}
.cr-sub b,.au-sub b,.nc-sub b{color:#24303d}
.cr-ay,.au-ay{font-size:.82rem;color:#6f8798;margin:0 0 11px;max-width:96ch}
.cr-ay b,.au-ay b{color:#24303d}
.cr-nada,.au-limpio{color:#8496a5;font-size:.82rem;font-style:italic}
.cr-mono,.nc-mono{font-family:Consolas,monospace;font-size:.8rem}
.cr-t td.acc,.au-t td.acc,.nc-t td.acc{text-align:right;white-space:nowrap}
.cr-t th.n,.cr-t td.n,.au-t th.n,.au-t td.n{text-align:right;font-variant-numeric:tabular-nums}
.cr-t th.c-chk,.cr-t td.c-chk{width:34px;text-align:center}
.cr-pn,.au-pn,.nc-pn{font-family:Consolas,monospace;font-size:.78rem;color:#1f4e79;word-break:break-all}
.cr-nom,.au-nom{font-size:.81rem;color:#4a5a6a;margin-top:2px}

/* ---------- ① estructura del nombre ---------- */
.cr-nucleo{display:flex;align-items:center;gap:9px;flex-wrap:wrap;border:1px solid #cfe0ee;
  background:#eef4fb;border-radius:9px;padding:11px 13px;margin:0 0 13px}
.cr-et{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#1f4e79}
.cr-fin{font-size:.8rem;color:#4a5a6a}
.cr-tok{display:inline-block;background:#fff;border:1px solid #cfe0ee;color:#1f4e79;border-radius:5px;
  padding:3px 10px;font-size:.76rem;font-family:Consolas,monospace;font-weight:700}
.cr-tok.cr-car{background:#f0f7f2;border-color:#b6d8c1;color:#20603d}
.cr-tok.cr-mas{background:#fbfcfd;border-style:dashed;color:#6f8798;font-weight:600}
.cr-est{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.cr-t col.c-fam{width:230px} .cr-t col.c-ej{width:290px}
.cr-fam{font-weight:600;color:#24303d}
.cr-fam small{display:block;font-weight:400;color:#8496a5;font-size:.78rem;margin-top:2px}
.cr-ej{font-size:.8rem;color:#4a5a6a}
.cr-badge{display:inline-block;background:rgba(18,112,127,.13);color:#0e5a66;border-radius:4px;
  padding:0 7px;font-size:.66rem;font-weight:700;margin-left:5px;vertical-align:1px}
/* La fila ajustada por la empresa se distingue: saber si algo es tuyo o del sistema
   cambia la confianza con que lo tocas. */
.cr-propia td{background:rgba(18,112,127,.06) !important;box-shadow:inset 3px 0 0 #12707f}

.cr-fila-edit td{background:#f7fafc !important;padding:0 !important}
.cr-editor{padding:13px 15px}
.cr-editor h3{margin:0 0 3px;font-size:.93rem;color:#1f4e79}
.cr-caracts{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:7px;margin:0 0 11px}
.cr-cbox{display:flex;align-items:center;gap:8px;border:1px solid #dde5ea;background:#fff;
  border-radius:7px;padding:6px 9px;font-size:.8rem;color:#24303d}
.cr-cbox.on{border-color:#b6d8c1;background:#f6fbf7}
.cr-cbox small{color:#8496a5;font-size:.72rem;display:block}
.cr-cl{font-family:Consolas,monospace;font-weight:700;color:#20603d;font-size:.74rem}
.cr-orden{width:44px;height:28px;box-sizing:border-box;padding:3px 5px;text-align:center;
  border:1px solid #cdd6e0;border-radius:5px;font-family:inherit;font-size:.8rem}
.cr-linea{max-width:640px;margin:0 0 11px;font-size:.8rem;color:#6f8798}
.cr-linea input{margin-top:4px}
.cr-acc{display:flex;gap:8px;align-items:center;margin-top:9px}
.cr-nueva{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:13px 0 0;padding:11px 13px;
  border:1px dashed #cfdae3;border-radius:9px;background:#fbfcfd;font-size:.84rem;color:#24303d}
.cr-instr{margin:13px 0 0;border:1px solid #dde5ea;border-radius:9px;background:#fbfcfd;padding:10px 13px}
.cr-instr summary{cursor:pointer;font-size:.86rem;font-weight:600;color:#1f4e79}
.cr-instr-fila{padding:7px 0;border-bottom:1px solid #f2f5f8;font-size:.81rem;color:#4a5a6a}
.cr-instr-fila:last-child{border-bottom:0}
.cr-instr-fila b{display:block;color:#24303d;margin-bottom:2px}

/* ---------- ② conector ---------- */
.cr-conector{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.cr-radio{display:flex;gap:7px;align-items:center;font-size:.86rem;color:#24303d}
.cr-pasos{border:1px solid #dde5ea;border-radius:9px;background:#fbfcfd;padding:11px 13px}
.cr-paso{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;padding:5px 0;color:#24303d}
.cr-n{flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:#1f4e79;color:#fff;
  font-size:.67rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.cr-aviso{border:1px solid #e6cf94;background:#fdf6e6;color:#5a4a1c;border-radius:9px;
  padding:10px 13px;font-size:.83rem;margin:12px 0 0}
.cr-aviso b{color:#7a5c12}
.cr-candlista{margin:13px 0 0;border-top:1px solid #eef1f5;padding-top:12px}
.cr-candlista h3{margin:0 0 3px;font-size:.93rem;color:#1f4e79}
.cr-med{font-size:.81rem;color:#4a5a6a}

/* ---------- auditoría ---------- */
.au-t col{}
.au-t th.c-tipo,.au-t td.c-tipo{width:92px}
.au-t th.c-pct,.au-t td.c-pct{width:158px}
.au-hal{font-weight:600;color:#24303d}
.au-hal small{display:block;font-weight:400;color:#8496a5;font-size:.79rem;margin-top:3px;max-width:74ch}
.au-tipo{display:inline-block;border-radius:5px;padding:2px 9px;font-size:.71rem;font-weight:700}
.au-error{background:#fdeef2;color:#9d182b}
.au-abertura{background:rgba(18,112,127,.12);color:#0e5a66}
.au-pct{display:flex;align-items:center;gap:8px;justify-content:flex-end;font-variant-numeric:tabular-nums;
  font-size:.82rem;color:#4a5a6a}
.au-bar{height:7px;background:#eef1f5;border-radius:4px;width:76px;overflow:hidden}
.au-bar i{display:block;height:100%;border-radius:4px;background:#12707f}
.au-bar i.rojo{background:#9d182b}
.au-cuenta{font-weight:400;color:#8496a5;font-size:.85rem;margin-left:6px}
.au-ok{color:#20603d;font-size:.85rem;background:#f0f7f2;border:1px solid #b6d8c1;border-radius:8px;
  padding:9px 12px;margin:10px 0 0}
.au-malo{font-family:Consolas,monospace;font-size:.8rem;color:#9d182b;font-weight:700}
.au-porque{font-size:.81rem;color:#4a5a6a}
.au-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 11px}
.au-med{font-size:.81rem;color:#4a5a6a}
.au-falta{color:#b3838a;font-style:italic}
.au-badge{display:inline-block;background:#fdf6e6;color:#7a5c12;border:1px solid #e6cf94;
  border-radius:4px;padding:0 6px;font-size:.65rem;font-weight:700;margin-left:5px}

/* ---------- nombres comerciales ---------- */
.nc-avance{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid #dde5ea;
  border-radius:10px;padding:11px 15px;margin:0 0 12px;flex-wrap:wrap}
.nc-avance .cifra{font-size:1.3rem;font-weight:700;color:#1f4e79;font-variant-numeric:tabular-nums}
.nc-avance .lb{font-size:.77rem;color:#6f8798}
.nc-avance .barra{flex:1;min-width:150px;height:9px;background:#eef1f5;border-radius:5px;overflow:hidden}
.nc-avance .barra i{display:block;height:100%;background:#12707f;border-radius:5px}
.nc-guia{border:1px solid #cfe0ee;background:#eef4fb;border-radius:9px;padding:10px 13px;
  font-size:.84rem;color:#24303d;margin:0 0 12px}
.nc-filtros{display:flex;align-items:flex-end;gap:11px;flex-wrap:wrap;background:#fff;
  border:1px solid #dde5ea;border-radius:10px;padding:11px 13px;margin:0 0 12px}
.nc-filtros .campo{display:flex;flex-direction:column;gap:4px}
.nc-filtros .campo label{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8496a5}
.nc-tabla{padding:0;overflow:hidden}
.nc-t{margin:0}
.nc-t col.c-pn{width:168px} .nc-t col.c-acc{width:196px}
.nc-tec{color:#6f8798;font-size:.82rem}
.nc-tec.vacio{color:#b3838a;font-style:italic}
.nc-inp{width:100%;box-sizing:border-box;padding:6px 9px;border:1px solid #cdd6e0;border-radius:6px;
  font-size:.85rem;font-family:inherit}
.nc-inp.lleno{border-color:#9fc9a8;background:#f6fbf7}
.nc-cand{display:inline-block;background:rgba(18,112,127,.12);color:#0e5a66;border-radius:4px;
  padding:1px 7px;font-size:.66rem;font-weight:700;margin-right:5px}
.nc-badge{display:inline-block;background:#fdf6e6;color:#7a5c12;border:1px solid #e6cf94;
  border-radius:4px;padding:0 6px;font-size:.65rem;font-weight:700;margin-left:5px}
.nc-pie{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 14px;background:#fafcfd;border-top:1px solid #eef1f5}
.nc-n{font-size:.82rem;color:#6f8798}
.nc-pag{display:flex;gap:6px}
.nc-nada{color:#8496a5;font-size:.85rem;font-style:italic}

/* Aviso de sesion desplazada en el login: ambar, no rojo. No es un error de la
   persona, es informacion — y en rojo se lee como "hiciste algo mal". */
.aviso-sesion{background:#fdf6e6;border:1px solid #e6cf94;color:#5a4a1c;border-radius:8px;
  padding:10px 13px;font-size:.86rem;margin:0 0 12px;line-height:1.45}
.aviso-sesion b{color:#7a5c12}

/* ---------- catalogo: pestanas con su cuenta, titulo destacado y form alineado ---------- */
.cat-tab-n{display:inline-block;margin-left:7px;background:rgba(31,78,121,.1);color:#1f4e79;
  border-radius:999px;padding:0 7px;font-size:.68rem;font-weight:700;vertical-align:1px;
  font-variant-numeric:tabular-nums}
/* Sobre el azul, la pastilla del contador se INVIERTE: si no, el numero queda azul
   sobre azul y desaparece justo en la pestana que se esta mirando. */
.cat-tab.on .cat-tab-n{background:rgba(255,255,255,.22);color:#fff}

/* El titulo de "Crear un proveedor" en su propia pastilla: dentro de un bloque que ya
   trae texto, un h4 suelto no se distingue de un parrafo en negrita. */
.cat-titulo-caja, .cat-cargas .cat-prov-nuevo h4.cat-titulo-caja {
  display:inline-flex; align-items:center; gap:7px; background:#12707f; color:#fff;
  border-radius:999px; padding:5px 14px; font-size:.86rem; font-weight:700; margin:0 0 11px; }
.cat-titulo-caja svg { stroke:#fff; }

/* Los campos en columnas: con la etiqueta al costado, cada caja arrancaba en un lugar
   distinto segun el largo de su etiqueta. */
.prov-nuevo{display:flex;align-items:flex-end;gap:11px;flex-wrap:wrap}
.prov-nuevo label{display:flex;flex-direction:column;gap:5px;font-size:.8rem;font-weight:600;
  color:#4a5a6a}
.prov-nuevo input,.prov-nuevo select{height:34px;box-sizing:border-box;padding:6px 9px;
  border:1px solid #c7d2de;border-radius:6px;font-size:.88rem;font-family:inherit;min-width:200px}
.prov-nuevo button{height:34px}

/* =====================================================================
 * KITS Y SERVICIOS + ACCESOS (sesión única)   (2026-08-27)
 * =================================================================== */
.kt-sub{color:#6f8798;font-size:.86rem;margin:0 0 11px;max-width:98ch}
.kt-sub b{color:#24303d}
.kt-ay{font-size:.82rem;color:#6f8798;margin:0 0 12px;max-width:96ch}
.kt-ay b{color:#24303d}
.kt-nada{color:#8496a5;font-size:.85rem;font-style:italic;margin:10px 0}
.kt-falta{color:#b3838a;font-style:italic;font-size:.82rem}
.kt-reglas{border:1px solid #cfe0ee;background:#eef4fb;border-radius:9px;padding:10px 13px;
  font-size:.84rem;color:#24303d;margin:0 0 14px}
.kt-reglas b{color:#1f4e79}

/* Dos columnas: la lista a la izquierda y el kit abierto a la derecha. Ver la lista
   mientras se arma uno es lo que evita crear el mismo kit dos veces. */
.kt-cols{display:grid;grid-template-columns:minmax(330px,.85fr) 1.15fr;gap:14px;align-items:start}
@media (max-width:1150px){.kt-cols{grid-template-columns:1fr}}

.kt-t th.n,.kt-t td.n{text-align:right;font-variant-numeric:tabular-nums}
.kt-t td.acc{text-align:right;white-space:nowrap}
.kt-t th.c-cant,.kt-t td.c-cant{width:96px;text-align:center}
.kt-cod{font-family:Consolas,monospace;font-size:.79rem;color:#1f4e79;font-weight:700}
.kt-cod.grande{font-size:.95rem;background:rgba(31,78,121,.09);border-radius:6px;padding:2px 9px}
.kt-nom{font-size:.83rem;color:#24303d}
.kt-nom2{font-size:.8rem;color:#4a5a6a;margin-top:2px}
.kt-pn{font-family:Consolas,monospace;font-size:.78rem;color:#1f4e79;word-break:break-all}
.kt-off{display:inline-block;background:#eef1f5;color:#8496a5;border-radius:4px;padding:0 6px;
  font-size:.65rem;font-weight:700;margin-left:5px}
.kt-badge-srv{display:inline-block;background:#f0f7f2;color:#20603d;border:1px solid #b6d8c1;
  border-radius:4px;padding:0 6px;font-size:.65rem;font-weight:700;margin-left:5px}
.kt-abierto td{background:rgba(31,78,121,.06) !important;box-shadow:inset 3px 0 0 #1f4e79}
.kt-roto td{background:#fdeef2 !important}
.kt-sinstock{font-size:.71rem;color:#b3838a;margin-top:2px}
.kt-total{font-weight:700;color:#24303d}
.kt-cab{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.kt-cab h2{margin:0}

.kt-buscar{display:flex;gap:7px;align-items:center;margin:0 0 11px;flex-wrap:wrap}
.kt-buscar input[type=text]{height:32px;box-sizing:border-box;padding:5px 9px;border:1px solid #c7d2de;
  border-radius:6px;font-size:.86rem;font-family:inherit;min-width:170px}
.kt-cant input,.kt-add input[type=text]{height:30px;box-sizing:border-box;padding:4px 7px;
  border:1px solid #c7d2de;border-radius:6px;font-size:.85rem;font-family:inherit;width:76px;
  text-align:center}
.kt-add{display:flex;gap:6px;align-items:center;justify-content:flex-end}

/* El título de cada formulario en su pastilla, igual que en Cargar catálogo. */
.kt-titulo-caja{display:inline-flex;align-items:center;gap:7px;background:#12707f;color:#fff;
  border-radius:999px;padding:5px 14px;font-size:.85rem;font-weight:700;margin:16px 0 10px}
.kt-nuevo{border-top:1px solid #eef1f5;margin-top:14px;padding-top:4px}
.kt-campos{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin:0 0 9px}
.kt-campos-4{grid-template-columns:1fr 1.6fr .7fr .8fr}
@media (max-width:900px){.kt-campos,.kt-campos-4{grid-template-columns:1fr}}
.kt-nuevo label,.kt-editar label{display:flex;flex-direction:column;gap:5px;font-size:.8rem;
  font-weight:600;color:#4a5a6a}
.kt-nuevo input,.kt-nuevo select,.kt-editar input{height:34px;box-sizing:border-box;padding:6px 9px;
  border:1px solid #c7d2de;border-radius:6px;font-size:.87rem;font-family:inherit}
.kt-ancho{display:block;margin:0 0 10px}
.kt-ancho input{width:100%}
.kt-chk{display:flex;flex-direction:row !important;align-items:center;gap:7px;margin:0 0 10px;
  font-weight:400 !important}
.kt-editar{margin-top:16px;border:1px solid #dde5ea;border-radius:9px;background:#fbfcfd;padding:10px 13px}
.kt-editar summary{cursor:pointer;font-size:.85rem;font-weight:600;color:#1f4e79}
.kt-editar form{margin-top:10px}

/* Lo que cuesta armarlo: es la cifra por la que se abre esta pantalla, así que va
   destacada y con sus advertencias pegadas, no en otra parte. */
.kt-costo{border:1px solid #cfe0ee;background:#eef4fb;border-radius:10px;padding:12px 15px;margin:13px 0 0}
.kt-costo-tit{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:#1f4e79}
.kt-costo-n{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;margin:4px 0 2px}
.kt-plata{font-size:1.25rem;font-weight:700;color:#1f4e79;font-variant-numeric:tabular-nums}
.kt-costo-pie{font-size:.78rem;color:#6f8798}
.kt-aviso{border:1px solid #e6cf94;background:#fdf6e6;color:#5a4a1c;border-radius:8px;
  padding:9px 12px;font-size:.82rem;margin:10px 0 0}
.kt-aviso b{color:#7a5c12}
.kt-aviso-rojo{border-color:#f0c9d2;background:#fdeef2;color:#7a2233}
.kt-aviso-rojo b{color:#9d182b}

/* ---------- Accesos y cuentas compartidas ---------- */
.se-sub{color:#6f8798;font-size:.86rem;margin:0 0 12px;max-width:98ch}
.se-sub b{color:#24303d}
.se-ay{font-size:.82rem;color:#6f8798;margin:0 0 11px;max-width:96ch}
.se-ay b{color:#24303d}
.se-nada{color:#8496a5;font-size:.85rem;font-style:italic}
.se-ok{color:#20603d;font-size:.85rem;background:#f0f7f2;border:1px solid #b6d8c1;border-radius:8px;
  padding:9px 12px}
.se-cifras{display:flex;align-items:center;gap:22px;background:#fff;border:1px solid #dde5ea;
  border-radius:10px;padding:11px 15px;margin:0 0 13px;flex-wrap:wrap}
.se-cifras .cifra{font-size:1.3rem;font-weight:700;color:#1f4e79;font-variant-numeric:tabular-nums}
.se-cifras .cifra.ojo{color:#9d182b}
.se-cifras .lb{font-size:.77rem;color:#6f8798}
.se-per{margin-left:auto;font-size:.8rem;color:#6f8798}
.se-per select{height:32px;padding:5px 8px;border:1px solid #c7d2de;border-radius:6px;
  font-family:inherit;font-size:.85rem;margin-left:6px}
.se-t th.n,.se-t td.n{text-align:right;font-variant-numeric:tabular-nums}
.se-t td.acc{text-align:right;white-space:nowrap}
.se-per-n{font-weight:600;color:#24303d}
.se-per-n small{display:block;font-weight:400;color:#8496a5;font-size:.76rem;margin-top:2px}
.se-ini{display:inline-block;background:rgba(31,78,121,.1);color:#1f4e79;border-radius:4px;
  padding:0 6px;font-size:.68rem;font-weight:700;margin-left:5px}
.se-ip{font-family:Consolas,monospace;font-size:.78rem;color:#0e5a66}
.se-eq{font-size:.81rem;color:#4a5a6a}
.se-fecha{font-size:.8rem;color:#6f8798;white-space:nowrap}
.se-alerta{display:inline-block;background:#fdeef2;color:#9d182b;border-radius:5px;padding:1px 9px;
  font-weight:700}
.se-fuerte td{background:#fdeef2 !important;box-shadow:inset 3px 0 0 #9d182b}
.se-ev{display:inline-block;border-radius:5px;padding:1px 8px;font-size:.72rem;font-weight:700}
.se-ev-entra{background:#f0f7f2;color:#20603d}
.se-ev-sale{background:#eef1f5;color:#6f8798}
.se-ev-desplaza{background:#fdf6e6;color:#7a5c12}
.se-ev-desplazado{background:#fdeef2;color:#9d182b}
.se-desde{display:block;font-size:.74rem;color:#8496a5;margin-top:2px}
.se-quehacer{border:1px solid #cfe0ee;background:#eef4fb;border-radius:8px;padding:10px 13px;
  font-size:.83rem;color:#24303d;margin:12px 0 0}
.se-quehacer b{color:#1f4e79}
.se-legal{border:1px solid #dde5ea;background:#fbfcfd;border-radius:9px;padding:11px 14px;
  font-size:.8rem;color:#6f8798;margin:14px 0 0;max-width:100ch;line-height:1.5}
.se-legal b{color:#24303d}

/* ---------- Tipo de cambio para los costos del catalogo (Indicadores) ---------- */
.tcc-fila{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;margin:12px 0 0}
.tcc-valor{display:flex;flex-direction:column;gap:2px;border:1px solid #c3d8ee;background:#eef4fb;
  border-radius:9px;padding:9px 15px;min-width:250px;box-sizing:border-box}
.tcc-etq{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:#1f4e79}
.tcc-valor strong{font-size:1.3rem;color:#1f4e79;line-height:1.1;font-variant-numeric:tabular-nums}
.tcc-det{font-size:.75rem;color:#6f8798}
.tcc-form{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap}
.tcc-form label{display:flex;flex-direction:column;gap:5px;font-size:.8rem;font-weight:600;color:#4a5a6a}
.tcc-form select{height:34px;box-sizing:border-box;padding:6px 9px;border:1px solid #c7d2de;
  border-radius:6px;font-size:.87rem;font-family:inherit;min-width:280px}
.tcc-form button{height:34px}
.tcc-aviso{border:1px solid #e6cf94;background:#fdf6e6;color:#5a4a1c;border-radius:8px;
  padding:9px 12px;font-size:.83rem;margin:12px 0 0}
.tcc-aviso b{color:#7a5c12}
.tcc-nota{font-size:.79rem;color:#6f8798;margin:10px 0 0;max-width:98ch;line-height:1.5}
.tcc-nota b{color:#24303d}
.cat-clp{display:block;font-size:.72rem;color:#6f8798;font-variant-numeric:tabular-nums;margin-top:1px}

/* La marca del sistema al pie de los documentos, mientras el uso sea gratuito.
   Centrada, gris y chica: dice como se produjo el documento, no compite con la
   marca del cliente. */
.doc-marca{text-align:center;font-size:.68rem;color:#9aa8b5;margin:10px 0 0;letter-spacing:.01em}
@media print{.doc-marca{color:#9aa8b5}}

/* ---------- Panel de Inicio: lo que te deben (enganche de Cobranza) ----------
   Cuatro tarjetas del mismo alto. La de intereses va destacada porque es la que
   hace la pregunta que vende: «¿y a quién le cobro esto?». */
.mora-fila{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px 0 0}
@media (max-width:900px){.mora-fila{grid-template-columns:repeat(2,1fr)}}
.mora-c{border:1px solid #dde5ea;background:#fff;border-radius:9px;padding:10px 13px;
  display:flex;flex-direction:column;gap:2px;box-sizing:border-box}
.mora-c .lb{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#8496a5}
.mora-c .mt{font-size:1.22rem;font-weight:700;color:#24303d;font-variant-numeric:tabular-nums;line-height:1.15}
.mora-c .ct{font-size:.74rem;color:#8496a5}
/* Los intereses en verde: es plata que se puede recuperar, no una pérdida. */
.mora-destaca{border-color:#9fc9a8;background:#f6fbf7}
.mora-destaca .lb{color:#2e7d52}
.mora-destaca .mt{color:#20603d}
/* El total en el rojo de la escala, que es el que marca lo urgente. */
.mora-total{border-color:#f0c9d2;background:#fdeef2}
.mora-total .lb{color:#9d182b}
.mora-total .mt{color:#9d182b}
.mora-pie{margin:12px 0 0}

/* =====================================================================
 * PLANTILLAS DOCUMENTALES (Configuración del Sistema)   (2026-08-27)
 * =================================================================== */
.pl-sub{color:#6f8798;font-size:.86rem;margin:0 0 11px;max-width:98ch}
.pl-sub b{color:#24303d}
.pl-nada{color:#8496a5;font-size:.85rem;font-style:italic;margin:10px 0}
.pl-aviso{border:1px solid #e6cf94;background:#fdf6e6;color:#5a4a1c;border-radius:9px;
  padding:10px 13px;font-size:.84rem;margin:0 0 14px}
.pl-aviso b{color:#7a5c12}
/* La lista a la izquierda y el texto a la derecha: se edita viendo cuáles hay,
   que es lo que evita escribir dos veces la misma plantilla. */
.pl-cols{display:grid;grid-template-columns:minmax(300px,.7fr) 1.3fr;gap:14px;align-items:start}
@media (max-width:1150px){.pl-cols{grid-template-columns:1fr}}
.pl-t td.acc{text-align:right;white-space:nowrap}
.pl-nom{font-weight:600;color:#24303d;font-size:.87rem}
.pl-tipo{font-size:.76rem;color:#1f4e79;margin-top:2px}
.pl-ayuda{font-size:.77rem;color:#8496a5;margin-top:3px;max-width:52ch}
.pl-abierta td{background:rgba(31,78,121,.06) !important;box-shadow:inset 3px 0 0 #1f4e79}
.pl-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pl-cab h2{margin:0}
.pl-campos{display:grid;grid-template-columns:1fr 1.3fr 1.3fr;gap:10px;margin:12px 0 10px}
@media (max-width:900px){.pl-campos{grid-template-columns:1fr}}
.pl-form label{display:flex;flex-direction:column;gap:5px;font-size:.8rem;font-weight:600;color:#4a5a6a}
.pl-form label small{font-weight:400;color:#8496a5;font-size:.72rem}
.pl-form input,.pl-form select{height:34px;box-sizing:border-box;padding:6px 9px;border:1px solid #c7d2de;
  border-radius:6px;font-size:.87rem;font-family:inherit}
.pl-form input[readonly]{background:#f4f6f9;color:#6f8798}
.pl-ancho{display:block;margin:0 0 11px}
.pl-ancho input{width:100%}
/* El cuerpo en monoespaciada: se está escribiendo un formato con variables, y ahí
   importa ver dónde empieza y termina cada {{ }}. */
.pl-form textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #c7d2de;
  border-radius:8px;font-family:Consolas,monospace;font-size:.82rem;line-height:1.55;resize:vertical}
.pl-vars{border:1px solid #dde5ea;background:#fbfcfd;border-radius:9px;padding:11px 13px;margin:11px 0 0;
  font-size:.82rem;color:#4a5a6a}
.pl-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.pl-chip{border:1px dashed #cfdae3;background:#fff;color:#20603d;border-radius:999px;padding:3px 10px;
  font-family:Consolas,monospace;font-size:.74rem;cursor:pointer}
.pl-chip:hover{border-color:#9fc9a8;background:#f6fbf7}
.pl-nota{font-size:.79rem;color:#6f8798;margin:9px 0 0;max-width:92ch;line-height:1.5}
.pl-falta{font-family:Consolas,monospace;color:#9d182b;background:#fdeef2;border-radius:4px;padding:0 5px}
.pl-acc{display:flex;gap:8px;align-items:center;margin:12px 0 0}
.pl-previa{margin:16px 0 0;border-top:1px solid #eef1f5;padding-top:12px}
.pl-previa h3{margin:0 0 8px;font-size:.93rem;color:#1f4e79}
.pl-faltan{border:1px solid #f0c9d2;background:#fdeef2;color:#7a2233;border-radius:8px;
  padding:9px 12px;font-size:.82rem;margin:0 0 10px}
.pl-faltan b{color:#9d182b}
/* La vista previa se lee como el escrito que va a salir: fondo blanco y renglones
   sueltos. Si se mostrara comprimida no se notaría un párrafo mal armado. */
.pl-texto{background:#fff;border:1px solid #dde5ea;border-radius:8px;padding:14px 16px;
  font-family:Georgia,'Times New Roman',serif;font-size:.86rem;line-height:1.65;color:#24303d;
  white-space:pre-wrap;word-wrap:break-word;max-height:520px;overflow:auto;margin:0}

/* =====================================================================
 * ALINEACIÓN de las pantallas nuevas (2026-08-27)
 * Regla de la usuaria: las filas y las columnas van alineadas.
 * · Las rejillas de formulario arrancan todas ARRIBA (`start`): con `stretch`
 *   un campo que trae texto de ayuda de dos líneas empuja al de al lado.
 * · La columna de acciones va centrada en su fila, para que el botón quede a la
 *   misma altura aunque el texto de la izquierda ocupe una o tres líneas.
 * · Todos los controles miden lo mismo de alto: 34px.
 * =================================================================== */
.pl-campos, .kt-campos, .kt-campos-4, .cr-caracts, .nc-filtros, .inc-grid { align-items: start; }
.pl-t td, .kt-t td, .cr-t td, .au-t td, .nc-t td, .se-t td, .vo-t td { vertical-align: middle; }
.pl-t td.acc, .kt-t td.acc, .cr-t td.acc, .au-t td.acc,
.nc-t td.acc, .se-t td.acc, .vo-t td.acc { vertical-align: middle; }
.pl-form input, .pl-form select,
.kt-nuevo input, .kt-nuevo select, .kt-editar input,
.prov-nuevo input, .prov-nuevo select,
.rub-filtro input[type=text], .rub-filtro select,
.nc-filtros input, .nc-filtros select,
.au-form input, .au-form select { height: 34px; box-sizing: border-box; }
.pl-form button, .kt-nuevo button, .prov-nuevo button,
.rub-filtro .boton-mini, .nc-filtros button, .au-form button { height: 34px; }
/* Las etiquetas de una misma fila arrancan a la misma altura aunque una sea más
   larga que la otra: si no, el campo de abajo queda corrido respecto al de al lado. */
.pl-form label, .kt-nuevo label, .prov-nuevo label, .nc-filtros .campo { align-self: start; }

/* Buscador de la vinculación: el campo y los dos botones, del mismo alto y sobre la
   misma línea. El «Limpiar» es un <a> y el «Buscar» un <button>: sin fijarles el alto
   y el alineado, el enlace queda montado más arriba que el botón. */
.vo-form{align-items:center}
.vo-form input[type=text],
.vo-form .boton, .vo-form .boton-mini{
  height:34px; box-sizing:border-box; display:inline-flex; align-items:center;
  justify-content:center; margin:0;
}
.vo-form input[type=text]{padding:6px 10px;border:1px solid #c7d2de;border-radius:6px;
  font-size:.88rem;font-family:inherit}
.vo-form .boton, .vo-form .boton-mini{padding:0 14px;line-height:1}
.vo-filtros input[type=text], .vo-filtros select, .vo-filtros .boton-mini{
  height:34px; box-sizing:border-box; margin:0;
}
.vo-filtros .boton-mini{display:inline-flex;align-items:center;justify-content:center;padding:0 14px}

/* =====================================================================
 * VINCULACIÓN ONU — dos paneles y los botones AL MEDIO (forma definida
 * por la usuaria 2026-08-27). Reemplaza el layout anterior.
 * =================================================================== */
.vo-paneles{display:grid;grid-template-columns:1fr 132px 1fr;gap:0;align-items:start}
@media (max-width:1250px){.vo-paneles{grid-template-columns:1fr}}
.vo-medio{display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:center;
  padding:0 10px;align-self:center}
@media (max-width:1250px){.vo-medio{flex-direction:row;padding:12px 0}}
.vo-btn{width:112px;box-sizing:border-box;padding:8px 6px;font-size:.82rem;text-align:center;margin:0}
.vo-btn[disabled]{opacity:.45;cursor:not-allowed}

.vo-panel{background:#fff;border:1px solid #dde5ea;border-radius:10px;overflow:hidden}
.vo-panel.vo-der{border-color:#b6d8c1}
.vo-filtros{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;padding:10px 14px;
  border-bottom:1px solid #eef1f5;background:#fbfcfd}
.vo-filtros label{display:flex;flex-direction:column;gap:5px;font-size:.68rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#8496a5}
.vo-filtros input[type=text]{min-width:190px}

/* El atajo a lo que falta, en el rojo de la escala: es el número que hay que bajar. */
.vo-atajo{padding:8px 14px;border-bottom:1px solid #eef1f5;background:#fff}
.vo-solo{font-size:.79rem;color:#9d182b;text-decoration:none;border-bottom:1px dotted #e0a8b2}
.vo-solo:hover{color:#75101f}
.vo-solo.on{color:#0e5a66;border-bottom-color:#9fc9a8;font-weight:600}

/* El código con el que se está trabajando: se muestra completo, con su rubro, porque
   hay códigos parecidos en rubros distintos y elegir el equivocado no se nota después. */
.vo-elegido{padding:11px 14px;background:#f2f9f4;border-bottom:1px solid #eef1f5;font-size:.85rem}
.vo-elegido b{color:#24303d}
.vo-cambiar{display:inline-block;margin-top:5px;font-size:.76rem;color:#1f4e79}

.vo-tp th.c-chk,.vo-tp td.c-chk{width:32px;text-align:center}
.vo-t th.c-erp,.vo-t td.c-erp{width:86px}
.vo-t th.c-pn,.vo-t td.c-pn{width:118px}
.vo-t th.c-ean,.vo-t td.c-ean{width:104px}
.vo-t th.c-peso,.vo-t td.c-peso{width:56px;text-align:right}
.vo-t th.c-dim,.vo-t td.c-dim{width:96px}
.vo-t th.c-org,.vo-t td.c-org{width:96px}
.vo-t th.c-cod,.vo-t td.c-cod{width:96px}
.vo-erp,.vo-ean{font-family:Consolas,monospace;font-size:.73rem;color:#6f8798}
.vo-pn{font-family:Consolas,monospace;font-size:.75rem;color:#1f4e79;word-break:break-all}
.vo-desc{font-size:.79rem;color:#24303d}
.vo-peso,.vo-dim{font-size:.74rem;color:#6f8798;font-variant-numeric:tabular-nums}
.vo-res{max-height:280px}

/* El botón del medio no se parte en dos líneas: con «Todos (200) →» partido, la
   columna de botones deja de leerse como tres acciones del mismo tamaño. */
.vo-medio{padding:0 6px}
.vo-paneles{grid-template-columns:1fr 148px 1fr}
.vo-btn{width:132px;white-space:nowrap}
/* La descripción se corta en dos líneas: un nombre de mayorista puede traer la lista
   entera de modelos compatibles y una sola fila se come la pantalla. El texto completo
   queda en el `title`. */
.vo-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  line-height:1.35;max-height:2.7em}

/* La marca «onu»: círculo verde petróleo con letras blancas. Dice que ese producto YA
   está indexado en algún código —no necesariamente en el que se está trabajando—, y por
   eso NO se lo saca de la lista: no hay exclusividad, un producto responde a varios
   códigos. Corrección de la usuaria (2026-08-27). */
.vo-marca{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:#12707f;color:#fff;font-size:.58rem;font-weight:700;
  letter-spacing:.02em;text-transform:lowercase;vertical-align:middle;margin-left:5px;
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;flex:0 0 auto}
/* Cuando además está en ESTE código, el anillo lo distingue sin cambiarle el color:
   un segundo color diría que es otra cosa, y es la misma marca con más información. */
.vo-marca.aqui{box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #12707f}

/* El agregar-condicion va bajo el formulario del proveedor, en una linea discreta:
   es una accion secundaria y no debe competir con el boton Crear. */
.prov-cond{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 0;padding:9px 12px;
  border:1px dashed #cfdae3;border-radius:9px;background:#fbfcfd;font-size:.82rem;color:#4a5a6a}
.prov-cond input[type=text]{height:32px;box-sizing:border-box;padding:5px 9px;border:1px solid #c7d2de;
  border-radius:6px;font-size:.85rem;font-family:inherit;min-width:190px}
.prov-cond .boton-mini{height:32px;display:inline-flex;align-items:center}

/* La tarjeta del código ONU se amplía: ahí se filtra por rubro, se elige el código y se
   revisa lo asociado — necesita más ancho que el catálogo, donde sólo se marca.
   Pedido de la usuaria (2026-08-27). */
.vo-paneles{grid-template-columns:0.92fr 148px 1.38fr}
@media (max-width:1250px){.vo-paneles{grid-template-columns:1fr}}
/* Fuera peso y dimensiones del panel izquierdo: no se decide con eso si un producto
   responde a un código. El EAN queda junto al Part Number. */
.vo-t th.c-ean,.vo-t td.c-ean{width:112px}
.vo-filtros select{max-width:330px}

/* ⚠️ El recorte a dos líneas va en un <div> DENTRO de la celda, nunca en el <td>:
   `display:-webkit-box` sobre una celda la saca del flujo de la tabla y las filas se
   desarman (se veía la segunda línea cortada por la mitad y el texto encimado). */
td > .vo-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.35;font-size:.79rem;color:#24303d}

/* Los cuatro botones al pie de cada panel: son las preguntas que se hacen mirando ese
   lado, así que viven en su panel y no en una barra general. */
.vo-pie-btn{display:flex;gap:8px;flex-wrap:wrap;padding:11px 14px;border-top:1px solid #eef1f5;
  background:#fafcfd}
.vo-pie-btn .boton-mini{height:30px;display:inline-flex;align-items:center;margin:0}
.vo-reporte{margin-top:14px}
.vo-cerrar{margin-left:12px;font-size:.78rem;color:#1f4e79}
.vo-t th.c-que,.vo-t td.c-que{width:230px}
.vo-chips{display:flex;gap:5px;flex-wrap:wrap}
.vo-chip{display:inline-block;background:#eef4fb;border:1px solid #cfe0ee;color:#1f4e79;
  border-radius:5px;padding:1px 8px;font-family:Consolas,monospace;font-size:.72rem;
  text-decoration:none;white-space:nowrap}
.vo-chip-onu{background:rgba(18,112,127,.1);border-color:#9fc9a8;color:#0e5a66}
.vo-chip-onu:hover{background:rgba(18,112,127,.2)}

/* Los codigos ONU en la matriz y en Buscar producto: van junto al part number, en la
   misma linea de identificadores, porque son otro identificador mas del producto. */
.cat-onus{display:inline-flex;gap:4px;flex-wrap:wrap;vertical-align:middle;margin-left:4px}

/* =====================================================================
 * EL MENÚ EN PESTAÑAS   (2026-08-28)
 * Las secciones dejan de ser una lista apilada y pasan a ser pestañas: se ve
 * UNA sección a la vez. De 81 ítems a la vista se pasa a entre 6 y 21.
 * =================================================================== */
/* GRILLA DE 3 COLUMNAS (decision de la usuaria 2026-08-29, elegida viendo las
   salidas renderizadas). Su regla: 3 botones por fila, maximo 3 columnas, y si a
   futuro se agregan secciones, que crezcan en FILAS. Con `repeat(3,1fr)` eso pasa
   solo: la septima abre fila nueva y nadie tiene que tocar el CSS.
   `1fr` los deja a todos del MISMO ancho —antes cada uno media segun su texto— y
   las celdas de una fila se estiran al mismo alto, asi que siguen homogeneos
   aunque un nombre largo use dos lineas. */
/* `minmax(0,1fr)` y NO `1fr`: `1fr` es minmax(auto,1fr), y ese `auto` no baja del
   min-content, asi que una palabra larga que no se puede partir ensancha su columna
   y la grilla se sale de la barra. Probado con una seccion «Remuneraciones». */
.menu-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;
  padding:0 6px 10px;margin:2px 0 6px;border-bottom:1px solid rgba(255,255,255,.14)}
.menu-tab{border:0;cursor:pointer;font:inherit;font-size:.66rem;font-weight:600;
  padding:4px 3px;border-radius:999px;background:rgba(255,255,255,.09);color:#cfe0df;
  line-height:1.25;text-align:center;box-sizing:border-box;
  /* El nombre que no quepa se corta con PUNTOS SUSPENSIVOS, no partido a la mitad:
     «Contabilida/d» se lee como un defecto, «Contabilid...» se lee como un recorte.
     Y el nombre completo ya esta a un mouse de distancia: cada pestana lleva el
     titulo entero de su seccion en el atributo `title` (Basicas -> «Funciones
     basicas / operativas»). Ademas, con una sola linea TODAS las filas quedan del
     mismo alto pase lo que pase con los nombres. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-tab:hover{background:rgba(255,255,255,.17);color:#fff}
.menu-tab.on{background:#fff;color:#14504f;font-weight:700}
/* La de sistema se distingue: es la de la plataforma, no la de la empresa. */
.menu-tab.menu-seccion-sistema{background:rgba(31,78,121,.45);color:#dce8f4}
.menu-tab.menu-seccion-sistema.on{background:#dce8f4;color:#1f4e79}
.menu-panel{display:none}
.menu-panel.on{display:block}
/* Con la barra contraída a íconos las pestañas estorban más de lo que ayudan. */
.sb-min .menu-tabs{display:none}
.sb-min .menu-panel{display:block}
/* Mientras se busca, todas las pestañas se abren y cada panel dice de cuál es. */
.menu-panel.sb-buscando{display:block}
.menu-panel.sb-buscando:before{content:attr(data-tab);display:block;padding:8px 14px 2px;
  font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#8fb3b1;font-weight:700}
.menu-panel.sb-vacio{display:none}

/* El pie de la barra: la tarjeta de usuario y el cambio de rol bajaron acá (opción A
   de la usuaria, 2026-08-28). Son cosas ocasionales; lo de todos los días va arriba.
   `margin-top:auto` los empuja al fondo cuando sobra alto, y quedan pegados al menú
   cuando no —así nunca flotan sueltos en medio de la barra—. */
.sb-pie{margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.13)}
.sb-pie .usuario-box{margin-bottom:8px}
/* Contraída no caben ni la tarjeta ni los botones de rol: se ocultan enteros. */
.sb-min .sb-pie{display:none}

/* ═══════════════════════════════════════════════════════════════════════════
   REDACTAR EL ESCRITO DE UN RECLAMO  (public/redactar_reclamo.php)
   ═══════════════════════════════════════════════════════════════════════════
   Dos columnas: el escrito a la izquierda —que es lo que se trabaja— y a la
   derecha lo que hay que saber antes de presentarlo. La de la derecha es
   angosta a proposito: es apoyo, no contenido. */
.re-cols { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.re-col  { flex: 1 1 520px; min-width: 0; }
.re-lado { flex: 0 1 300px; }

.re-cab { display: flex; align-items: center; justify-content: space-between;
          gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.re-pl  { font-weight: 700; color: #1f4e79; font-size: .88rem; }
.re-cambia { font-size: .78rem; color: #6f8798; display: flex; align-items: center; gap: 6px; }
.re-cambia select { height: 30px; }

/* Los datos que faltan, en ambar: no impide seguir, pero no se puede pasar por alto.
   Un escrito presentado con un [falta: …] adentro es justo lo que la otra parte usa. */
.re-faltan { background: #fdf6e3; border: 1px solid #e0c98a; border-left: 3px solid #d4a72c;
             border-radius: 6px; padding: 8px 11px; font-size: .8rem; color: #6b5417;
             line-height: 1.5; margin-bottom: 8px; }
.re-faltan code { background: #f6ecd0; padding: 0 3px; border-radius: 3px; }
.re-faltan a { color: #8a6714; }

/* El escrito. Serif y ancho de lectura: se va a leer entero antes de presentarlo,
   y en un tipo de maquina esa lectura cuesta el doble. */
.re-texto { width: 100%; box-sizing: border-box; font-family: Georgia, 'Times New Roman', serif;
            font-size: .88rem; line-height: 1.62; padding: 14px 16px; border: 1px solid #cbd6e2;
            border-radius: 7px; background: #fff; color: #24303d; resize: vertical; }
.re-texto:focus { outline: none; border-color: #1f4e79; box-shadow: 0 0 0 2px rgba(31,78,121,.13); }

.re-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.re-acciones .boton { min-height: 32px; }

/* El aviso de «copiado»: aparece y se va solo. Sin el, no hay forma de saber si el
   boton hizo algo — copiar no deja ninguna senal en la pantalla. */
.re-copiado { font-size: .78rem; color: #1e7e34; font-weight: 600; opacity: 0;
              transition: opacity .18s; }
.re-copiado.on { opacity: 1; }

.re-ojo { border-left: 3px solid #d4a72c; }

.rec-int-redactar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                    margin-top: 8px; padding-top: 8px; border-top: 1px dashed #d8e0e8; }
.rec-int-redactar .muted { font-size: .75rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   ANÁLISIS DE OPORTUNIDAD · COMPRA ÁGIL   (public/analisis_ca.php)
   ═══════════════════════════════════════════════════════════════════════════
   La pantalla responde «¿esta la podía haber ganado, y con qué?». El color hace
   el trabajo de la lectura rápida: rojo sólo lo que exige acción, verde lo que
   salió bien, y todo lo demás en un único tono. */

/* Sin RUT la pantalla entera miente hacia el lado alarmante, así que el aviso va
   arriba de todo y en rojo: es lo único que hay que leer antes de creerle a nada. */
.est-alerta-rut { background: #fdeef2; border: 1px solid #e6b8c2; border-left: 4px solid #9d182b;
                  border-radius: 7px; padding: 11px 14px; margin: 10px 0 16px;
                  font-size: .85rem; color: #75101f; line-height: 1.5; }
.est-alerta-rut strong { display: block; margin-bottom: 3px; }
.est-alerta-rut svg { vertical-align: -2px; margin-right: 5px; }

.est-tabs { display: flex; gap: 4px; margin: 14px 0 16px; border-bottom: 2px solid #dde5ee; }
.est-tab { padding: 8px 16px; font-size: .85rem; font-weight: 600; color: #6f8798;
           border-radius: 7px 7px 0 0; text-decoration: none; display: flex; align-items: center; gap: 6px; }
.est-tab:hover { background: #f2f6fa; color: #1f4e79; }
.est-tab.on { background: #1f4e79; color: #fff; }

.est-cards { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.est-card { flex: 1 1 130px; background: #fff; border: 1px solid #dde5ee; border-radius: 8px;
            padding: 10px 13px; }
.est-card small { display: block; font-size: .72rem; color: #6f8798; margin-bottom: 2px; }
.est-card strong { font-size: 1.35rem; color: #1f4e79; }
.est-card-ok  { border-left: 3px solid #2e7d52; }
.est-card-ok strong { color: #2e7d52; }
.est-card-mal { border-left: 3px solid #9d182b; }
.est-card-mal strong { color: #9d182b; }

.est-filtro { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.est-filtro label { font-size: .76rem; color: #6f8798; display: flex; flex-direction: column; gap: 3px; }
.est-filtro input { height: 34px; box-sizing: border-box; }
.est-filtro .boton-mini { height: 34px; }

/* Los reportes: pestaña propia, y acá se van sumando los que surjan del módulo. */
.est-reps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.est-rep { padding: 7px 13px; font-size: .8rem; border: 1px solid #cbd6e2; border-radius: 999px;
           color: #24303d; text-decoration: none; background: #fff; }
.est-rep:hover { border-color: #1f4e79; }
.est-rep.on { background: #1f4e79; color: #fff; border-color: #1f4e79; }
.est-rep-n { font-weight: 700; margin-left: 4px; opacity: .8; }

.est-cab { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
           background: #fff; border: 1px solid #dde5ee; border-radius: 8px; padding: 14px 16px; }
.est-cod { font-family: ui-monospace, monospace; font-weight: 700; color: #1f4e79; }
.est-org { color: #6f8798; font-size: .85rem; margin-left: 8px; }
.est-nom { margin-top: 4px; font-size: .88rem; color: #24303d; }
.est-cab-num { display: flex; gap: 22px; }
.est-cab-num small { display: block; font-size: .7rem; color: #6f8798; }
.est-cab-num strong { font-size: 1rem; color: #24303d; }

/* LA BRECHA: el número que ordena todo. Su color ES el veredicto. */
.est-brecha { margin: 14px 0; padding: 14px 16px; border-radius: 8px; border: 1px solid #dde5ee;
              background: #fff; border-left-width: 5px; }
.est-veredicto { font-weight: 700; font-size: .95rem; margin-bottom: 6px; }
.est-brecha-num { font-size: .9rem; color: #24303d; }
.est-brecha-num strong { font-size: 1.5rem; margin: 0 6px; }
.est-brecha-num em { font-style: normal; color: #6f8798; margin-left: 8px; }
.est-v-ganada     { border-left-color: #2e7d52; } .est-v-ganada .est-veredicto { color: #2e7d52; }
.est-v-ganable    { border-left-color: #c8860d; } .est-v-ganable .est-veredicto { color: #8a6714; }
.est-v-no_ganable { border-left-color: #6f8798; } .est-v-no_ganable .est-veredicto { color: #55697a; }
.est-v-sin_oferta { border-left-color: #9d182b; background: #fdeef2; }
.est-v-sin_oferta .est-veredicto { color: #9d182b; }
.est-sin { line-height: 1.55; }

.est-h3 { margin: 20px 0 8px; font-size: .95rem; color: #1f4e79;
          display: flex; align-items: center; gap: 7px; }

.est-ofertas .num, .est-lista .num, .est-esc .num { text-align: right; white-space: nowrap; }
.est-rut { font-family: ui-monospace, monospace; font-size: .8rem; color: #6f8798; }
/* La fila propia se distingue con fondo, no con otro color de letra: hay que
   encontrarla de un vistazo dentro de una lista de seis. */
.est-nuestra { background: #eaf2fb !important; box-shadow: inset 3px 0 0 #1f4e79; }
/* LA FILA DEL SELECCIONADO se pinta entera. Antes solo llevaba un badge chico y se perdia
   entre diecisiete filas —mientras que la fila PROPIA si tenia fondo—, justo al reves de lo
   que se busca en un analisis: lo primero es ver quien gano. */
.est-selec { background: #e9f6ee !important; box-shadow: inset 3px 0 0 #2e7d52; }
.est-selec td { font-weight: 600; }
/* Si la que gano es la tuya: se conserva el verde (gano) y el filete pasa a azul (es tuya),
   asi se leen las dos cosas de una vez. */
.est-selec.est-nuestra { background: #e9f6ee !important; box-shadow: inset 4px 0 0 #1f4e79; }
/* TU OFERTA CUANDO PERDIO: rosado. El color dice el RESULTADO, no de quien es la fila —antes
   era azul y solo decia "esta es la tuya", que es lo que uno ya sabe—. Si la tuya gano, manda
   el verde de arriba: importa mas como te fue. */
.est-perdida { background: #fdeef2 !important; box-shadow: inset 3px 0 0 #c33044; }
.est-perdida td { font-weight: 600; }
/* Que te declaren INADMISIBLE no es perder por precio: es no haber competido. Se destaca. */
.est-inadm-mia { background: #fff; border: 1px solid #f0c8d2; border-radius: 5px;
                 padding: 4px 8px; margin-top: 5px; color: #9d182b; font-size: .78rem; }
/* El badge, del mismo peso que el de "tu oferta": se distinguen por color, no por tamano. */
.est-gano { background: #2e7d52; color: #fff; font-size: .68rem; font-weight: 700;
            padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
.est-tu   { background: #1f4e79; color: #fff; font-size: .68rem; font-weight: 700;
            padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
.est-emt  { background: #f2f6fa; color: #6f8798; font-size: .66rem;
            padding: 1px 6px; border-radius: 999px; margin-left: 5px; }
.est-inadm { font-size: .74rem; color: #9d182b; margin-top: 3px; }
.est-delta { font-size: .76rem; color: #6f8798; }
.est-nota-precio { background: #fdf6e3; border-left: 3px solid #d4a72c; border-radius: 6px;
                   padding: 8px 12px; font-size: .82rem; color: #6b5417; }
.est-nomasbarato { font-size: .68rem; color: #8a6714; background: #fdf6e3;
                   padding: 1px 6px; border-radius: 999px; margin-left: 5px; }

.est-crit { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.est-crit select { height: 34px; min-width: 210px; }
.est-crit input[type=text] { height: 34px; width: 100%; box-sizing: border-box; }
/* Cada campo con su etiqueta y alineados por la base: sin etiqueta, el select y el texto
   parecian una sola cosa y el boton, de los dos. */
.est-crit { align-items: flex-end !important; }
.est-crit-lbl { display: flex; flex-direction: column; gap: 3px; font-size: .78rem;
                color: #6f8798; margin: 0; }
.est-crit-nota { flex: 1 1 300px; }
.est-crit-btn { height: 34px; }
.est-crit-nuevo { display: flex; gap: 8px; align-items: center; }
.est-crit-nuevo input { height: 30px; flex: 0 1 340px; font-size: .8rem; }

/* LOS TRES SUPUESTOS. Van en cajas iguales a propósito: son la misma ecuación
   despejada por tres lados, ninguno manda sobre los otros. */
.est-sup { display: flex; gap: 12px; flex-wrap: wrap; }
.est-sup-caja { flex: 1 1 290px; background: #fff; border: 1px solid #dde5ee;
                border-radius: 8px; padding: 12px 14px; }
.est-sup-t { font-weight: 700; color: #1f4e79; font-size: .88rem; }
.est-sup-sub { font-size: .72rem; color: #6f8798; margin-bottom: 8px; }
.est-sup-num { font-size: 1.05rem; color: #24303d; margin-bottom: 8px; }
.est-sup-lee { font-size: .8rem; color: #55697a; line-height: 1.5; }
.est-sup-partes { font-size: .72rem; color: #6f8798; margin-top: 7px;
                  padding-top: 6px; border-top: 1px dashed #dde5ee; }
/* Cuando el supuesto no se sostiene se ve distinto: es una advertencia, no un dato. */
.est-sup-duda { background: #fdf6e3; border-color: #e0c98a; }
.est-sup-duda .est-sup-t { color: #8a6714; }

.est-esc-tope { background: #f2f6fa; font-weight: 600; }
.est-si { color: #2e7d52; font-weight: 700; }
.est-no { color: #6f8798; }
.est-mal  { color: #9d182b; font-weight: 600; }
.est-bien { color: #2e7d52; font-weight: 600; }
.est-mal em, .est-bien em { font-style: normal; font-weight: 400; opacity: .75; margin-left: 4px; }

.est-clase { font-size: .72rem; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.est-c-adjudicadas { background: #e6f4ec; color: #2e7d52; }
.est-c-perdidas    { background: #f2f6fa; color: #55697a; }
.est-c-sin_oferta  { background: #fdeef2; color: #9d182b; font-weight: 700; }
.est-c-pendiente   { background: #f7f9fb; color: #8fa3b3; }

.est-ayuda-rep { background: #fdeef2; border-left: 3px solid #9d182b; border-radius: 6px;
                 padding: 9px 13px; font-size: .82rem; color: #75101f; line-height: 1.5; }
.est-vacio-caso { background: #f7f9fb; border: 1px dashed #cbd6e2; border-radius: 8px;
                  padding: 16px; margin: 14px 0; }
.est-pie { margin-top: 16px; font-size: .78rem; color: #6f8798; }
.est-pie svg { vertical-align: -2px; margin-right: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   FOLIOS — pestaña del Catálogo   (public/folios.php)
   ═══════════════════════════════════════════════════════════════════════════
   Una caja por folio, todas iguales. La pantalla es una lista a propósito: el
   día que se sume un folio nuevo entra con la misma forma que los demás, sin
   que nadie tenga que decidir dónde ponerlo. */
.fol-grid { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.fol-caja { flex: 1 1 300px; background: #fff; border: 1px solid #dde5ee;
            border-radius: 8px; padding: 14px 16px; }
.fol-caja h3 { margin: 0 0 4px; font-size: .92rem; color: #1f4e79;
               display: flex; align-items: center; gap: 7px; }
.fol-ayuda { font-size: .78rem; color: #6f8798; line-height: 1.45; margin: 0 0 10px; }

/* El estado va ANTES del formulario: primero se ve en qué está la numeración y
   después se decide si hay algo que cambiar. Al revés, uno escribe un número sin
   saber contra qué. */
.fol-estado { display: flex; gap: 20px; padding: 9px 0; margin-bottom: 10px;
              border-top: 1px solid #eef2f6; border-bottom: 1px solid #eef2f6; }
.fol-estado small { display: block; font-size: .7rem; color: #6f8798; }
.fol-estado strong { font-size: .95rem; color: #24303d; }
.fol-prox { color: #1f4e79 !important; font-family: ui-monospace, monospace; }

.fol-form { display: flex; gap: 8px; align-items: flex-end; }
.fol-form label { font-size: .74rem; color: #6f8798; display: flex; flex-direction: column; gap: 3px; }
.fol-form input { height: 32px; width: 130px; box-sizing: border-box; }
.fol-form .boton-mini { height: 32px; }

.fol-pie { font-size: .78rem; color: #6f8798; margin-top: 6px; }
.fol-pie svg { vertical-align: -2px; margin-right: 4px; }

/* Las dos pestanas de canal de Cotizacion: Compra Agil y Otros MP. Mismo lenguaje
   que las del Catalogo — la activa en azul solido, para saber donde se esta. */
.pp-canales { display:flex; gap:6px; margin:0 0 12px; }
.pp-canal { display:flex; align-items:center; gap:6px; padding:8px 16px; font-size:.85rem;
            font-weight:600; color:#4a5a6a; background:#eef2f6; border:1px solid #dde5ea;
            border-radius:8px; text-decoration:none; }
.pp-canal:hover { background:#e4ebf1; color:#1f4e79; }
.pp-canal.on { background:#1f4e79; color:#fff; border-color:#1f4e79; }

.pp-nuevo h3 { display:flex; align-items:center; gap:7px; margin:0 0 4px; font-size:.95rem; color:#1f4e79; }
.pp-buscar { display:flex; gap:8px; margin:10px 0; }
.pp-buscar input { flex:1 1 420px; max-width:520px; height:34px; box-sizing:border-box;
                   padding:6px 10px; border:1px solid #c7d2de; border-radius:6px; }
.pp-buscar .boton-mini { height:34px; }
.pp-unidades .num { text-align:right; }
.pp-cod { font-family:ui-monospace,monospace; font-weight:700; color:#1f4e79; }
.pp-rut { font-family:ui-monospace,monospace; font-size:.8rem; color:#6f8798; }
.pp-ayuda { font-size:.78rem; margin-top:8px; }

/* LA BARRA DE COTIZACIONES: Dashboard y las pestanas de canal en UNA linea, con el
   color alternado (usuaria 2026-08-29) para que el ojo las separe sin leerlas.
   La activa va en azul solido, el mismo «aqui estas» del Catalogo y del menu. */
.coti-barra { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:0 0 12px; }
.cb-btn { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 15px;
          font-size:.85rem; font-weight:600; border-radius:8px; text-decoration:none;
          border:1px solid transparent; box-sizing:border-box; white-space:nowrap; }
/* El Dashboard es de otra naturaleza —una vista, no un filtro— y por eso lleva su
   propio tono y va separado del par de canales. */
.cb-dash { background:#1f4e79; color:#fff; margin-right:10px; }
.cb-dash:hover { background:#1a4267; color:#fff; }
.cb-canal { background:#eef2f6; color:#4a5a6a; border-color:#dde5ea; }
.cb-canal.cb-alt { background:#e3ebf3; }

/* LAS VISTAS, dentro de un mismo marco: se lee que son alternativas entre si y no una
   lista de botones sueltos. Y la linea separa el RESUMEN —que es otra pantalla— de las
   vistas de la lista. Opcion D, elegida por la usuaria el 2026-08-30 viendo las cuatro. */
.cb-sep { width:1px; height:24px; background:#d7e0ea; margin:0 9px; flex:0 0 auto; }
.cb-vistas { display:inline-flex; gap:4px; background:#eef2f6; border:1px solid #dde5ea;
             border-radius:9px; padding:3px; }
.cb-vistas .cb-canal { background:transparent; border-color:transparent; height:28px; }
.cb-vistas .cb-canal:hover { background:#dbe5ee; }
.cb-vistas .cb-canal.on { background:#12707f; color:#fff; }
.cb-vistas .cb-canal.on:hover { background:#0f5e6b; }
.cb-canal:hover { background:#dbe5ee; color:#1f4e79; }
.cb-canal.on { background:#12707f; color:#fff; border-color:#12707f; }
.cb-canal.on:hover { background:#0f5e6b; color:#fff; }

/* La linea que dice QUE hacer con la tabla de unidades. Sin esto, la pantalla mostraba
   un buscador y una tabla sin decir que el boton de crear vive en cada fila. */
.pp-como { font-size:.8rem; color:#1f4e79; background:#eef4fb; border-left:3px solid #1f4e79;
           border-radius:6px; padding:7px 11px; margin:6px 0 10px; }
.pp-como svg { vertical-align:-2px; margin-right:5px; }

.pp-cab { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.pp-cab .muted { max-width:78ch; margin:4px 0 0; }
.pp-hacer { white-space:nowrap; flex:0 0 auto; }
.pp-elegir { margin-top:14px; padding-top:12px; border-top:1px solid #e6ecf2; }

/* Un titulo de seccion que ademas es un enlace: se comporta como los demas items al
   pasar el mouse, para que se note que lleva a alguna parte. Sin esto parecia un
   rotulo muerto y nadie lo pinchaba. */
.menu-titulo-link { cursor: pointer; }
.menu-titulo-link:hover { background: rgba(255,255,255,.10); color: #fff; }

/* El desglose de detalles pendientes: cuatro razones que SUMAN el total, para poder
   responder «¿estan todos OK?» en vez de comparar numeros que miden cosas distintas. */
.det-desglose { background:#fff; border:1px solid #dde5ee; border-radius:8px; padding:12px 14px; margin:12px 0; }
.det-desglose h4 { margin:0 0 8px; font-size:.9rem; color:#1f4e79; display:flex; align-items:center; gap:7px; }
.det-tab th { text-align:left; font-weight:600; color:#24303d; width:210px; }
.det-tab .num { text-align:right; width:80px; font-variant-numeric:tabular-nums; }
.det-tab td { font-size:.8rem; color:#6f8798; line-height:1.45; }
.det-tab .dd-ok .num, .det-tab .dd-ok th { color:#1f4e79; }
.det-tab .dd-mal .num, .det-tab .dd-mal th { color:#9d182b; }
.det-lee { font-size:.8rem; color:#55697a; margin:10px 0 0; padding-top:8px; border-top:1px dashed #dde5ee; }
.det-lee svg { vertical-align:-2px; margin-right:5px; }

/* Aviso de lista recortada: la consulta llego a su tope de filas y hay mas. Se dice en
   vez de callarlo — una lista truncada en silencio se lee como «esto es todo lo que hay». */
.op-tope { background:#fdf6e3; border-left:3px solid #d4a72c; border-radius:6px;
           padding:8px 12px; margin:8px 0; font-size:.82rem; color:#6b5417; line-height:1.5; }
.op-tope svg { vertical-align:-2px; margin-right:5px; }

/* Pie del detalle de una oportunidad: su propio "Cerrar", porque con el detalle
   abierto el boton de arriba puede quedar fuera de la pantalla. */
.det-pie { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #dde5ee; text-align: right; }
.det-pie .boton { display: inline-flex; align-items: center; gap: 5px; }
.ver-det { display: inline-flex; align-items: center; gap: 4px; }
.ver-det.det-abierto { background: #12707f; border-color: #12707f; color: #fff; }

/* Modulos por empresa: acceso por encima del plan contratado (pruebas gratis y el "todo"). */
.mex-plan { background:#eef4fb; border-left:3px solid #1f4e79; border-radius:6px; padding:10px 14px; margin:14px 0; }
.mex-plan h3 { margin:0 0 6px; font-size:.92rem; display:flex; align-items:center; gap:7px; }
.mex-chip { display:inline-block; background:#fff; border:1px solid #cfdcea; border-radius:11px;
            padding:1px 9px; margin:2px 3px 2px 0; font-size:.76rem; color:#1f4e79; }
.mex-form { background:#fff; border:1px solid #dde5ee; border-radius:8px; padding:12px 14px; margin-bottom:16px; }
/* Las cuatro celdas miden lo mismo y se alinean por su BASE, asi los cuatro controles
   quedan a la misma altura. La ayuda de la fecha salio de su celda —ahi dentro la
   alargaba y descolgaba el boton— y ahora es el pie de la fila. */
.mex-grid { display:grid; grid-template-columns:minmax(0,1.3fr) 150px minmax(0,2fr) auto;
            gap:12px; align-items:end; }
.mex-grid label { display:flex; flex-direction:column; gap:4px; font-size:.8rem; color:#24303d; margin:0; }
.mex-grid select, .mex-grid input, .mex-acc .boton { height:34px; box-sizing:border-box; margin:0; }
.mex-ayuda { font-size:.72rem; color:#6f8798; line-height:1.35; }
.mex-pie { margin:9px 0 0; }
.mex-acc .boton { display:inline-flex; align-items:center; justify-content:center; gap:5px;
                  white-space:nowrap; padding:0 16px; }
.mex-est { display:inline-block; border-radius:10px; padding:1px 9px; font-size:.74rem; }
.mex-on  { background:#e6f4ec; color:#1e7e34; }
.mex-off { background:#f0f0f0; color:#7a7a7a; }
.mex-nota { background:#fdf6e3; border-left:3px solid #d4a72c; border-radius:6px;
            padding:10px 14px; margin-top:18px; font-size:.8rem; color:#6b5417; line-height:1.55; }
.mex-nota p { margin:0 0 7px; }
.mex-nota p:last-child { margin-bottom:0; }
@media (max-width: 900px) { .mex-grid { grid-template-columns:1fr; } }

/* El N de oportunidad, escribible desde el editor: se puede hacer la cotizacion primero
   y enlazarla despues. Si la oportunidad no esta en la base, el numero se guarda igual
   (es la referencia del proceso) y se marca que no vino ningun dato. */
.op-enlace { display:flex; align-items:center; gap:8px; }
.op-enlace-form { display:inline-flex; align-items:center; gap:6px; margin:0; }
.op-enlace-form input[type=text] { width:190px; height:26px; font-size:.8rem; box-sizing:border-box; }
.op-enlace-form .boton { height:26px; display:inline-flex; align-items:center; gap:4px; }
.op-traer { font-size:.76rem; color:#6f8798; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.op-sin-datos { font-size:.74rem; color:#8a6714; background:#fdf6e3; border:1px solid #e8d9a8;
                border-radius:10px; padding:1px 8px; white-space:nowrap; }

/* El resumen cuando YA estas en el: se marca y deja de ser un enlace a si mismo.
   Sin esto, desde el Dashboard no se veia donde uno estaba ni como volver. */
.cb-btn.cb-aqui { background:#12707f; border-color:#12707f; cursor:default; }
.cb-btn.cb-aqui:hover { background:#12707f; }

/* Canales de venta: lo que cobra cada canal por vender a traves de el. */
.cv-form { margin-bottom:18px; }
.cv-form h3 { margin:0 0 12px; display:flex; align-items:center; gap:7px; font-size:.95rem; }
.cv-fila { display:flex; flex-wrap:wrap; gap:14px; align-items:end; margin-bottom:10px; }
.cv-fila label { display:flex; flex-direction:column; gap:4px; font-size:.8rem; color:#24303d; margin:0; }
.cv-fila input[type=text], .cv-fila input[type=number], .cv-fila select { height:34px; box-sizing:border-box; }
.cv-fila input[type=text] { width:230px; }
.cv-fila input[type=number] { width:96px; }
.cv-check { flex-direction:row !important; align-items:center; gap:6px !important; height:34px; }
.cv-jefe { font-size:.87rem; margin-bottom:8px; }
/* El % y las UF pegados a su casilla: sin el signo, un 2 puede leerse como 2% o como 2 UF. */
.cv-pct { display:inline-flex; align-items:center; gap:5px; }
.cv-signo { font-size:.82rem; color:#6f8798; font-weight:600; }
.cv-comision { border-top:1px dashed #dde5ee; padding-top:12px; margin-top:6px; }
/* Apagado el check, los datos de la comision quedan a la vista pero inertes: se entiende
   que existen y que dependen de esa casilla, en vez de desaparecer sin explicacion. */
.cv-datos.cv-off { opacity:.42; pointer-events:none; }
.cv-ayuda { font-size:.76rem; color:#6f8798; line-height:1.5; margin:4px 0 0; max-width:78ch; }
.cv-ayuda svg { vertical-align:-2px; margin-right:4px; }
.cv-acc { margin-top:12px; display:flex; gap:8px; }
.cv-acc .boton { display:inline-flex; align-items:center; gap:5px; }
.cv-tabla .num { text-align:right; font-variant-numeric:tabular-nums; }
.cv-inactivo { opacity:.6; }
.cv-falta { font-size:.76rem; color:#9d182b; background:#fdeef2; border-radius:10px; padding:1px 8px; }

/* El canal de venta se ELIGE en la cotizacion: define la comision, que es un costo real. */
.canal-sel { display:inline-block; margin:0; }
.canal-sel select { height:26px; font-size:.8rem; max-width:230px; }
.canal-com { font-size:.74rem; color:#8a6714; background:#fdf6e3; border:1px solid #e8d9a8;
             border-radius:10px; padding:1px 8px; margin-left:6px; white-space:nowrap; }
.canal-falta { font-size:.74rem; color:#9d182b; background:#fdeef2; border:1px solid #f0c8d2;
               border-radius:10px; padding:1px 8px; margin-left:6px; }

/* La alerta de la comision: dice cuanto subir el margen objetivo, no lo sube sola. */
.fila-alerta-com td { padding: 0 !important; border: 0 !important; }
.alerta-com { display:flex; gap:9px; align-items:flex-start; background:#fdf6e3;
              border-left:3px solid #d4a72c; border-radius:6px; padding:9px 12px; margin:8px 0;
              font-size:.8rem; color:#6b5417; line-height:1.55; }
.alerta-com svg { flex:0 0 auto; margin-top:2px; }
.alerta-com .muted { display:block; font-size:.74rem; margin-top:4px; }

/* Crear cliente, junto al buscador: antes vivia debajo de la tabla y no se veia. */
.cli-nuevo { display:inline-flex; align-items:center; gap:5px; margin-left:8px; height:34px;
             box-sizing:border-box; }

/* Los numeros del equipo llevan a su detalle en Seguimiento. El cero NO es enlace: no
   tiene nada que mostrar, y un enlace que abre una lista vacia se siente roto. */
.dash-ver { color:#1f4e79; font-weight:600; text-decoration:none;
            border-bottom:1px dotted #9db6cd; }
.dash-ver:hover { color:#12707f; border-bottom-color:#12707f; }
.dash-cero { color:#aab6c2; }
.dash-pista { margin:-6px 0 10px; font-size:.8rem; }

/* Lo que el modulo va a tener pero aun no existe: se ve, apagado y rotulado. Prometer un
   boton que no lleva a ninguna parte es peor que decir que todavia no esta. */
.cb-pronto { opacity:.5; cursor:default; }
.cb-etq { font-style:normal; font-size:.66rem; background:#dde5ea; color:#5b6b7a;
          border-radius:8px; padding:0 6px; margin-left:6px; }

/* EL ESTADO, con su color (usuaria 2026-08-30): adjudicada verde, perdida rojo, sin
   resolver ambar. Un estado en gris obliga a leerlo; en color se reconoce de un vistazo,
   que es de lo que se trata cuando la lista tiene veinte filas. */
.est-clase { display:inline-block; border-radius:999px; padding:1px 9px; font-size:.72rem;
             font-weight:600; white-space:nowrap; }
.est-c-adjudicadas { background:#e6f4ec; color:#1e7e34; }
.est-c-perdidas    { background:#fdeef2; color:#9d182b; }
.est-c-pendiente   { background:#fdf6e3; color:#8a6714; }
/* Sin oferta en MP no es un resultado: es que la cotizacion no llego a presentarse. Va
   aparte y en el rojo mas oscuro, porque es lo que hay que salir a revisar. */
.est-c-sin_oferta  { background:#75101f; color:#fff; }

/* Aviso de marcas pendientes en la vista de Reclamos: son un PASO PREVIO que vive en
   otra vista, asi que hay que decir que estan ahi o se olvidan. (2026-08-30) */
.rec-pend-aviso{margin:10px 0 14px;padding:8px 12px;
  background:#fdf6e3;border:1px solid #e0c98a;border-left:3px solid #d4a72c;border-radius:5px;
  font-size:.86rem;color:#6b551a}
.rec-pend-aviso a{color:#12707f;font-weight:600;text-decoration:underline}

/* ── EL INFORME DE ANALISIS, IMPRESO (usuaria 2026-08-30) ─────────────────────────────
   Mismo camino que la Hoja de Presupuesto: Ctrl+P -> Guardar como PDF. Se imprime la
   pantalla, no una version aparte, para que no puedan desincronizarse. */
.est-tabs-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.est-imprimir{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.est-print-cab{display:none}

@media print{
    .sidebar,.barra-lateral,.menu,aside,.no-print,.flash,.barra-superior,.salir,
    .coti-barra,.est-tabs,.est-tabs-fila,.est-filtro,.est-crit,.est-crit-nuevo,
    .est-alerta-rut{display:none !important}
    .contenido{max-width:none !important;margin:0 !important;padding:0 !important}
    /* el titulo lo pone la cabecera del papel: en pantalla el h2, impreso no (salia dos veces) */
    .contenido>h1,.intro,.cmp-titulo{display:none}
    body{background:#fff !important}
    /* la cabecera del papel: de quien es, que es y cuando se saco */
    .est-print-cab{display:block;border-bottom:2px solid #1f4e79;padding-bottom:6px;margin-bottom:12px}
    .est-print-emp{font-size:9pt;color:#5a6a7a;text-transform:uppercase;letter-spacing:.04em}
    .est-print-t{font-size:13pt;font-weight:700;color:#1f4e79}
    .est-print-f{font-size:8.5pt;color:#8a97a6}
    /* que no se parta una tabla ni una tarjeta a la mitad de una hoja */
    .est-cab,.est-card,.est-sup,.est-veredicto,.est-reps{page-break-inside:avoid}
    table.est-lista tr,.tabla tr{page-break-inside:avoid}
    thead{display:table-header-group}   /* los titulos se repiten en cada hoja */
    a{text-decoration:none;color:inherit}
    /* el RUT no se parte en dos lineas: es un identificador, cortado no se lee */
    .est-rut{white-space:nowrap;font-size:8pt;letter-spacing:0}
    /* la ayuda de pantalla no va al papel; el criterio anotado si */
    .cmp-ayuda{display:none}
}

/* El criterio anotado: en pantalla lo muestra el formulario, impreso va como dato.
   Las dos reglas van JUNTAS y al final: con la suelta despues del @media print,
   el mismo peso hacia ganar a la ultima y el dato no se imprimia. */
.est-crit-print{display:none}
@media print{ .est-crit-print{display:block;margin:2px 0 10px;font-size:9.5pt} }

@media print{
    /* apretado: en pantalla el aire se agradece, en papel cuesta hojas */
    .est-h3{margin:9px 0 3px;font-size:11pt}
    .tabla th,.tabla td{padding:3px 6px;font-size:8.5pt}
    .est-cab{padding:8px 10px;margin-bottom:8px}
    .est-veredicto{padding:8px 12px;margin:8px 0}
    .est-nota-precio{margin:6px 0;padding:6px 10px;font-size:8.5pt}
    .est-crit-bloque{page-break-inside:avoid}
}

/* Gestion de Tesoreria: la puerta de un modulo que todavia no existe. Muestra el PLAN
   (usuaria 2026-08-30: "si les puse el nombre es por algo") sin prometer botones que no
   llevan a ninguna parte. */
.tes-aviso{display:flex;gap:9px;align-items:flex-start;margin:12px 0 16px;padding:10px 14px;
  background:#fdf6e3;border:1px solid #e0c98a;border-left:3px solid #d4a72c;border-radius:6px;
  font-size:.87rem;color:#6b551a;max-width:900px}
/* 2x2: con cuatro tarjetas, tres arriba y una sola abajo se lee como un error de armado */
.tes-plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:12px;max-width:760px}
.tes-card{background:#fff;border:1px solid #dfe6ee;border-radius:7px;padding:12px 14px}
.tes-card h3{display:flex;align-items:center;gap:7px;margin:0 0 6px;font-size:.95rem;color:#1f4e79}
.tes-card p{margin:0 0 6px;font-size:.85rem;color:#4a5765;line-height:1.45}
.tes-nota{color:#6a7684 !important;font-size:.79rem !important;border-top:1px solid #eef2f6;padding-top:6px}

/* ── OC DE MERCADO PUBLICO en Gestion Documental (usuaria 2026-08-30) ────────────────
   Cargar el listado historico que entrega la plataforma. Se sube, se ve QUE trae, y
   recien despues se guarda: aca se esta tocando el pivote del negocio. */
.oc-donde{background:#eef4fb;border:1px solid #cfe0f0;border-left:3px solid #1f4e79;
  border-radius:6px;padding:10px 14px;margin:12px 0;max-width:760px}
/* SOLO el titulo: con `.oc-donde strong` el display:flex se lo comia a todas las
   negritas del parrafo y cada una saltaba a su propia linea. */
.oc-donde>strong{display:flex;align-items:center;gap:7px;color:#1f4e79;font-size:.9rem}
.oc-donde p{margin:5px 0 0;font-size:.85rem;color:#4a5765;line-height:1.5}
.oc-ajenas{background:#fdeef2;border:1px solid #e8c2cc;
  border-left:3px solid #c33044;border-radius:5px;padding:8px 12px;margin:10px 0;
  font-size:.85rem;color:#75101f}
.oc-que-hace{background:rgba(18,112,127,.09);
  border:1px solid #bcd9dd;border-left:3px solid #12707f;border-radius:5px;padding:9px 13px;
  margin:12px 0;font-size:.85rem;color:#0e4a52;line-height:1.5;max-width:760px}
.tabla.oc-prev{margin-top:10px}
.tabla.oc-prev td,.tabla.oc-prev th{font-size:.82rem}
.oc-etq{display:inline-block;padding:1px 7px;border-radius:9px;font-size:.72rem;font-weight:600}
.oc-new{background:#e3f3ea;color:#1e7e34;border:1px solid #b9dfc8}
.oc-ya{background:#eef1f5;color:#6a7684;border:1px solid #dbe2ea}
.oc-mas{font-size:.8rem;margin:6px 0 0}
.oc-confirmar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.oc-chk{display:flex;align-items:center;gap:6px;font-size:.84rem;color:#75101f}

/* El icono de estos avisos va INLINE. Antes el recuadro era display:flex y eso convertia
   cada <strong> del parrafo en una celda: las negritas saltaban de linea y la frase se
   leia rota. flex sirve para hijos de bloque, no para texto corrido. */
.oc-ajenas>.ico,.oc-que-hace>.ico,.rec-pend-aviso>.ico{vertical-align:-2px;margin-right:6px}

/* ── Gestion de Venta: dos arreglos que la usuaria vio en pantalla (2026-08-30) ──
   1) BLANCO SOBRE BLANCO. `.tabla .venta-estado` apaga el fondo con !important (es la
      regla del rediseno: en una tabla el estado va como TEXTO, no como capsula), pero
      `.ve-recepcion_conforme` era el unico con letra BLANCA -> quedaba invisible.
      Ahora lleva color propio, mas oscuro que 'aceptada' porque es un paso mas adelante.
   2) LOS NUMEROS A LA DERECHA. `.num` solo alineaba dentro de `.tabla-items`, asi que
      en el resto de las tablas la clase no hacia nada y los montos quedaban a la
      izquierda. Un monto que no alinea por la unidad no se puede comparar de un vistazo. */
.tabla .ve-recepcion_conforme, .tabla .vf-pagada { color:#14603a; font-weight:600; }
.tabla td.num, .tabla th.num { text-align:right; white-space:nowrap; }
.tabla td.cen, .tabla th.cen { text-align:center; }
.tabla td.nowrap { white-space:nowrap; }
.oc-sin-op{background:#fdf6e3;border:1px solid #e0c98a;border-left:3px solid #d4a72c;
  border-radius:5px;padding:9px 13px;margin:10px 0;font-size:.85rem;color:#6b551a;line-height:1.5;
  max-width:820px}
.oc-sin-op>.ico{vertical-align:-2px;margin-right:6px}

/* ── EL TICKET DE LA API DE MERCADO PUBLICO (usuaria 2026-08-30) ─────────────────────
   Dos capas con la misma tarjeta: el del CLIENTE en Mi plan, el de la PLATAFORMA en
   Configuracion del Sistema. La luz dice de un vistazo si esta conectado. */
.mpt-caja{background:#fff;border:1px solid #dfe6ee;border-radius:8px;padding:14px 16px;
  margin:10px 0 18px;max-width:820px}
.mpt-caja.mpt-on{border-left:3px solid #1e7e34}
.mpt-caja.mpt-off{border-left:3px solid #d4a72c}
.mpt-plat{border-left:3px solid #1f4e79}
.mpt-estado{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:.88rem;color:#3d4a57}
.mpt-luz{flex:0 0 auto;width:11px;height:11px;border-radius:50%;margin-top:4px}
.mpt-luz-on{background:#1e7e34;box-shadow:0 0 0 3px rgba(30,126,52,.15)}
.mpt-luz-off{background:#d4a72c;box-shadow:0 0 0 3px rgba(212,167,44,.15)}
.mpt-cod{font-family:ui-monospace,Consolas,monospace;font-size:.84rem;color:#1f4e79;
  background:#eef4fb;border:1px solid #cfe0f0;border-radius:4px;padding:1px 7px;margin-left:5px}
.mpt-fecha{font-size:.78rem;color:#8a97a6;margin-top:3px}
.mpt-que{margin:10px 0 4px;font-size:.85rem;color:#3d4a57;font-weight:600}
.mpt-lista{margin:0 0 10px;padding-left:20px;font-size:.85rem;color:#4a5765;line-height:1.55}
.mpt-porque,.mpt-donde{font-size:.83rem;line-height:1.5;margin:8px 0;padding:8px 12px;border-radius:5px}
.mpt-porque{background:rgba(18,112,127,.09);border:1px solid #bcd9dd;color:#0e4a52}
.mpt-donde{background:#eef4fb;border:1px solid #cfe0f0;color:#2a4560}
.mpt-porque>.ico,.mpt-donde>.ico{vertical-align:-2px;margin-right:6px}
.mpt-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:10px}
/* El ticket son 36 caracteres: el campo tiene que mostrarlos enteros, o el formato
   del marcador queda cortado y no se entiende que hay que pegar. */
.mpt-ancho{flex:1 1 380px;min-width:380px;max-width:440px}
/* Con `.mpt-ancho input` perdia: la regla global es `.lf-campo input[type=text]`, que
   pesa mas y fija 170px. Se iguala el peso del selector para poder ganarle. */
.mpt-ancho input[type=text]{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:.86rem}
.mpt-nota{font-size:.79rem;color:#8a97a6;margin:8px 0 0;line-height:1.5}
.traer-op-off{opacity:.75}
.mpt-apagado{font-size:.82rem;color:#8a6714;background:#fdf6e3;border:1px solid #e0c98a;
  border-radius:5px;padding:6px 11px;display:inline-block;line-height:1.5}
.mpt-apagado>.ico{vertical-align:-2px;margin-right:5px}
.mpt-apagado a{color:#12707f;font-weight:600;text-decoration:underline}

/* ── TARJETAS DE DASHBOARD (usuaria 2026-08-30) ──────────────────────────────────────
   *"los temas deberian estar marcados como en una tarjeta... asi como esta, se ve todo
   muy plano y sin diferenciacion"*. Los h3 colgaban del fondo y nada separaba una
   seccion de la siguiente. Cada tema va en su caja, con su titulo dentro. */
.dash-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:14px 16px;
  margin:0 0 14px}
.dash-card>h3{display:flex;align-items:center;gap:7px;margin:0 0 10px;padding-bottom:8px;
  border-bottom:1px solid #eef2f7;font-size:.95rem;color:#1f4e79}
.dash-card>p.muted{margin:-2px 0 10px;font-size:.83rem;line-height:1.5}
.dash-card>.tabla,.dash-card>.tabla-caja>.tabla{margin-bottom:0}
.dash-card .tabla th{background:#f7f9fc}
/* Las dos de al lado quedan del MISMO alto, para que se lean como un par y no como dos
   cajas sueltas de tamano distinto. */
.inc-dos-tablas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:14px;align-items:stretch}
.inc-dos-tablas>.dash-card{margin-bottom:14px;display:flex;flex-direction:column}
.inc-dos-tablas>.dash-card>.tabla{flex:1}

/* ── API Mercado Publico: el resumen y la bitacora (usuaria 2026-08-30) ──────────────*/
.api-resumen{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 14px}
.api-r{background:#fff;border:1px solid #e2e8f0;border-radius:7px;padding:9px 14px;
  font-size:.85rem;color:#4a5765}
.api-n{font-size:1.25rem;font-weight:700;color:#1f4e79;margin-right:6px}
/* inline-block: sin esto la etiqueta se estiraba a todo el ancho de la columna y se
   leia como una barra, no como una etiqueta. */
.log-acc{display:inline-block;font-size:.76rem;font-weight:600;padding:1px 8px;
  border-radius:9px;white-space:nowrap}
.log-guardado{background:#e3f3ea;color:#1e7e34;border:1px solid #b9dfc8}
.log-cambiado{background:#eef4fb;color:#1f4e79;border:1px solid #cfe0f0}
.log-quitado{background:#fdf6e3;color:#8a6714;border:1px solid #e0c98a}
.log-rechazado{background:#fdeef2;color:#9d182b;border:1px solid #e8c2cc}
.log-det{font-size:.76rem;margin-top:3px;line-height:1.4}

/* ── CONFIGURADOR DE PRECIOS (usuaria 2026-08-30) ────────────────────────────────────
   Los precios vivian en el codigo; cambiar uno obligaba a desplegar. */
.pre-regla{display:flex;gap:9px;align-items:flex-start;background:rgba(18,112,127,.09);
  border:1px solid #bcd9dd;border-left:3px solid #12707f;border-radius:6px;padding:10px 14px;
  margin:12px 0 18px;font-size:.86rem;color:#0e4a52;line-height:1.5;max-width:900px}
.pre-form{display:flex;align-items:center;gap:6px}
.pre-uf{width:78px;height:28px;box-sizing:border-box;padding:0 8px;text-align:right;
  border:1px solid #c7d2de;border-radius:5px;font-size:.85rem;font-family:inherit;color:#24303d}
.pre-manual{display:inline-block;font-size:.7rem;font-weight:600;padding:1px 7px;border-radius:9px;
  background:#eef4fb;color:#1f4e79;border:1px solid #cfe0f0;margin-left:5px;white-space:nowrap}
.pre-oblig{font-size:.7rem;margin-left:5px}
.pre-grupo{margin:18px 0 6px;font-size:.9rem;color:#1f4e79;display:flex;align-items:center;gap:7px}
.pre-tipo{display:inline-block;font-size:.7rem;font-weight:600;padding:1px 7px;border-radius:9px;
  margin-right:5px;white-space:nowrap}
.pre-t-plan{background:#eef4fb;color:#1f4e79;border:1px solid #cfe0f0}
.pre-t-modulo{background:#e3f3ea;color:#1e7e34;border:1px solid #b9dfc8}

/* Las dos tablas comparten ANCHOS: asi «Precio» y «Cambiar a» caen en la misma columna en
   ambas y se leen como una sola grilla («ordenar y tabular», usuaria 2026-08-30). */
.tabla-precios{table-layout:fixed;width:100%}
.tabla-precios col.pc-nom{width:250px}
.tabla-precios col.pc-uf{width:110px}
.tabla-precios col.pc-acc{width:180px}
.tabla-precios td,.tabla-precios th{vertical-align:middle}
/* NO se le pone display:flex a la CELDA: eso la saca del renderizado de la tabla y su borde
   deja de dibujarse, asi que la linea de separacion se cortaba justo en esa columna. El flex
   va en un contenedor dentro. */
.tabla-precios td.acciones{white-space:nowrap}
.tabla-precios td.acciones>*{display:inline-flex;vertical-align:middle;margin:0 4px 0 0}
.pre-vig{font-size:1rem;color:#1f4e79}
/* El titulo de grupo es una FILA de la misma tabla, no otra tabla: por eso las columnas
   siguen alineadas de arriba a abajo. */
.pre-fila-grupo td{background:#e8eef6 !important;font-weight:700;font-size:.74rem;
  color:#1f4e79;text-transform:uppercase;letter-spacing:.05em;padding:5px 10px}
.pre-form{display:flex;justify-content:flex-end;margin:0}
/* Se le iguala el peso al selector global de input[type=text], que si no le gana. */
td.num .pre-form input[type=text].pre-uf{width:88px;text-align:right}

/* ── CONEXION POR API CON EL DISTRIBUIDOR (usuaria 2026-08-31) ───────────────────────
   Va en Proveedores del catalogo, no en Sistema: la cuenta con el mayorista es de cada
   empresa. Las credenciales se muestran enmascaradas. */
.pa-luz{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:0}
.pa-on{background:#1e7e34;box-shadow:0 0 0 3px rgba(30,126,52,.15)}
.pa-off{background:#d4a72c;box-shadow:0 0 0 3px rgba(212,167,44,.15)}
.pa-amb{font-size:.72rem;color:#6a7684;background:#eef2f7;border:1px solid #dbe2ea;
  border-radius:9px;padding:1px 7px;margin-left:6px}
.pa-estado{font-size:.8rem;line-height:1.4;max-width:420px}
.pa-fecha{font-size:.74rem;color:#8a97a6;margin-top:2px}
.pa-fila-form>td{background:#f7f9fc !important;padding:12px 14px}
.pa-form{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.pa-ancho{flex:1 1 330px;min-width:330px;max-width:400px}
.pa-form .pa-ancho input[type=text]{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:.84rem}
.pa-nota{font-size:.8rem;color:#4a5765;line-height:1.5;margin:10px 0 0;max-width:820px}
.pa-nota>.ico{vertical-align:-2px;margin-right:5px}
.pa-log{margin-top:16px}
.pa-log summary{cursor:pointer;font-size:.85rem;color:#1f4e79;font-weight:600}
.pa-acc{display:inline-block;font-size:.72rem;font-weight:600;padding:1px 7px;border-radius:9px;
  text-transform:capitalize}
.pa-a-probada{background:#e3f3ea;color:#1e7e34;border:1px solid #b9dfc8}
.pa-a-guardada{background:#eef4fb;color:#1f4e79;border:1px solid #cfe0f0}
.pa-a-fallo{background:#fdeef2;color:#9d182b;border:1px solid #e8c2cc}
.pa-a-quitada{background:#fdf6e3;color:#8a6714;border:1px solid #e0c98a}
.pa-det{font-size:.76rem;margin-top:3px;line-height:1.4}
.pa-sync{background:#12707f;border-color:#12707f;color:#fff}
.pa-sync:hover{background:#0e5b66}
.pa-sync-est{font-size:.76rem;color:#0e4a52;background:rgba(18,112,127,.09);border-radius:4px;
  padding:3px 7px;margin-top:4px;line-height:1.4}
.pa-sync-est>.ico{vertical-align:-1px;margin-right:4px}

/* ── CONEXION VIA API: la estructura estandar y los limites (usuaria 2026-08-31) ─────*/
.capi-molde{background:#eef4fb;border:1px solid #cfe0f0;border-left:3px solid #1f4e79;
  border-radius:7px;padding:13px 16px;margin:12px 0 18px;max-width:900px}
.capi-molde>strong{display:flex;align-items:center;gap:7px;color:#1f4e79;font-size:.92rem}
.capi-molde p{margin:6px 0 0;font-size:.85rem;color:#3d4a57;line-height:1.5}
.capi-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:8px;margin:11px 0 4px}
.capi-campo{background:#fff;border:1px solid #dbe6f1;border-radius:5px;padding:7px 10px;font-size:.84rem}
.capi-campo strong{display:block;color:#24303d;margin-top:2px}
.capi-campo em{font-size:.78rem;color:#6a7684;font-style:normal;line-height:1.4;display:block}
.capi-ob{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:#1e7e34;background:#e3f3ea;border:1px solid #b9dfc8;border-radius:8px;padding:0 6px}
.capi-op{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:#6a7684;background:#eef1f5;border:1px solid #dbe2ea;border-radius:8px;padding:0 6px}
.capi-nota{border-top:1px solid #dbe6f1;padding-top:8px;margin-top:10px !important;font-size:.82rem !important}
.capi-nota>.ico{vertical-align:-2px;margin-right:5px}
.capi-h3{margin:22px 0 4px;font-size:.95rem;color:#1f4e79;display:flex;align-items:center;gap:7px}
.capi-lim td{font-size:.83rem;vertical-align:top}
.capi-lim .muted{font-size:.78rem;margin-top:2px}
.capi-warn{color:#9d182b;background:#fdeef2;border:1px solid #e8c2cc;border-radius:8px;
  padding:0 6px;font-size:.72rem;white-space:nowrap}
.capi-espera{font-size:.78rem;color:#8a6714;background:#fdf6e3;border-radius:4px;padding:3px 7px;
  margin-top:4px;display:inline-block}
.capi-espera>.ico{vertical-align:-1px;margin-right:4px}

/* ═══ DIAGNOSTICO DE UN CLIENTE (diagnostico.php) ══════════════════════════════════
   Es la ventana que reemplaza a entrar a las pantallas del cliente (usuaria 2026-08-31).
   El color hace el trabajo: lo que esta MAL configurado se pinta rojo, porque esa fila es
   justamente la respuesta al caso de soporte. Lo demas queda neutro para no competir. */
.diag-sel { margin: 14px 0 18px; }
.diag-h3 { display: flex; align-items: center; gap: 7px; margin: 26px 0 10px;
           font-size: 1rem; color: #1f4e79; }
.diag-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
              gap: 10px; margin-bottom: 12px; }
.diag-card { background: #fff; border: 1px solid #dbe3ec; border-left: 4px solid #12707f;
             border-radius: 6px; padding: 12px 14px; font-size: .82rem; color: #445; }
.diag-card em { display: block; margin-top: 4px; font-size: .74rem; color: #7a8694;
                font-style: normal; }
.diag-n { display: block; font-size: 1.5rem; font-weight: 700; color: #1f4e79;
          line-height: 1.15; }
/* Rojo = aca esta la causa. Solo lo que impide ver oportunidades. */
.diag-card.diag-mal { border-left-color: #9d182b; background: #fdeef2; }
.diag-card.diag-mal .diag-n { color: #9d182b; }
.diag-pista { display: flex; gap: 9px; align-items: flex-start; background: #fdeef2;
              border: 1px solid #e4b4bd; border-left: 4px solid #9d182b; border-radius: 6px;
              padding: 11px 13px; font-size: .82rem; color: #5c1620; margin-bottom: 10px; }
.diag-nota { font-size: .78rem; color: #7a8694; margin: 4px 0 6px; }

/* ── LAS TARJETAS DE «¿POR QUÉ NO AVANZAN LOS DETALLES?» (sync.php) ──────────────
   Esa pantalla bautizó sus tarjetas con otros nombres —.diag-tarjetas/.diag-t/
   .diag-etq/.diag-num/.diag-pie— y esas clases NUNCA tuvieron una regla, así que
   los tres recuadros se venían mostrando como texto corrido, sin marco. Se detectó
   el 2026-09-07 al renderizar la pantalla para otro arreglo.
   Se les da EXACTAMENTE el mismo aspecto que a las de «diagnóstico» de acá arriba:
   son la misma clase de tarjeta (un número con su explicación), y tener dos estilos
   para lo mismo es cómo se termina con una pantalla distinta de la otra. */
.diag-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
                 gap: 10px; margin-bottom: 12px; }
.diag-t { background: #fff; border: 1px solid #dbe3ec; border-left: 4px solid #12707f;
          border-radius: 6px; padding: 12px 14px; font-size: .82rem; color: #445; }
.diag-etq { display: block; font-size: .74rem; color: #7a8694;
            text-transform: uppercase; letter-spacing: .3px; }
.diag-num { display: block; font-size: 1.5rem; font-weight: 700; color: #1f4e79;
            line-height: 1.15; margin-top: 2px; }
.diag-pie { display: block; margin-top: 4px; font-size: .74rem; color: #7a8694; }
/* Rojo = acá está la causa. Mismo criterio que .diag-card.diag-mal. */
.diag-num.diag-mal { color: #9d182b; }
.diag-t:has(.diag-mal) { border-left-color: #9d182b; background: #fdeef2; }
/* En la tabla de corridas: el número de errores en rojo y las etiquetas de qué pasó. */
td.diag-msg { font-size: .78rem; color: #64748b; }
span.diag-mal { color: #9d182b; font-weight: 700; }
.diag-tag { display: inline-block; padding: 1px 7px; margin-right: 5px; border-radius: 20px;
            font-size: .7rem; font-weight: 600; border: 1px solid; }
.diag-choque { color: #7a5c00; background: #fdf6e3; border-color: #e0c98a; }
.diag-cuota  { color: #9d182b; background: #fdeef2; border-color: #e8b4be; }
.diag-corto  { color: #12707f; background: rgba(18,112,127,.09); border-color: #a8cdd2; }
.diag-det { font-size: .72rem; margin-top: 2px; }

/* El acceso excepcional. En verde cuando esta ABIERTO: tiene que verse que esta corriendo. */
.diag-acceso { background: #f5f8fb; border: 1px solid #dbe3ec; border-radius: 7px;
               padding: 14px 16px; font-size: .85rem; }
.diag-acceso.diag-abierto { background: #eef7f1; border-color: #b6d8c3; }
.diag-motivo { font-size: .8rem; color: #445; margin: 6px 0 10px; }
.diag-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 10px; }
.diag-form .lf-campo { margin: 0; }
.diag-ancho { flex: 1 1 320px; }
.diag-ancho input { width: 100%; }

/* La bitacora. Cada accion con su color: lo BLOQUEADO no es un error, es el sistema
   haciendo su trabajo, asi que va ambar y no rojo. */
.acl-acc { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .72rem;
           font-weight: 600; white-space: nowrap; }
.acl-a-abrio     { background: #eaf3ea; color: #1e7e34; }
.acl-a-cerro     { background: #eef1f5; color: #55606e; }
.acl-a-miro      { background: #eaf1f8; color: #1f4e79; }
.acl-a-bloqueado { background: #fdf6e3; color: #8a6714; }

/* La OC de una guia que NO es un folio de Mercado Publico. Se ve, pero apagada: en las
   ventas privadas ese campo del DTE trae cosas como «MAIL» (el pedido llego por correo),
   y darle el mismo peso que a una OC real haria pensar que hay una orden formal detras. */
.gd-ref { color: #7a8694; font-size: .8rem; }


/* ═══ ACCESO DE SOPORTE — la pantalla del CLIENTE (soporte_acceso.php) ═════════════
   El permiso lo concede el dueño de los datos (usuaria 2026-08-31). Lo primero que se ve
   es el ESTADO, porque a eso entra casi siempre: saber si está abierto o cerrado. Verde =
   autorizado (algo corriendo que conviene mirar), gris = cerrado (lo normal, no alarma). */
.sop-estado { display: flex; gap: 12px; align-items: flex-start; border-radius: 8px;
              padding: 14px 16px; margin: 14px 0 18px; font-size: .9rem; }
.sop-estado.sop-cerrado { background: #f5f8fb; border: 1px solid #dbe3ec; color: #445; }
.sop-estado.sop-abierto { background: #eef7f1; border: 1px solid #b6d8c3; color: #1f4d33; }
.sop-sub { display: block; margin-top: 4px; font-size: .8rem; color: #6b7684; }
.sop-h3 { display: flex; align-items: center; gap: 7px; margin: 26px 0 10px;
          font-size: 1rem; color: #1f4e79; }

/* Lo que se autoriza y lo que no, uno al lado del otro: la comparación es el mensaje. */
.sop-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.sop-col { border: 1px solid #dbe3ec; border-radius: 7px; padding: 12px 15px; background: #fff; }
.sop-col h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .85rem; }
.sop-col ul { margin: 0; padding-left: 18px; font-size: .82rem; color: #445; }
.sop-col li { margin-bottom: 4px; }
.sop-si  { border-left: 4px solid #b08a1e; }   /* ojo, no alarma: es lo que se abre */
.sop-si h4  { color: #8a6714; }
.sop-no  { border-left: 4px solid #2e7d52; }   /* tranquilidad: esto nunca se toca */
.sop-no h4  { color: #2a6b4a; }

.sop-caja { background: #f5f8fb; border: 1px solid #dbe3ec; border-radius: 7px;
            padding: 14px 16px; font-size: .85rem; }
.sop-caja.sop-abierta { background: #eef7f1; border-color: #b6d8c3; }
.sop-intro { margin: 0 0 12px; color: #445; }
.sop-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.sop-form .lf-campo { margin: 0; }
.sop-form small { display: block; margin-top: 3px; font-size: .72rem; color: #7a8694; }
.sop-ancho { flex: 1 1 340px; }
.sop-ancho input { width: 100%; }
.sop-ficha { margin-bottom: 12px; }
.sop-quitar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sop-quitar .muted { font-size: .78rem; }

/* En el diagnóstico: el aviso de que el CLIENTE ya autorizó. */
.diag-autcli { display: flex; gap: 10px; align-items: flex-start; background: #eef7f1;
               border: 1px solid #b6d8c3; border-left: 4px solid #2e7d52; border-radius: 7px;
               padding: 12px 14px; font-size: .84rem; color: #1f4d33; margin-bottom: 10px; }

/* ═══ Ver documentos: paginación y filtros por columna (2026-08-31) ════════════════
   Pedido de la usuaria: «no más de 20, para que no se vuelva interminable… abajo y arriba
   con numeración y avance a la página siguiente o a la final. Igual las columnas deben
   tener filtros con check para seleccionar». */
.doc-pagbarra { display: flex; align-items: center; justify-content: space-between;
                flex-wrap: wrap; gap: 10px; margin: 8px 0; font-size: .8rem; }
.doc-pagbarra-inf { margin-top: 12px; }
/* La página en que estás no es un enlace: es un rótulo. Si se ve clickeable, se pulsa. */
.pag-hoy { background: #1f4e79 !important; color: #fff !important; border-color: #1f4e79 !important;
           cursor: default; }
.pag-sep { padding: 0 4px; color: #9aa4b0; }

/* El filtro dentro del encabezado: hereda el mecanismo fp-* que esta pantalla ya usaba,
   pero se disfraza de título de columna — un botón con relleno ahí dentro se leería como
   una acción, no como un encabezado. */
.fp-col .fp-desplegar { background: none; border: none; padding: 0; font: inherit;
                        color: inherit; text-transform: inherit; letter-spacing: inherit;
                        cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.fp-col .fp-desplegar:hover { color: #1f4e79; }
.fp-col .fp-desplegar.on { color: #1f4e79; font-weight: 700; }
/* La flecha tiene que VERSE: a .7em sobre un encabezado en versalitas queda del tamano de
   un punto y el filtro pasa inadvertido. Va en su propia pastilla, que ademas le da area
   donde pinchar. */
.fp-col .fp-flecha { display: inline-flex; align-items: center; justify-content: center;
                     width: 15px; height: 15px; border-radius: 4px; background: #e4ebf3;
                     color: #1f4e79; font-size: .82rem; line-height: 1; }
.fp-col .fp-desplegar:hover .fp-flecha { background: #1f4e79; color: #fff; }
.fp-col .fp-desplegar.on .fp-flecha  { background: #1f4e79; color: #fff; }
/* Cuántos filtros hay puestos en esa columna: sin esto, un filtro activo pasa inadvertido
   y uno se pregunta por qué faltan filas. */
.fp-n { display: inline-block; min-width: 15px; padding: 0 4px; border-radius: 8px;
        background: #1f4e79; color: #fff; font-size: .68rem; font-weight: 700; text-align: center; }
.fp-col .fp-panel { min-width: 250px; }
.fp-col .fp-lista { max-height: 260px; overflow-y: auto; }

/* ═══ GESTIÓN CONTABLE (contable.php) ═════════════════════════════════════════════
   Lee lo de Gestión Documental y produce libros e IVA. La pantalla tiene que dejar claras
   dos cosas: de qué fuentes depende, y que el IVA es un cálculo de apoyo, no el F29. */
.cb-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 16px;
            padding-bottom: 10px; border-bottom: 1px solid #dbe3ec; }
.cb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
          border: 1px solid #dbe3ec; border-radius: 6px; background: #fff; color: #445;
          font-size: .84rem; text-decoration: none; }
.cb-btn:hover { border-color: #1f4e79; color: #1f4e79; }
.cb-btn.cb-aqui { background: #1f4e79; border-color: #1f4e79; color: #fff; }
/* Lo que aún no existe se ve, pero apagado: el nombre es el plan, no una promesa cumplida. */
.cb-pronto { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
             border: 1px dashed #cfd8e3; border-radius: 6px; color: #9aa4b0; font-size: .84rem; }
.cb-pronto em { font-style: normal; font-size: .78rem; }

/* De qué depende el módulo. Verde = la fuente está · ámbar = falta y hay que ir a buscarla. */
.cb-fuentes { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
              gap: 10px; margin-bottom: 16px; }
.cb-fuente { display: flex; gap: 9px; align-items: flex-start; border: 1px solid #dbe3ec;
             border-radius: 7px; padding: 11px 13px; font-size: .82rem; background: #fff; }
.cb-fuente .muted { display: block; margin-top: 3px; }
.cb-fuente.cb-ok    { border-left: 4px solid #2e7d52; }
.cb-fuente.cb-falta { border-left: 4px solid #9d182b; background: #fdeef2; }
.cb-fuente.cb-espera{ border-left: 4px solid #b08a1e; background: #fdf6e3; }

.cb-periodo { margin: 0 0 16px; }
.cb-h3 { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px;
         font-size: 1rem; color: #1f4e79; }
.cb-excel { margin-left: auto; }

/* Totales del libro: la cifra manda, la etiqueta acompaña. */
.cb-tot { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.cb-tot > div { flex: 1 1 150px; border: 1px solid #dbe3ec; border-radius: 7px;
                padding: 10px 13px; background: #fff; }
.cb-tot span { display: block; font-size: .74rem; color: #7a8694; text-transform: uppercase;
               letter-spacing: .03em; }
.cb-tot strong { font-size: 1.1rem; color: #1f4e79; }
.cb-tot-fin { background: #eaf1f8 !important; }

/* Una nota de crédito RESTA: se marca, porque un monto en negativo perdido entre positivos
   se lee como un error de tipeo y no como lo que es. */
.cb-resta td { color: #a4565c; }
.cb-resta .num { font-weight: 600; }

.cb-iva { max-width: 460px; border: 1px solid #dbe3ec; border-radius: 8px; overflow: hidden;
          margin-bottom: 14px; background: #fff; }
.cb-iva-fila { display: flex; align-items: baseline; justify-content: space-between;
               gap: 14px; padding: 11px 15px; border-bottom: 1px solid #eef1f5; font-size: .88rem; }
.cb-iva-fila em { font-style: normal; color: #7a8694; font-size: .78rem; }
.cb-iva-res { border-bottom: none; background: #f5f8fb; font-size: 1rem; }
.cb-menos { color: #a4565c; }
.cb-pagar { color: #9d182b; font-weight: 700; }
.cb-remanente { color: #2a6b4a; font-weight: 700; }

.cb-aviso { display: flex; gap: 10px; align-items: flex-start; background: #fdf6e3;
            border: 1px solid #e4d3a1; border-left: 4px solid #b08a1e; border-radius: 7px;
            padding: 12px 14px; font-size: .83rem; color: #5c4a12; margin-bottom: 16px; }
.cb-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.cb-col { border: 1px solid #dbe3ec; border-radius: 7px; padding: 12px 14px; background: #fff; }
.cb-col h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .87rem;
             color: #1f4e79; }
.cb-fuera { margin-top: 12px; font-size: .82rem; color: #556; }
.cb-fuera summary { cursor: pointer; color: #1f4e79; }
.cb-fuera ul { margin: 8px 0 0; padding-left: 20px; }

/* ═══ CARTOLAS Y CONCILIACIÓN (cartolas.php) ══════════════════════════════════════
   El sistema sugiere, la persona confirma. Por eso la GLOSA del banco va siempre visible,
   incluso cuando hay propuesta: es lo que permite darse cuenta de que la propuesta está
   equivocada. Sin ella, confirmar sería a ciegas. */
.car-h3 { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px;
          font-size: 1rem; color: #1f4e79; }
.car-subir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
             background: #f5f8fb; border: 1px solid #dbe3ec; border-radius: 7px; padding: 13px 15px; }
.car-subir .lf-campo { margin: 0; }
.car-ancho { flex: 1 1 300px; }
.car-volver { margin: 4px 0 10px; font-size: .84rem; }

.car-resumen { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.car-resumen > div { flex: 1 1 140px; border: 1px solid #dbe3ec; border-radius: 7px;
                     padding: 10px 13px; background: #fff; }
.car-resumen span { display: block; font-size: .72rem; color: #7a8694; text-transform: uppercase;
                    letter-spacing: .03em; }
.car-resumen strong { font-size: 1.05rem; color: #1f4e79; }
.car-db { color: #2a6b4a !important; }   /* entra plata */
.car-cb { color: #a4565c !important; }   /* sale plata */
.car-ok  { border-left: 4px solid #2e7d52; }
.car-mal { border-left: 4px solid #9d182b; background: #fdeef2; }

.car-barra { height: 6px; border-radius: 3px; background: #e4ebf3; overflow: hidden;
             margin-bottom: 3px; min-width: 90px; }
.car-barra > div { height: 100%; background: #2e7d52; }

.car-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.car-chip { padding: 5px 11px; border: 1px solid #dbe3ec; border-radius: 14px; background: #fff;
            color: #445; font-size: .8rem; text-decoration: none; }
.car-chip:hover { border-color: #1f4e79; color: #1f4e79; }
.car-chip.on { background: #1f4e79; border-color: #1f4e79; color: #fff; }
.car-chip b { font-weight: 700; }

/* Cada movimiento es una tarjeta: la fila de tabla no alcanza cuando abajo va la propuesta
   con su botón y el formulario de asignar a mano. */
.car-mov { border: 1px solid #dbe3ec; border-radius: 8px; margin-bottom: 10px; background: #fff;
           overflow: hidden; }
.car-mov.car-confirmado  { border-left: 4px solid #2e7d52; }
.car-mov.car-clasificado { border-left: 4px solid #b08a1e; }
.car-mov.car-pendiente   { border-left: 4px solid #cfd8e3; }
.car-mov-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
               padding: 11px 14px; border-bottom: 1px solid #eef1f5; font-size: .86rem; }
.car-tipo { font-weight: 700; font-size: .7rem; padding: 2px 7px; border-radius: 4px; }
.car-t-DB { background: #eaf3ea; color: #1e7e34; }
.car-t-CB { background: #fdecef; color: #a4565c; }
.car-fecha { color: #7a8694; white-space: nowrap; }
.car-monto { font-weight: 700; font-size: 1rem; }
.car-glosa { flex: 1 1 260px; font-family: ui-monospace, Consolas, monospace; font-size: .82rem;
             color: #24303d; }
.car-nrodoc { color: #9aa4b0; font-size: .74rem; white-space: nowrap; }

.car-sug { padding: 10px 14px; background: #f5f8fb; }
.car-sug-t { font-size: .78rem; color: #7a8694; margin-bottom: 6px; }
.car-cand { display: flex; align-items: center; justify-content: space-between; gap: 12px;
            flex-wrap: wrap; padding: 8px 0; border-top: 1px solid #e4ebf3; font-size: .84rem; }
.car-cand:first-of-type { border-top: none; }
/* Por qué se propone: sin esto, confirmar es un acto de fe. */
.car-porque { font-size: .74rem; color: #7a8694; margin-top: 2px; }
.car-tick { background: #2e7d52; border-color: #2e7d52; color: #fff; }
.car-tick:hover { background: #24623f; }
.car-nada { margin: 0; padding: 10px 14px; font-size: .82rem; color: #7a8694;
            display: flex; align-items: center; gap: 6px; }

.car-clasif { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
              padding: 10px 14px; border-top: 1px solid #eef1f5; font-size: .82rem; }
.car-o { color: #7a8694; }
.car-clasif input[type=text] { flex: 1 1 200px; }
.car-listo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px;
             font-size: .84rem; color: #1f4d33; background: #eef7f1; }
.car-listo-cl { color: #5c4a12; background: #fdf6e3; }

/* Asignación de columnas de una cartola en planilla. */
.car-mapeo { background: #f5f8fb; border: 1px solid #dbe3ec; border-radius: 7px;
             padding: 14px 16px; margin-bottom: 16px; }
.car-map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
                gap: 12px; align-items: end; }
.car-map-grid .lf-campo { margin: 0; }
.car-map-grid select, .car-map-grid input { width: 100%; }
.car-map-grid em { font-style: normal; color: #7a8694; font-weight: 400; font-size: .74rem; }
.car-map-grid small { display: block; margin-top: 3px; font-size: .72rem; color: #7a8694; }
.car-muestra { font-size: .76rem; }
.car-muestra td { white-space: nowrap; }

/* Gestión Contable: cierre de ciclos y libros. */
.cb-h4 { margin: 18px 0 8px; font-size: .9rem; color: #24303d; }
.cb-cerrado { display: flex; gap: 10px; align-items: flex-start; background: #eef7f1;
              border: 1px solid #b6d8c3; border-left: 4px solid #2e7d52; border-radius: 7px;
              padding: 12px 14px; font-size: .85rem; color: #1f4d33; margin-bottom: 10px; }
/* Si algo cambió después del cierre, deja de ser tranquilidad y pasa a ser aviso. */
.cb-cerrado.cb-cambio { background: #fdf6e3; border-color: #e4d3a1; border-left-color: #b08a1e;
                        color: #5c4a12; }
.cb-alerta-txt { margin-top: 6px; }
.cb-reabrir { margin-bottom: 14px; font-size: .84rem; }
.cb-reabrir summary { cursor: pointer; color: #1f4e79; }
.cb-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.cb-ancho { flex: 1 1 320px; }
.cb-cerrar { background: #f5f8fb; border: 1px solid #dbe3ec; border-radius: 7px;
             padding: 14px 16px; margin-top: 14px; }
/* La casilla del espejo con el SII es LA condición del cierre: va destacada, no como un
   detalle al pie. */
.cb-check { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px;
            font-size: .86rem; }
.cb-check input { margin-top: 3px; }
.cb-tot-fila td { background: #eaf1f8 !important; }
.cb-asiento-ini td { border-top: 2px solid #dbe3ec; }
.cb-cuenta { border: 1px solid #dbe3ec; border-radius: 7px; margin-bottom: 12px;
             background: #fff; overflow: hidden; }
.cb-cuenta-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
                 padding: 10px 14px; border-bottom: 1px solid #eef1f5; }
.cb-cuenta-cab strong { color: #1f4e79; }
.cb-saldo { margin-left: auto; font-size: .85rem; }
.cb-saldo em { font-style: normal; color: #7a8694; font-size: .78rem; }
.cb-cuadra { color: #2a6b4a; display: inline-flex; align-items: center; gap: 5px; }
.cb-nocuadra { color: #9d182b; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.cb-pend { color: #b08a1e; }
.cb-fuera-reg { margin: 10px 0; font-size: .83rem; color: #556; }
.cb-fuera-reg summary { cursor: pointer; color: #1f4e79; }
.cb-fuera-reg ul { margin: 8px 0 0; padding-left: 20px; }

/* Una guía ya facturada cumplió su función: se apaga. «Su importancia termina cuando se
   emite la factura» (usuaria 2026-08-31). No se esconde — deja de competir por la vista. */
.tabla tr.gd-lista td { color: #8a929c; }
.tabla tr.gd-lista code { color: #8a929c; }


/* Comparacion contra el Registro del SII. El veredicto va arriba y en color: es lo que
   decide si el mes se puede cerrar o no. */
.cb-rcv { background: #f5f8fb; border: 1px solid #dbe3ec; border-radius: 7px;
          padding: 13px 15px; margin-bottom: 12px; display: flex; flex-wrap: wrap;
          align-items: flex-end; gap: 12px; }
.cb-rcv .lf-campo { margin: 0; }
.cb-rcv .ayuda { flex: 1 1 100%; margin: 0; }
.cb-rcv em { font-style: normal; color: #7a8694; font-weight: 400; font-size: .74rem; }
.cb-espejo { display: flex; gap: 10px; align-items: flex-start; border-radius: 7px;
             padding: 12px 14px; font-size: .86rem; margin-bottom: 10px; }
.cb-espejo.cb-igual    { background: #eef7f1; border: 1px solid #b6d8c3;
                         border-left: 4px solid #2e7d52; color: #1f4d33; }
.cb-espejo.cb-distinto { background: #fdeef2; border: 1px solid #e4b4bd;
                         border-left: 4px solid #9d182b; color: #5c1620; }
/* La fila que no calza se marca: es la que hay que ir a revisar. */
.cb-fila-dif td { background: #fdeef2 !important; }
.cb-ok-auto  { color: #1f4d33; align-items: center; }
.cb-no-auto  { color: #5c1620; align-items: center; }

/* Configuración contable. */
.cb-cfg { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 10px; margin-bottom: 8px; }
.cb-radio { display: flex; gap: 9px; align-items: flex-start; border: 1px solid #dbe3ec;
            border-radius: 7px; padding: 11px 13px; background: #fff; font-size: .85rem;
            cursor: pointer; }
.cb-radio:hover { border-color: #1f4e79; }
.cb-radio input { margin-top: 3px; }
.cb-radio em { display: block; margin-top: 3px; font-style: normal; font-size: .78rem;
               color: #7a8694; }
.cb-cta { width: 100%; }
.cb-fuera-lista { font-size: .84rem; color: #445; margin: 6px 0 0; padding-left: 20px; }
.cb-fuera-lista li { margin-bottom: 4px; }
/* Lo que falta definir: se ve, pero apagado — es el plan, no una promesa cumplida. */
.cb-pendiente { display: flex; gap: 10px; align-items: flex-start; background: #f5f8fb;
                border: 1px dashed #cfd8e3; border-radius: 7px; padding: 12px 14px;
                font-size: .83rem; color: #556; }
.cb-pendiente ul { margin: 0; padding-left: 18px; }
.cb-pendiente li { margin-bottom: 4px; }

/* ── Asiento de apertura (Gestión Contable) ───────────────────────────────────────
   La tarjeta de Configuración y la grilla de saldos. El color dice el estado del cuadre:
   verde cuadra · rojo descuadra · ámbar todavía no está cargado. */
.cb-apcard{display:flex;gap:12px;align-items:flex-start;background:#f6f9fc;border:1px solid #d8e3ee;
    border-left:4px solid #1f4e79;border-radius:6px;padding:12px 14px;margin:8px 0 18px}
.cb-apcard>svg{color:#1f4e79;flex:0 0 auto;margin-top:2px}
.cb-apcard p{margin:0 0 8px}
.cb-apestado{display:flex;align-items:center;gap:6px;font-size:.86rem;border-radius:4px;padding:5px 8px}
.cb-apok{background:#e8f5ee;color:#14603a}
.cb-apmal{background:#fdeef2;color:#9d182b}
.cb-apfalta{background:#fdf6e3;color:#7a5b12}
.cb-volver{margin:0 0 6px;font-size:.85rem}
.cb-volver a{display:inline-flex;align-items:center;gap:5px;color:#456;text-decoration:none}
.cb-volver a:hover{text-decoration:underline}
.cb-apfecha{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:10px 0 12px}
.cb-apfecha label{display:flex;flex-direction:column;gap:3px;font-size:.82rem;color:#456}
.cb-apfecha .muted{font-size:.8rem;max-width:520px}
.tabla-apertura col.ca-cod{width:110px}
.tabla-apertura col.ca-mon{width:150px}
/* Una fila de título es una cuenta con hijas: no lleva casilla porque su saldo es la suma. */
.tabla-apertura tr.ap-titulo td{background:#f2f6fa}
.tabla-apertura .ap-suma{font-size:.78rem;font-style:italic;text-align:right}
.ap-in{width:100%;text-align:right;box-sizing:border-box;height:26px;font-size:.84rem;
    border:1px solid #cfd8e3;border-radius:3px;padding:2px 6px}
/* El lado sugerido se marca con el fondo, NO deshabilitando el otro: hay cuentas que van al
   revés legítimamente y bloquear la otra columna las dejaría sin forma de cargarse. */
.ap-in.ap-sug{background:#fbfdff;border-color:#9fc0dd}
.tabla-apertura tr.ap-tot td{font-weight:600;border-top:2px solid #1f4e79;background:#eef4fb}
.ap-cuadre{display:flex;gap:12px;align-items:flex-start;border-radius:6px;padding:12px 14px;margin:12px 0}
.ap-cuadre>svg{flex:0 0 auto;margin-top:1px}
.ap-cuadre strong{display:block}
.ap-cuadre span{font-size:.85rem;display:block;margin-top:2px}
.ap-ok{background:#e8f5ee;border:1px solid #b9dfc9;color:#14603a}
.ap-mal{background:#fdeef2;border:1px solid #f0c2cc;color:#9d182b}
.ap-raro{display:inline-flex;align-items:center;gap:4px;color:#9d182b;font-size:.82rem}
/* Saldos de apertura que dejaron de contar porque su cuenta pasó a ser un título.
   Ámbar y no rojo: no está roto, hay que mover un monto de lugar. */
.ap-huerfanos{display:flex;gap:12px;align-items:flex-start;background:#fdf6e3;border:1px solid #e6d3a3;
    border-radius:6px;padding:12px 14px;margin:14px 0}
.ap-huerfanos>svg{color:#7a5b12;flex:0 0 auto;margin-top:2px}
.ap-huerfanos strong{display:block;color:#7a5b12}
.ap-huerfanos>div>span{display:block;font-size:.85rem;margin:3px 0 8px}
.ap-huerfanos table{background:#fff}

/* ── Plan de cuentas: se ve y SE IMPRIME (Ctrl+P sobre la misma pantalla) ────────── */
.pc-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pc-cab h3{margin:0}
.pc-sub{margin:2px 0 0;font-size:.85rem;color:#456}
.pc-pie{font-size:.78rem;color:#456;margin-top:10px}
.tabla-plan col.cp-cod{width:120px}
.tabla-plan col.cp-gru{width:100px}
.tabla-plan col.cp-niv{width:96px}
/* Los tres pesos: grupo (los seis de primer nivel) · título (tiene hijas) · hoja (se anota) */
.tabla-plan tr.pc-grupo td{background:#e8eff7;font-weight:600}
.tabla-plan tr.pc-titulo td{background:#f5f8fb}
.pc-h{font-size:.72rem;color:#12707f}
/* Dónde engancha cada cuenta con los asientos que ya están escritos. */
.pc-uso{display:inline-flex;align-items:center;gap:3px;margin-left:8px;font-size:.72rem;
    background:#e8f5ee;color:#14603a;border-radius:9px;padding:1px 7px}
.print-solo{display:none}
@media print{
    .no-print,.sidebar,.menu-lateral,.cb-barra,.cb-periodo,.msg-inline{display:none!important}
    .print-solo{display:block}
    .contenido>h1{display:none}
    .tabla-plan{font-size:9pt}
    .tabla-plan tr{page-break-inside:avoid}
    .tabla-plan thead{display:table-header-group}
    @page{margin:14mm}
}
/* La versión, justo bajo el menú: un dato, no un enlace. Tenue a propósito — se busca cuando
   hace falta reportar algo, no compite con los ítems. */
.sb-version{font-size:.68rem;opacity:.5;letter-spacing:.02em;padding:6px 14px 2px;user-select:all;
    border-top:1px solid rgba(255,255,255,.09);margin-top:6px}

/* ── Contabilización F29 ─────────────────────────────────────────────────────────── */
.cb-f29card{border-left-color:#12707f}
.cb-f29card>svg{color:#12707f}
.f29-subir{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#f6f9fc;
    border:1px solid #d8e3ee;border-radius:6px;padding:12px 14px;margin:8px 0 14px}
.f29-subir label{display:flex;flex-direction:column;gap:3px;font-size:.82rem;color:#456}
.f29-subir .muted{font-size:.78rem;max-width:420px}
.f29-per{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.f29-chip{font-size:.78rem;padding:3px 10px;border-radius:11px;background:#eef2f6;color:#456;
    text-decoration:none;border:1px solid #d8e3ee}
.f29-chip.on{background:#12707f;color:#fff;border-color:#12707f}
.f29-cab{display:flex;gap:22px;flex-wrap:wrap;background:rgba(18,112,127,.09);
    border-radius:6px;padding:10px 14px;margin:10px 0 4px}
.f29-cab>div{display:flex;flex-direction:column}
.f29-cab span{font-size:.72rem;color:#456;text-transform:uppercase;letter-spacing:.03em}
.f29-cab strong{font-size:.95rem}
.f29-cab em{font-size:.7rem;color:#12707f;font-style:normal}
/* El código del formulario: se reconoce de un vistazo y no se confunde con la cuenta contable. */
.f29-cod{display:inline-block;min-width:34px;text-align:center;font-size:.74rem;font-weight:600;
    background:#12707f;color:#fff;border-radius:3px;padding:1px 5px}
.f29-glosa{font-size:.75rem}
.f29-ok{display:inline-flex;align-items:center;gap:4px;color:#14603a;font-size:.82rem}
.f29-auto{display:inline-flex;align-items:center;gap:4px;color:#12707f;font-size:.82rem}
.tabla-f29 col.f-cod{width:60px}
.tabla-f29 col.f-cta{width:110px}
.tabla-f29 col.f-mon{width:135px}
.f29-mapa{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0}
.f29-mapa select{max-width:270px;height:26px;font-size:.8rem}
.f29-cub{margin:10px 0;font-size:.85rem}
.f29-cub summary{cursor:pointer;color:#456}
.f29-cub ul{margin:6px 0 0;padding-left:18px}

/* ── Proveedores de inventario ───────────────────────────────────────────────────── */
.cb-invcard{border-left-color:#7a5b12}
.cb-invcard>svg{color:#7a5b12}
.pi-buscar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 10px}
.pi-buscar input[type=text]{height:30px;min-width:250px}
.pi-buscar .muted{font-size:.78rem}
.tabla tr.pi-si td{background:rgba(18,112,127,.07)}
.pi-badge{display:inline-flex;align-items:center;gap:4px;background:#12707f;color:#fff;
    border-radius:10px;padding:2px 9px;font-size:.75rem}
/* Contabilización del flete: las dos cuentas se distinguen por color, porque confundirlas
   mueve el margen bruto. */
.cb-fletecard{border-left-color:#12707f}
.cb-fletecard>svg{color:#12707f}
.fl-badge{display:inline-flex;align-items:center;gap:5px;border-radius:10px;padding:2px 9px;font-size:.76rem}
.fl-badge code{font-size:.72rem;opacity:.8}
.fl-flete_costo{background:#fdeef2;color:#9d182b}
.fl-flete_gasto{background:#eef4fb;color:#1f4e79}
.fl-asignar{display:flex;gap:6px;align-items:center;margin:0}
/* El selector tiene que mostrar el NOMBRE COMPLETO de la cuenta: con 240px se cortaba en
   «Gastos Genera…» y elegir a ciegas es justo lo que no puede pasar acá. El ancho se calcula
   sobre la cuenta mas larga del plan («Gastos de Patentes y Permisos municipales» + su codigo). */
.fl-asignar select{height:28px;font-size:.78rem;min-width:330px;max-width:100%}
.f29-mapa select{min-width:300px}

/* ── Balance de 8 columnas ───────────────────────────────────────────────────────── */
.bal-fechas{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;background:#f6f9fc;
    border:1px solid #d8e3ee;border-radius:6px;padding:10px 14px;margin:8px 0 12px}
.bal-fechas label{display:flex;flex-direction:column;gap:3px;font-size:.82rem;color:#456}
.bal-fechas .muted{font-size:.78rem;max-width:420px}
.tabla-bal{font-size:.82rem}
/* Las cuatro parejas se distinguen por fondo: sin eso, diez columnas de números se leen como
   una sola mancha y es fácil mirar la columna de al lado. */
.tabla-bal tr.bal-gr th{text-align:center;font-size:.74rem;text-transform:uppercase;
    letter-spacing:.04em;background:#eef2f6;border-bottom:1px solid #d8e3ee}
.tabla-bal td.bal-inv,.tabla-bal th:nth-child(7),.tabla-bal th:nth-child(8){background:rgba(31,78,121,.05)}
.tabla-bal td.bal-res{background:rgba(18,112,127,.06)}
.tabla-bal tr.bal-uti td{font-weight:600;background:#fdf6e3}
/* Correlativo del Libro Diario */
/* Los tres formatos, TABULADOS: en grilla de columnas iguales quedan del mismo ancho y del
   mismo alto pase lo que pase con el largo de cada explicacion. Con flex libre, cada recuadro
   se dimensionaba segun su texto y los tres quedaban distintos. */
.fd-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto auto;
    gap:10px;align-items:stretch;margin:8px 0;max-width:1050px}
.fd-op{display:flex;gap:7px;align-items:flex-start;border:1px solid #d8e3ee;border-radius:6px;
    padding:8px 10px;background:#fff;cursor:pointer}
.fd-op.on{border-color:#1f4e79;background:#f2f7fc}
.fd-op input{margin-top:2px}
.fd-op strong{display:block;font-family:ui-monospace,Menlo,monospace;font-size:.86rem}
.fd-op em{display:block;font-size:.74rem;color:#567;font-style:normal;line-height:1.35}
/* Digitos y Guardar se alinean por ABAJO con los recuadros, no por el centro. */
.fd-form .fd-dig,.fd-form>button{align-self:end}
.fd-dig{display:flex;flex-direction:column;gap:3px;font-size:.8rem;color:#456}
.fd-dig select{height:32px}
.fd-form>button{height:32px}
@media (max-width:1100px){.fd-form{grid-template-columns:repeat(3,minmax(0,1fr));}
    .fd-form .fd-dig,.fd-form>button{grid-column:span 1}}
@media (max-width:760px){.fd-form{grid-template-columns:1fr}}
.fd-tabla{max-width:560px;margin-top:8px}

/* Cambiar el destino de un flete ya asignado, en su propia fila. */
.fl-cambiar{margin-top:5px}
.fl-cambiar select{min-width:270px}

/* ── Configuración contable en TARJETAS, con el molde de las de «Tu mercado» ──────
   Cinco banderolas apiladas obligaban a bajar leyendo para encontrar la que uno busca; en
   grilla se ven las cinco de un vistazo. La diferencia con las de rubros: éstas LLEVAN A una
   pantalla en vez de marcarse, así que la tarjeta entera es el enlace. */
.cfg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:8px 0 20px}
.cfg-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:7px;padding:16px 12px 14px;border:1px solid #dfe6ee;border-radius:10px;background:#fff;
    text-decoration:none;transition:border-color .12s,box-shadow .12s}
/* La tarjeta ENTERA es un enlace, asi que hay que apagar el subrayado tambien al pasar el
   mouse: si no, se subrayan el titulo y la ayuda y la tarjeta se lee rota. */
.cfg-card,.cfg-card:hover,.cfg-card *{text-decoration:none}
.cfg-card:hover{border-color:#9dc3e6;box-shadow:0 1px 4px rgba(31,78,121,.10)}
/* Con 8 tarjetas, 4 por fila se leen mejor que 8 apretadas. */
.cfg-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.cfg-card.on{border-color:#b9dfc9;background:#fbfefc}
.cfg-card.mal{border-color:#f0c2cc;background:#fffbfc}
.cfg-ico{color:#6b8299;line-height:0}
.cfg-card.on .cfg-ico{color:#2e7d52}
.cfg-card.mal .cfg-ico{color:#9d182b}
.cfg-nombre{font-size:.9rem;font-weight:700;color:#24303d;line-height:1.25}
.cfg-ayuda{font-size:.73rem;color:#6b7680;line-height:1.4}
/* El estado se reconoce por color sin leerlo: verde listo · ámbar falta · rojo descuadra. */
.cfg-n{display:inline-flex;align-items:center;gap:4px;margin-top:auto;font-size:.7rem;
    font-weight:600;color:#2a6b4a;background:#eaf5ee;border-radius:10px;padding:2px 9px}
.cfg-n.falta{color:#7a5b12;background:#fdf6e3}
.cfg-n.mal{color:#9d182b;background:#fdeef2}
@media (max-width:1200px){.cfg-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){.cfg-grid{grid-template-columns:repeat(2,1fr)}}
/* La sub-cuenta que se abrió para el proveedor: es donde de verdad cae su gasto. */
.pi-sub{font-size:.76rem;color:#12707f;margin-bottom:4px}
.pi-sub code{font-size:.74rem;background:#eaf4f5;border-radius:3px;padding:1px 5px;margin-right:4px}

/* ── Estados Financieros: dos informes, UNA HOJA cada uno ───────────────────────── */
.ef-hoja{margin:0 0 26px}
.ef-cab{text-align:center;margin:0 0 12px}
.ef-cab h4{margin:0;font-size:.9rem;color:#456;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.ef-cab h3{margin:2px 0 0;font-size:1.15rem;color:#1f4e79}
.ef-cab p{margin:2px 0 0;font-size:.85rem;color:#567}
.ef-2col{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.ef-tabla{width:100%;font-size:.86rem}
.ef-tabla td{padding:3px 8px}
.ef-tabla th{font-size:.78rem}
/* El peso de cada fila dice su nivel: el grupo manda, la hoja acompaña. */
.ef-tabla tr.ef-n1 td{font-weight:700;color:#1f4e79;border-top:1px solid #d8e3ee;padding-top:7px}
.ef-tabla tr.ef-n2 td{font-weight:600}
.ef-tabla tr.ef-n3 td{color:#456}
.ef-tabla tr.ef-uti td{color:#14603a}
.ef-tabla tr.ef-sub td{font-weight:600;border-top:1px solid #e3e9ef;background:#fafbfc}
.ef-tabla tr.ef-tot2 td{font-weight:700;color:#1f4e79;background:#f2f7fc;border-top:1px solid #c9d9e8}
.ef-tabla tr.ef-tot td{font-weight:700;border-top:2px solid #1f4e79;background:#eef4fb;padding:7px 8px}
.ef-er{max-width:640px}
@media (max-width:900px){.ef-2col{grid-template-columns:1fr}}
@media print{
    /* «1 hoja es 1 informe» (regla de la usuaria): el segundo empieza en página nueva. */
    .ef-hoja2{page-break-before:always}
    .ef-hoja{page-break-inside:auto}
    .ef-tabla tr{page-break-inside:avoid}
    .ap-cuadre{page-break-inside:avoid}
}

/* ── Ajustes de cierre contable ──────────────────────────────────────────────────── */
.aj-form{margin:10px 0 22px}
.aj-cab{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px}
.aj-cab label{display:flex;flex-direction:column;gap:3px;font-size:.82rem;color:#456}
.aj-cab .aj-glosa{flex:1;min-width:320px}
.aj-cab input[type=text]{width:100%}
.tabla-aj col.aj-mon{width:150px}
.tabla-aj select{width:100%;max-width:100%;height:28px;font-size:.8rem}
.tabla-aj input[type=text]{width:100%;height:26px;font-size:.82rem}
.aj-item{border:1px solid #dfe6ee;border-radius:8px;padding:10px 12px;margin:0 0 12px;background:#fff}
/* El borrador descuadrado se distingue: no esta en los libros. */
.aj-item.aj-mal{border-color:#f0c2cc;background:#fffbfc}
.aj-item-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.aj-item-cab strong{color:#1f4e79}
.aj-badge{font-style:normal;font-size:.74rem;background:#fdeef2;color:#9d182b;border-radius:10px;padding:2px 9px}
.aj-acc{margin-left:auto;display:flex;gap:6px;align-items:center}
.aj-acc form{margin:0}
.aj-item td.aj-mon{width:150px}
.aj-falta{display:inline-flex;align-items:flex-start;gap:5px;color:#7a5b12;font-size:.82rem}

/* ═══ CUENTAS DE LA CARTOLA BANCARIA (Contable) ═══════════════════════════════════
   La regla contable va en un recuadro propio y no como «ayuda»: no es una advertencia,
   es la definicion de como se arma el asiento, y hay que poder leerla de un vistazo. */
.cc-regla { display:flex; gap:10px; align-items:flex-start; margin:12px 0 16px;
            padding:10px 12px; background:rgba(18,112,127,.09);
            border-left:3px solid #12707f; border-radius:4px; font-size:.86rem; line-height:1.5; }
.cc-regla svg { flex:0 0 auto; color:#12707f; margin-top:1px; }
.cc-regla code { background:#fff; padding:1px 5px; border-radius:3px; font-size:.82rem; }

.cc-tabs { display:flex; gap:6px; margin:0 0 14px; flex-wrap:wrap; }
.cc-tab { padding:6px 14px; border:1px solid #d3dbe4; border-radius:4px; background:#fff;
          color:#24303d; text-decoration:none; font-size:.82rem; }
.cc-tab.on { background:#1f4e79; border-color:#1f4e79; color:#fff; font-weight:600; }
.cc-tab.pronto { color:#8b97a4; background:#f4f6f9; cursor:default; }

.cc-pronto, .cc-nada { display:flex; gap:8px; align-items:flex-start; margin:12px 0;
                       padding:10px 12px; background:#fdf6e3; border:1px solid #e0c98a;
                       border-radius:4px; font-size:.85rem; line-height:1.5; }
.cc-pronto svg, .cc-nada svg { flex:0 0 auto; color:#b8860b; margin-top:2px; }

/* El alta: rejilla de columnas declaradas para que las etiquetas y las cajas queden
   alineadas pase lo que pase con el largo de cada texto (regla C1). */
.cc-alta { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.2fr) auto;
           gap:10px; align-items:end; margin:10px 0 6px; }
.cc-alta label { display:flex; flex-direction:column; gap:3px; font-size:.78rem; color:#5a6675; }
.cc-alta select, .cc-alta input { height:34px; box-sizing:border-box; }
.cc-alta .boton { height:34px; }
.cc-ayuda-pal { margin-top:0; }
@media (max-width:1100px) { .cc-alta { grid-template-columns:1fr 1fr; }
                            .cc-alta .boton { grid-column:1 / -1; } }

.tabla-cc col.cc-c1 { width:110px; }
.tabla-cc col.cc-c4 { width:190px; }
.tabla-cc code { font-size:.82rem; color:#1f4e79; }
.cc-pal { display:inline-block; margin:1px 3px 1px 0; padding:1px 7px; font-size:.74rem;
          background:#eef4fb; border:1px solid #d3e2f2; border-radius:10px; color:#1f4e79; }
/* La accion va centrada en su fila: el texto de la izquierda puede ocupar una o tres lineas
   y el boton tiene que quedar siempre a la misma altura. */
.cc-acc { text-align:right; white-space:nowrap; vertical-align:middle; }
.cc-acc .boton-mini { margin-left:4px; }
.cc-form-ed { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.cc-form-ed input { height:30px; box-sizing:border-box; }
.cc-form-ed input[name=alias] { width:190px; }
.cc-form-ed input[name=palabras] { flex:1; min-width:180px; }
.cc-huerfana { background:#fdeef2 !important; }
.cc-avisof { margin-top:3px; font-size:.76rem; color:#9d182b; display:flex; gap:5px; align-items:flex-start; }

.cc-avance { display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; margin:8px 0 4px; }
.cc-av { display:flex; gap:10px; align-items:center; min-width:230px; padding:10px 14px;
         border:1px solid #d3dbe4; border-radius:5px; background:#fff; font-size:.8rem;
         line-height:1.35; }
.cc-av.ok    { border-color:#2e7d52; }
.cc-av.falta { border-color:#c33044; background:#fdeef2; }
.cc-av-n { font-size:1.5rem; font-weight:700; color:#1f4e79; }
.cc-av.falta .cc-av-n { color:#9d182b; }
.cc-avance .boton { align-self:center; }

/* La cuenta propuesta desde la glosa: se dice POR QUE se propuso, para que la persona pueda
   darse cuenta de que la propuesta esta mal. */
.car-sugcta { display:inline-flex; gap:4px; align-items:center; font-size:.75rem; color:#12707f; }

/* ═══ ACTIVO FIJO · KARDEX ════════════════════════════════════════════════════════ */
.tabla-vu col.vu-c1 { width:64px; }
.tabla-vu col.vu-c3 { width:110px; }
.tabla-vu col.vu-c5 { width:130px; }
.tabla-af { font-size:.82rem; }
.tabla-af td.num, .tabla-af th.num { white-space:nowrap; }
.af-bien { font-size:.74rem; line-height:1.3; margin-top:2px; }
.af-baja { opacity:.6; }
.af-chip-baja, .af-chip-fin { display:inline-block; margin-left:6px; padding:1px 7px; font-size:.7rem;
                              border-radius:10px; }
.af-chip-baja { background:#fdeef2; border:1px solid #e8b9c2; color:#9d182b; }
.af-chip-fin  { background:#eef4fb; border:1px solid #d3e2f2; color:#1f4e79; }
/* Los montos del resumen no llevan el cuerpo de un contador: son cifras largas y a 1.5rem se
   salen de su tarjeta. */
.af-tot .af-mon { font-size:1.05rem; }
.af-tot .cc-av { min-width:200px; }

/* El alta: rejilla declarada, etiquetas arriba y todos los controles del mismo alto. */
.af-form { margin:10px 0 4px; }
.af-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;
           align-items:start; margin-bottom:10px; }
.af-grid label { display:flex; flex-direction:column; gap:3px; font-size:.78rem; color:#5a6675; }
.af-grid input, .af-grid select { height:34px; box-sizing:border-box; }
.af-grid .af-l1 { grid-column:span 2; }
.af-grid .af-l2 { grid-column:span 2; }
.af-grid .af-chk { flex-direction:row; align-items:center; gap:6px; padding-top:18px; }
.af-grid .af-chk input { height:auto; }
.af-grid input[readonly] { background:#f4f6f9; color:#5a6675; }
@media (max-width:1100px) { .af-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
                            .af-grid .af-l1, .af-grid .af-l2 { grid-column:span 2; } }
.af-desde { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 10px;
            padding:8px 12px; background:rgba(18,112,127,.09); border-left:3px solid #12707f;
            border-radius:4px; font-size:.84rem; }

/* ═══ TARJETAS COMO SELECTOR DE VISTA ═════════════════════════════════════════════
   Las dos vistas de un módulo se eligen con TARJETAS, no con pestañas chicas: cada una
   dice qué es, qué lleva dentro y en qué estado está, y «Pronto» se lee como un estado
   en vez de como un botón apagado que uno intenta pulsar. */
.cfg-grid.cfg-2 { grid-template-columns:repeat(2, minmax(0,1fr)); max-width:820px; }
/* La que se está mirando: filete grueso, no otro color de fondo — el color ya lo usa el
   estado (verde listo / ámbar falta) y agregar un tercero rompería la lectura. */
.cfg-card.aqui { border-color:#1f4e79; box-shadow:inset 0 0 0 1px #1f4e79; }
.cfg-card.pronto { opacity:.72; }
.cfg-card.pronto .cfg-ico { color:#8b97a4; }

/* ═══ ACTIVO FIJO: lo que el SII marcó ════════════════════════════════════════════ */
.af-marcadas { display:flex; gap:10px; align-items:flex-start; margin:12px 0;
               padding:10px 12px; background:#fdf6e3; border:1px solid #e0c98a;
               border-left:3px solid #b8860b; border-radius:4px; font-size:.86rem; line-height:1.5; }
.af-marcadas svg { flex:0 0 auto; color:#b8860b; margin-top:1px; }
.af-marca { display:inline-block; margin-left:6px; padding:1px 7px; font-size:.7rem;
            background:#eef4fb; border:1px solid #9fc2e4; border-radius:10px; color:#1f4e79; }
.af-chk2 { flex-direction:row !important; align-items:center; gap:6px; font-size:.8rem; }
.af-chk2 input { height:auto; }
.af-vida { display:flex; align-items:center; height:34px; padding:0 10px; box-sizing:border-box;
           background:#eef4fb; border:1px solid #d3e2f2; border-radius:4px; font-size:.8rem;
           color:#1f4e79; font-weight:600; }
.af-otra { font-size:.7rem; color:#8b97a4; font-weight:400; margin-top:1px; }
.af-chip-sd { display:inline-block; margin-left:6px; padding:1px 7px; font-size:.7rem;
              border-radius:10px; background:#f4f6f9; border:1px solid #d3dbe4; color:#5a6675; }
.af-informe select { height:32px; }
/* El titulo del informe existe SOLO en el papel: en pantalla el selector ya dice cual es. */
.af-titimp { display:none; }
@media print {
    .af-titimp { display:block; margin:0 0 10px; font-size:1rem; }
    .af-informe, .bal-fechas, .cfg-grid, .cb-volver, .cc-pronto, .af-marcadas { display:none !important; }
}
/* El buscador va PEGADO sobre su selector: con 207 bienes, escribir es la unica forma de llegar. */
.af-busca { height:30px; box-sizing:border-box; margin-bottom:3px; font-size:.8rem; }
.af-cuantos { font-size:.72rem; color:#12707f; margin-top:2px; min-height:14px; }
.tabla-vu td:nth-child(2) { font-size:.8rem; line-height:1.35; }
.vu-sec { background:#eef4fb !important; font-weight:700; font-size:.78rem; color:#1f4e79;
          letter-spacing:.02em; }
.vu-nodep { color:#8b97a4; font-style:italic; }
/* ═══ CARTOLA: lado y flujo de efectivo ══════════════════════════════════════════ */
.cc-alta.cc-alta5 { grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr) minmax(0,.85fr) minmax(0,1fr) minmax(0,1.1fr) auto; }
@media (max-width:1300px) { .cc-alta.cc-alta5 { grid-template-columns:repeat(3, minmax(0,1fr)); }
                            .cc-alta.cc-alta5 .boton { grid-column:1 / -1; } }
.tabla-cc col.cc-c3 { width:118px; }
.cc-lado, .cc-flujo { display:inline-block; padding:1px 8px; font-size:.72rem; border-radius:10px;
                      white-space:nowrap; }
.cc-lado-CB    { background:#fdeef2; border:1px solid #e8b9c2; color:#9d182b; }
.cc-lado-DB    { background:#e8f4ec; border:1px solid #a9d2ba; color:#14603a; }
.cc-lado-ambos { background:#eef4fb; border:1px solid #9fc2e4; color:#1f4e79; }
.cc-fl-operacion      { background:rgba(18,112,127,.12); border:1px solid #8dc0c7; color:#0d5661; }
.cc-fl-inversion      { background:#fdf6e3; border:1px solid #e0c98a; color:#8a6714; }
.cc-fl-financiamiento { background:#f3eefb; border:1px solid #c9b6e6; color:#5b3f8c; }
.cc-ejemplo { margin-top:-4px; }
.fl-tabla .ef-n1 td { background:#eef4fb; font-weight:600; }
.fl-tabla .ef-n3 td { font-size:.82rem; }
/* El IVA de uso comun se distingue pero no se marca como problema: es un dato, no un error. */
.iva-comun { background:rgba(18,112,127,.08); }
.af-acc { display:block; font-size:.74rem; color:#12707f; margin-top:2px; min-height:14px; }
.af-acc.af-acc-no { color:#8b97a4; font-style:italic; }
/* ═══ LOS DOCUMENTOS QUE GENERAN LA DIFERENCIA CON EL SII ════════════════════════
   Cada bloque dice QUÉ hacer con esos documentos, no sólo que difieren: el color
   distingue «falta cargarla» de «sobra» y de «está por otro monto». */
.rcv-bloque { margin:14px 0; }
.rcv-tit { display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap;
           padding:8px 12px; border-radius:4px 4px 0 0; font-size:.85rem; line-height:1.45; }
.rcv-tit svg { flex:0 0 auto; margin-top:2px; }
.rcv-tit strong { flex:0 0 auto; }
.rcv-tit span { flex:1 1 260px; opacity:.85; }
.rcv-falta .rcv-tit { background:#fdeef2; border:1px solid #e8b9c2; border-bottom:none; color:#9d182b; }
.rcv-sobra .rcv-tit { background:#fdf6e3; border:1px solid #e0c98a; border-bottom:none; color:#8a6714; }
.rcv-dif   .rcv-tit { background:#eef4fb; border:1px solid #9fc2e4; border-bottom:none; color:#1f4e79; }
.tabla-rcv { font-size:.82rem; }
.tabla-rcv td.nowrap { white-space:nowrap; }
/* Cargar el XML desde la propia lista de pendientes: la comparación deja de ser un informe y
   pasa a ser el punto de control. */
.rcv-lote { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px 12px;
            background:#fff; border:1px solid #e8b9c2; border-top:none; font-size:.8rem; }
.rcv-lote span { display:inline-flex; gap:5px; align-items:center; color:#5a6675; }
.rcv-lote input[type=file] { flex:1; min-width:220px; font-size:.78rem; }
.rcv-uno { display:flex; gap:5px; align-items:center; }
.rcv-uno input[type=file] { width:150px; font-size:.72rem; }
.rcv-uno .boton-mini { white-space:nowrap; }
/* El rastro de las comparaciones con el SII: plegado cuando ya hay una a la vista, abierto
   cuando no — que es cuando uno viene a ver si alguien ya la hizo. */
.rcv-hist { margin:10px 0 14px; }
.rcv-hist > summary { cursor:pointer; font-size:.84rem; padding:7px 12px; background:#f4f6f9;
                      border:1px solid #d3dbe4; border-radius:4px; display:flex; gap:7px;
                      align-items:center; flex-wrap:wrap; }
.rcv-hist[open] > summary { border-radius:4px 4px 0 0; }
.rcv-hist .tabla-caja { border:1px solid #d3dbe4; border-top:none; }
.tabla-hist { font-size:.8rem; }
.tabla-hist a { display:inline-flex; gap:4px; align-items:center; }