/* ============================================================================
   PORTAL DE ASOCIADOS - Listados del menu Compras
   2026-08-13 - David Caicedo
   ----------------------------------------------------------------------------
   Estilo compartido por las dos pantallas de consulta del menu Compras:

       views/cotizacion.php            ->  Compras > Cotizados
       views/cotizacion_aprobadas.php  ->  Compras > Ordenes de compra

   DE DONDE SALE EL DISENO
   De "Opciones Tabla.dc.html", propuesta 1c ( "Full-bleed: la tabla emerge del
   hero, de borde a borde" ), del proyecto de Claude Design "Rediseno formulario
   cotizacion glassmorphism".

   LA IDEA DE 1c
   Hero y tabla son UN SOLO bloque de esquinas redondeadas, no una tarjeta blanca
   flotando debajo de un hero aparte. El encabezado de la tabla se pega al hero en
   un tono mas oscuro de la misma marca, las filas van sobre blanco de borde a
   borde y el bloque cierra con un pie de conteo. Se gana el ancho que antes se
   iba en margenes y en el corte visual entre hero y tarjeta.

   PALETA
   El diseno deriva todos los tonos de UN color de marca ( --b5 ) con color-mix.
   Aqui ese color NO se quema: sale de --portal-c1, que es el color configurado
   del cliente ( tbl_confport ), igual que en el resto del portal.

   POR QUE CUELGA DE .lst-page Y NO DE UNA CLASE DEL BODY
   Las otras vistas encienden body.portal-home / body.portal-cotizar y
   js/panel.js las apaga al navegar. Aqui se usa un contenedor propio: la vista
   se reemplaza entera al cambiar de opcion, asi que el estilo se va con ella y
   no hace falta tocar js/panel.js ni arriesgar que la clase quede pegada.

   NADA DE ESTO CAMBIA IDs, names NI onclick: js/cotizacion.js sigue leyendo
   #div_lista, #div_detalles, #div_detallesCotizacion, #indicaMostrar,
   #indicaMostrarDetalle, #bodyRequisitos, #bodyCotizacion, los hidden
   nombreRequireq_i_j y las llamadas verDetalle(), verRequisitos() y valida().
   ========================================================================== */

