/*
 * TENSOR ERP - QUANTUM V2 — MATERIAL DESIGN 3 (ONPE STYLE)
 * Paleta: #0044A3 primary · Poppins · Bordes suaves · Sombras MD3
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --q-bg-dark: #faf9fd;
    --q-accent-blue: #0044A3;
    --q-sidebar-bg: #0044A3;
    --q-accent-gold: #facc15;
    --q-glass-bg: rgba(255, 255, 255, 0.05);
    --q-glass-border: rgba(255, 255, 255, 0.1);
    --q-text-muted: #565e71;
    --q-primary-dark: #003770;
    --md-primary: #0044A3;
    --md-on-primary: #ffffff;
    --md-primary-container: #d7e3ff;
    --md-secondary: #565e71;
    --md-secondary-container: #dae2f9;
    --md-background: #faf9fd;
    --md-surface: #ffffff;
    --md-on-background: #1a1b1f;
    --md-on-surface: #1a1b1f;
    --md-outline: #74777f;
    --md-outline-variant: #c4c6d0;
    --md-error: #ba1a1a;
    --md-radius-sm: 8px;
    --md-radius-md: 12px;
    --md-radius-lg: 16px;
    --md-radius-xl: 28px;
    --md-radius-full: 9999px;
}

body {
    font-family: 'Poppins', sans-serif !important;
    background-color: var(--md-background) !important;
    color: var(--md-on-background);
}

/* Glassmorphism Layers */
.q-glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.q-glass-light {
    background: var(--md-surface);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--md-outline-variant);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    color: var(--md-on-surface);
}

/* Base Inputs */
.q-input {
    background: var(--md-surface);
    border: 1.5px solid var(--md-outline-variant);
    color: var(--md-on-surface);
    border-radius: var(--md-radius-sm);
    padding: 10px 16px;
    transition: all 0.2s ease;
    outline: none;
    font-size: 13px;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
}

.q-input:focus {
    background: var(--md-surface);
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(0, 92, 187, 0.12);
}

/* Sovereign Portal Dropdown System */
.q-select-container {
    position: relative;
    width: 100%;
}

.q-select-enhanced {
    display: none !important;
}

.q-select-current {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 40px 0 16px;
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-radius-md);
    height: 44px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--md-on-surface);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: all 0.2s ease;
    white-space: normal;
    line-height: 1.4;
    user-select: none;
}

.q-select-current:hover {
    border-color: var(--md-primary);
    background: var(--md-surface);
    box-shadow: 0 2px 8px rgba(0, 92, 187, 0.08);
}

.q-select-container.active .q-select-current {
    border-color: var(--md-primary);
    background: var(--md-surface);
    box-shadow: 0 0 0 3px rgba(0, 92, 187, 0.12);
}

/* Flecha del QuantumDropdown */
.q-select-current i.fa-chevron-down {
    color: var(--md-primary) !important;
    opacity: 0.6 !important;
    font-size: 10px !important;
}

/* THE PORTAL: Rendered at body level */
.q-select-dropdown {
    position: fixed;
    background: var(--md-surface) !important;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-radius-md);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.06);
    z-index: 100000 !important;
    max-height: 350px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.q-select-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: all;
}

/* Scrollbar for dropdown */
.q-select-dropdown::-webkit-scrollbar {
    width: 6px;
}

.q-select-dropdown::-webkit-scrollbar-thumb {
    background: var(--md-outline-variant);
    border-radius: var(--md-radius-full);
}

.q-select-option {
    padding: 12px 20px;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none;
    color: var(--md-on-surface);
    cursor: pointer;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.15s ease;
    line-height: 1.5;
    background: var(--md-surface);
    width: 100% !important;
    box-sizing: border-box !important;
    display: block;
}

.q-select-option:last-child {
    border-bottom: none;
}

.q-select-option:hover {
    background: var(--md-primary-container);
    color: var(--md-primary);
    padding-left: 28px;
}

.q-select-option.selected {
    background: var(--md-primary) !important;
    color: var(--md-on-primary) !important;
    border-left: 3px solid var(--q-primary-dark);
}

/* Premium Buttons */
.q-btn-primary {
    background: var(--md-primary);
    border-radius: var(--md-radius-md);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: white;
    box-shadow: 0 1px 3px rgba(0, 55, 112, 0.2);
    transition: all 0.2s ease;
    padding: 10px 22px;
    border: none;
}

.q-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 92, 187, 0.25);
    filter: brightness(1.08);
}

/* Standardized Tables */
.q-table-wrapper {
    background: var(--md-surface);
    border-radius: var(--md-radius-lg);
    border: 1px solid var(--md-outline-variant);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

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

.q-table th {
    background: var(--md-primary-container);
    padding: 14px 20px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--q-primary-dark);
    border-bottom: 2px solid var(--md-outline-variant);
}

.q-table td {
    padding: 14px 20px;
    font-size: 13px;
    color: var(--md-on-surface);
    border-bottom: 1px solid #f1f5f9;
}

/* Animations */
@keyframes q-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-q-fade {
    animation: q-fade-in 0.4s ease forwards;
}

/* UI FIX: REMOVE NUMERIC SPINNERS */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* TAREO SPECIFIC FIXES */
.tareo-input {
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    width: 100% !important;
    text-align: center !important;
    line-height: inherit !important;
}

.tareo-table td {
    height: 48px !important;
    padding: 0 !important;
}

/* QUANTUM COMBO BOXES (SELECT ELEMENTS) */
.q-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005cbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2em;
    padding-right: 2.5rem !important;
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    color: var(--md-on-surface);
    border-radius: var(--md-radius-md);
    padding: 0 40px 0 16px;
    height: 44px;
    font-size: 12px !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: all 0.2s ease;
    outline: none;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.q-select:hover {
    background-color: var(--md-surface);
    border-color: var(--md-primary);
    box-shadow: 0 2px 8px rgba(0, 92, 187, 0.08);
}

.q-select:focus {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(0, 92, 187, 0.12);
    background-color: var(--md-surface);
}

/* Opciones dentro de .q-select */
.q-select option {
    font-size: 12px !important;
    font-weight: 500;
    color: var(--md-on-surface);
    padding: 8px 12px;
    background-color: var(--md-surface);
}

.q-select option:hover {
    background-color: var(--md-primary-container);
}

