/* ==========================================================================
   SITE.CSS — Núcleo visual del sistema
   POS Admin · Multi-Empresa / Multi-Sucursal
   Contiene: tokens de tema (Dark/Light), reset, tipografía base,
   y componentes globales compartidos por todos los módulos
   (botones, formularios, tarjetas, tablas, badges, cuadrícula de fondo).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   1. TEMA — variables por data-theme
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
    --bg: #0f1115;
    --bg-elevated: #171a20;
    --bg-card: #1d2129;
    --bg-hover: #242933;
    --bg-input: #171a20;
    --border: #262b34;
    --border-strong: #333944;
    --text: #eceef1;
    --text-muted: #8a93a3;
    --text-faint: #565d6b;
    --accent: #2be0c4;
    --accent-strong: #16c7ac;
    --accent-contrast: #06110f;
    --accent-soft: rgba(43, 224, 196, 0.12);
    --amber: #f2a93b;
    --amber-soft: rgba(242, 169, 59, 0.14);
    --amber-contrast: #1a1200;
    --danger: #ff6b6b;
    --danger-soft: rgba(255, 107, 107, 0.12);
    --success: #4ade80;
    --success-soft: rgba(74, 222, 128, 0.12);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
    --barcode-ink: var(--text);
    --scan-glow: rgba(43, 224, 196, 0.55);
    /* Cuadrícula de fondo: más visible en dark */
    --grid-line: rgba(255, 255, 255, 0.05);
    --grid-line-strong: rgba(255, 255, 255, 0.09);
}

:root[data-theme="light"] {
    --bg: #f5f6f5;
    --bg-elevated: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #eef0ef;
    --bg-input: #ffffff;
    --border: #e1e4e3;
    --border-strong: #cbd0ce;
    --text: #171a1e;
    --text-muted: #5b6470;
    --text-faint: #93999f;
    --accent: #0e8c79;
    --accent-strong: #0a6f5f;
    --accent-contrast: #ffffff;
    --accent-soft: rgba(14, 140, 121, 0.08);
    --amber: #c97a16;
    --amber-soft: rgba(201, 122, 22, 0.1);
    --amber-contrast: #ffffff;
    --danger: #d9433e;
    --danger-soft: rgba(217, 67, 62, 0.08);
    --success: #1e9e5a;
    --success-soft: rgba(30, 158, 90, 0.08);
    --shadow-sm: 0 2px 8px rgba(20, 20, 20, 0.05);
    --shadow-md: 0 8px 24px rgba(20, 20, 20, 0.08);
    --shadow-lg: 0 16px 48px rgba(20, 20, 20, 0.12);
    --barcode-ink: var(--text);
    --scan-glow: rgba(14, 140, 121, 0.35);
    /* Cuadrícula de fondo: sutil en light, sin remarcar */
    --grid-line: rgba(15, 23, 25, 0.035);
    --grid-line-strong: rgba(15, 23, 25, 0.06);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.15s ease, color 0.15s ease;
    /* Cuadrícula de fondo global: celdas de 40px, con línea reforzada cada 4 */
    background-image: linear-gradient(var(--grid-line-strong) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line-strong) 1px, transparent 1px), linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 160px 160px, 160px 160px, 40px 40px, 40px 40px;
    background-position: -1px -1px;
    background-attachment: fixed;
}

h1, h2, h3, h4 {
    font-family: 'IBM Plex Mono', 'Manrope', monospace;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    display: block;
}

