/**
 * Proyecto: ByteCobrador SaaS
 * Control Estructural - Arquitectura de Visibilidad Horizontal y Componentes UI Premium
 * Archivo: operator-panel/css/maestros.css
 * v15.2.5 - Saneado, Purgado de Duplicaciones y Blindado Estilo Shadcn UI
 */

/* ============================================================================
   🏛️ 1. CONTROL ESTRUCTURAL CORE (VISIBILIDAD EN MEMORIA RAM)
   ============================================================================ */

/* Ocultamos las pestañas inactivas respetando el flujo nativo de la suite */
.maestro-tab,
.tab-pane {
    display: none; /* 🎯 Sin !important para permitir que el JavaScript en línea gobierne la pantalla */
}

/* REGLA DE VISIBILIDAD PROTEGIDA: Panel dinámico activo */
.maestro-tab.w3-show,
.tab-pane.active,
div.maestro-tab.w3-show,
div[id^="tab-"].w3-show {
    display: block !important;
}

/* Remueve el padding fantasma superior de las pestañas dinámicas de Maestros */
.maestro-tab.w3-container,
.maestro-tab.w3-container.w3-container.w3-padding-16 {
    padding-top: 2px !important;
}

/* 🎯 CORTAFUEGOS ABSOLUTO: Si el inline de JavaScript ordena ocultar la caja con display: none, 
   la GPU debe apagar el renderizado de forma imperativa sin importar qué clase tenga puesta */
div[id^="tab-"][style*="display: none"],
div[id^="tab-"][style*="display:none"],
.maestro-tab[style*="display: none"],
.maestro-tab[style*="display:none"] {
    display: none !important; /* 🛡️ Aplasta al display: block !important anterior cuando el JS apaga la pestaña */
}

/* ============================================================================
   🔏 ENMASCARAMIENTO DE CREDENCIALES SEGURO (UX de Oficina v15.3.0)
   ============================================================================ */
.saas-mask-credencial {
    -webkit-text-security: disc !important;
    text-security: disc !important;
    transition: all 0.2s ease-in-out !important;
}

/* ============================================================================
   🎨 2. COMPONENTE UNIVERSAL: CHIPS DE JURISDICCIONES / ZONAS (v15.3.0)
   ============================================================================ */

/* Contenedor elástico multidireccional que agrupa los chips sin romper renglón feo */
.zone-chips-container,
#cob-zones-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* El Chip atómico individual (Calibración compacta discreta v4.1.177) */
.zone-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 12px !important; /* Colchón exacto de tu captura */
    background-color: #f8fafc !important; /* Slate 50 sutil */
    border: 1px solid #e2e8f0 !important; /* Slate 200 */
    border-radius: 16px !important;        /* Curvatura de píldora pura */
    font-size: 0.78em !important;          /* Tipografía micro-compacta legible */
    font-weight: 500 !important;
    color: #475569 !important;             /* Slate 600 */
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    user-select: none !important;
    margin: 0 !important;                  /* Resetea empujes basura de W3.CSS */
}

/* Efecto hover suave al pasar el cursor humano */
.zone-chip:hover {
    background-color: #f1f5f9 !important;  /* Slate 100 */
    border-color: #cbd5e1 !important;      /* Slate 300 */
    color: #1e293b !important;
}

/* Iconos vectoriales internos en estado pasivo */
.zone-chip i {
    font-size: 0.95em !important;
    color: #94a3b8 !important;             /* Slate 400 */
    transition: color 0.15s ease !important;
}

/* 🟢 ESTADO ACTIVO / SELECCIONADO: Encendido instantáneo en el Verde Teal corporativo */
.zone-chip.active {
    background-color: #009688 !important;   /* Verde Teal original */
    border-color: #00897b !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 150, 136, 0.2) !important; /* Iluminación traslúcida */
}

.zone-chip.active i {
    color: #ffffff !important;             /* Fuerza el icono blanco en la RAM */
}

/* 🔴 ESTADO BLOQUEADO / OCUPADO (Sello de Hierro: Rutas asignadas a otros operadores) */
.zone-chip.disabled,
.zone-chip.blocked {
    background-color: #f1f5f9 !important;  /* Fondo gris apagado */
    color: #94a3b8 !important;             /* Texto muted */
    border: 1px dashed #cbd5e1 !important; /* Borde discontinuo de bloqueo */
    cursor: not-allowed !important;
    opacity: 0.65 !important;
    box-shadow: none !important;
}

.zone-chip.disabled i,
.zone-chip.blocked i {
    color: #ef4444 !important;             /* Icono de candado rojo de alerta */
}

/* Cortafuegos radical contra el checkbox nativo del DOM */
.zone-chip input[type="checkbox"] {
    display: none !important;              /* Desaparece para que gobierne el chip elástico */
}

/* 🪐 ACOPLE NATIVO: El chip se enciende automáticamente si contiene un checkbox tildado */
.zone-chip:has(input[type="checkbox"]:checked) {
    background-color: #009688 !important;
    border-color: #00897b !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 150, 136, 0.2) !important;
}