/* DASHBOARD EXECUTIVE TABS (RRHH STYLE HARMONIZATION) */
.view-btn {
    white-space: nowrap;
    border-radius: var(--md-radius-md);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: 1px solid transparent;
}

.view-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.view-btn.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* UTILITIES */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 3s linear infinite;
}

/* PREMIUM SELECT WRAPPER (QUANTUM EDITION) */
.q-select-premium-wrapper {
    position: relative;
    border-radius: var(--md-radius-md);
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;
}

.q-select-premium-wrapper:hover {
    background: var(--md-surface);
    border-color: var(--md-primary);
    box-shadow: 0 2px 8px rgba(0, 92, 187, 0.08);
}

.q-select-premium-wrapper select {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--md-on-surface);
    font-size: 12px;
    font-weight: 500 !important;
    height: 44px;
    padding: 0 40px 0 16px;
    appearance: none;
    outline: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    z-index: 2;
}

.q-select-premium-wrapper select option {
    background: var(--md-surface);
    color: var(--md-on-surface);
    font-weight: 500;
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.q-select-premium-wrapper::after {
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 16px;
    color: var(--md-primary);
    pointer-events: none;
    z-index: 1;
    transition: transform 0.2s ease;
}

.q-select-premium-wrapper:focus-within::after {
    transform: rotate(180deg);
}

/* ============================================================
   SISTEMA DE DISEÑO UNIFICADO TENSOR ERP
   Tipografía Poppins · Material Design 3 · ONPE Style
   ============================================================ */

/* --- RESET TIPOGRÁFICO GLOBAL --- */
* {
    font-family: 'Poppins', sans-serif !important;
    font-style: normal !important;
}

/* --- Restaurar Font Awesome --- */
.fa, .fas, .far, .fab, .fal, .fad, .fass,
[class*="fa-"],
.fa-solid, .fa-regular, .fa-brands, .fa-light {
    font-family: 'Font Awesome 6 Free' !important;
    font-style: normal !important;
}
.fab, .fa-brands {
    font-family: 'Font Awesome 6 Brands' !important;
}

/* --- PESOS CONTROLADOS: máximo 700, nunca 900/950 --- */
.font-black:not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]),
.font-extrabold:not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]),
[style*="font-weight: 900"]:not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]),
[style*="font-weight: 950"]:not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]),
[style*="font-weight:900"]:not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]),
[style*="font-weight:950"]:not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]) {
    font-weight: 600 !important;
}
/* Font Awesome SIEMPRE peso 900 (solid) o 400 (regular) */
.fa, .fas, .fa-solid, [class*="fa-"] {
    font-weight: 900 !important;
}
.far, .fa-regular {
    font-weight: 400 !important;
}

/* --- TAMAÑOS MÍNIMOS: nada menor a 11px --- */
.text-\[7px\], .text-\[8px\], .text-\[9px\], .text-\[10px\] {
    font-size: 11px !important;
}

/* --- LETTER-SPACING CONTROLADO --- */
.tracking-widest,
.tracking-\[0\.2em\],
.tracking-\[0\.3em\],
.tracking-\[0\.5em\] {
    letter-spacing: 0.04em !important;
}

/* --- INPUTS GLOBALES --- */
.premium-input,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="password"],
input[type="search"],
textarea {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--md-on-surface) !important;
    background-color: var(--md-surface) !important;
    border: 1.5px solid var(--md-outline-variant) !important;
    border-radius: var(--md-radius-sm) !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

input:focus, textarea:focus, .premium-input:focus {
    border-color: var(--md-primary) !important;
    background-color: var(--md-surface) !important;
    box-shadow: 0 0 0 3px rgba(0, 92, 187, 0.1) !important;
}

/* --- SELECTS NATIVOS --- */
select {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--md-on-surface) !important;
    background-color: var(--md-surface) !important;
    border: 1px solid var(--md-outline-variant) !important;
    border-radius: var(--md-radius-md) !important;
    height: 44px !important;
    padding: 0 40px 0 16px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005cbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 1.1em !important;
}

select:hover {
    background-color: var(--md-surface) !important;
    border-color: var(--md-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 92, 187, 0.08) !important;
}

select:focus {
    border-color: var(--md-primary) !important;
    background-color: var(--md-surface) !important;
    box-shadow: 0 0 0 3px rgba(0, 92, 187, 0.12) !important;
}

select option {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--md-on-surface) !important;
    background-color: var(--md-surface) !important;
    text-transform: none !important;
}