::selection {
    background: var(--accent);
    color: var(--accent-contrast);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.mono {
    font-family: 'IBM Plex Mono', monospace;
}

.tabular {
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* --------------------------------------------------------------------------
   3. FIRMA VISUAL — patrón de código de barras
   Se usa como divisor estructural en sidebar, login y encabezados de ticket.
   -------------------------------------------------------------------------- */
.barcode {
    height: 22px;
    width: 100%;
    opacity: 0.55;
    background-image: repeating-linear-gradient(90deg, var(--barcode-ink) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, var(--barcode-ink) 0 3px, transparent 3px 7px), repeating-linear-gradient(90deg, var(--barcode-ink) 0 2px, transparent 2px 9px);
    background-blend-mode: normal;
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

/* --------------------------------------------------------------------------
   3.1 MARCA — ícono de barras (identidad visual reutilizable en toda la app)
   -------------------------------------------------------------------------- */
.brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1.5px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex-shrink: 0;
}

    .brand-icon span {
        display: block;
        width: 3px;
        background-color: var(--accent);
        border-radius: 1px;
    }

        .brand-icon span:nth-child(1) {
            height: 12px;
        }

        .brand-icon span:nth-child(2) {
            height: 20px;
        }

        .brand-icon span:nth-child(3) {
            height: 8px;
        }

        .brand-icon span:nth-child(4) {
            height: 16px;
        }

    .brand-icon.sm {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        gap: 2px;
    }

        .brand-icon.sm span {
            width: 2px;
        }

            .brand-icon.sm span:nth-child(1) {
                height: 9px;
            }

            .brand-icon.sm span:nth-child(2) {
                height: 15px;
            }

            .brand-icon.sm span:nth-child(3) {
                height: 6px;
            }

            .brand-icon.sm span:nth-child(4) {
                height: 12px;
            }

/* --------------------------------------------------------------------------
   3.2 TOGGLE DE TEMA — pill reutilizable (topbar de auth y de la app)
   -------------------------------------------------------------------------- */
.theme-toggle-pill {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background-color: var(--bg-elevated);
    border: 1px solid var(--border);
}

    .theme-toggle-pill button {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--text-faint);
        background: transparent;
    }

        .theme-toggle-pill button.active {
            background-color: var(--accent);
            color: var(--accent-contrast);
        }

/* --------------------------------------------------------------------------
   3.3 EMPTY STATE — placeholder reutilizable para contenido de tabs/páginas
   -------------------------------------------------------------------------- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 70px 20px;
    text-align: center;
}

    .empty-state .empty-icon {
        width: 52px;
        height: 52px;
        border-radius: 12px;
        background-color: var(--bg-elevated);
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-faint);
    }

    .empty-state h4 {
        font-size: 15px;
    }

    .empty-state p {
        color: var(--text-muted);
        font-size: 13px;
        max-width: 340px;
    }

/* --------------------------------------------------------------------------
   3.4 MODAL — reutilizable en toda la app (formularios, detalle, confirmación)
   -------------------------------------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 20px;
}

    .modal-overlay.open {
        display: flex;
    }

.modal {
    width: 100%;
    max-width: 480px;
    max-height: 88vh;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

    .modal.modal-sm {
        max-width: 380px;
    }

    .modal.modal-wide {
        max-width: 1180px;
    }

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    z-index: 2;
}

    .modal-close:hover {
        background-color: var(--bg-hover);
        color: var(--text);
    }

.modal-body {
    position: relative;
    padding: 28px;
    overflow-y: auto;
}

.modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 13px;
}

.modal-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.modal-title {
    font-size: 19px;
    margin-bottom: 4px;
}

.modal-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 22px;
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.credencial-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 24px;
    margin-bottom: 22px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-sizing: border-box;
}

.credencial-nombre {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    font-size: 16px;
    color: #171a1e;
    text-align: center;
}

.credencial-qr {
    image-rendering: pixelated;
}

.credencial-code128 {
    display: block;
    max-width: 100%;
    height: auto;
}

.credencial-id {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    color: #5b6470;
    letter-spacing: 0.02em;
}

.pin-generado-display {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    font-size: 42px;
    letter-spacing: 0.2em;
    text-align: center;
    color: var(--accent);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 22px;
}

.modal-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.field-error-text {
    color: var(--danger);
    font-size: 12px;
    font-weight: 600;
}

/* Mensaje de alerta reutilizable (errores de validación, avisos) */
.alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 8px;
    background-color: var(--danger-soft);
    color: var(--danger);
    font-size: 13px;
    font-weight: 600;
}

    .alert svg {
        flex-shrink: 0;
        margin-top: 1px;
    }

/* Spinners — indican que el sistema está trabajando (carga de tab/modal,
   guardado de formulario, etc.) */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.tab-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid var(--border-strong);
    border-top-color: var(--accent);
    animation: spin 0.7s linear infinite;
}

.btn-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    opacity: 0.85;
    animation: spin 0.6s linear infinite;
    vertical-align: -2px;
}

/* Notificaciones flotantes (éxito/error de acciones como guardar o eliminar) */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
}

.toast {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 16px;
    border-radius: 8px;
    background-color: var(--danger-soft);
    color: var(--danger);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    animation: toast-in 0.2s ease;
}