.zone-chip:has(input[type="checkbox"]:checked) i {
    color: #ffffff !important;
}


/* ============================================================================
   🔍 3. CORRECCIÓN DE ALINEACIÓN: BARRA SUPERIOR DE HERRAMIENTAS PERFECTA
   ============================================================================ */

/* Contenedor General: Fuerza un entorno flexible y plano libre de cajas rígidas */
.saas-filter-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Agrupador interno para la búsqueda y controles secundarios */
.saas-filter-bar > div {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Input de Búsqueda Minimalista Universal (Máxima Especificidad contra global.css) */
input[type="text"].saas-input-premium,
input.saas-input-premium,
select.saas-select-premium,
.saas-input-premium {
    height: 38px !important;
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-universal) !important;
    padding-top: 0 !important;          /* Anula el empuje vertical de global.css */
    padding-bottom: 0 !important;       /* Anula el empuje vertical de global.css */
    padding-left: 36px !important;      /* Protege el espacio para que el texto esquive la lupa */
    padding-right: 12px !important;
    font-size: 0.9em !important;
    line-height: 36px !important;       /* Clava el texto en el centro vertical perfecto */
    transition: all 0.2s ease-in-out !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
}

#operador-search-input:focus,
input[type="text"][placeholder*="Buscar"]:focus {
    border-color: var(--brand-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.15) !important;
}

/* 🟢 REORGANIZADO: Delimitación estricta de alcance en Maestros */
.saas-checkbox-container label:has(input[type="checkbox"]),
.saas-form-row-premium label:has(input[type="checkbox"]),
#modal-operador label:has(input[type="checkbox"]) {
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer;
    font-size: 0.9em !important;
    color: var(--text-main) !important;
    margin: 0 !important;
    height: 38px !important;
}

/* Contenedor elástico estandarizado (Abstrae todo el estilo inline del div) */
.saas-checkbox-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    height: 38px !important;
    margin-left: auto !important; /* 🎯 Clave: Empuja el control a la derecha si está en un entorno flex */
    padding-left: 8px !important;
    box-sizing: border-box !important;
}

input[type="checkbox"].saas-checkbox-premium {
    width: 16px !important;
    height: 16px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    background-color: var(--bg-card) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    margin: 0 !important;
    position: relative !important;
    top: 0 !important;
    box-sizing: border-box !important;
}