/* Premium-wrapper: select interno hereda estilos del wrapper */
.q-select-premium-wrapper select {
    background-color: transparent !important;
    border: none !important;
    color: var(--md-on-surface) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* --- LABELS --- */
label {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--md-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* --- TABLAS: HOVER SIN CAMBIO DE COLOR DE TEXTO --- */
table tbody tr {
    transition: background-color 0.15s ease;
}

table tbody tr:hover {
    background-color: var(--md-primary-container) !important;
}

/* Evitar que el hover cambie color de texto en celdas (excepto botones con color propio) */
table tbody tr:hover td {
    color: inherit !important;
}
table tbody tr:hover td *:not(button):not(button *):not(i) {
    color: inherit !important;
}

table thead th, table th {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--q-primary-dark) !important;
    background: var(--md-primary-container) !important;
}

table td {
    font-size: 13px !important;
    color: var(--md-on-surface) !important;
}

/* Botones con fondo propio dentro de tablas: respetar su color */
table td button[class*="bg-[#"],
table td button[class*="bg-blue"],
table td button[class*="bg-emerald"],
table td button[class*="bg-red"],
table td button[class*="bg-indigo"],
table td button[class*="q-btn"] {
    color: inherit;
}
table td button[class*="text-white"] {
    color: #ffffff !important;
}
table td button[class*="text-red"] {
    color: var(--md-error) !important;
}
table td button[class*="text-emerald"] {
    color: #10b981 !important;
}
table td button[class*="text-\\[#0044A3\\]"],
table td button[class*="text-\\[#0044A3\\]"] {
    color: var(--md-primary) !important;
}
/* Iconos dentro de botones en tablas: heredar color del botón padre */
table td button i,
table td button span {
    color: inherit !important;
}

/* --- BOTONES Y TABS --- */
button, .tab-btn, .tab-btn-custom {
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em;
}

/* HOVER GLOBAL: solo fondo sutil, NUNCA cambiar color de texto */
button:hover, a:hover {
    transition: background-color 0.15s ease;
}

/* --- BADGES --- */
.badge, [class*="rounded-full"][class*="px-"] {
    font-weight: 500 !important;
    font-size: 11px !important;
}

/* --- DATATABLES --- */
.dataTables_wrapper {
    font-size: 13px !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    font-size: 13px !important;
    font-weight: 400 !important;
    border: 1.5px solid var(--md-outline-variant) !important;
    border-radius: var(--md-radius-sm) !important;
    padding: 6px 12px !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* --- PLACEHOLDER --- */
::placeholder {
    font-weight: 400 !important;
    color: var(--md-outline) !important;
}

/* --- HOVER: NO CAMBIAR COLOR DE TEXTO EN LISTAS/GRIDS --- */
[class*="group-hover\:text-"],
[class*="hover\:text-blue"],
[class*="hover\:text-indigo"] {
    transition: background-color 0.15s ease !important;
}

.group:hover [class*="group-hover\:text-blue"],
.group:hover [class*="group-hover\:text-indigo"] {
    color: inherit !important;
}

/* Excepciones: botones SÍ pueden cambiar color */
button:hover, a:hover, button[class*="hover\:text-"] {
}

/* ============================================================
   SISTEMA UNIFICADO DE MODALES — MD3 STYLE
   ============================================================ */

/* BACKDROP */
[id*="modal"][class*="fixed"],
[id$="-modal"][class*="fixed"] {
    background-color: rgba(26, 27, 31, 0.60) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* Sub-backdrop internos */
[id*="modal"] > .absolute.inset-0,
[id$="-modal"] > .absolute.inset-0 {
    background-color: transparent !important;
    backdrop-filter: none !important;
}

/* CAJA DEL MODAL */
[id*="modal"][class*="fixed"] > div[class*="bg-white"],
[id*="modal"][class*="fixed"] > div[class*="rounded"],
[id$="-modal"][class*="fixed"] > div[class*="bg-white"],
[id$="-modal"][class*="fixed"] > .relative[class*="bg-white"] {
    border-radius: var(--md-radius-lg) !important;
    border: 1px solid var(--md-outline-variant) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    background: var(--md-surface) !important;
}

/* TAMAÑO ESTÁNDAR: 90% ancho × 98% alto */
[id*="modal"][class*="fixed"] > div[class*="bg-white"],
[id*="modal"][class*="fixed"] > div[class*="rounded"],
[id$="-modal"][class*="fixed"] > div[class*="bg-white"],
[id$="-modal"][class*="fixed"] > .relative[class*="bg-white"] {
    width: 90vw !important;
    max-width: 90vw !important;
    height: 98vh !important;
    max-height: 98vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Modal-devengar: q-glass hijo directo → fondo blanco */
#modal-devengar > div.q-glass,
#modal-devengar > div[class*="q-glass"] {
    background: var(--md-surface) !important;
    backdrop-filter: none !important;
    width: 90vw !important;
    max-width: 90vw !important;
    height: 98vh !important;
    max-height: 98vh !important;
    border-radius: var(--md-radius-lg) !important;
    border: 1px solid var(--md-outline-variant) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Modal-seat: quantum-glass hijo directo → fondo blanco */
#modal-seat > div.quantum-glass {
    background: var(--md-surface) !important;
    backdrop-filter: none !important;
    width: 90vw !important;
    max-width: 90vw !important;
    height: 98vh !important;
    max-height: 98vh !important;
    border-radius: var(--md-radius-lg) !important;
    border: 1px solid var(--md-outline-variant) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* modal-contract: wrapper intermedio */
#modal-contract > div.fixed {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#modal-contract > div.fixed > div.flex {
    width: auto !important;
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#modal-contract > div.fixed > div.flex > div.relative {
    width: 90vw !important;
    max-width: 90vw !important;
    height: 98vh !important;
    max-height: 98vh !important;
    border-radius: var(--md-radius-lg) !important;
    border: 1px solid var(--md-outline-variant) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    background: var(--md-surface) !important;
}

/* op-detail-modal: ajuste directo */
#op-detail-modal > .relative {
    width: 90vw !important;
    max-width: 90vw !important;
    height: 98vh !important;
    max-height: 98vh !important;
    border-radius: var(--md-radius-lg) !important;
    border: 1px solid var(--md-outline-variant) !important;
    background: var(--md-surface) !important;
    backdrop-filter: none !important;
}

/* Modales con posicionamiento absoluto */
#modalCenterContent,
#modalSubCenterContent,
#modalEntityContent,
#modalInvContent,
#modalSCContent,
#modalFAContent {
    width: 90vw !important;
    max-width: 90vw !important;
    height: 98vh !important;
    max-height: 98vh !important;
    border-radius: var(--md-radius-lg) !important;
    border: 1px solid var(--md-outline-variant) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
}

/* Contenido scrollable del modal */
[id*="modal"] [class*="overflow-y-auto"][class*="flex-1"],
[id*="modal"] [class*="overflow-y-auto"][class*="custom-scroll"],
[id*="modal"] [class*="overflow-auto"][class*="flex-1"],
[id*="modal"] [class*="overflow-y-auto"][class*="custom-scrollbar"] {
    flex: 1 !important;
    overflow-y: auto !important;
}

/* HEADER DEL MODAL — convertir fondos oscuros a blanco MD3 */
[id*="modal"] [class*="bg-slate-900"][class*="flex"][class*="justify-between"],
[id*="modal"] [class*="bg-slate-900"][class*="flex"][class*="items-center"],
[id*="modal"] [class*="bg-slate-800"][class*="flex"],
[id*="modal"] [class*="bg-indigo-900"][class*="flex"],
[id*="modal"] [class*="bg-indigo-600"][class*="flex"],
[id*="modal"] [class*="bg-blue-900"][class*="flex"],
[id*="modal"] [class*="bg-blue-600"][class*="flex"],
[id*="modal"] [class*="bg-emerald-900"][class*="flex"],
[id*="modal"] [class*="bg-purple-600"][class*="flex"],
[id*="modal"] [class*="bg-amber-500"][class*="flex"],
[id*="modal"] [class*="bg-gradient"][class*="flex"],
[id$="-modal"] [class*="bg-slate-900"][class*="flex"],
[id$="-modal"] [class*="bg-slate-800"][class*="flex"],
[id$="-modal"] [class*="bg-gradient"][class*="flex"],
[id*="modal"] [class*="border-b"][class*="flex"][class*="justify-between"],
[id*="modal-header"],
#modal-header {
    background: var(--md-surface) !important;
    background-color: var(--md-surface) !important;
    background-image: none !important;
    color: var(--md-on-surface) !important;
    border-bottom: 1px solid var(--md-outline-variant) !important;
    border-top-left-radius: var(--md-radius-lg) !important;
    border-top-right-radius: var(--md-radius-lg) !important;
    padding: 14px 20px !important;
}

