/* ============================================================
   Tabla comparativa — estatuto: encabezado tinta + datos mono
   (la base de <table> ya viene de base.css)
   ============================================================ */

.tabla-comparativa {
    margin: var(--space-8) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.tabla-comparativa table {
    min-width: 600px;
}

.tabla-comparativa th {
    white-space: nowrap;
}

.tabla-comparativa td {
    vertical-align: top;
}

.tabla-comparativa__highlight {
    background: var(--verde) !important;
    color: var(--paper);
    font-weight: var(--fw-semibold);
}

.tabla-comparativa__warn {
    color: var(--sol-deep);
    font-weight: var(--fw-semibold);
}

.tabla-comparativa__bad {
    color: var(--rojo-error);
    font-weight: var(--fw-semibold);
}

.tabla-comparativa__caption {
    font-size: var(--text-sm);
    color: var(--ink-mute);
    margin-top: var(--space-2);
    text-align: left;
}

.tabla-comparativa__fuente {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-mute);
    margin-top: var(--space-2);
}

.tabla-comparativa__scroll-hint {
    display: none;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-mute);
    text-align: right;
    margin-bottom: var(--space-2);
}

@media (max-width: 768px) {
    .tabla-comparativa {
        margin-left: calc(-1 * var(--space-4));
        margin-right: calc(-1 * var(--space-4));
        padding: 0 var(--space-4);
    }

    .tabla-comparativa table {
        min-width: 480px;
    }

    .tabla-comparativa th {
        white-space: nowrap;
        padding: var(--space-2);
        font-size: var(--text-xs);
    }

    .tabla-comparativa td {
        padding: var(--space-2);
        font-size: var(--text-xs);
        white-space: nowrap;
    }

    .tabla-comparativa__scroll-hint {
        display: block;
    }
}