input[type="checkbox"].saas-checkbox-premium:checked {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

input[type="checkbox"].saas-checkbox-premium:checked::after {
    content: "✓" !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: bold !important;
}

/* El Label Validador Estilizado (Abstrae todo el estilo inline del label) */
.saas-checkbox-label {
    margin-left: 8px !important;
    font-weight: bold !important; /* Sostiene el peso visual de Operadores */
    color: #475569 !important;   /* Slate 600 corporativo nítido */
    cursor: pointer !important;
    user-select: none !important;
    white-space: nowrap !important;
    font-size: 0.88em !important; /* Calibración compacta high-end */
}

/* ============================================================================
   🏛️ 4. ESTRUCTURA DE LA TABLA MAESTRA Y TIPOGRAFÍA HIGH-END (OPERADORES)
   ============================================================================ */

/* Forzar la tipografía del sistema de alta gama con antialiasing activado */
.maestro-tab, 
table,
.w3-responsive {
    background-color: var(--bg-card) !important;
    padding: 16px 4px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tabla Maestra Pura (Plana y Compacta) */
table,
table.w3-table-all {
    border-collapse: collapse !important;
    background-color: var(--bg-card) !important;
    width: 100% !important;
    border: none !important;
}

/* Encabezados de Columna (th): Fondo gris sutil, texto Slate 600 y divisores perimetrales */
th {
    background-color: #f8fafc !important; /* Slate 50 */
    color: #475569 !important;            /* Slate 600 */
    font-size: 0.84em !important;
    font-weight: 550 !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
}

th i {
    color: #94a3b8 !important;
    margin-right: 6px !important;
    font-size: 0.95em !important;
}

/* Filas de Datos (tr) y Hover Sutil */
table.w3-table-all tr,
tbody tr {
    background-color: var(--bg-card) !important;
    transition: background-color 0.15s ease !important;
}

tbody tr:hover {
    background-color: #f8fafc !important;
}

/* Celdas de Datos (td) */
td {
    padding: 10px 16px !important;
    vertical-align: middle !important;
    font-size: 0.88em !important;
    color: var(--text-main) !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* ============================================================================
   🏷️ 5. REDISEÑO PREMIUM DE BADGES (ESTADOS Y ROLES PASTEL)
   ============================================================================ */
td .w3-tag,
td [class*="w3-tag"],
.status-chip {
    padding: 3px 8px !important;
    font-size: 0.76em !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
}

/* Badge de Estado: ACTIVO */
td .w3-tag.w3-green,
td [class*="-green"] {
    background-color: #f0fdf4 !important;
    color: #166534 !important;
    border: 1px solid #dcfce7 !important;
}

/* Badge de Rango Superior: LIDER VTA */
td .w3-tag.w3-blue,
td [class*="-blue"] {
    background-color: #e0e7ff !important;
    color: #3730a3 !important;
    border: 1px solid #c7d2fe !important;
}

/* Badges de Roles de Acceso: ADMIN / SUPERVISOR / OPERADOR */
td [class*="w3-border-blue"],
td [class*="w3-text-blue"] {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 3px 8px !important;
}
/* ============================================================================
   💥 6. BLINDAJE DE SEGURIDAD UI: HILERA DE ACCIONES HORIZONTAL PURA
   ============================================================================ */

/* Dimensiones rígidas y alineación en la última columna de todas las tablas */
.saas-table-premium td:last-child,
.saas-actions-cell {
    min-width: 140px !important;
    width: 140px !important;
    text-align: center !important;
    padding: 6px 4px !important; /* 🎯 Mantiene los botones redondos compactos en vertical */
}

/* 🛡️ CORTAFUEGOS DE CABECERA: Iguala el colchón de 12px para centrar en alto el título Acciones */
.saas-table-premium th:last-child {
    min-width: 140px !important;
    width: 140px !important;
    text-align: center !important;
    padding: 12px 16px !important; /* 🎯 Clave: Sincroniza la misma altura que la columna izquierda */
}

/* Celda nativa estabilizada verticalmente (Evita desfase de la línea inferior) */
.saas-table-premium td:last-child,
.saas-table-premium td.saas-actions-cell {
    display: table-cell !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
    text-align: center !important;
    line-height: 1 !important;
    font-size: 0 !important; /* Aniquila espacios en blanco fantasmas entre botones */
    white-space: nowrap !important;
}

.saas-table-premium td:last-child > *,
.saas-actions-cell > * {
    white-space: nowrap !important;
}

/* 🪐 ESTÁNDAR UNIVERSAL DE BOTONES (100% Genérico - Libre de IDs de Solapas) */
.saas-table-premium td button,
.saas-table-premium td .w3-button,
.saas-actions-cell button,
.saas-action-btn {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 3px !important; /* Espaciado horizontal milimétrico unificado */
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-universal) !important;
    cursor: pointer;
    transition: all 0.15s ease-in-out !important;
}

/* 🎯 CORRECCIÓN CORTAFUEGOS: Fuerza las dimensiones del icono vectorial en entornos flex */
td button i,
td .w3-button i,
.saas-table-premium td button i,
.saas-table-premium td .w3-button i,
.saas-action-btn i {
    font-size: 14px !important;       /* ⚡ Fuerza un tamaño nítido de tipografía en la RAM */
    width: 14px !important;          /* ⚡ Le da un ancho fijo para que flex no lo colapse a cero */
    height: 14px !important;         /* ⚡ Le da un alto fijo para el render de la GPU */
    display: inline-block !important; /* Asegura el comportamiento de caja nativo de FontAwesome */
    color: #64748b !important;        /* Gris Slate neutro base */
    transition: color 0.15s ease, transform 0.15s ease !important;
    line-height: 14px !important;    /* Alineación interna recta */
    text-align: center !important;
}


/* ⚡ EFECTO HOVER: Micro-animación de escala y círculo traslúcido universal */
td button:hover,
td .w3-button:hover,
.saas-table-premium td button:hover,
.saas-action-btn:hover {
    background-color: #f1f5f9 !important; /* Inyecta la aureola circular al posarse */
}

td button:hover i,
td .w3-button:hover i,
.saas-table-premium td button:hover i,
.saas-action-btn:hover i {
    transform: scale(1.08) !important;
}

/* 🎨 ILUMINACIONES ESPECÍFICAS SEGÚN LA ACCIÓN DEL ICONO */
td button:hover i.fa-pencil,
td button:hover i.fa-edit,
.saas-table-premium td button:hover i.fa-pencil,
.saas-table-premium td button:hover i.fa-edit,
.saas-action-btn:hover i.fa-edit { 
    color: #1e293b !important; /* Editar -> Gris oscuro nítido text-main */
}

td button:hover i.fa-trash,
.saas-table-premium td button:hover i.fa-trash,
.saas-action-btn:hover i.fa-trash { 
    color: #dc2626 !important; /* Eliminar -> Rojo coral de alerta */
}

td button:hover i.fa-key,
.saas-table-premium td button:hover i.fa-key,
.saas-action-btn:hover i.fa-key { 
    color: #0284c7 !important; /* Credenciales -> Celeste de seguridad */
}

td button:hover i.fa-toggle-on,
td button:hover i.fa-toggle-off,
.saas-table-premium td button:hover i.fa-toggle-on,
.saas-table-premium td button:hover i.fa-toggle-off,
.saas-action-btn:hover i.fa-toggle-on,
.saas-action-btn:hover i.fa-toggle-off { 
    color: #16a34a !important; /* Estado -> Verde de actividad */
}

td button:hover i.fa-history,
.saas-table-premium td button:hover i.fa-history,
.saas-action-btn:hover i.fa-history {
    color: #64748b !important; /* Historial -> Gris Slate intermedio */
}

/* ============================================================================
   🪐 7. REDISEÑO PREMIUM: COMPONENTE DROPDOWN DE ALTA (SUBMENÚ OPERADORES)
   ============================================================================ */

/* Menu de Opciones Flotante */
#create-operators-dropdown,
div.w3-dropdown-content {
    top: 100% !important;
    left: 0 !important; /* Alineación izquierda estricta */
    right: auto !important;
    margin-top: 4px !important;
    background-color: #ffffff !important; /* Blanco Puro */
    min-width: 240px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    border-radius: var(--radius-universal) !important;
    padding: 6px 0 !important;
    z-index: 999 !important;
}

/* Opciones individuales dentro del menú */
.w3-dropdown-content a,
.w3-dropdown-content button,
#create-operators-links a, 
#create-operators-links div {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    color: #334155 !important; /* Slate 700 */
    font-size: 0.86em !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    background-color: transparent !important;
    border-radius: 6px !important;
    transition: all 0.15s ease-in-out !important;
    cursor: pointer;
    text-align: left !important;
    width: 100% !important;
}

/* Hover de Opciones e Iconos */
.w3-dropdown-content a:hover,
.w3-dropdown-content button:hover,
#create-operators-links a:hover,
#create-operators-links div:hover {
    background-color: #f1f5f9 !important;
    color: var(--brand-primary) !important;
    padding-left: 20px !important;
}