/* Textos dentro de headers oscuros → color oscuro */
[id*="modal"] [class*="bg-slate-900"] h3,
[id*="modal"] [class*="bg-slate-900"] h4,
[id*="modal"] [class*="bg-slate-900"] p,
[id*="modal"] [class*="bg-slate-900"] span,
[id*="modal"] [class*="bg-slate-900"] div,
[id*="modal"] [class*="bg-slate-800"] h3,
[id*="modal"] [class*="bg-slate-800"] p,
[id*="modal"] [class*="bg-indigo-900"] h3,
[id*="modal"] [class*="bg-indigo-900"] span,
[id*="modal"] [class*="bg-indigo-900"] div,
[id*="modal"] [class*="bg-indigo-600"] h3,
[id*="modal"] [class*="bg-indigo-600"] p,
[id*="modal"] [class*="bg-indigo-600"] span,
[id*="modal"] [class*="bg-indigo-600"] div,
[id*="modal"] [class*="bg-blue-900"] h3,
[id*="modal"] [class*="bg-blue-900"] p,
[id*="modal"] [class*="bg-blue-600"] h3,
[id*="modal"] [class*="bg-blue-600"] p,
[id*="modal"] [class*="bg-emerald-900"] h3,
[id*="modal"] [class*="bg-purple-600"] h3,
[id*="modal"] [class*="bg-amber-500"] h3,
[id*="modal"] [class*="bg-gradient"] h3,
[id*="modal"] [class*="bg-gradient"] p,
[id$="-modal"] [class*="bg-slate-900"] h3,
[id$="-modal"] [class*="bg-slate-800"] h3,
[id$="-modal"] [class*="bg-gradient"] h3 {
    color: var(--md-on-surface) !important;
}

/* Subtítulos y textos secundarios en headers */
[id*="modal"] [class*="bg-slate-900"] p[class*="text-slate"],
[id*="modal"] [class*="bg-slate-900"] p[class*="text-emerald"],
[id*="modal"] [class*="bg-slate-900"] span[class*="text-blue"],
[id*="modal"] [class*="bg-slate-900"] span[class*="text-slate"],
[id*="modal"] [class*="bg-indigo-900"] p,
[id*="modal"] [class*="bg-indigo-600"] p[class*="text-indigo"],
[id*="modal"] [class*="bg-blue-900"] p[class*="text-blue"],
[id*="modal"] [class*="bg-blue-600"] p {
    color: var(--md-secondary) !important;
}

/* Iconos y badges dentro de headers */
[id*="modal"] [class*="bg-slate-900"] i,
[id*="modal"] [class*="bg-indigo-900"] i,
[id*="modal"] [class*="bg-indigo-600"] i,
[id*="modal"] [class*="bg-blue-900"] i,
[id*="modal"] [class*="bg-blue-600"] i,
[id$="-modal"] [class*="bg-slate-900"] i,
[id$="-modal"] [class*="bg-gradient"] i {
    color: var(--md-secondary) !important;
}

/* Botones dentro de headers oscuros */
[id*="modal"] [class*="bg-slate-900"] > button,
[id*="modal"] [class*="bg-slate-800"] > button,
[id*="modal"] [class*="bg-indigo-900"] > button,
[id*="modal"] [class*="bg-indigo-600"] > button,
[id*="modal"] [class*="bg-blue-900"] > button,
[id*="modal"] [class*="bg-blue-600"] > button,
[id*="modal"] [class*="bg-emerald-900"] > button,
[id*="modal"] [class*="bg-purple-600"] > button,
[id*="modal"] [class*="bg-amber-500"] > button,
[id*="modal"] [class*="bg-gradient"] > button,
[id$="-modal"] [class*="bg-slate-900"] > button,
[id$="-modal"] [class*="bg-gradient"] > button {
    color: var(--md-outline) !important;
    background: transparent !important;
}

[id*="modal"] [class*="bg-slate-900"] > button:hover,
[id*="modal"] [class*="bg-slate-800"] > button:hover,
[id*="modal"] [class*="bg-indigo-900"] > button:hover,
[id*="modal"] [class*="bg-indigo-600"] > button:hover,
[id*="modal"] [class*="bg-blue-900"] > button:hover,
[id*="modal"] [class*="bg-blue-600"] > button:hover,
[id*="modal"] [class*="bg-emerald-900"] > button:hover,
[id*="modal"] [class*="bg-purple-600"] > button:hover,
[id*="modal"] [class*="bg-amber-500"] > button:hover,
[id*="modal"] [class*="bg-gradient"] > button:hover,
[id$="-modal"] [class*="bg-slate-900"] > button:hover,
[id$="-modal"] [class*="bg-gradient"] > button:hover {
    background-color: var(--md-secondary-container) !important;
    color: var(--md-secondary) !important;
}

/* TÍTULO DEL MODAL */
[id*="modal"] h3[id*="title"],
[id*="modal"] h3[id*="Title"],
[id*="modal"] h3[class*="font-black"],
[id*="modal"] h4[class*="font-black"],
[id$="-modal"] h3[class*="font-black"],
#modal-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--md-on-surface) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* FOOTER DEL MODAL */
[id*="modal-footer"],
[id*="modal"] [class*="border-t"][class*="bg-slate-50"],
[id*="modal"] > div > div > [class*="border-t"][class*="bg-slate-50"],
[id$="-modal"] [class*="border-t"][class*="bg-slate-50"] {
    background-color: var(--md-background) !important;
    border-top: 1px solid var(--md-outline-variant) !important;
    padding: 12px 20px !important;
    border-bottom-left-radius: var(--md-radius-lg) !important;
    border-bottom-right-radius: var(--md-radius-lg) !important;
}