.toast.toast-success {
    background-color: var(--success-soft);
    color: var(--success);
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Switch de Activo/Inactivo */
.switch-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.switch {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

    .switch input {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        cursor: pointer;
    }

    .switch .track {
        position: absolute;
        inset: 0;
        background-color: var(--border-strong);
        border-radius: 999px;
        transition: background-color 0.15s ease;
    }

        .switch .track::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background-color: #fff;
            transition: transform 0.15s ease;
        }

    .switch input:checked ~ .track {
        background-color: var(--accent);
    }

        .switch input:checked ~ .track::after {
            transform: translateX(18px);
        }

/* Detalle de solo lectura */
.detail-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Variante en cuadrícula para encabezados de solo lectura con varios campos
   (ej. Kardex) — el .detail-grid base apila en una sola columna, esto lo
   acomoda en varias cuando hay espacio de sobra. */
.detail-grid.detail-grid-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 640px) {
    .detail-grid.detail-grid-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Utilidad genérica para imprimir solo una sección de la página (ej. el
   Kardex de un producto) sin el resto de la interfaz alrededor. */
/* Oculto en pantalla, visible solo al imprimir (ver @media print abajo) —
   para encabezados que identifican el reporte impreso (título + filtros
   aplicados) sin ocupar espacio en la pantalla, donde ese mismo título ya
   está arriba en .catalog-header/.modal-title. */
.print-only {
    display: none;
}

@media print {
    body * {
        visibility: hidden;
    }

    .print-area, .print-area * {
        visibility: visible;
    }

    .print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    .print-only {
        display: block !important;
    }

    /* .print-area se saca del flujo (position:absolute arriba), pero eso
       NO evita que un ancestro con overflow:hidden/auto y una altura fija
       (pensados para scrollear en pantalla, nunca para imprimir) siga
       recortando lo que hay debajo de él en el árbol — visibility:hidden
       no quita el elemento del layout, solo lo vuelve invisible, así que
       el recorte del ancestro se aplica igual. Sin este reset, reportes
       largos (ej. Fin de Día, dentro de .modal/.modal-body; Kardex y
       cualquier reporte de catálogo, dentro de .app-shell-v2/
       .tab-content-area) salían a "media hoja" o con solo 2-3 líneas,
       según cuánto cupiera en esa altura recortada antes de imprimir. */
    .app-shell-v2,
    .tab-content-area,
    .tab-panel,
    .modal,
    .modal-body {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    /* Botones de acción por fila y la paginación no tienen sentido en papel
       — se ocultan aunque vivan dentro de .print-area (ej. tabla de
       Productos). No afecta a Kardex, que no trae ninguno de los 2. */
    .print-area .table-actions,
    .print-area .pagination {
        display: none !important;
    }

    /* La credencial es una tarjeta chica, no una tabla — sin este límite,
       el 100% de .print-area la estira a lo ancho de toda la hoja. */
    .credencial-badge {
        max-width: 340px;
        margin: 0 auto;
    }
}

.detail-item .di-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 5px;
}

.detail-item .di-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

/* Confirmación de eliminar */
.confirm-body {
    text-align: center;
    padding: 8px 4px 4px;
}

.confirm-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--danger-soft);
    color: var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.confirm-body h3 {
    font-size: 16px;
    margin-bottom: 8px;
}

.confirm-body p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 22px;
}

.confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    white-space: nowrap;
}

    .btn:active {
        transform: translateY(1px);
    }

.btn-primary {
    background-color: var(--accent);
    color: var(--accent-contrast);
}

    .btn-primary:hover {
        background-color: var(--accent-strong);
    }

.btn-ghost {
    background-color: transparent;
    border-color: var(--border-strong);
    color: var(--text);
}

    .btn-ghost:hover {
        background-color: var(--bg-hover);
    }

.btn-danger-ghost {
    background-color: transparent;
    border-color: var(--danger);
    color: var(--danger);
}

    .btn-danger-ghost:hover {
        background-color: var(--danger-soft);
    }

.btn-sm {
    padding: 7px 12px;
    font-size: 12.5px;
}

.btn-icon {
    padding: 8px;
}

/* --------------------------------------------------------------------------
   5. FORMULARIOS
   -------------------------------------------------------------------------- */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Fila de campos lado a lado — pensado para modales anchos (.modal-wide)
   donde apilar todo en una sola columna desperdicia el espacio extra. */
.field-row {
    display: flex;
    gap: 16px;
}

    .field-row .field {
        flex: 1;
        min-width: 0;
    }

    .field label {
        font-size: 12px;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

.input, .select {
    width: 100%;
    padding: 11px 13px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .input::placeholder {
        color: var(--text-faint);
    }

    .input:focus, .select:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
    }

.input-icon-wrap {
    position: relative;
}

    .input-icon-wrap .input {
        padding-right: 42px;
    }

    .input-icon-wrap .icon-btn {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: var(--text-faint);
        cursor: pointer;
        padding: 6px;
        display: flex;
    }

        .input-icon-wrap .icon-btn:hover {
            color: var(--text-muted);
        }

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .checkbox-row input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--accent);
        cursor: pointer;
    }

    .checkbox-row label {
        font-size: 13px;
        color: var(--text-muted);
        cursor: pointer;
    }

/* --------------------------------------------------------------------------
   6. TARJETAS / TABLAS (compartido entre módulos)
   El shell de la app (topbar, menú superior, tabs, footer) vive en su
   propio módulo: css/modules/shell.css
   -------------------------------------------------------------------------- */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

    .page-header h1 {
        font-size: 21px;
    }

    .page-header .desc {
        color: var(--text-muted);
        font-size: 13.5px;
        margin-top: 4px;
    }

.page-header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.table-wrap {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: hidden;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    font-weight: 700;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
    background-color: var(--bg-elevated);
}

thead th.js-catalog-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

    thead th.js-catalog-sort:hover {
        color: var(--text);
    }

tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background-color: var(--bg-hover);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.badge-success {
    background-color: var(--success-soft);
    color: var(--success);
}

.badge-danger {
    background-color: var(--danger-soft);
    color: var(--danger);
}

.badge-amber {
    background-color: var(--amber-soft);
    color: var(--amber);
}

.badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: currentColor;
}

.table-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.row-icon-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

    .row-icon-btn:hover {
        background-color: var(--bg-hover);
        color: var(--text);
    }

/* --------------------------------------------------------------------------
   7. Responsivo (reglas específicas del shell viven en shell.css)
   -------------------------------------------------------------------------- */
/* .table-wrap ya scrollea horizontal siempre (ver arriba) — nada más que
   agregar aquí por ahora. */