.w3-dropdown-content a i,
.w3-dropdown-content button i {
    color: #64748b !important;
    font-size: 1.05em !important;
    width: 16px !important;
    text-align: center !important;
    transition: color 0.15s ease !important;
}

.w3-dropdown-content a:hover i,
.w3-dropdown-content button:hover i {
    color: var(--brand-primary) !important;
}
/* ============================================================================
   🪐 AJUSTE DE PRECISIÓN: ALINEACIÓN DERECHA DEL DROPDOWN
   ============================================================================ */
.w3-dropdown-content,
div[id*="createDropdown"],
div[class*="w3-dropdown-content"] {
    left: auto !important;     /* Cancela el desborde izquierdo de W3.CSS */
    right: 0 !important;       /* 🎯 Clave: Alineación matemática al ras por la derecha */
}

/* ============================================================================
   📱 8. BLINDAJE RESPONSIVO: ADAPTACIÓN ELÁSTICA UNIVERSAL (100% GENÉRICO)
   ============================================================================ */
@media (max-width: 850px) {
    
    /* 🎯 1. La barra de herramientas pasa a modo vertical en pantallas chicas */
    .saas-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding-bottom: 12px !important;
    }

    /* 🎯 2. Agrupadores de controles internos se estiran al 100% del ancho */
    .saas-filter-bar > div,
    .saas-filter-bar .saas-control-wrapper {
        flex-direction: row !important;
        width: 100% !important;
        justify-content: space-between !important;
        max-width: none !important;
    }

    /* 🎯 3. Todos los inputs premium sostienen su altura, centrado y pasillos de seguridad */
    .saas-input-premium,
    .saas-select-premium {
        width: 100% !important;
        max-width: none !important;
        height: 38px !important;
        line-height: 36px !important;       /* Clava la tipografía al centro vertical exacto */
        padding-top: 0 !important;          
        padding-bottom: 0 !important;       
        padding-left: 36px !important;      /* 🛡️ CORTAFUEGOS: Despega el texto de la lupa */
        padding-right: 36px !important;     /* Protege la cruz X de borrado */
        box-sizing: border-box !important;
    }

    /* 🎯 4. Los botones de alta principal se centran y ocupan todo el ancho móvil */
    .saas-btn-premium {
        width: 100% !important;
        justify-content: center !important;
    }

    /* 🎯 5. Los submenús dropdown se adaptan a la caja elástica del padre */
    .w3-dropdown-content,
    div[class*="w3-dropdown-content"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================================
   🗂️ 9. COMPONENTE: REDISEÑO MINIMALISTA DE SOLAPAS SUPERIORES
   ============================================================================ */
div.w3-bar.saas-premium-nav,
.saas-premium-nav.w3-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important; /* Elástico multilínea */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px 4px !important;
    background-color: var(--bg-card) !important;
    padding: 6px 10px !important;
    margin: 0 0 16px 0 !important;
    height: auto !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    width: 100% !important;
}

div.w3-bar.saas-premium-nav::before, div.w3-bar.saas-premium-nav::after,
.saas-premium-nav.w3-bar::before, .saas-premium-nav.w3-bar::after {
    display: none !important;
    content: none !important;
}

/* Solapa individual Tablink */
div.w3-bar.saas-premium-nav .tablink,
.saas-premium-nav.w3-bar .tablink {
    flex: none !important;
    background-color: transparent !important;
    color: #64748b !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.84em !important; 
    font-weight: 500 !important;
    height: 32px !important; 
    padding: 0 12px !important;
    border: 1px solid transparent !important; 
    border-radius: var(--radius-universal) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important; 
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    white-space: nowrap !important;
    transition: background-color 0.1s ease, color 0.1s ease !important;
}