/* ------------------------------------------------------------------ Tokens */
.lst-page {
    --lst-b5: var(--portal-c1, #2b628f);
    --lst-b9: color-mix(in srgb, var(--lst-b5), #050e18 62%);
    --lst-b7: color-mix(in srgb, var(--lst-b5), #071c30 42%);
    --lst-b3: color-mix(in srgb, var(--lst-b5), #ffffff 22%);

    --lst-tinte-7:  color-mix(in srgb, var(--lst-b5)  7%, #fff);
    --lst-tinte-10: color-mix(in srgb, var(--lst-b5) 10%, #fff);
    --lst-tinte-14: color-mix(in srgb, var(--lst-b5) 14%, #fff);
    --lst-tinte-20: color-mix(in srgb, var(--lst-b5) 20%, #fff);
    --lst-tinte-22: color-mix(in srgb, var(--lst-b5) 22%, #fff);

    --lst-ink: #16324a;
    --lst-ink2: #3c5a75;
    --lst-muted: #5d7285;
    --lst-muted2: #7d93a6;
    --lst-line: #e5ecf3;
    --lst-line2: #eef3f8;

    /* Respiro lateral DENTRO del bloque. Es el del diseno: 34px en pantalla
       grande, menos en movil. */
    --lst-aire: clamp(16px, 2.4vw, 34px);
}

/* Navegadores sin color-mix ( Safari viejo ): se cae a tonos planos y la
   pantalla sigue siendo legible, solo pierde la degradacion fina. */
@supports not (color: color-mix(in srgb, #000, #fff)) {
    .lst-page {
        --lst-b9: #0d2135;
        --lst-b7: #17415f;
        --lst-b3: #5b8db3;
        --lst-tinte-7:  #f2f7fb;
        --lst-tinte-10: #edf4f9;
        --lst-tinte-14: #e4eff7;
        --lst-tinte-20: #d8e7f2;
        --lst-tinte-22: #d3e4f0;
    }
}

/* ============================================================ Ancho total = */
/* portal-shell.css le pone max-width:1180px a .container dentro de #panel_central.
   Esa medida esta pensada para leer ( el home y el formulario de cotizacion ),
   pero aqui lo que hay es una tabla de once columnas. Se anula SOLO en estas dos
   pantallas; el resto del portal conserva su ancho de lectura. El selector repite
   el de portal-shell y agrega .lst-page para ganarle en especificidad sin
   recurrir a !important. */
body.portal-page #panel_central .container.lst-page,
.lst-page.container {
    width: 100%;
    max-width: none;
    padding-left: clamp(12px, 2vw, 34px);
    padding-right: clamp(12px, 2vw, 34px);
}

/* ====================================================== Banda del fondo === */
/* .portal-hero queda VACIO a proposito: en 1c el titulo vive dentro del bloque.
   Lo unico que sigue haciendo es pintar la banda de color a sangre completa que
   va detras del navbar y del breadcrumb ( ver portal-shell.css ), para que la
   pildora de vidrio del breadcrumb tenga sobre que apoyarse. La banda baja lo
   suficiente para quedar tapada por el bloque, asi que del navbar hacia abajo el
   color se ve continuo y no hay franja gris intermedia. */
.lst-page .portal-hero {
    padding-bottom: 16px;
}

.lst-page .portal-hero::before {
    background: linear-gradient(120deg, var(--lst-b7) 0%, var(--lst-b5) 55%, var(--lst-b3) 100%);
    background-attachment: scroll;
}

/* ================================================================= Bloque = */
.lst-page .lst-bloque {
    position: relative;
    z-index: 15;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(22, 50, 74, .12);
    background: #fff;
}

.lst-page .lst-bloque + .lst-bloque { margin-top: 22px; }

/* ------------------------------------------------------- Hero del bloque - */
.lst-page .lst-bloque-hero {
    padding: 26px var(--lst-aire) 22px;
    background: linear-gradient(120deg, var(--lst-b7) 0%, var(--lst-b5) 55%, var(--lst-b3) 100%);
}

.lst-page .lst-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

.lst-page .lst-hero-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: 6px;
}

.lst-page .lst-hero-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.lst-page .lst-title {
    margin: 0;
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: #fff;
}

.lst-page .lst-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.lst-page .lst-chip svg { width: 14px; height: 14px; flex: none; }

/* Identidad a la derecha del titulo. En 1c va como texto suelto y no como
   pastillas: son un dato de contexto, no algo en lo que haya que hacer clic. */
.lst-page .lst-meta-linea {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .8);
}

/* ================================================================== Tabla = */
.lst-page .lst-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--lst-tinte-22) transparent;
}

.lst-page .lst-scroll::-webkit-scrollbar { height: 9px; }
.lst-page .lst-scroll::-webkit-scrollbar-track { background: transparent; }

.lst-page .lst-scroll::-webkit-scrollbar-thumb {
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--lst-tinte-22);
}

.lst-page .lst-scroll:hover::-webkit-scrollbar-thumb { background: var(--lst-b3); }

.lst-page .lst-tabla {
    width: 100%;
    min-width: 1080px;
    margin: 0;
    border-collapse: collapse;
    font-size: 13.5px;
    background: #fff;
}

/* La de cotizados lleva mas columnas */
.lst-page .lst-tabla--ancha { min-width: 1180px; }
.lst-page .lst-tabla--auto  { min-width: 0; }

/* El encabezado se pega al hero: mismo color de marca en su tono mas oscuro y una
   linea clara arriba, para que se lea como continuacion y no como otro bloque. */
.lst-page .lst-tabla thead {
    background-color: var(--lst-b7);
}

.lst-page .lst-tabla thead th {
    padding: 14px 12px;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, .18);
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    text-align: left;
}

.lst-page .lst-tabla thead th:first-child { padding-left: var(--lst-aire); }
.lst-page .lst-tabla thead th:last-child  { padding-right: var(--lst-aire); }

.lst-page .lst-tabla tbody td {
    padding: 18px 12px;
    border: none;
    border-bottom: 1px solid var(--lst-line2);
    color: var(--lst-ink);
    vertical-align: middle;
    transition: background .15s ease;
}

.lst-page .lst-tabla tbody td:first-child { padding-left: var(--lst-aire); }
.lst-page .lst-tabla tbody td:last-child  { padding-right: var(--lst-aire); }

.lst-page .lst-tabla tbody tr:hover td { background: #f7fafd; }

.lst-page .lst-cen { text-align: center; }
.lst-page .lst-der { text-align: right; }

.lst-page .lst-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Consecutivo interno */
.lst-page .lst-clave {
    font-size: 14px;
    font-weight: 700;
    color: var(--lst-ink);
}

/* Valor de dinero */
.lst-page .lst-valor {
    font-size: 14px;
    font-weight: 800;
    color: var(--lst-b7);
}

.lst-page .lst-texto {
    display: block;
    max-width: 260px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--lst-ink2);
}

.lst-page .lst-texto--fuerte {
    font-weight: 600;
    color: var(--lst-ink);
}

.lst-page .lst-suave  { font-size: 13px; color: var(--lst-muted2); }
.lst-page .lst-dato   { font-size: 13px; font-weight: 600; color: var(--lst-muted); }
.lst-page .lst-unidad { font-size: 13px; color: var(--lst-ink2); }

/* Una linea con puntos suspensivos ( correos largos del responsable ) */
.lst-page .lst-corta {
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--lst-ink2);
}

/* --------------------------------------------------- Numero de SAP ------- */
/* Peticion de oferta y orden de compra: son documentos de OTRO sistema, y el
   diseno los distingue del consecutivo interno con un chip enlazado. */
.lst-page .lst-sap {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid var(--lst-tinte-20);
    border-radius: 8px;
    background: var(--lst-tinte-7);
    font-size: 13px;
    font-weight: 700;
    color: var(--lst-b5);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: background .15s ease;
}

a.lst-sap:hover,
a.lst-sap:focus {
    background: var(--lst-tinte-14);
    color: var(--lst-b5);
    text-decoration: none;
}

/* ---------------------------------------------------------- Estado ------- */
.lst-page .lst-estado {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.4;
}

.lst-page .lst-estado--pend { background: #fdf3dc; border-color: #f3e2b3; color: #8a6116; }
.lst-page .lst-estado--ok   { background: #eaf7ef; border-color: #cdead8; color: #2e7a4b; }
.lst-page .lst-estado--no   { background: #fdf1f1; border-color: #f2cfcf; color: #b03636; }
.lst-page .lst-estado--na   { background: #eef1f5; border-color: #e0e6ec; color: var(--lst-muted); }

/* ---------------------------------------------------------- Acciones ----- */
.lst-page .lst-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1.5px solid #dbe5ee;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.lst-page .lst-accion svg {
    width: 15px;
    height: 15px;
    stroke: var(--lst-b5);
}

.lst-page a.lst-accion:hover,
.lst-page a.lst-accion:focus,
.lst-page button.lst-accion:hover {
    border-color: var(--lst-b5);
    background: var(--lst-tinte-7);
}

.lst-page .lst-accion--ok        { border-color: #cde7d4; background: #f0faf3; }
.lst-page .lst-accion--ok svg    { stroke: #2e9e57; stroke-width: 2.6; }
.lst-page .lst-accion--ok:hover  { border-color: #2e9e57; background: #e0f4e7; }

.lst-page .lst-accion--no        { border-color: #f2cfcf; background: #fdf1f1; }
.lst-page .lst-accion--no svg    { stroke: #d94a4a; stroke-width: 2.6; }
.lst-page .lst-accion--no:hover  { border-color: #d94a4a; background: #fae3e3; }

/* PDF que genera SAP ( Smartform ). Se tiñe con el color de marca para separarlo
   del adjunto interno, que es el clip en blanco de la columna de al lado. */
.lst-page .lst-accion--sap       { border-color: var(--lst-tinte-22); background: var(--lst-tinte-7); }
.lst-page a.lst-accion--sap:hover,
.lst-page a.lst-accion--sap:focus { border-color: var(--lst-b5); background: var(--lst-tinte-14); }

/* =================================================================== Pie = */
.lst-page .lst-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px var(--lst-aire) 18px;
    background: #fff;
    font-size: 12.5px;
    color: var(--lst-muted2);
}

.lst-page .lst-pie-total {
    font-weight: 700;
    color: var(--lst-b5);
}

/* ============================================================ Sin registros */
.lst-page .lst-empty {
    padding: 52px 20px 44px;
    background: #fff;
    text-align: center;
}

.lst-page .lst-empty-illo {
    position: relative;
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    margin: 0 auto;
    border: 1px solid var(--lst-tinte-20);
    border-radius: 34px;
    background: linear-gradient(135deg, var(--lst-tinte-14), var(--lst-tinte-7));
}

.lst-page .lst-empty-illo svg {
    width: 44px;
    height: 44px;
    stroke: var(--lst-b5);
    opacity: .7;
}

.lst-page .lst-empty-illo .lst-empty-dot {
    position: absolute;
    top: 24px;
    right: 26px;
    width: 14px;
    height: 14px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lst-b3), var(--lst-b5));
}

.lst-page .lst-empty h4 {
    margin: 22px 0 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--lst-ink);
}

.lst-page .lst-empty .lst-empty-sub {
    margin: 8px auto 0;
    max-width: 470px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--lst-muted);
}

.lst-page .lst-meta-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--lst-line);
}

.lst-page .lst-meta-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--lst-line);
    border-radius: 999px;
    background: #f7fafd;
    font-size: 13px;
    font-weight: 500;
    color: var(--lst-muted);
}

.lst-page .lst-meta-chip b { color: var(--lst-ink); }
.lst-page .lst-meta-chip svg { width: 14px; height: 14px; flex: none; stroke: var(--lst-b5); }

/* ===================================================== Paneles laterales = */
/* El detalle de la cotizacion y los requisitos: los abre js/cotizacion.js y no
   son parte del listado, asi que van como bloque propio con su encabezado. */
.lst-page .lst-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px var(--lst-aire);
    background: linear-gradient(120deg, var(--lst-b7) 0%, var(--lst-b5) 100%);
    color: #fff;
}

.lst-page .lst-panel-head h3 {
    margin: 0;
    flex: 1;
    font-size: 15.5px;
    font-weight: 700;
    color: #fff;
}

/* 2026-08-19 - David Caicedo - El icono del titulo salia gigante, ocupando el panel
   entero: es un <svg> en linea sin width ni height, y sin medidas el navegador le da el
   tamano por defecto ( 300x150 ) y encima el flex lo estira. La X de cerrar no se veia asi
   porque mas abajo si tiene su regla propia. Se mide solo el hijo directo para no pisarla. */
.lst-page .lst-panel-head svg { stroke: #fff; }

.lst-page .lst-panel-head > svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

.lst-page .lst-panel-count {
    padding: 4px 11px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.lst-page .lst-panel-cerrar {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease;
}

.lst-page .lst-panel-cerrar:hover { background: rgba(255, 255, 255, .18); }
.lst-page .lst-panel-cerrar svg { width: 15px; height: 15px; }

/* ================================================================ Movil === */
@media (max-width: 700px) {
    .lst-page .lst-bloque { border-radius: 14px; }
    .lst-page .lst-bloque-hero { padding: 20px var(--lst-aire) 18px; }
    .lst-page .lst-hero-fila { align-items: flex-start; }
    .lst-page .lst-tabla { font-size: 12.5px; }
    .lst-page .lst-tabla thead th { padding: 11px 9px; }
    .lst-page .lst-tabla tbody td { padding: 13px 9px; }
    .lst-page .lst-texto { max-width: 190px; }
    .lst-page .lst-empty { padding: 36px 14px 30px; }
}

/* ============================================================== Filtros ====
   2026-08-22 - David Caicedo - Las cuatro pantallas de consulta de SAP
   ( pagos, facturas, certificados, anticipos ) tenian el panel gris de
   Bootstrap "Filtros de Busqueda" con el texto explicativo suelto al lado.
   Pasan al mismo bloque del resto de los listados.

   La franja de los campos va en BLANCO, entre el hero azul y la tabla: son
   controles que se llenan y se leen, y sobre el color de marca competian con el
   titulo. El hero de arriba ( antetitulo, titulo y nota ) no cambia.

   Los campos son <input>/<select> de siempre, con sus mismos id y name: lo que
   cambia es como se ven. js/pago.js, js/factura.js, js/certificado.js y
   js/anticipo.js siguen leyendo #fechaInicio, #fechaFin, #Factura, #fechaAno,
   #codigoPattipce, #codigoPatperio y #codigoMesxxxxx tal cual.
   ========================================================================== */
.lst-page .lst-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px 16px;
    padding: 18px var(--lst-aire);
    border-bottom: 1px solid var(--lst-line);
    background: #fff;
}

/* La franja va de borde a borde del bloque, SIEMPRE.
   2026-08-22 - David Caicedo - Si el bloque de filtros quedo dentro de .lst-bloque-hero
   ( la version anterior de la vista, o una copia que todavia no se haya subido ), la
   sangria del hero lo dejaba flotando: franja blanca angosta con azul a lado y lado y
   una franja de azul debajo. Con los margenes negativos se sale de esa sangria y se ve
   igual que cuando cuelga directo del bloque. No hay que acordarse de nada al copiar la
   vista a otro modulo.                                                                */
.lst-page .lst-bloque-hero > .lst-filtros {
    margin: 18px calc(var(--lst-aire) * -1) -22px;
    border-bottom: 0;
    border-radius: 0;
}

.lst-page .lst-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* display:block y no inline: js/certificado.js muestra y esconde los campos con
   $("#divAno").css("display","block"), lo que anula el flex del contenedor. Con el
   rotulo en bloque el campo se sigue viendo debajo y no al lado.               */
.lst-page .lst-campo-rotulo {
    display: block;
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--lst-muted2);
}

/* Alto fijo para que un <select> y un <input type=date> queden a la misma
   altura: el navegador les da cajas distintas y se veian escalonados.        */
.lst-page .lst-campo-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--lst-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--lst-ink);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.lst-page select.lst-campo-input {
    /* La flechita propia, porque appearance:none se la quita. */
    padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d7285' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 15px 15px;
}

.lst-page .lst-campo-input::placeholder { color: var(--lst-muted2); }

.lst-page .lst-campo-input:hover { border-color: var(--lst-b3); }

/* El foco se marca con el color de marca, no con el contorno azul del sistema:
   asi se ve igual en cualquier cliente.                                       */
.lst-page .lst-campo-input:focus {
    outline: none;
    border-color: var(--lst-b5);
    box-shadow: 0 0 0 3px var(--lst-tinte-20);
}

.lst-page .lst-campo-input option { color: var(--lst-ink); }

.lst-page .lst-campo-input::-webkit-calendar-picker-indicator {
    opacity: .55;
    cursor: pointer;
}

.lst-page .lst-campo-input::-webkit-calendar-picker-indicator:hover { opacity: .9; }

.lst-page .lst-campo--oculto { display: none; }

/* El boton de buscar se alinea con los campos, no con los rotulos: por eso la
   columna empuja su contenido hacia abajo.                                    */
.lst-page .lst-campo--accion {
    justify-content: flex-end;
}

.lst-page .lst-buscar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--lst-b5);
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: background .15s ease, transform .15s var(--ease-spring, ease), box-shadow .15s ease;
}