/* BOTÓN CERRAR (×) uniforme */
[id*="modal"] button[onclick*="close"],
[id*="modal"] button[onclick*="Close"],
[id*="modal"] button[onclick*="hidden"],
[id$="-modal"] button[onclick*="close"],
[id$="-modal"] button[onclick*="Close"] {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--md-radius-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    color: var(--md-outline) !important;
    font-size: 18px !important;
    background: transparent !important;
    border: none !important;
}

[id*="modal"] button[onclick*="close"]:hover,
[id*="modal"] button[onclick*="Close"]:hover,
[id*="modal"] button[onclick*="hidden"]:hover,
[id$="-modal"] button[onclick*="close"]:hover,
[id$="-modal"] button[onclick*="Close"]:hover {
    background-color: var(--md-secondary-container) !important;
    color: var(--md-secondary) !important;
}

/* Ocultar iconos decorativos grandes en headers */
[id*="modal"] [class*="bg-slate-900"] > div > div[class*="rounded"][class*="flex"][class*="items-center"][class*="justify-center"],
[id*="modal"] [class*="bg-indigo-900"] > div > div[class*="rounded-full"][class*="bg-white"],
[id*="modal"] [class*="bg-blue-600"] > div > div[class*="rounded"] {
    background: var(--md-primary-container) !important;
    color: var(--md-primary) !important;
}

/* Tabs dentro de modales */
[id*="modal"] .premium-tab {
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
}

/* Contenido del modal */
[id*="modal"] [class*="overflow-y-auto"][class*="flex-1"],
[id*="modal"] [class*="overflow-y-auto"][class*="custom-scroll"] {
    background-color: var(--md-surface) !important;
}

/* SweetAlert2 — adaptar al MD3 */
.swal2-popup {
    border-radius: var(--md-radius-xl) !important;
    border: 1px solid var(--md-outline-variant) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    font-family: 'Poppins', sans-serif !important;
}

.swal2-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--md-on-surface) !important;
}

.swal2-html-container {
    font-size: 14px !important;
    color: var(--md-secondary) !important;
}

.swal2-confirm {
    border-radius: var(--md-radius-md) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    background-color: var(--md-primary) !important;
}

.swal2-cancel {
    border-radius: var(--md-radius-md) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

/* ============================================================
   SCROLLBAR GLOBAL — MD3 STYLE
   ============================================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--md-outline-variant);
    border-radius: var(--md-radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--md-outline);
}

/* ============================================================
   OVERRIDE SELECTIVO — ONPE STYLE
   Solo colores de marca y tipografía, sin romper layouts
   ============================================================ */

/* Cambiar color de marca #0044A3 → #0044A3 */
.bg-\[\#0044A3\],
.bg-\[\#0044A3\] {
    background-color: #0044A3 !important;
}
.text-\[\#0044A3\],
.text-\[\#0044A3\] {
    color: #0044A3 !important;
}
.border-\[\#0044A3\],
.border-\[\#0044A3\] {
    border-color: #0044A3 !important;
}
.hover\:bg-\[\#0044A3\]:hover,
.hover\:bg-\[\#0044A3\]:hover {
    background-color: #004a99 !important;
}

/* Headers de tabla — azul claro ONPE */
table thead th,
table th {
    background: #d7e3ff !important;
    color: #003770 !important;
}

/* Hover de filas */
table tbody tr:hover {
    background-color: #dae2f9 !important;
}

/* Poppins en todo */
html, body, input, select, textarea, button, a, span, div, p, h1, h2, h3, h4, h5, h6, label, th, td, li {
    font-family: 'Poppins', sans-serif !important;
}

/* ============================================================
   CABECERAS DE MÓDULOS — TRANSFORMACIÓN ONPE MD3
   De barras azul oscuro a fondo blanco con bordes suaves
   Aplica a todos los div con inline style background-color #0044A3
   EXCEPTO login (#tensor-auth) y botones
   ============================================================ */

/* Headers azules: se respeta el inline style original */

/* Headers azules: texto blanco protegido */

/* Login: PROTECCIÓN TOTAL — mantener diseño original sobre fondo azul */
#tensor-auth,
#tensor-auth *:not(input):not(select) {
    color: #ffffff !important;
}
#tensor-auth .text-white { color: #ffffff !important; }
#tensor-auth .text-yellow-400 { color: #facc15 !important; }
#tensor-auth .text-blue-100 { color: #dbeafe !important; }
#tensor-auth .text-blue-300\/60 { color: rgba(147, 197, 253, 0.6) !important; }
#tensor-auth .text-blue-400\/50 { color: rgba(96, 165, 250, 0.5) !important; }
#tensor-auth .text-blue-400\/30 { color: rgba(96, 165, 250, 0.3) !important; }
#tensor-auth .text-slate-500 { color: #64748b !important; }
#tensor-auth .text-emerald-500 { color: #10b981 !important; }
#tensor-auth .text-blue-500 { color: #3b82f6 !important; }
#tensor-auth label {
    color: rgba(147, 197, 253, 0.6) !important;
}
#tensor-auth input {
    color: #ffffff !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    padding: 10px 48px !important;
    border-radius: 10px !important;
    background-image: none !important;
    height: auto !important;
    font-size: 14px !important;
    position: relative;
    z-index: 1;
}
#tensor-auth .relative > span.absolute {
    z-index: 2;
    pointer-events: none;
}
#tensor-auth input::placeholder {
    color: rgba(148, 163, 184, 0.5) !important;
}
#tensor-auth {
    background-color: #0044A3 !important;
}
#tensor-auth .bg-white\/10 {
    background: rgba(255, 255, 255, 0.1) !important;
}
#app-sidebar .text-white,
#mobile-menu .text-white {
    color: #ffffff !important;
}

/* Headers azules: respetar estilos originales del HTML */

/* ============================================================
   SIDEBAR — ONPE MD3 STYLE
   ============================================================ */

/* Sidebar mantiene fondo azul ONPE */
#app-sidebar {
    background-color: #0044A3 !important;
}

/* Mobile menu mantiene fondo azul */
#mobile-menu {
    background-color: rgba(0, 92, 187, 0.95) !important;
}