div.w3-bar.saas-premium-nav .tablink:hover,
.saas-premium-nav.w3-bar .tablink:hover {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

div.w3-bar.saas-premium-nav .tablink i,
.saas-premium-nav.w3-bar .tablink i {
    color: #94a3b8 !important;
    font-size: 1.05em !important;
}

/* Pestaña Activa Premium Muted */
div.w3-bar.saas-premium-nav .tablink.w3-teal,
.saas-premium-nav.w3-bar .tablink.w3-teal,
div.w3-bar.saas-premium-nav .tablink.active,
.saas-premium-nav.w3-bar .tablink.active {
    background-color: #f1f5f9 !important;
    color: var(--brand-primary) !important;
    font-weight: 600 !important; 
    border: 1px solid #e2e8f0 !important; 
}

/* ============================================================================
   📐 10. ENTORNO UNIVERSAL: FILTROS, BUSCADORES Y TABLAS MAESTRAS (Altura 38px)
   ============================================================================ */

/* Contenedor flexible universal para barras superiores de herramientas */
.saas-filter-bar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
}

/* Wrapper del buscador: Anclaje relativo estricto para fijar la lupa y la cruz */
.saas-control-wrapper {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 38px !important;
    box-sizing: border-box !important;
    flex: 1 !important; /* Fuerza al buscador a estirarse y consumir todo el centro disponible */
}

/* Lupa Vectorial integrada al ras en el centro vertical perfecto */
.saas-control-wrapper .fa-search {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* Clavada milimétricamente en el eje central */
    color: #94a3b8 !important;              /* Gris Slate suave corporativo */
    font-size: 0.95em !important;
    pointer-events: none !important;
    z-index: 5 !important;
    line-height: 1 !important;
}

/* El Botón de la Cruz 'X' Universal (Limpio y Agnóstico) */
.saas-control-wrapper .saas-btn-clear,
.saas-control-wrapper button[id*="btn-clear-search"],
.saas-control-wrapper .w3-display-right {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 30px !important;
    width: 30px !important;
    /* 🎯 SIN !IMPORTANT EN EL DISPLAY: El JS maneja la visibilidad (none/block) sin bloqueos de hardware */
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 10 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Fuerza el diseño del icono vectorial interno de la cruz */
.saas-control-wrapper .saas-btn-clear i,
.saas-control-wrapper button[id*="btn-clear-search"] i,
.saas-control-wrapper .w3-display-right i {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    display: inline-block !important;
    color: #94a3b8 !important;        /* Gris Slate intermedio */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Input Premium Universal: Calibración absoluta de texto e inmunidad a global.css */
.saas-input-premium,
.saas-select-premium {
    height: 38px !important;
    width: 100% !important;
    display: block !important;
    line-height: 36px !important;       /* 🎯 Clave 1: Forzamos la tipografía al centro horizontal exacto */    

    /* 🎯 Clave 2: Desglose explícito que destruye el bloqueo de global.css por jerarquía de RAM */
    padding-top: 0 !important;          
    padding-bottom: 0 !important;       
    padding-left: 36px !important;      /* 🛡️ CORTAFUEGOS: Fuerza los 36px libres a la izquierda de la lupa */
    padding-right: 36px !important;     /* Deja espacio libre para la cruz X a la derecha */
    
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-universal) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.88em !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* Halo Celeste de Foco Universal Unificado */
.saas-input-premium:focus,
.saas-select-premium:focus {
    outline: none !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.15) !important;
}

/* Botonera de Inserción Agnóstica Universal Celeste Corporativo */
.saas-btn-premium {
    height: 38px !important;
    padding: 0 16px !important;
    background-color: var(--brand-primary) !important; /* Fija el Celeste Turquesa como estándar */
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.86em !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: var(--radius-universal) !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.15s ease-in-out !important;
}

/* Estado Hover Universal: Destello traslúcido suave */
.saas-btn-premium:hover { 
    background-color: var(--brand-primary) !important;
    opacity: 0.88 !important; /* Simula iluminación por hardware */
    box-shadow: 0 4px 12px rgba(0, 150, 136, 0.15) !important;
}

/* Contenedores de Tablas Isomórficas Planas */
.saas-table-container {
    width: 100% !important;
    overflow-x: auto !important;
    background: var(--bg-card) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
}

.saas-table-premium {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.9em !important;
}

.saas-table-premium th {
    background-color: #f8fafc !important; /* Slate 50 */
    color: #475569 !important;
    font-weight: 600 !important;
    text-align: left;
    padding: 12px 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 0.84em !important;
    letter-spacing: 0.05em !important;
}

.saas-table-premium td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #334155 !important;
    vertical-align: middle !important;
}

.saas-tag-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 8px !important;
    font-size: 0.75em !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
}