.lst-page .lst-buscar svg { width: 15px; height: 15px; stroke: currentColor; }

.lst-page .lst-buscar:hover,
.lst-page .lst-buscar:focus {
    background: var(--lst-b7);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--lst-b5) 30%, transparent);
}

.lst-page .lst-buscar:active { transform: none; }

@supports not (color: color-mix(in srgb, #000, #fff)) {
    .lst-page .lst-buscar:hover,
    .lst-page .lst-buscar:focus { box-shadow: 0 8px 20px rgba(22, 50, 74, .22); }
}

/* --------------------------------------------------------- Nota del modulo */
/* El parrafo que explicaba para que sirve la pantalla estaba en una columna
   aparte, a la derecha, y en movil quedaba colgando debajo de todo. Va debajo
   del titulo, que es donde se lee.                                           */
.lst-page .lst-nota {
    margin: 8px 0 0;
    max-width: 720px;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
}

/* ------------------------------------------------------------------ Excel  */
.lst-page .lst-excel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--lst-line);
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--lst-b5);
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

.lst-page .lst-excel:hover,
.lst-page .lst-excel:focus {
    border-color: var(--lst-b3);
    background: var(--lst-tinte-7);
    color: var(--lst-b7);
    text-decoration: none;
}

.lst-page .lst-excel svg { width: 15px; height: 15px; stroke: currentColor; }