/* Sidebar toggle handle */
#sidebar-toggle-handle {
    background: #0044A3 !important;
}

/* ============================================================
   CONTABILIDAD & PLANIFICACIÓN — ONPE MD3 TRANSFORMATION
   Módulos que usan indigo/gradient en vez de inline #0044A3
   ============================================================ */

/* --- GRADIENTES INDIGO → ONPE AZUL --- */
.bg-gradient-to-br.from-indigo-600.to-indigo-800,
.bg-gradient-to-br.from-indigo-600,
.bg-gradient-to-r.from-indigo-800.to-indigo-900,
.bg-gradient-to-r.from-indigo-800,
.bg-gradient-to-r.from-purple-900.to-indigo-900,
.bg-gradient-to-r.from-purple-900,
.bg-gradient-to-r.from-blue-900.via-indigo-900 {
    background: var(--md-primary) !important;
    background-image: none !important;
}

/* --- FONDOS INDIGO SÓLIDOS → ONPE --- */
.bg-indigo-900 {
    background-color: #ffffff !important;
    color: var(--md-on-surface) !important;
    border: 1px solid var(--md-outline-variant) !important;
}
.bg-indigo-900 .text-white {
    color: var(--md-on-surface) !important;
}
.bg-indigo-900 select {
    background-color: #f0f2f5 !important;
    color: var(--md-on-surface) !important;
    border-color: var(--md-outline-variant) !important;
}

.bg-indigo-800 {
    background-color: #f0f2f5 !important;
    color: var(--md-on-surface) !important;
}
.bg-indigo-800\/50 {
    background-color: var(--md-primary-container) !important;
}

.bg-indigo-600 {
    background-color: var(--md-primary) !important;
    color: #ffffff !important;
}
.bg-indigo-600:hover {
    background-color: #004a99 !important;
}

.bg-indigo-600\/40 {
    background-color: var(--md-primary-container) !important;
    color: var(--md-on-surface) !important;
}
.bg-indigo-600\/40 .text-white {
    color: var(--md-on-surface) !important;
}

.bg-indigo-500 {
    background-color: var(--md-primary) !important;
}

/* Fondos decorativos suaves indigo → ONPE equivalentes */
.bg-indigo-50,
.bg-indigo-50\/50 {
    background-color: var(--md-primary-container) !important;
}
.bg-indigo-100 {
    background-color: var(--md-primary-container) !important;
}
.bg-indigo-200\/50 {
    background-color: #e8edf5 !important;
}

/* --- TEXTOS INDIGO → ONPE --- */
.text-indigo-600 {
    color: var(--md-primary) !important;
}
.text-indigo-700 {
    color: var(--q-primary-dark) !important;
}
.text-indigo-800 {
    color: var(--md-on-surface) !important;
}
.text-indigo-500 {
    color: var(--md-primary) !important;
}

/* --- BORDES INDIGO → ONPE --- */
.border-indigo-100,
.border-indigo-200 {
    border-color: var(--md-outline-variant) !important;
}
.border-indigo-500\/30,
.border-indigo-700 {
    border-color: var(--md-outline-variant) !important;
}
.border-purple-500\/30 {
    border-color: var(--md-outline-variant) !important;
}

/* --- SOMBRAS INDIGO → ONPE --- */
.shadow-indigo-500\/30,
.shadow-indigo-500\/20,
.shadow-indigo-500\/10,
.shadow-indigo-900\/20 {
    --tw-shadow-color: rgba(0, 92, 187, 0.1) !important;
}

/* --- HOVER INDIGO → ONPE --- */
.hover\:bg-indigo-100:hover,
.hover\:bg-indigo-50\/30:hover {
    background-color: var(--md-primary-container) !important;
}
.hover\:bg-indigo-200:hover {
    background-color: #c4d4f0 !important;
}
.hover\:bg-indigo-500:hover,
.hover\:bg-indigo-700:hover {
    background-color: #004a99 !important;
}
.hover\:border-indigo-300:hover {
    border-color: var(--md-primary) !important;
}
.hover\:text-indigo-600:hover {
    color: var(--md-primary) !important;
}

/* Focus indigo */
.focus\:border-indigo-500:focus {
    border-color: var(--md-primary) !important;
}

/* --- Q-GLASS HEADER CONTABILIDAD → MD3 --- */
.q-glass {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--md-outline-variant) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Tabs de contabilidad: inactivos → estilo MD3 */
.q-glass .tab-btn {
    color: var(--md-secondary) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.q-glass .tab-btn:hover {
    color: var(--md-primary) !important;
    background: var(--md-primary-container) !important;
}
.q-glass .tab-btn.active {
    color: var(--md-primary) !important;
    background: #ffffff !important;
    border: 1px solid var(--md-outline-variant) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Icono grande calculadora → ONPE container */
.bg-gradient-to-br.from-indigo-600.to-indigo-800 {
    background: var(--md-primary-container) !important;
    background-image: none !important;
    color: var(--md-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 92, 187, 0.15) !important;
}

/* Slate-900 backgrounds — NO se tocan globalmente para no romper módulos */

/* Planificación toolbar */
.lps-toolbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--md-outline-variant) !important;
}
.lps-toolbar .text-white {
    color: var(--md-on-surface) !important;
}

/* Ring indigo → ONPE */
.ring-indigo-500 {
    --tw-ring-color: var(--md-primary) !important;
}

/* Gradient overlays decorativos dentro de contabilidad → transparentes */
.q-glass > .absolute.inset-0[class*="bg-gradient"] {
    background: transparent !important;
    background-image: none !important;
}

/* ============================================================
   PLANIFICACIÓN & MÓDULOS DARK — ONPE MD3 TRANSFORMATION
   Convierte bg-blue-900, bg-slate-800/900 a estilo claro
   ============================================================ */

/* --- FONDOS BLUE-900 → ONPE claro --- */
.bg-blue-900 {
    background-color: var(--md-primary) !important;
    color: #ffffff !important;
}
.bg-blue-900:hover,
.hover\:bg-blue-800:hover {
    background-color: #004a99 !important;
}

/* --- Botones bg-slate-800 y bg-blue-900: azul ONPE --- */
button.bg-slate-800,
button.bg-blue-900,
a.bg-blue-900 {
    background-color: var(--md-primary) !important;
    color: #ffffff !important;
}
button.bg-slate-800:hover,
button.bg-blue-900:hover {
    background-color: #004a99 !important;
}