/* Acciones Rígidas Blindadas de una Sola Fila */
.saas-actions-cell {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.saas-action-btn-group {
    display: inline-flex !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.saas-action-btn {
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}
.saas-action-btn:hover { background-color: #f8fafc !important; border-color: #cbd5e1 !important; }
.saas-action-btn.edit { color: #3b82f6 !important; }
.saas-action-btn.delete { color: #ef4444 !important; }
.saas-action-btn.history { color: #64748b !important; }

/* Utilidades de alineación JIT para cabeceras y celdas */
.text-right-premium { text-align: right !important; }
.text-center-premium { text-align: center !important; }

/* ============================================================================
   🚫 11. CORTAFUEGOS DEFINITIVO CONTRA RECTÁNGULOS DE ACCESIBILIDAD Y DROPDOWNS
   ============================================================================ */
.saas-btn-premium:focus, .saas-btn-premium:active, .saas-btn-premium:focus-visible,
#btn-dropdown-main:focus, #btn-dropdown-main:active,
button[onclick*="toggleCreateDropdown"]:focus, button[onclick*="toggleCreateDropdown"]:active,
.w3-dropdown-click button:focus, .w3-dropdown-click button:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: var(--radius-universal) !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Reseteo Absoluto de Contenedores Dropdown de W3.CSS */
.w3-dropdown-click,
div.w3-dropdown-click,
.w3-dropdown-click:focus,
.w3-dropdown-click:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

.w3-dropdown-click button {
    border-radius: var(--radius-universal) !important;
}

/* ============================================================================
   📞 COMPONENTE UNIVERSAL: TELEFONÍA FLEXBOX ORIGINAL DE LA PLATAFORMA
   ============================================================================ */
.phone-flex-row {
    display: flex !important;
    gap: 8px !important; /* 🎯 Calibrado de 6px a 8px para una separación limpia */
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 🛡️ BLINDAJE SUPREMO: Anula cualquier inline style de 72px inyectado en el DOM (Clásico) */
select.w3-select.prefix-select-fixed {
    width: 100px !important;       
    padding-left: 4px !important;  
    padding-right: 2px !important; 
    box-sizing: border-box !important;
}

/* 🪐 NUEVO ACOPLE PREMIUM: Sincronización milimétrica para la Suite de Modals (38px) */
select.saas-select-form-premium.prefix-select-fixed {
    width: 110px !important;            /* Ancho óptimo para que no se corten las banderas */
    padding-left: 8px !important;       
    padding-right: 4px !important;
    height: 38px !important;            /* Altura compacta unificada de la nueva suite */
    line-height: normal !important;     /* Destruye el desfasaje vertical del texto interno */
    display: inline-block !important;
    vertical-align: middle !important;
    font-size: 0.85em !important;
    cursor: pointer !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-universal) !important;
}

/* Forza al input de número de la nueva suite a consumir el resto del espacio plano */
.phone-flex-row input.saas-input-form-premium {
    flex: 1 !important;
    margin: 0 !important;
}

.phone-feedback-text {
    font-size: 0.75em !important;
    margin-top: 2px !important;
    font-weight: 600 !important;
    display: block !important;
    min-height: 1em !important;
}

.shared-form-input,
.shared-form-select {
    height: 44px !important;
    box-sizing: border-box !important;
}

.shared-form-select {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================================================
   🏷️ COMPONENTE REUTILIZABLE: CAPSULA DE FEEDBACK TELEFÓNICO MICRO-COMPACTO
   ============================================================================ */

/* Estructura base reducida a la mínima expresión elástica */
.saas-phone-feedback-box {
    display: inline-block !important;
    width: 100% !important;
    font-size: 0.76em !important;      /* Un pelín más pequeña y nítida */
    font-weight: 600 !important;
    margin-top: 4px !important;        /* Achicamos el espacio de arriba */
    padding: 3px 10px !important;      /* 🟢 CLAVE: Bajamos de 6px a solo 3px el grosor de altura */
    line-height: 1.2 !important;       /* 🟢 CLAVE: Forzamos la altura del renglón interna al ras */
    border-radius: 4px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
}

/* ⚪ ESTADO 1: Pasivo / Inicial (Gris Claro Discreto) */
.saas-phone-feedback-box.status-passive {
    background-color: #f8fafc !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
}

/* 🟠 ESTADO 2: Configurando / Progreso (Naranja Pastel Muted) */
.saas-phone-feedback-box.status-typing {
    background-color: #fff7ed !important;
    color: #ea580c !important;
    border: 1px solid #ffedd5 !important;
}

/* 🟢 ESTADO 3: Formato Válido Certificado (Celeste Pure Clientes) */
.saas-phone-feedback-box.status-validated {
    background-color: #e8f4fd !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
}

/* ============================================================================
   🏛️ COMPONENTE MAESTRO: SUITE DE MODALS CRUD PREMIUM (Sello de Hierro v15.7.5)
   ============================================================================ */

/* Contenedor Raíz: Centrado elástico e inmune a deformaciones */
.saas-modal-premium {
    position: fixed !important;
    z-index: 99999 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: none;
    align-items: center !important;       /* Centrado vertical estricto */
    justify-content: center !important;    /* Centrado horizontal estricto */
    padding: 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;           /* 🎯 BLOQUEO: Prohibido escrolear el fondo general */
}


/* Activación limpia por hardware gráfico */
.saas-modal-premium.active,
.saas-modal-premium.w3-show,
.saas-modal-premium[style*="display: block"],
.saas-modal-premium[style*="display:block"] {
    display: flex !important;
}

/* 2. Caja del Contenido del Modal Estandarizada (Zonas / Calificaciones) */
.saas-modal-content-premium {
    width: 100% !important;
    max-width: 460px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    flex-shrink: 0 !important;
    margin: auto !important; 
}

/* Caja del Contenido de Modales Densos (Vendedores, Cobradores, Operadores) */
.saas-modal-content-premium.size-medium {
    width: 100% !important;
    max-width: 720px !important;          /* 🎯 MAS ANCHO: Expandido de 600px a 720px reales */
    border-radius: 8px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    flex-shrink: 0 !important;
    margin: auto !important; 
    
    /* 🎯 ALTURA FIJA ABSOLUTA: Ocupa el 80% real del alto de tu pantalla */
    height: 80vh !important;              
    display: flex !important;
    flex-direction: column !important;    /* Organiza los elementos en un eje vertical rígido */
}

/* Cuerpo Interno del Formulario: Contenedor con Scroll Independiente */
.saas-modal-content-premium.size-medium .saas-modal-body-premium {
    flex: 1 !important;                   /* Consume todo el espacio central disponible entre cabecera y botón */
    overflow-y: auto !important;          /* 🎯 SCROLL INTERNO: Si la solapa es larga, escrolea acá adentro */
    padding: 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    /*gap: 16px !important;  */
}

/* 🎯 CORRECCIÓN DE BOTÓN CLAVADO INMUTABLE AL MARGEN INFERIOR */
.saas-modal-content-premium.size-medium .saas-btn-premium-modal {
    width: 100% !important;
    height: 42px !important;
    margin-top: auto !important;          /* 🪐 EFECTO IMÁN: Empuja el botón al ras del piso de la solapa */
    flex-shrink: 0 !important;            /* Impide que el botón colapse su altura */
}

/* Cabecera Clavada Superior */
.saas-modal-header-premium {
    background-color: var(--brand-primary) !important;
    color: #ffffff !important;
    padding: 14px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-shrink: 0 !important;            /* Impide que la cabecera se achique */
}

/* 4. Estructura del Título con Iconografía Dinámica JIT */
.saas-modal-title-premium {
    margin: 0 !important;
    font-size: 1.1em !important;
    font-weight: 600 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important; /* Distancia milimétrica exacta entre el icono y el texto */
}

.saas-modal-title-premium i {
    font-size: 1.15em !important;
    color: #ffffff !important;
}

/* 5. Cuerpo Interno del Formulario Unificado (Simetría perimetral) */
.saas-modal-body-premium {
    padding: 24px !important;
    background-color: #ffffff !important;
}

/* 6. Grupo de Control Atómico (Label + Input) */
.saas-form-group-premium {
    margin-bottom: 18px !important;
}

.saas-form-label-premium {
    display: block !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    color: #475569 !important; /* Slate 600 corporativo nítido */
    margin-bottom: 6px !important;
    letter-spacing: 0.02em !important;
}

/* 🪐 EL GEMELO DE FORMULARIO: Purgado de selectores rastreables por Chrome */
input[type="text"].saas-input-form-premium,
input[type="search"].saas-input-form-premium,
input[type="number"].saas-input-form-premium, /* 🎯 EXTIRPADO EL SELECTOR DE PASSWORD DE AQUÍ */
select.saas-select-form-premium {
    height: 38px !important;
    width: 100% !important;
    display: block !important;
    line-height: 36px !important;
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-universal) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.88em !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    padding-top: 0 !important;          
    padding-bottom: 0 !important;       
    padding-right: 12px !important;     
    padding-left: 12px !important; 
}

/* Halo Celeste de Foco Purgado */
input[type="text"].saas-input-form-premium:focus,
input[type="search"].saas-input-form-premium:focus,
input[type="number"].saas-input-form-premium:focus,
select.saas-select-form-premium:focus {
    outline: none !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.15) !important;
}


/* 🪐 ADAPTACIÓN DE FILAS PARA EL NUEVO ANCHO DE 720PX */
.saas-form-row-premium {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.saas-form-row-premium > div {
    flex: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 9. Botón de Confirmación Transaccional Modal (Ras perimetral completo) */
.saas-btn-premium-modal {
    width: 100% !important;
    height: 38px !important;
    background-color: var(--brand-primary) !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.86em !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: var(--radius-universal) !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.15s ease-in-out !important;
    margin-top: 8px !important;
}

.saas-btn-premium-modal:hover { 
    background-color: var(--brand-primary) !important;
    opacity: 0.88 !important;
    box-shadow: 0 4px 12px rgba(0, 150, 136, 0.15) !important;
}

/* ============================================================================
   🪐 BLINDAJE DE PRIORIDAD ABSOLUTA PARA TOOLTIPS (Tippy.js v15.6.0)
   ============================================================================ */
.tippy-box,
[data-tippy-root],
.tippy-popper {
    z-index: 100000 !important; /* 🎯 Flota siempre por encima de los 99999 del modal */
}

/* 🪐 ADAPTACIÓN RESPONSIVA RE-CALIBRADA CONTRA COLAPSOS EN NOTEBOOKS */
@media (max-width: 540px) { /* Reducido de 600px a 540px para forzar dos columnas estables en laptops */
    .saas-form-row-premium {
        flex-direction: column !important;
        gap: 14px !important;
        margin-bottom: 14px !important;
    }
}

/* ============================================================================
   🪐 COMPONENTE: BARRA DE PESTAÑAS (TABS) PARA MODALES INTEGRADOS
   ============================================================================ */

/* Contenedor horizontal elástico de solapas */
.saas-modal-tabs-nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    width: 100% !important;
    background-color: #f1f5f9 !important; /* Slate 100: Fondo de carril de alta gama */
    padding: 4px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    margin-bottom: 10px !important;
}

/* El botón disparador/solapa individual */
.saas-modal-tab-trigger {
    flex: 1 !important; /* Forza a que se distribuyan de forma equitativa */
    background: transparent !important;
    border: none !important;
    color: #64748b !important; /* Slate 500: Texto Muted original */
    padding: 8px 12px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    text-align: center !important;
    white-space: nowrap !important;
    transition: all 0.15s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

/* Estado de Solapa Flotante Activa (Sello de Hierro: Cero clases procedimentales pesadas) */
.saas-modal-tab-trigger.active {
    background-color: #ffffff !important; /* Pestaña realzada tipo cápsula */
    color: var(--brand-primary) !important; /* Sincroniza con el celeste de marca */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

/* Íconos vectoriales embebidos dentro de las pestañas */
.saas-modal-tab-trigger i {
    font-size: 0.95em !important;
    margin-right: 6px !important;
    transition: color 0.15s !important;
}
.saas-modal-tab-trigger.active i {
    color: var(--brand-primary) !important;
}

/* Ocultamiento estructural nativo para los paneles inactivos */
.tab-pane {
    display: none !important;
}
.tab-pane.active {
    display: block !important; /* Se enciende mediante hardware gráfico al conmutar */
}

/* ============================================================================
   🌲 COMPONENTE: ÁRBOL DE PERMISOS ATÓMICO ULTRA-COMPACTO (Sello de Hierro v16.0.0)
   ============================================================================ */

/* Contenedor de la hilera: compacta el colchón vertical a la mitad */
.perm-box-scroll-area .perm-row {
    display: flex !important;
    align-items: center !important;
    padding-top: 5px !important;    
    padding-bottom: 5px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin: 0 !important;
    transition: background-color 0.12s ease-in-out !important;
}

/* Efecto hover premium tipo cápsula suave */
.perm-box-scroll-area .perm-row:hover {
    background-color: #f1f5f9 !important; /* Slate 100: Más vivo para que resalte el bloque */
    border-radius: 4px !important;
}

/* Nivel 2: Títulos de Sección (Mayúsculas de Alta Densidad) */
.perm-box-scroll-area .label-lvl-2 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.74rem !important;    
    font-weight: 800 !important;       /* Más robusto para separarse del fondo */
    color: #0f172a !important;         /* 🎨 Slate 900: Negro corporativo profundo, nítido y nítido */
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important; 
    margin-left: 8px !important;
}

/* Nivel 3 y 4: Permisos Atómicos individuales */
.perm-box-scroll-area .label-lvl-3 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.76rem !important;    
    font-weight: 500 !important;       
    color: #334155 !important;         /* 🎨 Slate 700: Un gris oscuro intermedio ultra-elegante */
    margin-left: 8px !important;
    cursor: pointer !important;
}

/* 🎯 RE-CALIBRACIÓN DE COLOR DE LOS CHECKBOXES (Sincronizados con la marca) */
.perm-box-scroll-area input[type="checkbox"].op-check-compact {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    cursor: pointer !important;   
    /*accent-color: var(--brand-primary) !important; */
}

/* 🎯 CORRECCIÓN QUIRÚRGICA DE SMART TIPS (Pisa el azul viejo de W3.CSS) */
.perm-box-scroll-area .w3-text-blue,
.perm-box-scroll-area i.fa-info-circle {
    color: var(--brand-primary) !important; /* 🟢 Cambiado a celeste de la marca fulminante */
    font-size: 11px !important;
    margin-left: 6px !important;
    opacity: 0.75 !important;
    transition: opacity 0.12s, transform 0.12s !important;
}

.perm-box-scroll-area .perm-row:hover i.fa-info-circle {
    opacity: 1 !important;
    transform: scale(1.1); /* Micro-interacción premium al pasar el mouse */
}