.lst-page .lst-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px var(--lst-aire);
    border-bottom: 1px solid var(--lst-line);
    background: #fff;
}

.lst-page .lst-barra-total {
    font-size: 13px;
    color: var(--lst-muted);
}

.lst-page .lst-barra-total b { color: var(--lst-ink); }

@media (max-width: 700px) {
    .lst-page .lst-filtros { grid-template-columns: 1fr; padding: 16px var(--lst-aire); }
    /* El hero tiene menos padding abajo en movil: el margen negativo lo sigue. */
    .lst-page .lst-bloque-hero > .lst-filtros { margin-bottom: -18px; }
    .lst-page .lst-buscar  { width: 100%; }
}

/* ============================================================================
   2026-08-24 - David Caicedo - VENTANA DEL DETALLE DE UNA COTIZACION
   ----------------------------------------------------------------------------
   Reemplaza al panel lateral #div_detallesCotizacion, que le quitaba la mitad
   del ancho al listado. Es la misma ventana que ve el proveedor mientras
   cotiza ( "Mi cotizacion", css/cotizar.css ), con el mismo historial.

   Los colores se definen AQUI y no se heredan de .lst-page: las ventanas se
   pintan al final de la vista, fuera de ese contenedor, para no quedar
   atrapadas en el scroll horizontal de la tabla.
   ========================================================================== */
