/* Table container — matches prod rava-gray-border + rava-box-shadow */
.tabla-cotizaciones {
    contain: layout style;
    /* Anti-CLS: reservar alto aprox. del listado principal.
       Listados típicos tienen 20-40 filas (~22px cada una + header ~48px + tabs ~48px). */
    min-height: 700px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 4px;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
}

/* ====== TABS — full width, matching prod ====== */
.tabla-cotizaciones .row {
    margin-bottom: 0;
}
.tabla-cotizaciones .row div {
    padding: 0;
}
.tabla-cotizaciones .tabs {
    background: white !important;
    height: 48px;
    width: 100%;
}
.tabla-cotizaciones .tabs .tab a {
    color: var(--rava-blue-medium);
    background-color: white !important;
    font-weight: 700;
    font-size: 14px;
    padding: 0 10px;
}
.tabla-cotizaciones .tabs .tab a.active,
.tabla-cotizaciones .tabs .tab a:hover,
.tabla-cotizaciones .tabs .tab a.active:hover {
    color: var(--rava-gold-medium) !important;
}
.tabla-cotizaciones .tabs .indicator {
    background-color: var(--rava-gold-medium);
    height: 4px;
    border: 0;
}

/* ====== TABLE base — 12px mobile-first ====== */
.tabla-cotizaciones table {
    margin: 0;
    font-size: 12px;
    width: 100%;
    white-space: nowrap;
    /* Anti-CLS: ancho de columnas fijo. Sin esto, la columna "Especie"
       (variable) hace que las otras columnas se re-midan cuando llegan
       más filas o carga Lato, y empuja el contenido. */
    table-layout: fixed;
}

/* Header row */
.tabla-cotizaciones table thead tr {
    background: rgba(29, 104, 167, 0.1);
}
.tabla-cotizaciones table th {
    font-size: 10px;
    text-align: right;
    padding: 3px 5px;
    padding-left: 0;
    color: rgba(0, 0, 0, 0.87);
    cursor: pointer;
    white-space: nowrap;
    font-weight: 700;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 0;
}
/* First column left-aligned */
.tabla-cotizaciones table th:first-of-type,
.tabla-cotizaciones table td:first-of-type {
    text-align: left;
    padding-left: 10px;
}
/* Last column + hora padding-right */
.tabla-cotizaciones table th:last-of-type,
.tabla-cotizaciones table td:last-of-type,
.tabla-cotizaciones table th.hora,
.tabla-cotizaciones table td.hora {
    padding-right: 10px;
}

/* Sort arrows */
.tabla-cotizaciones table th .down,
.tabla-cotizaciones table th .up {
    font-size: 8px;
    color: rgba(0, 0, 0, 0.5);
    margin-left: 2px;
    display: inline-block;
    vertical-align: middle;
}
.tabla-cotizaciones table th:hover .down,
.tabla-cotizaciones table th:hover .up {
    color: var(--rava-gold-medium);
}
.tabla-cotizaciones table th .ocultar-filtro {
    display: none;
}
.tabla-cotizaciones table th.seleccionado {
    color: var(--rava-gold-medium);
}

/* Data cells */
.tabla-cotizaciones table tr {
    border: 0 !important;
}
.tabla-cotizaciones table td,
.tabla-cotizaciones table th {
    border: none !important;
    border-bottom: none !important;
}
.tabla-cotizaciones table td {
    padding: 3px 5px;
    text-align: right;
    border-radius: 0;
}
.tabla-cotizaciones table td:first-of-type {
    font-weight: 700;
}
.tabla-cotizaciones table td:first-of-type a {
    color: var(--rava-blue-medium);
}
.tabla-cotizaciones table td:first-of-type a:hover {
    color: var(--rava-gold-medium);
}
/* Zebra striping */
.tabla-cotizaciones table tr:nth-child(odd) {
    background: rgba(0, 0, 0, 0.03);
}
.tabla-cotizaciones table tr:hover {
    background: var(--rava-blue-02);
}
/* Header row never changes on hover */
.tabla-cotizaciones table thead tr:hover {
    background: rgba(29, 104, 167, 0.1);
}

/* ====== DARK MODE ====== */
.dark .tabla-cotizaciones {
    contain: layout style;
    min-height: 700px; border-color: var(--dark-mode-gray); box-shadow: 0 5px 20px rgba(0,0,0,.3); }
.dark .tabla-cotizaciones table { background: var(--dark-mode); }
.dark .tabla-cotizaciones table thead tr,
.dark .tabla-cotizaciones table thead tr:hover { background: var(--dark-mode-gray); }
.dark .tabla-cotizaciones table th { color: var(--lightgray, #ccc); }
.dark .tabla-cotizaciones table td { color: var(--lightgray); }
.dark .tabla-cotizaciones table td:first-of-type a { color: var(--lightgray); transition: color .12s linear; }
.dark .tabla-cotizaciones table td:first-of-type a:hover { color: var(--dark-mode-gold); }
.dark .tabla-cotizaciones table tr:nth-child(odd) { background: rgba(0,0,0,.1); }
.dark .tabla-cotizaciones table tr:hover { background: var(--rava-blue-02); }
.dark .tabla-cotizaciones .tabs { background: var(--dark-mode) !important; }
.dark .tabla-cotizaciones .tabs .tab a { color: var(--dark-mode-gold) !important; background: var(--dark-mode) !important; }
.dark .tabla-cotizaciones .tabs .tab a.active { color: var(--dark-mode-gold) !important; }
.dark .tabla-cotizaciones .tabs .tab a.active:hover { background: var(--dark-mode) !important; }
.dark .tabla-cotizaciones .tabs .indicator { background-color: var(--dark-mode-gold); }
.dark .tabla-cotizaciones table th.seleccionado { color: var(--dark-mode-gold); }

/* Colors */
.positivo { color: var(--color-sucess, #4caf50); }
.negativo { color: var(--color-danger, #f44336); }
.dark .positivo { color: var(--dark-mode-green, #66bb6a); }
.dark .negativo { color: var(--dark-mode-red, #ef5350); }

/* ====== RESPONSIVE ====== */

/* Mobile: hide cols 6+ */
@media (max-width: 767px) {
    .tabla-cotizaciones table th.ocultar,
    .tabla-cotizaciones table td.ocultar,
    .tabla-cotizaciones table th.ocultar-primero,
    .tabla-cotizaciones table td.ocultar-primero {
        display: none !important;
    }
    .tabla-cotizaciones .tabs .tab a {
        font-size: 14px;
    }
    .tabla-cotizaciones > div[style*="display:none"],
    .tabla-cotizaciones > div[style*="display: none"] {
        display: none !important;
    }
}

/* Tablet: show ocultar, keep ocultar-primero hidden */
@media (min-width: 768px) {
    .tabla-cotizaciones table {
        font-size: 14px;
    }
    .tabla-cotizaciones table th.ocultar,
    .tabla-cotizaciones table td.ocultar {
        display: table-cell;
    }
    .tabla-cotizaciones table th.ocultar-primero,
    .tabla-cotizaciones table td.ocultar-primero {
        display: none;
    }
}

/* Desktop: show all */
@media (min-width: 992px) {
    .tabla-cotizaciones table th.ocultar-primero,
    .tabla-cotizaciones table td.ocultar-primero {
        display: table-cell;
    }
}

@media (min-width: 1400px) {
    .tabla-cotizaciones table {
        font-size: 15px;
    }
    .tabla-cotizaciones table th {
        font-size: 12px;
    }
}