/* =========================================================
   TABLAS.CSS – TABLAS VICARMA (MODO OSCURO)
   ========================================================= */

.tabla-card {
    width: 95%;
    margin: auto;
    background: var(--bg-card);
    border-radius: 14px;
    padding: 10px;
}

.tabla-scroll {
    overflow-x: auto;
}

/* ================== TABLA ================== */
.datagrid table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 13px;
}

/* ================== ENCABEZADOS ================== */
.datagrid th {
    background: #0B0E14;
    color: #FFFFFF;
    padding: 10px;
    text-align: center;
    font-family: 'Oswald';
    border-bottom: 2px solid var(--accent-red);
}

/* ================== CELDAS ================== */
.datagrid td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-soft);
}

/* ================== HOVER ================== */
.datagrid tr:hover {
    background: var(--bg-elevated);
}

.datagrid th {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ================== MODO MOVIL ================== */
@media (max-width: 768px) {

    .tabla-card {
        width: 100%;
        padding: 5px;
    }

    .datagrid table {
        font-size: 11px;
        min-width: 600px; /* fuerza scroll horizontal controlado */
    }

}