.cotd-modal {
    --cotd-ink:    #16324a;
    --cotd-muted:  #5d7285;
    --cotd-muted2: #7d93a6;
    --cotd-line:   #e5ecf3;
    --cotd-line2:  #eef3f8;
    --cotd-azul:   #1d5c8c;
    --cotd-azul2:  #12405f;

    position: fixed;
    inset: 0;
    z-index: 10600;   /* por encima del navbar del portal */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(9, 30, 48, .55);
    font-family: 'Nunito Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.cotd-modal.is-open { display: flex; }

/* Mientras la ventana este abierta el fondo no scrollea: si no, la rueda del
   raton mueve el listado de atras en vez de la tabla de adentro. */
body.cotd-abierto { overflow: hidden; }

.cotd-caja {
    display: flex;
    flex-direction: column;
    width: 1060px;
    max-width: 100%;
    max-height: 88vh;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 60px rgba(9, 30, 48, .38);
}

/* ------------------------------------------------------------------ Cabecera */
.cotd-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 26px;
    background: linear-gradient(135deg, var(--cotd-azul), var(--cotd-azul2));
    color: #fff;
}

.cotd-head h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
}

.cotd-head p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .82);
}

.cotd-x {
    margin-left: auto;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}

.cotd-x:hover, .cotd-x:focus { background: rgba(255, 255, 255, .3); outline: none; }