/* --- SOMBRAS BLUE → ONPE --- */
.shadow-blue-900\/20,
.shadow-blue-200,
.shadow-blue-200\/50 {
    --tw-shadow-color: rgba(0, 92, 187, 0.1) !important;
}

/* ============================================================
   RESPONSIVE MOBILE — BREAKPOINTS MD3
   Mobile-first: max-width:768px (tablets), max-width:480px (phones)
   ============================================================ */

/* --- TABLAS RESPONSIVAS --- */
@media (max-width: 768px) {
    /* LOGIN: protección total — mantener diseño original */
    #tensor-auth {
        padding: 16px !important;
    }
    #tensor-auth input {
        padding: 10px 48px !important;
        min-height: auto !important;
        width: 100% !important;
    }
    #tensor-auth button {
        width: auto !important;
        min-height: auto !important;
    }
    #tensor-auth .q-btn-primary {
        width: 100% !important;
    }
    #tensor-auth .max-w-\[420px\] {
        max-width: 100% !important;
    }
    #tensor-auth .p-10 {
        padding: 24px !important;
    }
    #tensor-auth .w-32 {
        width: 80px !important;
        height: 80px !important;
    }
    #tensor-auth .gap-8 {
        gap: 20px !important;
    }
    #tensor-auth .text-5xl {
        font-size: 2.2rem !important;
    }

    /* SIDEBAR: ocultar toggle handle en móvil */
    #sidebar-toggle-handle {
        display: none !important;
    }
    /* SIDEBAR: ocultar sidebar desktop en móvil */
    #app-sidebar {
        display: none !important;
    }

    /* HEADER: reducir padding en móvil */
    #main-header {
        padding-left: 12px !important;
        padding-right: 12px !important;
        min-height: 3.5rem !important;
    }
    /* Header: ocultar separador y reducir user info */
    #main-header .h-6.w-px {
        display: none !important;
    }
    #main-header .gap-3 {
        gap: 4px !important;
    }
    /* User info: compactar en móvil */
    #user-role {
        display: none !important;
    }

    /* CONTENIDO: sin padding excesivo */
    #main-wrapper {
        padding-left: 0 !important;
    }
    .sidebar-collapsed #main-wrapper {
        padding-left: 0 !important;
    }

    /* Inline style padding override para módulos */
    [style*="padding: 0 24px"],
    [style*="padding:0 24px"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* ============================================================
       HEADERS DE MÓDULOS — REORGANIZACIÓN MOBILE
       Aplica a TODOS los headers con patrón Quantum Elite
       ============================================================ */

    /* Header contenedor azul: quitar overflow-hidden para que tabs se vean */
    .rounded-\[12px\][style*="background-color"] {
        overflow: visible !important;
    }

    /* Headers: forzar columna vertical */
    .flex.flex-col.md\:flex-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    /* Contenedor de tabs en headers: wrap para que se reorganicen */
    .bg-black\/20 .overflow-x-auto.no-scrollbar,
    .bg-black\/20.overflow-x-auto.no-scrollbar,
    .bg-\[\#f0f2f5\].overflow-x-auto.no-scrollbar {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 3px !important;
    }

    /* Tabs buttons: más compactos en móvil */
    .tab-btn-custom,
    .view-btn,
    .tab-btn {
        padding: 5px 8px !important;
        font-size: 9px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }

    /* Scale-90: quitar en móvil */
    .scale-90 {
        transform: none !important;
    }

    /* Inputs y selects con ancho fijo: full width */
    input[class*="w-\["],
    select[class*="min-w-\["],
    select[class*="w-\["] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Header azul: padding reducido (EXCEPTO login) */
    [style*="background-color: #0044A3"]:not(#tensor-auth),
    [style*="background-color:#0044A3"]:not(#tensor-auth) {
        padding: 10px !important;
    }

    /* Sección de acciones (búsqueda + filtros + botones) */
    #header-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    #header-actions > * {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    #header-actions input,
    #header-actions select {
        width: 100% !important;
    }

    /* Botones de acción en headers: full width y centrados (EXCEPTO login) */
    [style*="background-color: #0044A3"]:not(#tensor-auth) button[class*="px-6"],
    [style*="background-color: #0044A3"]:not(#tensor-auth) button[class*="px-5"],
    [style*="background-color:#0044A3"]:not(#tensor-auth) button[class*="px-6"],
    [style*="background-color:#0044A3"]:not(#tensor-auth) button[class*="px-5"] {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Dashboard header blanco: padding reducido */
    .rounded-2xl.bg-white.border {
        padding: 10px !important;
    }

    /* Dashboard tabs container */
    .flex.items-center.bg-\[\#f0f2f5\] {
        flex-wrap: wrap !important;
    }

    /* Dashboard filters bar: columna */
    .flex.flex-col.md\:flex-row.gap-2 {
        flex-direction: column !important;
    }
    .flex.flex-col.md\:flex-row.gap-2 .flex.items-center.gap-2 {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    .flex.flex-col.md\:flex-row.gap-2 button {
        flex: 1 !important;
    }

    /* KPI cards: 2 columnas en tablet, 1 en phone */
    .grid.grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ============================================================
       FORMULARIOS: Grids de 12 columnas → apilados en móvil
       Afecta RRHH, Contratos, y cualquier form con grid-cols-12
       ============================================================ */
    .grid-cols-12 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .grid-cols-12 > .col-span-2,
    .grid-cols-12 > .col-span-3,
    .grid-cols-12 > .col-span-4,
    .grid-cols-12 > .col-span-5,
    .grid-cols-12 > .col-span-6 {
        grid-column: span 1 !important;
    }
    /* Campos grandes (nombre, obra): full width */
    .grid-cols-12 > .col-span-4,
    .grid-cols-12 > .col-span-5,
    .grid-cols-12 > .col-span-6 {
        grid-column: span 2 !important;
    }

    /* Filtros de Tareo RRHH: apilar */
    #panel-tareo .flex.items-center.gap-4 {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    #panel-tareo .flex.items-center.gap-2 {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    #panel-tareo select,
    #panel-tareo input[type="date"] {
        width: 100% !important;
        min-width: 0 !important;
    }
    /* Tareo table sticky column: más angosta */
    .tareo-table th.sticky,
    .tareo-table td.sticky {
        min-width: 100px !important;
        max-width: 100px !important;
    }

    /* Reportes RRHH: formulario apilado */
    #panel-reportes .flex.flex-col.md\:flex-row {
        flex-direction: column !important;
        gap: 12px !important;
    }
    #panel-reportes .rounded-\[40px\] {
        padding: 16px !important;
        border-radius: 16px !important;
    }

    /* Padding lateral de módulos */
    .px-6, .px-8 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Tablas: scroll horizontal en contenedor */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        max-width: 100%;
    }
    thead, tbody, tr {
        max-width: 100%;
    }

    /* Grids: forzar 1 columna en móvil */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: 1fr !important;
    }

    /* Flex wrapping para toolbars y filtros */
    .flex.gap-2,
    .flex.gap-3,
    .flex.gap-4,
    .flex.items-center.gap-2,
    .flex.items-center.gap-3,
    .flex.items-center.gap-4 {
        flex-wrap: wrap !important;
    }

    /* Modales: full width en móvil */
    .fixed.inset-0 .max-w-2xl,
    .fixed.inset-0 .max-w-3xl,
    .fixed.inset-0 .max-w-4xl,
    .fixed.inset-0 .max-w-5xl,
    .fixed.inset-0 .max-w-6xl,
    .fixed.inset-0 .max-w-7xl {
        max-width: 95vw !important;
        margin: 8px !important;
    }

    /* Padding lateral reducido (px-10, px-12, px-24) */
    .px-10, .px-12 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .px-24 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Texto más pequeño en tablas */
    table td, table th {
        font-size: 11px !important;
        padding: 6px 8px !important;
    }

    /* Inputs táctiles: mínimo 40px (excluye tabs de headers) */
    input, select, textarea {
        min-height: 40px;
    }
    button {
        min-height: 36px;
    }
    input[type="checkbox"], input[type="radio"] {
        min-height: auto;
    }
    .tab-btn-custom, .view-btn, .tab-btn, .display-mode-btn {
        min-height: auto !important;
    }

    /* Ocultar elementos decorativos en móvil */
    .hidden-mobile {
        display: none !important;
    }
    /* Decorativos de headers (blur, gradients): ocultar en móvil */
    .absolute.inset-0.bg-white\/5,
    .absolute.bg-blue-500\/5,
    .absolute.bg-blue-900\/10,
    .absolute.bg-indigo-900\/10 {
        display: none !important;
    }

    /* Solo headers de módulos: quitar overflow-hidden para que tabs no se corten */
    .rounded-\[12px\].overflow-hidden[style*="background-color"],
    .rounded-2xl.overflow-hidden[style*="background-color"] {
        overflow: visible !important;
    }

    /* Cards y paneles: sin min-width fijo */
    [style*="min-width"] {
        min-width: auto !important;
    }

    /* Sidebar y paneles laterales: full width */
    .w-64, .w-72, .w-80, .w-96 {
        width: 100% !important;
    }

    /* Font sizes responsivos */
    .text-2xl {
        font-size: 1.25rem !important;
    }
    .text-3xl {
        font-size: 1.5rem !important;
    }
    .text-4xl {
        font-size: 1.75rem !important;
    }

    /* Botones en fila: wrap */
    .space-x-2, .space-x-3, .space-x-4 {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Select container */
    .q-select-container {
        width: 100% !important;
    }

    /* Dropdowns menú: posición correcta */
    .vc-dropdown {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        top: auto !important;
        max-height: 70vh;
        overflow-y: auto;
        width: auto !important;
    }
}

/* --- PHONES ESPECÍFICO --- */
@media (max-width: 480px) {
    /* Grids: siempre 1 columna */
    [class*="grid-cols-"] {
        grid-template-columns: 1fr !important;
    }
    /* col-span: todos ocupan fila completa */
    [class*="col-span-"] {
        grid-column: span 1 !important;
    }

    /* Padding mínimo */
    .p-6, .p-8 {
        padding: 8px !important;
    }
    .p-4 {
        padding: 6px !important;
    }

    /* Inline style padding override */
    [style*="padding: 0 24px"],
    [style*="padding:0 24px"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Tablas aún más compactas */
    table td, table th {
        font-size: 10px !important;
        padding: 4px 6px !important;
    }

    /* Modales full screen en phone */
    .fixed.inset-0 > div {
        border-radius: 0 !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
    }

    /* Texto reducido */
    .text-lg {
        font-size: 0.95rem !important;
    }
    .text-xl {
        font-size: 1.05rem !important;
    }

    /* Botones más compactos */
    .q-btn, button {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }
    button.vc-top-btn {
        padding: 4px 8px !important;
    }

    /* Header ultra-compacto en phone */
    #main-header {
        padding-left: 8px !important;
        padding-right: 8px !important;
        min-height: 3rem !important;
    }
    /* Ocultar user info card en phone (solo mostrar nombre) */
    #main-header .bg-slate-50.rounded-full {
        padding: 2px 8px !important;
        gap: 4px !important;
    }
    #main-header .bg-slate-50.rounded-full .w-7 {
        display: none !important;
    }
    #user-name {
        font-size: 9px !important;
    }

    /* Mobile menu: botones más grandes para touch */
    #mobile-menu .grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    #mobile-menu .p-3 {
        padding: 12px !important;
        font-size: 12px !important;
    }

    /* Inputs full width */
    input, select, textarea {
        width: 100% !important;
    }
    input[type="checkbox"], input[type="radio"] {
        width: auto !important;
    }

    /* Flex containers: stack vertical en phone */
    .flex.justify-between {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Botones de acción en tablas: tamaño touch */
    table td button,
    table td .w-7 {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
}

/* --- OCULTAR TOGGLE SIDEBAR bajo xl (1280px) --- */
@media (max-width: 1279px) {
    #sidebar-toggle-handle {
        display: none !important;
    }
}

/* --- TABLET LANDSCAPE --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    table td, table th {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
}

/* --- UTILIDAD: wrapper para tablas en vistas --- */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 100%;
}

/* --- PRINT: ocultar elementos de navegación --- */
@media print {
    .vc-top-menu, #tc-mobile-menu-btn, #tc-mobile-nav,
    .no-print {
        display: none !important;
    }
}