/* -------------------------------------------------------------------- Cuerpo */
.cotd-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 26px;
    background: #fff;
}

.cotd-nota {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    border-left: 4px solid #e0a144;
    background: #fdf6ea;
    font-size: 13px;
    line-height: 1.5;
    color: #7a5417;
}

/* La tabla puede ser ancha ( con las dos columnas de SAP son diez ): scrollea
   dentro de la ventana, no arrastra la pagina. */
.cotd-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cotd-tabla {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--cotd-ink);
}

.cotd-tabla thead th {
    padding: 0 10px 9px;
    border: 0;
    border-bottom: 2px solid var(--cotd-line);
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: left;
    color: var(--cotd-muted2);
    white-space: nowrap;
}

.cotd-tabla tbody td {
    padding: 11px 10px;
    border: 0;
    border-bottom: 1px solid var(--cotd-line2);
    vertical-align: top;
}

.cotd-tabla th.cotd-c, .cotd-tabla td.cotd-c { text-align: center; }
.cotd-tabla th.cotd-d, .cotd-tabla td.cotd-d { text-align: right; white-space: nowrap; }

.cotd-item { font-weight: 700; line-height: 1.35; }

.cotd-sub {
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--cotd-muted2);
}

.cotd-obs {
    max-width: 260px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--cotd-muted);
    word-break: break-word;
}

/* Version reemplazada: se ve, pero se nota que ya no es la que evaluan. */
.cotd-vieja td { color: var(--cotd-muted2); }
.cotd-vieja .cotd-item { font-weight: 600; color: var(--cotd-muted2); }
.cotd-vieja .cotd-d b  { font-weight: 600; }

/* ----------------------------------------------------------------------- Pie */
.cotd-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 15px 26px;
    border-top: 1px solid var(--cotd-line);
    background: #f7fafc;
}

.cotd-total { font-size: 14px; color: var(--cotd-muted); }
.cotd-total b { font-size: 17px; color: var(--cotd-ink); }

.cotd-cerrar {
    padding: 10px 22px;
    border: 0;
    border-radius: 10px;
    background: var(--cotd-azul);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s ease;
}

.cotd-cerrar:hover, .cotd-cerrar:focus { filter: brightness(1.1); color: #fff; outline: none; }

@media (max-width: 700px) {
    .cotd-modal { padding: 12px 8px; }
    .cotd-caja  { max-height: 94vh; }
    .cotd-head, .cotd-body, .cotd-foot { padding-left: 16px; padding-right: 16px; }
}