/* ============================================================
   VARIABLES DE COLOR & TIPOGRAFÍA (Estilo iOS Premium)
   ============================================================ */

/* --- PALETA MODO CLARO (iOS Light) --- */
:root {
    --bg: #f2f2f7;           /* Fondo gris muy claro iOS */
    --surface: #ffffff;      /* Tarjetas/Cuadros blancos puros */
    --text: #000000;         /* Texto negro puro */
    --subtext: #8e8e93;      /* Texto secundario gris iOS */
    --border: #e5e5ea;       /* Bordes muy suaves */
    --accent: #007aff;       /* Azul clásico iOS */
    --shadow: 0 4px 12px rgba(0,0,0,0.05);
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --crm-sidebar: var(--surface);
    --crm-accent: var(--accent);
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 70px;

    /* Colores para Badges */
    --prem-red-txt: #ff3b30;    /* Rojo iOS */
    --prem-green-txt: #34c759;  /* Verde iOS */
}

/* --- PALETA MODO OSCURO (iOS Dark / WhatsApp iPhone) --- */
body.dark {
    --bg: #000000;           /* Fondo NEGRO PURO OLED */
    --surface: #1c1c1e;      /* Gris Carbón profundo para tarjetas/cuadros */
    --text: #ffffff;         /* Texto blanco puro */
    --subtext: #98989d;      /* Texto secundario gris oscuro iOS */
    --border: #38383a;       /* Bordes oscuros sutiles */
    --accent: #0a84ff;       /* Azul vibrante iOS Dark */
    --shadow: 0 10px 25px rgba(0,0,0,0.5);

    --crm-sidebar: var(--bg); /* Sidebar negra pura */
    --crm-accent: var(--accent);
    --prem-red-txt: #ff453a;  /* Rojo iOS Dark */
    --prem-green-txt: #30d158; /* Verde iOS Dark */
}

/* ============================================================
   ESTILOS GLOBALES & TIPOGRAFÍA (San Francisco - Apple)
   ============================================================ */
html { height: 100%; overflow: hidden; font-size: 13px; }
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0; padding: 0; height: 100vh; overflow: hidden;
    font-family: var(--font-family) !important;
    background-color: var(--bg) !important;
    color: var(--text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.content, .sidebar, .topbar, .kpi-card, .modal-content, .card-premium {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
#app-crm { width: 100%; height: 100%; display: flex; overflow: hidden; }
    .sidebar { width: var(--sidebar-width); background-color: var(--crm-sidebar); display: flex; flex-direction: column; overflow-x: hidden; white-space: nowrap; z-index: 1050; flex-shrink: 0; }
    .offcanvas-backdrop { z-index: 1055 !important; }
    .offcanvas { z-index: 1060 !important; }
    .sidebar.collapsed { width: var(--sidebar-collapsed-width); } .sidebar .brand-container { padding: 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.1); height: 60px; flex-shrink: 0; }
    .sidebar .brand-text { font-size: 1.3rem; font-weight: 600; color: var(--crm-accent) !important; transition: opacity 0.3s; } .sidebar.collapsed .brand-text { opacity: 0; display: none;}
    .btn-toggle-sidebar { background: none; border: none; color: #ffffff !important; font-size: 1.4rem; cursor: pointer; padding: 0 5px; }
    .sidebar a, .sidebar .collapse a { display: flex !important; align-items: center !important; color: #ffffff !important; text-decoration: none; cursor: pointer; transition: background 0.2s; white-space: nowrap; overflow: hidden; padding: 0 18px; height: 48px; border-left: 4px solid transparent; }
    .sidebar a i, .sidebar .collapse a i { font-size: 1.3rem; margin-right: 12px !important; min-width: 24px; text-align: center; color: #ffffff !important; } .sidebar a span.link-text { flex-grow: 1; font-size: 0.95rem; }
    .chevron-icon { margin-left: auto !important; transition: transform 0.3s; } .sidebar a[aria-expanded="true"] .chevron-icon { transform: rotate(180deg); }
    .sidebar.collapsed a { justify-content: center !important; padding: 0; } .sidebar.collapsed a i { margin-right: 0 !important; } .sidebar.collapsed a span.link-text, .sidebar.collapsed a .chevron-icon { display: none !important; }
    .sidebar a:hover, .sidebar a.active { background: rgba(255,255,255,0.05); border-left: 4px solid var(--crm-accent); color: var(--crm-accent) !important; } .sidebar a:hover i, .sidebar a.active i { color: var(--crm-accent) !important; }
    .sidebar .collapse a { padding-left: 3rem; height: 40px; background: rgba(0,0,0,0.2); border-left: none !important; font-size: 0.85rem;} .sidebar.collapsed .collapse a { padding-left: 0; justify-content: center; }
    .content { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; background-color: var(--bg) !important; }
    .topbar { background-color: var(--surface) !important; padding: 10px 25px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border) !important; z-index: 90; height: 60px; flex-shrink: 0;}
    .main-area { flex: 1 1 0; min-height: 0; padding: 8px 14px; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; position: relative; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
    .main-area::-webkit-scrollbar { width: 5px; }
    .main-area::-webkit-scrollbar-track { background: transparent; }
    .main-area::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 10px; }
    .modulo-wrapper { display: flex; flex-direction: column; min-height: 0; width: 100%; flex-grow: 1; } .controls-row { flex-shrink: 0; margin-bottom: 10px; } .chart-container-status { position: relative; height: 230px; width: 100%; }
    body.dark .controls-row .btn-outline-secondary, body.dark .controls-row .dropdown-toggle { color: #f8fafc !important; border-color: #64748b !important; } body.dark .controls-row .btn-outline-secondary:hover, body.dark .controls-row .dropdown-toggle:hover { background-color: #334155 !important; }
    body.dark .controls-row .btn-outline-info { color: #38bdf8 !important; border-color: #38bdf8 !important; } body.dark .controls-row .btn-outline-info:hover { background-color: #0284c7 !important; color: #ffffff !important; }
    .role-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; } .role-admin { background: #facc15; color: #1e293b; } .role-inspector { background: #3b82f6; color: #ffffff; } .role-mant { background: #10b981; color: #ffffff; }
    .kpi-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; } .kpi-card { background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--crm-accent); border-radius: 10px; padding: 10px 15px; box-shadow: 0 4px 10px var(--shadow); display: flex; flex-direction: column; justify-content: center;} .kpi-title { font-size: 0.75rem; color: var(--subtext); text-transform: uppercase; font-weight: bold; } .kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1.2; }
    .card { background-color: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 12px; box-shadow: 0 4px 20px var(--shadow) !important; display: flex; flex-direction: column; flex-grow: 1; min-height: 0; overflow: hidden !important; }
    .table-container { flex: 1 1 0; min-height: 0; overflow: auto !important; padding: 0; margin: 0; position: relative; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .table-container::-webkit-scrollbar { width: 8px; height: 8px; } .table-container::-webkit-scrollbar-track { background: transparent; } .table-container::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 10px; }
    .table-custom { color: var(--text) !important; margin-bottom: 0; width: 100%; min-width: max-content; border-collapse: separate; border-spacing: 0; } .table-custom th { color: var(--subtext) !important; font-weight: 600; padding: 10px 15px; font-size: 0.85rem; border: none; background: var(--surface) !important; white-space: nowrap; position: sticky; top: 0; z-index: 20; cursor: pointer; user-select: none; border-bottom: 2px solid var(--border);} .table-custom td { color: var(--text) !important; padding: 6px 15px; font-size: 0.8rem; vertical-align: middle; border-top: 1px solid var(--border) !important; background: var(--surface) !important; white-space: nowrap; }
    .group-header td { background-color: rgba(128,128,128,0.08) !important; font-size: 0.85rem; color: var(--text) !important; padding: 8px 15px; border-top: 2px solid var(--border) !important; cursor: pointer; } .group-count { background: var(--crm-accent); color: var(--crm-sidebar); padding: 2px 8px; border-radius: 12px; font-size: 0.7rem; margin-left: 8px; font-weight: bold; }
    .clickable-row { cursor: pointer; transition: background-color 0.15s;} .clickable-row:hover td { background-color: rgba(128, 128, 128, 0.05) !important; }
    .table-custom th:last-child, .table-custom td:last-child { position: sticky; right: 0; text-align: center; width: 50px; background-color: var(--surface) !important; } .table-custom th:last-child { z-index: 25 !important; } .table-custom td:last-child { z-index: 10; } .table-custom td:last-child:has(.show) { z-index: 9999 !important; }

    /* 🔥 ESTILOS WIZARD Y DETALLES FASE 3 🔥 */
    .wizard-header { background-color: var(--bg); display: flex; gap: 10px; padding: 10px 15px; overflow-x: auto; border-bottom: 1px solid var(--border); scroll-behavior: smooth; }
    .wizard-step { padding: 8px 18px; border-radius: 20px; font-size: 0.9rem; font-weight: bold; color: var(--subtext); background: var(--surface); cursor: pointer; white-space: nowrap; border: 1px solid var(--border); transition: 0.3s; user-select: none; }
    .wizard-step.active { background: var(--crm-accent); color: var(--crm-sidebar); border-color: var(--crm-accent); }
    .wizard-tab { display: none; padding: 20px; animation: fadeIn 0.4s; } .wizard-tab.active { display: block; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .pregunta-box { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 15px; margin-bottom: 15px; transition: 0.3s; } .pregunta-box:hover { border-color: var(--crm-accent); }
    .percent-grid { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .percent-grid label { min-width: 45px; text-align: center; font-weight: bold; }
    .firma-pad { border: 2px dashed #94a3b8; border-radius: 8px; background: #ffffff; width: 100%; height: 200px; touch-action: none; cursor: crosshair; } body.dark .firma-pad { background: #e2e8f0; border-color: #475569; }
    
    .btn-icon-dropdown { background: transparent; border: none; color: var(--subtext); font-size: 1.1rem; padding: 2px 8px; border-radius: 50%; transition: 0.2s; } .btn-icon-dropdown:hover, .show > .btn-icon-dropdown { background-color: var(--border); color: var(--text); }
    .dropdown-menu { background-color: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: 0 15px 50px rgba(0,0,0,0.3) !important; z-index: 9999 !important; border-radius: 10px; padding: 6px 0; margin: 0 !important;} .dropdown-item { color: var(--text) !important; padding: 6px 15px; font-size: 0.85rem; font-weight: 500; transition: background-color 0.2s; } .dropdown-item:hover { background-color: var(--bg) !important; }
    .dropdown-menu-filter { max-height: 220px; overflow-y: auto; padding: 5px; min-width: 160px; } .dropdown-menu-filter .form-check-label { font-size: 0.85rem; color: var(--text) !important; width: 100%; cursor: pointer; display: flex; align-items: center; }
    .detalle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .detalle-item { background: var(--bg); padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); } .detalle-item span { display: block; font-size: 0.7rem; color: var(--subtext) !important; text-transform: uppercase; } .detalle-item strong { display: block; font-size: 0.95rem; color: var(--text) !important; }

    h1, h2, h3, h4, h5, h6, p, label, span { color: var(--text) !important; }
    .modal-content, .offcanvas { background-color: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: 0 8px 32px var(--shadow) !important; } .modal-header, .modal-footer { border-color: var(--border) !important; }
    input.form-control, select.form-select, textarea.form-control, .input-group-text { background-color: var(--bg) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } input.form-control::placeholder, textarea.form-control::placeholder { color: var(--subtext) !important; }
    .switch { position: relative; width: 56px; height: 30px; cursor: pointer; display: inline-block; margin: 0; } .switch input { display: none; } .slider { position: absolute; inset: 0; background: var(--toggle-bg, #cbd5e1); border-radius: 34px; transition: background 0.4s ease; } .slider::before { content: ''; position: absolute; width: 22px; height: 22px; left: 4px; top: 4px; background: var(--thumb, #ffffff); border-radius: 50%; transition: transform 0.3s; } .switch input:checked + .slider { background: var(--crm-accent); } .switch input:checked + .slider::before { transform: translateX(26px); }

    /* MOBILE */
    .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 998; } .sidebar-backdrop.active { display: block; } .btn-hamburger-mobile { display: none; background: none; border: none; color: var(--text); font-size: 1.6rem; cursor: pointer; padding: 0 5px; align-items: center; flex-shrink: 0; }
    @media (max-width: 768px) {
        .sidebar { display: none !important; } .sidebar-backdrop { display: none !important; }
        .content { width: 100% !important; min-width: 0 !important; } .topbar { padding: 8px 12px !important; height: auto !important; min-height: 50px; gap: 8px; } #tituloTopBar { font-size: 1.1rem !important; max-width: 140px; } #nombre-usuario-top, #badge-rol-top { display: none !important; } .btn-hamburger-mobile { display: none !important; }
        .main-area { padding: 0 !important; } .kpi-wrapper { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; margin-bottom: 8px !important; padding: 0 8px; } .chart-container-status { height: 160px; } .table-container { min-height: 0; -webkit-overflow-scrolling: touch; } .modal-dialog.modal-lg, .modal-dialog.modal-xl { margin: 8px !important; max-width: calc(100% - 16px) !important; }
    }

    /* ========================================================
       1. CORRECCIÓN DEL MENÚ LATERAL (BLANCO ABSOLUTO SIEMPRE)
       ======================================================== */
    /* Obligamos a que la barra lateral ignore el modo claro/oscuro y sea blanca */
    #sidebarMenu a,
    #sidebarMenu a span.link-text,
    #sidebarMenu a i.bi,
    #sidebarMenu .chevron-icon,
    #sidebarMenu .brand-text {
        color: #ffffff !important;
    }

    /* Efecto hover amarillo al pasar el mouse */
    #sidebarMenu a:hover,
    #sidebarMenu a.active,
    #sidebarMenu a:hover span.link-text,
    #sidebarMenu a.active span.link-text,
    #sidebarMenu a:hover i.bi,
    #sidebarMenu a.active i.bi {
        color: var(--crm-accent) !important;
    }

    /* ========================================================
       2. ELIMINAR GRISES ILEGIBLES EN TABLAS Y MEJORAR CONTRASTE
       ======================================================== */
    /* Los textos secundarios (como el nombre del cliente debajo de la placa o N/A) ya no serán gris claro */
    .text-muted,
    .text-secondary {
        color: var(--subtext) !important;
        font-weight: 500;
    }

    body.dark .text-muted,
    body.dark .text-secondary {
        color: #cbd5e1 !important; /* Un gris casi blanco para el modo oscuro */
    }

    /* Mejorar el fondo de las filas agrupadoras (Ej: "CARRETA" o los Clientes) */
    .group-header td {
        background-color: var(--toggle-bg) !important;
        color: var(--text) !important;
    }
    body.dark .group-header td {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    /* ========================================================
       3. ARREGLO DE GRÁFICOS Y BOTONES (MODO CLARO)
       ======================================================== */
    /* Leyendas de los gráficos visibles */
    .chart-container-status canvas {
        color: var(--text) !important;
    }
    .chart-container-status {
        height: 200px !important;
        padding-bottom: 25px;
    }

    /* Botones y badges azules en modo claro con texto blanco real */
    body:not(.dark) .badge.bg-primary { color: #ffffff !important; }
    body:not(.dark) .text-primary { color: #2563eb !important; }
    body:not(.dark) .btn-primary { color: #ffffff !important; }

    /* ========================================================
       4. MEJORA UX MÓVIL: BOTONES DE ACCIÓN FLOTANTES (FAB E IA)
       ======================================================== */

    /* --- 1. Botón IA Flotante (Base) --- */
    .btn-ia-float {
        position: fixed;
        bottom: 25px;
        right: 25px; /* Misma alineación que el + */
        width: 56px;  /* Tamaño gemelo */
        height: 56px; /* Tamaño gemelo */
        border-radius: 50%;
        background-color: var(--crm-accent);
        color: var(--crm-sidebar);
        border: none;
        font-size: 1.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1040; /* CORRECCIÓN: Se oculta bajo el panel de IA */
        transition: transform 0.2s, box-shadow 0.2s;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }
    .btn-ia-float:hover { transform: scale(1.1) translateY(-5px); }
    body.dark .btn-ia-float { box-shadow: 0 5px 20px rgba(250, 204, 21, 0.3) !important; }

    /* --- Configuración para Escritorio (Ocultar FAB +) --- */
    .fab-container, .fab-action-list-wrapper { display: none !important; }

    /* --- Configuración para Móvil --- */
    @media (max-width: 768px) {
        /* Ocultar de forma segura SOLO los botones de acción en la barra superior (dejando los filtros intactos) */
        .controls-row .d-flex.align-items-center.gap-2:last-child {
            display: none !important;
        }

        /* Contenedor del Botón + */
        .fab-container {
            display: flex !important;
            flex-direction: column;
            align-items: center;
            position: fixed;
            right: 25px; /* Misma alineación que IA */
            bottom: 95px; /* Posicionado exactamente arriba como su gemelo */
            z-index: 1040; /* CORRECCIÓN: Se oculta bajo el panel de IA */
        }

        /* Botón "+" Gemelo */
        .btn-fab-main {
            width: 60px;
            height: 60px;
            border-radius: 18px; /* cuadrado redondeado, estilo MD3 */
            background-color: #f97316; /* naranja consistente con Inventario */
            color: #fff;
            border: none;
            font-size: 1.6rem;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 24px rgba(249,115,22,.5);
            transition: transform 0.3s cubic-bezier(.4,0,.2,1), background-color 0.2s;
            cursor: pointer;
        }
        .btn-fab-main.open { transform: rotate(135deg); background-color: #1e293b; box-shadow: 0 8px 24px rgba(30,41,59,.4); }

        /* Lista Emergente del Botón + */
        .fab-action-list-wrapper {
            display: none !important; /* Forzado oculto hasta que se abra */
            position: absolute;
            bottom: 65px;
            right: 0;
            width: max-content;
            min-width: 180px;
            background-color: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            overflow: hidden;
            z-index: 1040;
            padding: 8px 0;
            animation: fabFadeInUp 0.3s ease forwards;
        }
        /* LA CLAVE DEL PROBLEMA ESTABA AQUÍ: obligamos a que se muestre */
        .fab-action-list-wrapper.show { display: block !important; }

        .fab-action-item {
            display: flex !important; align-items: center; gap: 10px; width: 100%;
            padding: 10px 20px; color: var(--text) !important; background: transparent !important;
            border: none !important; border-radius: 0 !important; box-shadow: none !important;
            font-weight: 500 !important; text-align: left; text-decoration: none; cursor: pointer;
        }
        .fab-action-item:hover { background-color: rgba(128,128,128, 0.08) !important; }
        .fab-action-item i { font-size: 1.1rem; width: 20px; text-align: center; }

        @keyframes fabFadeInUp {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    }

    /* ========================================================
       5. MEJORA DE CONTRASTE EN BOTONES DE TABLA
       ======================================================== */
    /* Obligamos a texto blanco en todos los badges/botones sólidos de estas tablas */
    #moduloStatus .badge.bg-primary,
    #moduloStatus .badge.bg-secondary,
    #moduloStatus .dropstart .btn-icon-dropdown,
    #moduloUbicacion .btn-primary,
    #moduloFleetrun .btn-primary {
        color: #ffffff !important; /* Texto blanco puro real */
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 6px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        border: none !important;
    }

    /* Ajustes específicos para Modo Oscuro en Badges */
    body.dark #moduloStatus .badge.bg-primary { background-color: #2563eb !important; } /* Un azul más vibrante */
    body.dark #moduloStatus .badge.bg-secondary { background-color: #475569 !important; } /* Un gris más vibrante */
    body.dark #moduloStatus .badge.p-1.px-2.text-white { /* Badge de días vigentes (Verde/Rojo) */
        border: 1px solid rgba(255,255,255,0.2);
    }

    /* Estilo para los menús desplegables (tres puntos) en la tabla Análisis */
    #moduloStatus .dropstart .btn-icon-dropdown {
        background-color: var(--border) !important;
        color: var(--text) !important;
        border-radius: 50%;
        width: 30px; height: 30px;
        display: flex; align-items: center; justify-content: center;
        padding: 0;
    }
    body.dark #moduloStatus .dropstart .btn-icon-dropdown {
        background-color: #334155 !important;
        color: #ffffff !important;
    }

    /* ========================================================
       6. BOTONES SÓLIDOS ESTILO "REGISTRAR" EN TODAS LAS TABLAS
       ======================================================== */
    /* Transformar todos los botones transparentes (outline) a sólidos */
    .controls-row .btn-outline-info,
    body.dark .controls-row .btn-outline-info,
    .controls-row .btn-outline-success,
    body.dark .controls-row .btn-outline-success,
    .controls-row .btn-outline-warning,
    body.dark .controls-row .btn-outline-warning,
    .controls-row .btn-outline-secondary,
    body.dark .controls-row .btn-outline-secondary,
    .controls-row .dropdown-toggle,
    body.dark .controls-row .dropdown-toggle,
    .controls-row .btn-outline-primary,
    body.dark .controls-row .btn-outline-primary,
    .controls-row .btn-reload-cache {
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
        font-weight: 700 !important;
        transition: all 0.2s ease;
    }

    /* Colocar los colores de fondo sólidos correspondientes */
    .controls-row .btn-outline-info, body.dark .controls-row .btn-outline-info { background-color: #0ea5e9 !important; } /* Historial (Azul Claro) */
    .controls-row .btn-outline-success, body.dark .controls-row .btn-outline-success { background-color: #16a34a !important; } /* Excel (Verde) */

    /* Excepción: El botón amarillo (Gráficos) debe llevar texto oscuro por contraste visual */
    .controls-row .btn-outline-warning, body.dark .controls-row .btn-outline-warning {
        background-color: #facc15 !important;
        color: #1e293b !important;
    }

    /* Filtros, Expandir y Actualizar BD (Gris) */
    .controls-row .btn-outline-secondary, body.dark .controls-row .btn-outline-secondary,
    .controls-row .dropdown-toggle, body.dark .controls-row .dropdown-toggle,
    .controls-row .btn-reload-cache {
        background-color: #64748b !important;
    }

    .controls-row .btn-outline-primary, body.dark .controls-row .btn-outline-primary { background-color: #2563eb !important; } /* GPS (Azul Fuerte) */

    /* Efecto 3D al pasar el mouse */
    .controls-row .btn-outline-info:hover,
    .controls-row .btn-outline-success:hover,
    .controls-row .btn-outline-warning:hover,
    .controls-row .btn-outline-secondary:hover,
    .controls-row .dropdown-toggle:hover,
    .controls-row .btn-reload-cache:hover,
    .controls-row .btn-outline-primary:hover {
        filter: brightness(0.9);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    }

    /* Acomodo perfecto para el botón de Actualizar BD */
    .btn-reload-cache {
        padding: 4px 12px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    /* ========================================================
       7. ESTILOS DEL DROPDOWN DE PERFIL DE USUARIO
       ======================================================== */
    .dropdown-menu-end {
        right: 0 !important;
    }

    .dropdown:hover > .dropdown-toggle {
        background-color: rgba(0, 0, 0, 0.05);
        border-radius: 10px;
    }

    body.dark .dropdown:hover > .dropdown-toggle {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .dropdown-menu {
        animation: slideDown 0.2s ease-out;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Estilo para el badge de rol en el perfil */
    #perfil-rol-badge {
        font-size: 0.85rem;
        padding: 4px 12px !important;
    }

/* ============================================================
   🍎 TEMA PREMIUM "APPLE / CUPERTINO STYLE" (AÑADIDO) 🍎
   ============================================================ */

/* 1. Variables de Suavizado Apple */
:root {
    --apple-radius: 18px;
    --apple-btn-radius: 10px;
    --apple-shadow: 0 10px 30px rgba(149, 157, 165, 0.15);
    --apple-shadow-hover: 0 20px 40px rgba(149, 157, 165, 0.2);
    --apple-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --crm-accent: #2563eb; /* Color azul premium — cambia a #facc15 para amarillo original */
}

body.dark {
    --apple-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    --apple-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* 2. Micro-interacciones (El "Click" esponjoso de Apple) */
button, .btn, .nav-link, .clickable-row, .dropdown-item, .fab-action-item {
    transition: var(--apple-transition) !important;
}
.btn:active, button:active, .dropdown-item:active, .fab-action-item:active {
    transform: scale(0.94) !important;
}

/* 3. Cards Flotantes con sombras de luz ambiental */
.card, .insp-detail-card, .modulo-wrapper .card {
    border-radius: var(--apple-radius) !important;
    border: 1px solid rgba(0,0,0,0.03) !important;
    box-shadow: var(--apple-shadow) !important;
    transition: var(--apple-transition) !important;
}
body.dark .card, body.dark .modulo-wrapper .card {
    border: 1px solid rgba(255,255,255,0.03) !important;
}
.card:hover, .modulo-wrapper .card:hover {
    box-shadow: var(--apple-shadow-hover) !important;
    transform: translateY(-2px);
}

/* 4. Glassmorphism en Topbar */
.topbar {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: none !important;
}
body.dark .topbar {
    background: rgba(30, 41, 59, 0.75) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 5. Modales Premium */
.modal-content {
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden;
}
body.dark .modal-content {
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.8) !important;
}

/* 6. Botones Redondeados */
.btn {
    border-radius: var(--apple-btn-radius) !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
}
.btn-sm { border-radius: 8px !important; }

/* ============================================================
   🛡️ FORZAR CABECERAS OSCURAS PREMIUM EN MODALES Y TARJETAS
   ============================================================ */
.modal-header, .card-header {
    background-color: var(--crm-sidebar) !important;
    border-bottom: none !important;
    padding: 15px 20px !important;
}

.modal-header .modal-title, .modal-header h5,
.card-header .modal-title, .card-header h5,
#tituloModalUser {
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
}

/* Forzar que la "X" de cerrar sea blanca para que se vea en el fondo oscuro */
.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.8;
}
.modal-header .btn-close:hover { opacity: 1; }

/* Asegurar que el fondo del body del modal sea claro/uniforme */
.modal-body {
    background-color: var(--surface) !important;
    padding: 20px !important;
}

/* Arreglo: Fila seleccionada legible (Evita el amarillo que ciega) */
.clickable-row:active td, .clickable-row:focus td, .is-selected td, .table-active td {
    background-color: var(--crm-accent) !important;
    color: #ffffff !important;
}
.is-selected .badge, .table-active .badge {
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* ============================================================
   🔍 SPOTLIGHT SEARCH (BUSCADOR GLOBAL ESTILO APPLE)
   ============================================================ */
.spotlight-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    z-index: 10500; display: flex; justify-content: center; align-items: flex-start;
    padding-top: 12vh; animation: fadeIn 0.2s ease-out;
}
.spotlight-container {
    background: var(--surface); width: 90%; max-width: 650px;
    border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.5);
}
.spotlight-header {
    display: flex; align-items: center; padding: 15px 25px;
    border-bottom: 1px solid var(--border);
}
.spotlight-icon { font-size: 1.5rem; color: var(--crm-accent); margin-right: 15px; }
#spotlight-input {
    flex-grow: 1; border: none; background: transparent; color: var(--text);
    font-size: 1.2rem; outline: none; font-weight: 500;
}
#spotlight-input::placeholder { color: var(--subtext); font-weight: 300; }
.spotlight-results { max-height: 55vh; overflow-y: auto; padding: 10px; background: var(--bg); }
.spotlight-card {
    padding: 12px 20px; border-radius: 12px; margin-bottom: 8px;
    cursor: pointer; transition: var(--apple-transition); border: 1px solid transparent;
    background: var(--surface); box-shadow: 0 2px 5px var(--shadow);
}
.spotlight-card:hover {
    background: rgba(37, 99, 235, 0.05); border-color: var(--crm-accent);
    transform: translateX(6px); box-shadow: 0 8px 15px var(--shadow);
}
body.dark .spotlight-card:hover { background: rgba(255,255,255,0.08); }

/* ============================================================
   ⚡ SKELETON LOADERS (EFECTO CARGA TIPO YOUTUBE)
   ============================================================ */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}
.skeleton-box {
    display: inline-block;
    height: 1.2em;
    position: relative;
    overflow: hidden;
    background-color: var(--border);
    border-radius: 6px;
}
.skeleton-box::after {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.4) 20%,
        rgba(255, 255, 255, 0.6) 60%,
        rgba(255, 255, 255, 0)
    );
    animation: shimmer 1.5s infinite;
    content: '';
}
body.dark .skeleton-box::after {
    background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0));
}
.skeleton-row td { padding: 15px !important; }

/* ============================================================
   🎨 FASE 4: MÁSCARA FIGMA (UI PREMIUM SAAS)
   ============================================================ */

/* 1. Cambio de Fuente Global y Fondos */
body {
    font-family: var(--font-family) !important;
    background-color: #f8fafc !important;
}

/* 2. Variables de Color (Tema Claro Figma) */
:root {
    --bg: #f8fafc;
    --surface: #ffffff;
    --text: #0f172a;
    --subtext: #64748b;
    --border: #e2e8f0;
    --crm-sidebar: #ffffff;
    --crm-accent: #2563eb;
    --apple-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

/* 3. Re-diseño de la Barra Lateral (Sidebar) */
.sidebar {
    background-color: var(--crm-sidebar) !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: none !important;
}
.sidebar .brand-text {
    color: var(--text) !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px;
}
#sidebarMenu a,
#sidebarMenu a span.link-text,
#sidebarMenu a i.bi,
#sidebarMenu .chevron-icon {
    color: var(--subtext) !important;
    font-weight: 500 !important;
}
#sidebarMenu a:hover {
    background-color: #f1f5f9 !important;
    color: var(--text) !important;
}
#sidebarMenu a.active {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    font-weight: 600 !important;
    border-left: none !important;
}
#sidebarMenu a.active i.bi, #sidebarMenu a.active span.link-text {
    color: #2563eb !important;
}

/* 4. Topbar Transparente */
.topbar {
    background-color: var(--bg) !important;
    border-bottom: none !important;
}
#tituloTopBar { font-weight: 700; color: var(--text); letter-spacing: -0.5px; }

/* 5. Buscadores Redondeados Grises */
#buscadorStatus, #buscadorPlacas, #buscadorFleetrun, #buscadorConductores {
    background-color: #f1f5f9 !important;
    border-color: transparent !important;
    color: var(--text) !important;
}
.input-group-text { background-color: #f1f5f9 !important; border-color: transparent !important; }

/* 6. Botones de Filtros (Outline Limpio) */
.controls-row .btn-outline-secondary,
.controls-row .btn-outline-info,
.controls-row .btn-outline-success,
.controls-row .btn-outline-warning,
.controls-row .btn-reload-cache,
.controls-row .dropdown-toggle {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}
.controls-row .btn-outline-warning i { color: #f59e0b !important; }
.controls-row .btn-outline-info i { color: #3b82f6 !important; }
.controls-row .btn-outline-success i { color: #10b981 !important; }
.controls-row .btn-primary {
    background-color: var(--crm-accent) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}

/* 7. Agrupadores de Tabla y Badges Celestitos */
.group-header td {
    background-color: var(--surface) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text) !important;
    font-weight: 700 !important;
}
.group-count {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    border-radius: 12px !important;
    padding: 4px 12px !important;
    font-size: 0.75rem;
}

/* 8. MODO OSCURO ADAPTADO A FIGMA */
body.dark {
    --bg: #0f172a;
    --surface: #1e293b;
    --text: #f8fafc;
    --border: #334155;
    --subtext: #94a3b8;
    --crm-sidebar: #1e293b;
}
body.dark #sidebarMenu a:hover { background-color: #334155 !important; color: #ffffff !important; }
body.dark #sidebarMenu a.active { background-color: rgba(37,99,235,0.2) !important; color: #60a5fa !important; }
body.dark #sidebarMenu a.active i.bi, body.dark #sidebarMenu a.active span.link-text { color: #60a5fa !important; }
body.dark .controls-row .btn { background-color: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; }
body.dark .controls-row .btn-primary { background-color: #3b82f6 !important; color: #ffffff !important; border-color: transparent !important; }
body.dark .group-count { background-color: rgba(37,99,235,0.2) !important; color: #60a5fa !important; }
body.dark #buscadorStatus, body.dark .input-group-text,
body.dark #buscadorPlacas, body.dark #buscadorFleetrun, body.dark #buscadorConductores {
    background-color: #0f172a !important; border-color: #334155 !important;
}

/* ============================================================
   🛠️ PARCHE DE CONTRASTE: CABECERAS, TABLAS Y PERFIL
   ============================================================ */

/* 1. Cabeceras de Formularios (Modales) — respetan el tema activo */
/* (reglas base en "5. MODALES LIMPIOS" más abajo) */
.modal-header .btn-close:hover { opacity: 1; }

/* 2. Cabecera del Perfil de Usuario (Dropdown) */
.dropdown-menu .p-4 {
    background-color: #0f172a !important;
}
#perfil-nombre {
    color: #ffffff !important;
}
#perfil-correo {
    color: #94a3b8 !important;
}

/* 3. Encabezados de las Tablas */
.table-custom th {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

/* 4. Adaptación para Modo Oscuro */
body.dark .table-custom th {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
    border-bottom-color: #334155 !important;
}

/* ============================================================
   🍏 DETALLES APPLE Y FIGMA (LOGO, GPS Y SWITCH)
   ============================================================ */

/* 1. Logo Azkell (Icono Azul) */
.brand-logo-icon {
    background-color: var(--crm-accent);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

/* 2. Botón GPS (Píldora Translúcida) */
#btn-wialon-status {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
    font-weight: 700 !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--apple-transition);
}
#btn-wialon-status:hover { background-color: #dbeafe !important; }
#btn-wialon-status i { font-size: 0.7rem; }
@keyframes pulseGps {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}
#btn-wialon-status.btn-primary i {
    animation: pulseGps 2s infinite;
    color: #2563eb !important;
}

/* 3. Buscador Falso en Topbar (Estilo Figma) */
.fake-search-bar {
    background-color: #f1f5f9;
    border-radius: 12px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--subtext);
    font-size: 0.9rem;
    cursor: text;
    width: 300px;
    transition: var(--apple-transition);
    border: 1px solid transparent;
}
.fake-search-bar:hover {
    background-color: var(--surface);
    border-color: var(--border);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
body.dark .fake-search-bar { background-color: #0f172a; border-color: #334155; }

/* 5. Ajustes de espaciado en el menú (Figma Layout) */
#sidebarMenu a { padding: 0 20px !important; margin: 4px 12px !important; }
.sidebar .collapse a { padding-left: 3.5rem !important; }

/* ============================================================
   FIGMA & APPLE PIXEL-PERFECT
   ============================================================ */

/* Sidebar glassmorphism */
.sidebar {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* Nav links — iOS style (sin sombras, sin transform, bordes suaves) */
#sidebarMenu a {
    box-shadow: none !important;
    border-radius: 8px !important;
    color: #3C3C43 !important;
    transform: none !important;
}
#sidebarMenu a:hover {
    background-color: rgba(0, 122, 255, 0.05) !important;
    color: #007AFF !important;
    transform: none !important;
}
#sidebarMenu a.active,
#sidebarMenu a[aria-expanded="true"] {
    background-color: rgba(0, 122, 255, 0.08) !important;
    color: #007AFF !important;
}
#sidebarMenu a.active i,
#sidebarMenu a[aria-expanded="true"] i {
    color: #007AFF !important;
}

/* Chevron rotation al colapsar/expandir */
#sidebarMenu a[aria-expanded="false"] .chevron-icon {
    transform: rotate(-90deg) !important;
    transition: transform 0.25s ease !important;
}
#sidebarMenu a[aria-expanded="true"] .chevron-icon {
    transform: rotate(0deg) !important;
    transition: transform 0.25s ease !important;
}

/* Brand title text color */
.brand-title-text {
    color: var(--text) !important;
}

/* Fake search bar — responsive: círculo en mobile, barra completa en desktop */
@media (max-width: 767.98px) {
    .fake-search-bar {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important;
    }
    .fake-search-bar .search-text {
        display: none !important;
    }
}

/* Dark mode overrides */
body.dark .sidebar {
    background: rgba(30, 41, 59, 0.72) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}
body.dark #sidebarMenu a {
    color: #ebebf5 !important;
}
body.dark #sidebarMenu a:hover {
    color: #0A84FF !important;
    background-color: rgba(10, 132, 255, 0.10) !important;
}
body.dark #sidebarMenu a.active,
body.dark #sidebarMenu a[aria-expanded="true"] {
    background-color: rgba(10, 132, 255, 0.15) !important;
    color: #0A84FF !important;
}
body.dark #sidebarMenu a.active i,
body.dark #sidebarMenu a[aria-expanded="true"] i {
    color: #0A84FF !important;
}

/* ============================================================
   🚀 REDISEÑO TOTAL FIGMA (TAILWIND / SHADCN UI ENGINE)
   ============================================================ */

/* 1. SISTEMA DE VARIABLES PREMIUM (PALETA SLATE DE TAILWIND) */
:root {
    --bg: #f8fafc;
    --surface: #ffffff;
    --text: #0f172a;
    --subtext: #64748b;
    --border: #e2e8f0;
    --crm-accent: #2563eb;
    --crm-accent-light: rgba(37, 99, 235, 0.08);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* 2. MODO OSCURO "PLOMO Y NEGRO" */
body.dark {
    --bg: #020617;
    --surface: #0f172a;
    --surface-hover: #1e293b;
    --text: #f8fafc;
    --subtext: #94a3b8;
    --border: #1e293b;
    --crm-accent: #3b82f6;
    --crm-accent-light: rgba(59, 130, 246, 0.15);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

/* 3. APLICACIÓN GLOBAL */
body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    overflow-x: hidden !important; /* Evitar scroll horizontal */
    width: 100%;
    max-width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 4. TARJETAS Y CONTENEDORES */
.card, .modal-content, .kpi-card {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
    border-radius: var(--radius-lg) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

/* ── Combobox Searchable Global ── */
.cb-dropdown {
    display: none;
    position: absolute;
    z-index: 9999;
    width: 100%;
    max-height: 230px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border, #dee2e6);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    top: calc(100% + 2px);
    left: 0;
}
.cb-opt {
    padding: 7px 12px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text);
    line-height: 1.4;
}

/* 5. MODALES LIMPIOS */
.modal-header {
    background-color: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 1.25rem 1.5rem !important;
    border-top-left-radius: var(--radius-lg) !important;
    border-top-right-radius: var(--radius-lg) !important;
}
.modal-header .modal-title, .modal-header h5, #tituloModalUser, .modal-header i {
    color: var(--text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em;
}
.modal-body { background-color: var(--bg) !important; padding: 1.5rem !important; }
.modal-footer { background-color: var(--surface) !important; border-top: 1px solid var(--border) !important; }
body:not(.dark) .modal-header .btn-close { filter: none !important; opacity: 0.5; }
body.dark .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%) !important; opacity: 0.8; }

/* 6. SIDEBAR ACTUALIZADO */
.sidebar {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.dark .sidebar {
    background: rgba(2, 6, 23, 0.75) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}
#sidebarMenu a {
    color: var(--subtext) !important;
    font-weight: 500 !important;
    border-radius: var(--radius-md) !important;
    margin: 4px 16px !important;
    padding: 10px 16px !important;
}
#sidebarMenu a i.bi { color: var(--subtext) !important; font-size: 1.1rem; }
#sidebarMenu a:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: var(--text) !important;
}
body.dark #sidebarMenu a:hover { background: var(--surface-hover) !important; color: var(--text) !important; }
#sidebarMenu a.active {
    background: var(--crm-accent-light) !important;
    color: var(--crm-accent) !important;
    font-weight: 600 !important;
}
#sidebarMenu a.active i.bi, #sidebarMenu a.active span.link-text { color: var(--crm-accent) !important; }

/* 7. TOPBAR */
.topbar {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--border) !important;
}
body.dark .topbar { background: rgba(2, 6, 23, 0.75) !important; }

.form-control, .form-select, .input-group-text, .fake-search-bar {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm);
}
.form-control:focus, .form-select:focus {
    border-color: var(--crm-accent) !important;
    box-shadow: 0 0 0 3px var(--crm-accent-light) !important;
}
body.dark .form-control:focus, body.dark .form-select:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* 8. TABLAS PREMIUM */
.table-custom { border-collapse: collapse; }
.table-custom th {
    background-color: var(--surface) !important;
    color: var(--subtext) !important;
    font-weight: 600 !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border) !important;
}
.table-custom td {
    background-color: var(--bg) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-top: none !important;
}
body.dark .table-custom td { background-color: var(--bg) !important; }
.group-header td {
    background-color: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text) !important;
}
body.dark .group-header td { background-color: var(--surface-hover) !important; }

/* 9. BOTONES */
.btn { font-weight: 500 !important; border-radius: var(--radius-md) !important; }
.controls-row .btn-outline-secondary, .controls-row .btn-outline-info,
.controls-row .btn-outline-success, .controls-row .btn-outline-warning {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
}
body.dark .controls-row .btn-outline-secondary, body.dark .controls-row .btn-outline-info {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

/* ============================================================
   🔥 FIGMA PIXEL-PERFECT V3: SEPARADORES, SANGRÍA Y GPS MINI 🔥
   ============================================================ */

/* 1. SEPARADORES DE MÓDULOS */
#sidebarMenu > div[id^="wrap-"] {
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 6px !important;
    margin-bottom: 6px !important;
}
#sidebarMenu > div[id^="wrap-"]:last-of-type {
    border-bottom: none !important;
}

/* 2. MENÚ PRINCIPAL Y SUBMENÚS */
#sidebarMenu a, .sidebar .collapse a {
    height: auto !important;
    border: none !important;
    border-left: none !important;
    text-decoration: none !important;
    min-height: auto !important;
}

#sidebarMenu a {
    display: flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    margin: 2px 12px !important;
    border-radius: 6px !important;
    background-color: transparent !important;
    color: var(--subtext) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}
#sidebarMenu a i.bi {
    font-size: 1rem !important;
    margin-right: 10px !important;
    color: var(--subtext) !important;
}

.sidebar .collapse {
    margin-top: 0px !important;
    margin-bottom: 4px !important;
}
.sidebar .collapse a {
    margin: 1px 12px 1px 3.5rem !important;
    padding: 5px 10px !important;
    font-size: 0.8rem !important;
}
.sidebar .collapse a i.bi {
    font-size: 0.9rem !important;
    margin-right: 8px !important;
}

#sidebarMenu a:hover {
    background-color: rgba(15, 23, 42, 0.05) !important;
    color: var(--text) !important;
}
#sidebarMenu a:hover i.bi { color: var(--text) !important; }

#sidebarMenu a.active {
    background-color: var(--crm-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
    font-weight: 600 !important;
}
#sidebarMenu a.active i.bi, #sidebarMenu a.active span.link-text {
    color: #ffffff !important;
}

body.dark #sidebarMenu a { color: #94a3b8 !important; }
body.dark #sidebarMenu a i.bi { color: #94a3b8 !important; }
body.dark #sidebarMenu a:hover { background-color: var(--surface-hover) !important; color: var(--text) !important; }
body.dark #sidebarMenu a.active { background-color: #2563eb !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important; }

/* 3. BOTÓN GPS MINI */
#btn-wialon-status {
    background-color: transparent !important;
    color: var(--subtext) !important;
    border: 1px solid var(--border) !important;
    font-weight: 600 !important;
    padding: 2px 10px !important;
    height: 26px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem !important;
    transition: all 0.3s ease;
}
#btn-wialon-status i { font-size: 0.6rem !important; }

#btn-wialon-status.btn-outline-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: #f59e0b !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}
#btn-wialon-status.btn-outline-warning i { color: #f59e0b !important; }

#btn-wialon-status.btn-primary {
    background-color: rgba(37, 99, 235, 0.08) !important;
    color: #2563eb !important;
    border-color: rgba(37, 99, 235, 0.2) !important;
}

@keyframes pulseGpsDot {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}
#btn-wialon-status.btn-primary i {
    color: #2563eb !important;
    animation: pulseGpsDot 1.5s infinite;
}

body.dark #btn-wialon-status.btn-primary {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}
body.dark #btn-wialon-status.btn-primary i { color: #60a5fa !important; }

/* ============================================================
   🎯 ALTO CONTRASTE PARA MODALES — ver reglas en "5. MODALES LIMPIOS"
   ============================================================ */

/* ============================================================
   CORRECCIÓN: BARRA COLAPSADA Y TOOLTIPS (UX)
   ============================================================ */

/* 1. Salvar el botón de las 3 rayitas al colapsar */
.sidebar.collapsed .brand-container {
    justify-content: center !important;
    padding: 0 !important;
}
.sidebar.collapsed .brand-text {
    display: none !important;
}
.sidebar.collapsed .btn-toggle-sidebar {
    margin: 0 auto !important;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Centrar iconos de los submenús al estar colapsado */
.sidebar.collapsed .collapse a {
    padding: 10px !important;
    margin: 4px 12px !important;
    justify-content: center !important;
}
.sidebar.collapsed a i.bi {
    margin-right: 0 !important;
}

/* 2. Diseño Premium para los Tooltips (Burbujas flotantes) */
.tooltip-inner {
    background-color: #1e293b !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}
.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #1e293b !important;
}

/* ============================================================
   PROTECCIÓN DE RENDERIZADO PDF (FORZAR MODO CLARO AL IMPRIMIR)
   ============================================================ */
#contenedor-pdf-inspeccion *,
#contenedor-pdf-status-flota *,
#contenedor-pdf * {
    color: #1e293b !important;
    background-color: transparent !important;
}

/* Mantener el fondo azul oscuro de las cabeceras */
#pdf-inspeccion .insp-section-title {
    color: #ffffff !important;
    background-color: #1e293b !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Mantener fondos grises de las celdas de tabla */
#pdf-inspeccion .insp-grid-label,
#pdf-inspeccion .insp-grid-info {
    background-color: #f8fafc !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Forzar que los textos "OK" o "FALLA" mantengan sus colores */
.text-success-pdf { color: #16a34a !important; }
.text-danger-pdf { color: #dc2626 !important; }
.text-info-pdf { color: #0ea5e9 !important; }

/* ============================================================
   FIX SCROLL: FORMULARIO DE INSPECCIÓN (WIZARD)
   ============================================================ */
.wizard-tab {
    overflow-y: auto !important;
    max-height: 55vh !important;
    padding-right: 15px !important;
}

.wizard-tab::-webkit-scrollbar { width: 6px; }
.wizard-tab::-webkit-scrollbar-thumb {
    background: var(--subtext);
    border-radius: 10px;
}

/* ============================================================
   MEJORAS DE CONTRASTE: WIZARD DE INSPECCIONES (MODO OSCURO)
   ============================================================ */

/* Cajas de las preguntas en el Wizard */
body.dark .pregunta-box {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}
body.dark .pregunta-box:hover {
    border-color: #3b82f6 !important;
}

/* Títulos de las preguntas */
body.dark .pregunta-box > label.text-secondary {
    color: #e2e8f0 !important;
    font-size: 0.95rem;
}

/* Caja de FALLA y su observación */
body.dark [id^="f_p_"].bg-light {
    background-color: #0f172a !important;
    border-left-color: #ef4444 !important; /* Borde rojo vivo (Fix) */
}
body.dark [id^="f_p_"] .text-danger {
    color: #f87171 !important;
}

/* Inputs de texto dentro de las preguntas */
body.dark .pregunta-box textarea,
body.dark .pregunta-box input[type="file"] {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Títulos de las pestañas (Tabs) */
body.dark .wizard-tab h5.text-primary {
    color: #60a5fa !important;
    border-bottom-color: #334155 !important;
}

/* ============================================================
   REDISEÑO DE PANTALLA DE LOGIN (GLASSMORPHISM)
   ============================================================ */
#pantalla-login {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    font-family: system-ui, -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
}

/* Tarjeta glassmorphism */
.login-glass-card {
    width: 320px;
    padding: 40px 32px 32px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Avatar / Logo */
.avatar-logo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    box-shadow: 0 0 35px rgba(30, 100, 220, 0.45);
}

.login-glass-card form {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Campo con línea inferior */
.field-glass {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding: 10px 4px;
    margin-bottom: 22px;
}

.field-icon {
    font-size: 15px;
    opacity: 0.7;
    flex-shrink: 0;
    color: #fff;
}

.field-glass input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-family: inherit;
}

.field-glass input::placeholder {
    color: rgba(200, 215, 255, 0.65);
}

/* Botón del ojito (Password) */
.btn-toggle-pwd {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(200, 215, 255, 0.65);
    font-size: 15px;
    padding: 0;
    transition: color 0.2s;
}
.btn-toggle-pwd:hover { color: #fff; }

/* Fila recordar / olvidé */
.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 26px;
    font-size: 12px;
    color: rgba(200, 215, 255, 0.75);
}

.remember { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.remember input { width: 13px; height: 13px; accent-color: #4d8eff; }

.forgot { color: rgba(180, 205, 255, 0.7); font-style: italic; text-decoration: none; }
.forgot:hover { color: #fff; }

/* Botón Ingresar */
.btn-login-glass {
    width: 100%;
    padding: 13px 0;
    border: none;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #0d3a9e, #1a5fd4);
    box-shadow:
        0 8px 24px rgba(10, 30, 120, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.08s ease, filter 0.08s ease;
}

.btn-login-glass:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-login-glass:active { transform: translateY(0); }

/* ============================================================
   BOTÓN DE TEMA (Sol/Luna) - Estilo iOS
   ============================================================ */
#btn-theme-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
    padding: 0;
    font-size: 1.4rem;
}
#btn-theme-toggle:hover {
    background-color: var(--border);
    transform: scale(1.05);
}

/* Color Amarillo Vibrante iOS para el Sol en Modo Oscuro */
.text-warning {
    color: #ffd60a !important;
}

/* ============================================================
   REDISEÑO GRID DE PLACAS (Tarjetas Modernas)
   ============================================================ */

/* Clases de Cuadrícula Dinámica */
.placas-grid-view { display: grid; gap: 15px; align-content: start; }
.grid-cols-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* Tarjetas (Cards) Compactas */
.card-premium {
    background-color: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.2s ease;
    box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
    position: relative;
}
.card-premium:hover { border-color: var(--crm-accent); transform: translateY(-2px); }
.card-premium.swiped { transform: none !important; }
.card-inner { transition: transform 0.2s ease; }
.card-premium.swiped .card-inner { transform: translateX(-80px); }
.card-swipe-actions {
    position: absolute; right: 0; top: 0; bottom: 0; width: 80px;
    display: flex; align-items: center; justify-content: space-around; padding: 0 4px;
    background: linear-gradient(to right, transparent, var(--surface) 28%);
    transform: translateX(80px); transition: transform 0.2s ease;
    pointer-events: none;
}
.card-premium.swiped .card-swipe-actions { transform: translateX(0); pointer-events: auto; }
.swipe-action-btn {
    width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.swipe-action-btn.edit  { background: var(--crm-accent); color: #fff; }
.swipe-action-btn.del   { background: #dc3545; color: #fff; }

/* Encabezado: Placa y Opciones */
.card-header-theme { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.card-title-prem { font-size: 1.25rem; font-weight: 800; color: var(--text); letter-spacing: 0.5px; }

/* Grid interno de datos */
.card-data-row {
    display: grid; grid-template-columns: 60px 1fr; gap: 8px;
    font-size: 0.85rem; margin-bottom: 6px; align-items: center;
}
.card-data-row span:first-child { color: var(--subtext); font-weight: 700; text-transform: uppercase; font-size: 0.7rem; }
.card-data-row span:last-child { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }

/* Botón 3 puntos */
.btn-dots { background: transparent; border: none; color: var(--subtext); padding: 4px 8px; border-radius: 6px; font-size: 1.2rem; }
.btn-dots:hover { background-color: var(--border); color: var(--text); }

/* Badges de Estado */
.badge-premium { padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; border: none !important; white-space: nowrap; }
.badge-green { background-color: rgba(22, 163, 74, 0.15) !important; color: var(--prem-green-txt) !important; }
.badge-red { background-color: rgba(220, 38, 38, 0.15) !important; color: var(--prem-red-txt) !important; }

/* Agrupador de Cliente alineado a la izquierda */
.group-header-left {
    grid-column: 1 / -1;
    font-size: 1.1rem; font-weight: 700; color: var(--text);
    padding: 15px 0 5px 5px; border-bottom: 2px solid var(--border);
    margin-bottom: 5px; display: flex; align-items: center;
}

/* Paginación fija al fondo */
.pagination-row { border-top: 1px solid var(--border); background-color: var(--bg); }
.btn-pag-nav { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 4px 14px; font-size: 0.85rem; font-weight: bold; cursor: pointer; transition: all 0.2s; }
.btn-pag-nav:hover:not(:disabled) { background-color: var(--border); }
.btn-pag-nav:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============================================================
   PANEL LATERAL OFFCANVAS (Detalles)
   ============================================================ */
.offcanvas { background-color: var(--surface) !important; color: var(--text) !important; }
.offcanvas-header { border-bottom-color: var(--border) !important; }
.offcanvas-body { background-color: var(--bg) !important; }
.offcanvas-footer { border-top-color: var(--border) !important; }

.detalle-lateral-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 10px;
}
.det-lat-item {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-bottom: 4px;
}
.det-lat-item span {
    font-size: 0.75rem;
    color: var(--subtext);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.det-lat-item strong {
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 500;
    word-break: break-word;
}

/* MODO SELECCIÓN: SOMBREADO TIPO GMAIL */
.card-selected {
    background-color: rgba(22, 163, 74, 0.08) !important;
    border-color: var(--crm-accent) !important;
    box-shadow: 0 0 0 1px var(--crm-accent) !important;
    transform: scale(0.99);
}
.chk-bulk-placas {
    transform: scale(1.2);
    margin-right: 5px;
}

/* Botón flotante IA — sube para no tapar la barra de paginación */
.btn-ia-float {
    bottom: 80px !important;
}

/* ============================================================
   MÓDULO: DASHBOARD Y MAPA (LEAFLET)
   ============================================================ */

.text-dark-theme { color: var(--text) !important; }

@keyframes pulseMap {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}
.pulse-icon { animation: pulseMap 1.5s infinite; display: inline-block; }

/* Cartel Flotante Dinámico (Claro/Oscuro) */
.dash-gps-overlay {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border);
}

/* 🪄 FILTRO MÁGICO: Mapa Oscuro Automático */
/* Solo invertimos el mosaico del mapa y la marca de agua */
body.dark #mapaDashboard .leaflet-layer,
body.dark #mapaDashboard .leaflet-control-attribution {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/* Evitamos que los pines y popups se inviertan */
body.dark #mapaDashboard .leaflet-marker-pane,
body.dark #mapaDashboard .leaflet-popup {
    filter: none !important;
}

/* 🔧 ARREGLO BOTONES ZOOM (+ y -) EN MODO OSCURO */
body.dark .leaflet-control-zoom a {
    background-color: var(--surface) !important;
    color: #ffffff !important;
    border-color: var(--border) !important;
}
body.dark .leaflet-control-zoom a:hover {
    background-color: var(--border) !important;
    color: var(--crm-accent) !important;
}

/* Popup premium adaptado al tema */
.leaflet-popup-content-wrapper {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
    border: 1px solid var(--border);
}
.leaflet-popup-tip {
    background-color: var(--surface) !important;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}
.leaflet-popup-content {
    margin: 12px 16px !important;
    font-family: 'Inter', sans-serif;
}
.leaflet-container a.leaflet-popup-close-button {
    color: var(--subtext) !important;
    top: 8px !important;
    right: 8px !important;
}

/* Selección Masiva en Tablas (Inspecciones) */
.row-selected td {
    background-color: rgba(22, 163, 74, 0.08) !important;
    border-bottom: 1px solid var(--crm-accent) !important;
    border-top: 1px solid var(--crm-accent) !important;
}

/* Filtros KPI Interactivos en Fleetrun */
.kpi-clickable {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.kpi-clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}
.kpi-card.active-filter {
    border: 2px solid var(--crm-accent);
    background-color: rgba(0, 122, 255, 0.05);
}
body.dark .kpi-card.active-filter {
    background-color: rgba(0, 122, 255, 0.15);
}

/* Tabla Fleetrun compacta */
#cuerpoTablaFleetrun td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    vertical-align: middle;
    font-size: 0.85rem;
}
#cuerpoTablaFleetrun tr.group-header td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Dashboard Charts */
.chart-card-dashboard {
    background: var(--card, var(--surface));
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    height: 100%;
}
.chart-container-dashboard {
    position: relative;
    height: 180px;
}

/* Compactación de la Tabla de Status de Flota */
#cuerpoTablaStatusFlota td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    vertical-align: middle;
    font-size: 0.85rem;
}
#cuerpoTablaStatusFlota tr.group-header td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
#cuerpoTablaStatusFlota .badge {
    font-size: 0.75rem;
    padding: 0.35em 0.5em;
}

/* ============================================================
   ⚙️ MÓDULO CONFIGURACIÓN — ACCESIBILIDAD
   ============================================================ */

/* Reducir animaciones: elimina transiciones cuando el usuario lo activa */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* Sidebar compacto: oculta textos y colapsa a solo iconos */
body.sidebar-compact .sidebar {
    width: 68px !important;
}
body.sidebar-compact .sidebar .link-text,
body.sidebar-compact .sidebar .chevron-icon,
body.sidebar-compact .sidebar .brand-text {
    display: none !important;
}
body.sidebar-compact #sidebarMenu a {
    justify-content: center !important;
    padding: 8px !important;
    margin: 2px 8px !important;
}
body.sidebar-compact #sidebarMenu a i.bi {
    margin-right: 0 !important;
    font-size: 1.2rem !important;
}
body.sidebar-compact .brand-container {
    justify-content: center !important;
    padding: 0 !important;
}
body.sidebar-compact .sidebar .collapse a {
    padding: 8px !important;
    margin: 2px 8px !important;
    justify-content: center !important;
}

/* Toast configuración guardada */
#cfg-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #0f172a;
    color: #ffffff;
    padding: 10px 22px;
    border-radius: 30px;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
#cfg-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
#cfg-toast span { color: #ffffff !important; }
body.dark #cfg-toast {
    background: #1e293b;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

/* Botones selector de tipo de fuente */
.cfg-font-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    min-width: 70px;
}
.cfg-font-btn:hover {
    border-color: var(--crm-accent);
    transform: translateY(-1px);
}
.cfg-font-btn.active {
    border-color: var(--crm-accent);
    background: var(--crm-accent-light);
}
.cfg-font-preview {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
}
.cfg-font-name {
    font-size: 0.7rem;
    color: var(--subtext);
    font-family: 'Inter', system-ui, sans-serif !important; /* siempre legible */
}

/* ============================================================
   📍 GPS FLOTA — Cards de unidades
   ============================================================ */
.gps-unit-card {
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    margin-bottom: 5px;
}
.gps-unit-card:hover  { border-color: var(--crm-accent); }
.gps-unit-card.active { border-color: var(--crm-accent); background: rgba(59,130,246,0.07); }
body.dark .gps-unit-card.active { background: rgba(59,130,246,0.12); }
.btn-gps-copy {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--subtext);
    font-size: 0.78rem;
    line-height: 1.4;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.btn-gps-copy:hover { color: var(--crm-accent); border-color: var(--crm-accent); }

/* ── Tarjetas de Idioma (Módulo Configuración) ────────────────── */
.lang-card {
    border-radius: 12px;
    border: 2px solid var(--border);
    background-color: var(--surface);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.lang-card:hover {
    border-color: var(--crm-accent);
    background-color: rgba(59, 130, 246, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.lang-card-active {
    border-color: var(--crm-accent) !important;
    background-color: rgba(59, 130, 246, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.lang-flag-circle {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.lang-check-icon {
    font-size: 1.2rem;
    color: var(--border);
    transition: color 0.2s;
}
.lang-card-active .lang-check-icon {
    color: var(--crm-accent);
}
.lang-card:not(.lang-card-active) .lang-check-icon {
    opacity: 0.25;
}

/* ================================================================
   SIDEBAR MODERNO v3 — OVERRIDE FINAL
   Reemplaza todos los estilos anteriores del sidebar
   ================================================================ */

/* 1. Base sidebar */
.sidebar {
    width: var(--sidebar-width) !important;
    background: var(--surface) !important;
    backdrop-filter: none !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    transition: width 0.25s cubic-bezier(0.4,0,0.2,1) !important;
    overflow: hidden !important;
}
body.dark .sidebar {
    background: var(--surface) !important;
    border-right-color: var(--border) !important;
}

/* 2. Brand */
.brand-container {
    height: 60px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
    background: transparent !important;
}
.brand-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: hidden !important;
    min-width: 0 !important;
}
.brand-logo-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    background: var(--crm-accent) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    box-shadow: 0 2px 8px rgba(37,99,235,0.35) !important;
    cursor: default;
}
.brand-title-text {
    color: var(--text) !important;
    font-size: 0.87rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: opacity 0.2s, width 0.25s !important;
}
.btn-toggle-sidebar {
    background: none !important;
    border: none !important;
    color: var(--subtext) !important;
    font-size: 1.05rem !important;
    cursor: pointer !important;
    padding: 6px 8px !important;
    border-radius: 7px !important;
    transition: background 0.15s, color 0.15s !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}
.btn-toggle-sidebar:hover {
    background: rgba(0,0,0,0.06) !important;
    color: var(--text) !important;
}
body.dark .btn-toggle-sidebar:hover {
    background: rgba(255,255,255,0.08) !important;
}

/* 3. Nav scroll container */
.sidebar-nav {
    flex: 1 1 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px 0 12px !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--border) transparent !important;
}
.sidebar-nav::-webkit-scrollbar { width: 3px !important; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border) !important; border-radius: 2px !important; }

/* 4. Section labels */
.nav-section-label {
    padding: 9px 18px 2px !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    color: var(--subtext) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    user-select: none !important;
    pointer-events: none !important;
}
.nav-section-label span { color: inherit !important; font-size: inherit !important; }

/* 5. Nav items — base */
#sidebarMenu .nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 10px !important;
    margin: 1px 8px !important;
    border-radius: 8px !important;
    color: var(--subtext) !important;
    font-size: 0.845rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 37px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    transition: background 0.15s, color 0.15s !important;
    background: none !important;
}
#sidebarMenu .nav-item .nav-icon {
    font-size: 1rem !important;
    flex-shrink: 0 !important;
    min-width: 18px !important;
    text-align: center !important;
    margin-right: 0 !important;
    color: inherit !important;
}
#sidebarMenu .nav-item .link-text {
    flex: 1 1 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: inherit !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}
#sidebarMenu .nav-item:hover {
    background: rgba(0,0,0,0.05) !important;
    color: var(--text) !important;
}
body.dark #sidebarMenu .nav-item:hover {
    background: rgba(255,255,255,0.06) !important;
    color: var(--text) !important;
}
#sidebarMenu .nav-item.active {
    background: var(--crm-accent) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(37,99,235,0.22) !important;
}
#sidebarMenu .nav-item.active .nav-icon,
#sidebarMenu .nav-item.active .link-text {
    color: #ffffff !important;
}
body.dark #sidebarMenu .nav-item.active {
    background: var(--crm-accent, #3b82f6) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(59,130,246,0.3) !important;
}

/* 6. Collapsed — desktop */
.sidebar.collapsed {
    width: var(--sidebar-collapsed-width, 68px) !important;
}
.sidebar.collapsed .brand-title-text {
    opacity: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}
.sidebar.collapsed .btn-toggle-sidebar {
    display: none !important;
}
.sidebar.collapsed .brand-container {
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
}
.sidebar.collapsed .brand-left {
    justify-content: center !important;
    cursor: pointer !important;
}
.sidebar.collapsed .brand-logo-icon {
    cursor: pointer !important;
}
.sidebar.collapsed .nav-section-label {
    display: none !important;
}
.sidebar.collapsed #sidebarMenu .nav-item,
.sidebar.collapsed .nav-item {
    justify-content: center !important;
    padding: 10px 8px !important;
    margin: 2px 8px !important;
    gap: 0 !important;
}
.sidebar.collapsed #sidebarMenu .nav-item .link-text,
.sidebar.collapsed .nav-item .link-text {
    display: none !important;
}
.sidebar.collapsed #sidebarMenu .nav-item .nav-icon,
.sidebar.collapsed .nav-item .nav-icon {
    font-size: 1.15rem !important;
    min-width: auto !important;
}
.sidebar.collapsed #contenedor-instalar .link-text { display: none !important; }
.sidebar.collapsed #contenedor-instalar a {
    justify-content: center !important;
    padding: 10px 8px !important;
}

/* 7. body.sidebar-compact = collapsed alias */
body.sidebar-compact .sidebar {
    width: var(--sidebar-collapsed-width, 68px) !important;
}
body.sidebar-compact .sidebar .brand-title-text {
    opacity: 0 !important; width: 0 !important; overflow: hidden !important;
}
body.sidebar-compact .sidebar .btn-toggle-sidebar { display: none !important; }
body.sidebar-compact .sidebar .brand-container { justify-content: center !important; padding: 0 !important; cursor: pointer !important; }
body.sidebar-compact .nav-section-label { display: none !important; }
body.sidebar-compact #sidebarMenu .nav-item { justify-content: center !important; padding: 10px 8px !important; margin: 2px 8px !important; gap: 0 !important; }
body.sidebar-compact #sidebarMenu .nav-item .link-text { display: none !important; }
body.sidebar-compact #sidebarMenu .nav-item .nav-icon { font-size: 1.15rem !important; min-width: auto !important; }

/* 8. Mobile overrides */
@media (max-width: 768px) {
    .sidebar.collapsed,
    body.sidebar-compact .sidebar {
        width: 260px !important;
    }
    .sidebar.collapsed .brand-container,
    body.sidebar-compact .sidebar .brand-container {
        padding: 0 14px !important;
        justify-content: space-between !important;
        cursor: default !important;
    }
    .sidebar.collapsed .brand-title-text,
    body.sidebar-compact .sidebar .brand-title-text {
        opacity: 1 !important;
        width: auto !important;
    }
    .sidebar.collapsed .btn-toggle-sidebar,
    body.sidebar-compact .sidebar .btn-toggle-sidebar {
        display: flex !important;
    }
    .sidebar.collapsed .nav-section-label,
    body.sidebar-compact .nav-section-label { display: block !important; }
    .sidebar.collapsed .nav-item,
    .sidebar.collapsed #sidebarMenu .nav-item,
    body.sidebar-compact #sidebarMenu .nav-item {
        justify-content: flex-start !important;
        padding: 8px 12px !important;
        margin: 1px 10px !important;
        gap: 10px !important;
    }
    .sidebar.collapsed .nav-item .link-text,
    .sidebar.collapsed #sidebarMenu .nav-item .link-text,
    body.sidebar-compact #sidebarMenu .nav-item .link-text {
        display: inline !important;
    }
    .sidebar.collapsed .nav-item .nav-icon,
    .sidebar.collapsed #sidebarMenu .nav-item .nav-icon,
    body.sidebar-compact #sidebarMenu .nav-item .nav-icon {
        font-size: 1rem !important;
        min-width: 18px !important;
    }
    .sidebar.collapsed #contenedor-instalar .link-text { display: inline !important; }
    .sidebar.collapsed #contenedor-instalar a {
        justify-content: flex-start !important;
        padding: 8px 12px !important;
        gap: 10px !important;
    }
}

/* ================================================================
   SECCIONES COLAPSABLES DEL SIDEBAR
   ================================================================ */

/* Botón-título de sección (Mantenimiento, Flota, etc.) */
.nav-section-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    padding: 6px 12px 4px 12px !important;
    margin: 8px 0 2px 0 !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: background 0.15s !important;
    gap: 6px !important;
}
.nav-section-toggle:hover {
    background: var(--hover, rgba(100,100,100,0.12)) !important;
}
.nav-section-toggle .link-text {
    font-size: 0.645rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    color: var(--subtext) !important;
    pointer-events: none !important;
}

/* Chevron del toggle de sección */
.section-chevron {
    font-size: 0.65rem !important;
    color: var(--subtext) !important;
    transition: transform 0.25s ease !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
}
.nav-section-toggle[aria-expanded="false"] .section-chevron {
    transform: rotate(-90deg) !important;
}

/* Contenedor de items de la sección — animación de colapso */
.nav-section-items {
    overflow: hidden !important;
    max-height: 2000px !important;
    opacity: 1 !important;
    transition: max-height 0.4s ease, opacity 0.25s ease !important;
}
.nav-section-items.nav-section-collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
}

/* En sidebar colapsado (icono), siempre mostrar todos los items */
.sidebar.collapsed .nav-section-toggle {
    display: none !important;
}
.sidebar.collapsed .nav-section-items {
    max-height: 2000px !important;
    opacity: 1 !important;
}
.sidebar.collapsed .nav-section-items.nav-section-collapsed {
    max-height: 2000px !important;
    opacity: 1 !important;
}

/* En mobile — mostrar toggle normalmente */
@media (max-width: 768px) {
    .sidebar.collapsed .nav-section-toggle {
        display: flex !important;
    }
}

/* ================================================================
   BADGE CONTADOR, INDICADOR DE SECCIÓN ACTIVA, ANIMACIONES
   ================================================================ */

/* Badge de conteo de items en la sección */
.section-badge {
    margin-left: auto !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    color: var(--subtext) !important;
    background: var(--hover, rgba(100,100,100,0.12)) !important;
    border-radius: 10px !important;
    padding: 1px 6px !important;
    min-width: 18px !important;
    text-align: center !important;
    line-height: 1.6 !important;
    transition: background 0.2s, color 0.2s !important;
    flex-shrink: 0 !important;
}
/* Badge destaca cuando la sección tiene el módulo activo */
.nav-section-toggle.section-has-active .section-badge {
    background: rgba(37,99,235,0.18) !important;
    color: var(--crm-accent) !important;
}

/* Indicador visual: sección con módulo activo */
.nav-section-toggle.section-has-active {
    background: rgba(37,99,235,0.08) !important;
    box-shadow: inset 3px 0 0 var(--crm-accent) !important;
    border-radius: 0 6px 6px 0 !important;
}
.nav-section-toggle.section-has-active .link-text {
    color: var(--crm-accent) !important;
    font-weight: 800 !important;
}
.nav-section-toggle.section-has-active .section-chevron {
    color: var(--crm-accent) !important;
}

/* Sub-etiqueta dentro de sección del nav (ej: "Preventivo" bajo Mantenimiento) */
.nav-sub-label {
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--subtext) !important;
    padding: 6px 18px 1px !important;
    opacity: 0.65;
    pointer-events: none;
}
.sidebar.collapsed .nav-sub-label { display: none !important; }

/* En sidebar colapsado, ocultar badge (ya no hay texto) */
.sidebar.collapsed .section-badge {
    display: none !important;
}

/* ================================================================
   ANIMACIÓN DE ENTRADA AL EXPANDIR SECCIÓN
   ================================================================ */
@keyframes navItemSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.nav-section-expanding .nav-item:nth-child(1) { animation: navItemSlideIn 0.22s ease both; animation-delay: 0ms; }
.nav-section-expanding .nav-item:nth-child(2) { animation: navItemSlideIn 0.22s ease both; animation-delay: 40ms; }
.nav-section-expanding .nav-item:nth-child(3) { animation: navItemSlideIn 0.22s ease both; animation-delay: 80ms; }
.nav-section-expanding .nav-item:nth-child(4) { animation: navItemSlideIn 0.22s ease both; animation-delay: 120ms; }
.nav-section-expanding .nav-item:nth-child(5) { animation: navItemSlideIn 0.22s ease both; animation-delay: 160ms; }

/* ================================================================
   BARRA DE PROGRESO DE NAVEGACIÓN
   ================================================================ */
#nav-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    z-index: 99999;
    background: linear-gradient(90deg, var(--crm-accent), #60a5fa, var(--crm-accent));
    background-size: 200% 100%;
    border-radius: 0 3px 3px 0;
    transition: width 0.25s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}
#nav-progress-bar.active {
    opacity: 1;
    animation: progressShimmer 1.2s linear infinite;
}
@keyframes progressShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
body.reduce-motion #nav-progress-bar { animation: none !important; transition: none !important; }

/* ================================================================
   SISTEMA DE TOASTS GLOBALES
   ================================================================ */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99998;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 360px;
    width: calc(100vw - 48px);
}
.global-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
    pointer-events: all;
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    overflow: hidden;
    position: relative;
}
.global-toast.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.global-toast .toast-icon { font-size: 1.1rem; flex-shrink: 0; }
.global-toast .toast-msg  { flex: 1; font-size: 0.875rem; font-weight: 500; color: var(--text); line-height: 1.4; }
.global-toast .toast-close {
    background: none; border: none; padding: 2px 4px; cursor: pointer;
    color: var(--subtext); font-size: 0.85rem; line-height: 1; flex-shrink: 0;
    border-radius: 6px; transition: background 0.15s;
}
.global-toast .toast-close:hover { background: var(--border); }
/* Barra de progreso interna del toast */
.global-toast .toast-progress {
    position: absolute;
    bottom: 0; left: 0; height: 3px;
    border-radius: 0 0 12px 12px;
    animation: toastProgress var(--toast-dur, 3500ms) linear forwards;
    opacity: 0.7;
}
@keyframes toastProgress {
    from { width: 100%; }
    to   { width: 0%; }
}
body.reduce-motion .global-toast { transition: none !important; }
body.reduce-motion .global-toast .toast-progress { animation: none !important; }

/* ================================================================
   EMPTY STATES (tablas / listas vacías)
   ================================================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    opacity: 0.75;
}
.empty-state .empty-icon {
    font-size: 3.2rem;
    color: var(--subtext);
    margin-bottom: 14px;
    opacity: 0.5;
}
.empty-state h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.empty-state p {
    font-size: 0.83rem;
    color: var(--subtext);
    margin: 0;
    max-width: 280px;
    line-height: 1.5;
}
/* Versión compacta para usar dentro de tablas (<td colspan>) */
.empty-state-sm {
    padding: 28px 16px;
}
.empty-state-sm .empty-icon { font-size: 2rem; margin-bottom: 8px; }
.empty-state-sm h5 { font-size: 0.875rem; }
.empty-state-sm p  { font-size: 0.78rem; }

/* ================================================================
   CONTADORES ANIMADOS EN KPIs
   ================================================================ */
[data-counter] { display: inline-block; }
@keyframes counterPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}
.counter-done { animation: counterPop 0.3s ease; }
body.reduce-motion [data-counter] { animation: none !important; }

/* ================================================================
   BREADCRUMB EN TOPBAR
   ================================================================ */
.topbar-title-block { display: flex; flex-direction: column; justify-content: center; }
.topbar-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--subtext);
    line-height: 1;
    margin-top: 2px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.topbar-bc-home { font-size: 0.68rem; color: var(--subtext); }
.topbar-bc-sep { color: var(--subtext); opacity: 0.5; font-size: 0.7rem; }
.topbar-bc-item { color: var(--subtext); white-space: nowrap; }
.topbar-bc-item.active { color: var(--crm-accent) !important; font-weight: 600; }
@media (max-width: 768px) { .topbar-breadcrumb { display: none !important; } }

/* ================================================================
   TRANSICIONES ENTRE MÓDULOS
   ================================================================ */
#root-dinamico {
    transition: opacity 0.18s ease, transform 0.18s ease;
}
#root-dinamico.module-transitioning {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}
body.reduce-motion #root-dinamico { transition: none !important; }

/* ================================================================
   RIPPLE EFFECT EN BOTONES
   ================================================================ */
.btn, .nav-item, .bottom-nav-item {
    position: relative;
    overflow: hidden;
}
.ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.28);
    transform: scale(0);
    animation: rippleAnim 0.5s linear;
    pointer-events: none;
}
@keyframes rippleAnim {
    to { transform: scale(4); opacity: 0; }
}
body.reduce-motion .ripple-wave { animation: none !important; display: none !important; }

/* ================================================================
   BOTTOM NAVIGATION MOBILE (One UI 8.5 Style)
   ================================================================ */
.bottom-nav {
    position: fixed;
    bottom: 24px;
    left: 16px;
    right: 16px;
    height: 64px;
    background: #1C1C1E;
    border-radius: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    overflow-x: auto;
    scrollbar-width: none; /* Hide scrollbar */
}
.bottom-nav::-webkit-scrollbar {
    display: none;
}
.bottom-nav-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 64px;
    height: 48px;
    border-radius: 32px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none !important;
    color: #FFFFFF !important; /* Color blanco solicitado */
    opacity: 0.8; /* Ligeramente tenue inactivo */
    cursor: pointer;
    background: transparent;
    border: none;
    flex-shrink: 0;
    padding: 4px 2px;
}

/* Ítem activo: fondo gris oscuro, texto blanco sin opacidad */
.bottom-nav-item.active {
    background: #3A3A3C;
    color: #FFFFFF !important;
    opacity: 1;
}

/* Hover expande */
.bottom-nav-item:not(.active):hover,
.bottom-nav-item:not(.active):focus {
    outline: 0;
    opacity: 1;
}

/* Ícono */
.bottom-nav-item i {
    font-size: 1.25rem;
    display: block;
    line-height: 1;
    transition: transform 0.3s ease;
    margin-bottom: 4px;
}

/* Texto */
.bottom-nav-item span {
    transition: all 0.3s ease;
    display: block;
    text-align: center;
    font-weight: 500;
    font-size: 0.62rem;
    white-space: nowrap;
    letter-spacing: 0.02em;
    color: inherit !important;
}

/* Cuando el bottom nav está visible, añadir padding al área de contenido */
@media (max-width: 767px) {
    /* Mover el padding-bottom a los contenedores scrollables en lugar del fondo principal */
    #root-dinamico { padding-bottom: 0 !important; }
    .content { padding-bottom: 0 !important; }
    .table-container, .rot-table-wrap, .main-area > .modulo-wrapper > .table-container { 
        padding-bottom: 120px !important; 
    }
}

/* ================================================================
   WIDGET CLIMA — Dashboard
   ================================================================ */
.dash-weather-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
}
.dash-weather-container::before {
    width: 90px;
    height: 90px;
    content: "";
    position: absolute;
    background-color: rgba(144, 161, 255, 0.45);
    z-index: 0;
    border-radius: 50%;
    left: 90px;
    top: 40px;
    transition: transform 0.9s ease;
    pointer-events: none;
}
.dash-weather-container:hover::before {
    transform: translate(-45px, 45px);
}
.dash-weather-card {
    position: relative;
    z-index: 1;
    width: 210px;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 18px 12px;
    border-radius: 14px;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    background: rgba(65, 65, 65, 0.22);
    border: 1px solid rgba(255,255,255,0.09);
    cursor: default;
    gap: 4px;
}
/* Modo claro: fondo más visible */
[data-theme="light"] .dash-weather-card,
body.light-mode .dash-weather-card {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.18);
}
.dash-weather-city {
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 1.2px;
    color: var(--text);
    text-transform: uppercase;
    text-align: center;
}
.dash-weather-desc {
    font-weight: 500;
    font-size: 0.68rem;
    letter-spacing: 1px;
    color: var(--subtext);
    text-transform: uppercase;
    text-align: center;
    min-height: 14px;
}
.dash-weather-icon {
    color: var(--text);
    line-height: 1;
}
.dash-weather-temp {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}
.dash-weather-minmax {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}
.dash-weather-min,
.dash-weather-max {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0 16px;
    gap: 2px;
}
.dash-weather-max {
    align-items: flex-start;
    border-left: 1.5px solid var(--border);
}
.dash-wlabel {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text);
}
.dash-wval {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--subtext);
}

/* ================================================================
   AVATAR GENERADO DE USUARIO
   ================================================================ */
.user-avatar {
    flex-shrink: 0;
    user-select: none;
    font-weight: 700;
    letter-spacing: -0.5px;
}
#topbar-avatar-wrap { display: flex; align-items: center; gap: 8px; }

/* ================================================================
   ATAJOS DE TECLADO (KBD BADGES)
   ================================================================ */
.shortcut-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text);
}
.shortcut-row span { color: var(--subtext); font-size: 0.8rem; }
kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 0.72rem;
    font-family: inherit;
    font-weight: 700;
    color: var(--text);
    box-shadow: 0 1px 0 var(--border);
    white-space: nowrap;
    min-width: 24px;
}

/* ================================================================
   TEMAS PREDEFINIDOS SaaS
   ================================================================ */
[data-theme="linear"]     { --crm-accent: #5e6ad2; --bg: #f7f8ff; }
[data-theme="vercel"]     { --crm-accent: #000000; --bg: #fafafa; }
[data-theme="github"]     { --crm-accent: #0969da; --bg: #f6f8fa; }
[data-theme="emerald"]    { --crm-accent: #059669; --bg: #f0fdf4; }
[data-theme="rose"]       { --crm-accent: #e11d48; --bg: #fff1f2; }
[data-theme="amber"]      { --crm-accent: #d97706; --bg: #fffbeb; }
body.dark[data-theme="linear"]  { --crm-accent: #818cf8; --bg: #0f1117; --surface: #1a1b23; }
body.dark[data-theme="vercel"]  { --crm-accent: #ffffff; --bg: #000; --surface: #111; }
body.dark[data-theme="github"]  { --crm-accent: #58a6ff; --bg: #0d1117; --surface: #161b22; }
body.dark[data-theme="emerald"] { --crm-accent: #34d399; --bg: #022c22; --surface: #064e3b; }
body.dark[data-theme="rose"]    { --crm-accent: #fb7185; --bg: #1a0010; --surface: #27002a; }

/* ================================================================
   STICKY HEADER + CONTADOR DE REGISTROS
   ================================================================ */
.table-record-count {
    font-size: 0.75rem;
    color: var(--subtext);
    font-weight: 500;
    padding: 4px 0 8px 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.table-record-count strong { color: var(--crm-accent); font-weight: 700; }

/* ================================================================
   KPI METRIC CARDS (Dashboard Centro de Comando)
   ================================================================ */
.kpi-metric-card {
    background: var(--surface);
    border-radius: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: default;
}
.kpi-metric-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--crm-accent);
    border-radius: 14px 14px 0 0;
}
.kpi-metric-card.success::before { background: #16a34a; }
.kpi-metric-card.warning::before { background: #eab308; }
.kpi-metric-card.danger::before  { background: #ef4444; }
.kpi-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.kpi-metric-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}
.kpi-metric-icon-wrap {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    background: rgba(37,99,235,0.1);
    color: var(--crm-accent);
    flex-shrink: 0;
}
.kpi-metric-icon-wrap.primary { background: rgba(37,99,235,0.12); color: var(--crm-accent); }
.kpi-metric-icon-wrap.success { background: rgba(22,163,74,0.12);  color: #16a34a; }
.kpi-metric-icon-wrap.warning { background: rgba(234,179,8,0.15);  color: #b45309; }
.kpi-metric-icon-wrap.danger  { background: rgba(239,68,68,0.12);  color: #ef4444; }
body.dark .kpi-metric-icon-wrap.warning { color: #eab308; }
.kpi-metric-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}
.kpi-metric-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--subtext);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}
.kpi-metric-sparkline {
    height: 28px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.kpi-metric-sparkline svg { width: 100%; height: 28px; overflow: visible; }
.kpi-metric-trend-wrap { display: flex; align-items: center; }

/* Activity Feed del Dashboard */
.dash-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
}
.dash-feed-item:last-child { border-bottom: none; }
.dash-feed-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}
.dash-feed-content { flex: 1; min-width: 0; }
.dash-feed-placa { font-weight: 700; font-size: 0.82rem; color: var(--crm-accent); }
.dash-feed-tipo  { font-size: 0.8rem; color: var(--text); }
.dash-feed-meta  { font-size: 0.72rem; color: var(--subtext); margin-top: 1px; }

/* ================================================================
   NAV ITEM BADGES (alertas dinámicas en sidebar)
   ================================================================ */
.nav-item-badge {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 20px;
    background: #ef4444;
    color: #fff;
    margin-left: auto;
    min-width: 18px;
    text-align: center;
    display: none;
    line-height: 1.5;
    flex-shrink: 0;
}
.nav-item-badge.warning { background: #eab308; color: #1a1a2e; }
.nav-item-badge.success { background: #16a34a; color: #fff; }
.nav-item-badge.info    { background: var(--crm-accent); color: #fff; }

/* ================================================================
   SKELETON LOADERS (wave animation)
   ================================================================ */
.skeleton {
    background: linear-gradient(90deg,
        var(--border) 25%,
        color-mix(in srgb, var(--surface) 80%, transparent) 50%,
        var(--border) 75%);
    background-size: 200% 100%;
    animation: skeletonWave 1.4s ease-in-out infinite;
    border-radius: 6px;
    display: block;
}
@keyframes skeletonWave {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}
.skeleton-row .skeleton { height: 30px; border-radius: 4px; }
.skeleton-card-wrap .skeleton { height: 140px; border-radius: 12px; }

/* ================================================================
   PULL-TO-REFRESH (mobile) — DESHABILITADO
   ================================================================ */
#ptr-indicator { display: none !important; }

@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* ================================================================
   OFFCANVAS & MODAL — Fondo oscuro (sin blur para máximo rendimiento)
   ================================================================ */
.offcanvas-backdrop {
    background-color: rgba(15, 23, 42, 0.55) !important;
    opacity: 1 !important;
}
.modal-backdrop {
    background-color: rgba(15, 23, 42, 0.55) !important;
    opacity: 1 !important;
}
/* Offcanvas: GPU-acelerado con will-change para animación fluida */
.offcanvas {
    will-change: transform;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ================================================================
   NATIVE APP FEEL — Mobile improvements
   ================================================================ */
/* Sin resaltado azul al tocar elementos */
* { -webkit-tap-highlight-color: transparent; }

/* Botones e ítems interactivos: sin selección de texto */
button, .btn, [onclick], .nav-item a, .bottom-nav-item,
.inv-list-card, .adm-card, .otro-card, .bento-card {
    user-select: none;
    -webkit-user-select: none;
}

/* Scroll suave tipo nativo en iOS */
.main-area, .offcanvas-body, .table-container,
[style*="overflow-y: auto"], [style*="overflow: auto"] {
    -webkit-overflow-scrolling: touch;
}

/* Evitar bounce scroll en body principal */
html, body { overscroll-behavior: none; }

/* ================================================================ */
/* FEATURES PLACAS — Timeline + Modo Revisor + KPIs Cliente         */
/* ================================================================ */

/* Ocultar badge "Sin cargar" — ya no es necesario con REST API */
.cache-badge { display: none !important; }

/* Feature 4 — Mini timeline circular (5 puntos) */
.tl-dot {
    width: 11px; height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--border);
    transition: transform 0.15s;
}
.tl-dot:hover { transform: scale(1.35); }
.tl-dot.tl-ok    { background: #22c55e; border-color: #16a34a; }
.tl-dot.tl-pv    { background: #f59e0b; border-color: #d97706; }
.tl-dot.tl-venc  { background: #ef4444; border-color: #dc2626; }
.tl-dot.tl-empty { background: var(--border); border-color: var(--border); }

/* Feature 5 — Modo Revisor */
body.modo-revisor [data-perm-crear],
body.modo-revisor .btn-primary:not(#btn-modo-revisor),
body.modo-revisor .btn-outline-primary.btn-agregar,
body.modo-revisor .fab-btn,
body.modo-revisor .card-swipe-actions,
body.modo-revisor .btn-dots { display: none !important; }

/* Feature 6 — KPI cards en modal cliente */
.kpi-mini-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
}
.kpi-mini-val { font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1; margin-bottom: 2px; }
.kpi-mini-lbl { font-size: 0.68rem; color: var(--subtext); text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-mini-card.kpi-green .kpi-mini-val { color: #22c55e; }
.kpi-mini-card.kpi-red   .kpi-mini-val { color: #ef4444; }
.kpi-mini-card.kpi-yellow .kpi-mini-val { color: #f59e0b; }
.kpi-mini-card.kpi-blue  .kpi-mini-val { color: #3b82f6; }

/* Offcanvas footer (WhatsApp) */
.offcanvas-footer { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   🎨 MODERN CONTROLS — Pill inputs + rounded buttons (global)
   ═══════════════════════════════════════════════════════════════ */

/* Search pill: unifica el input-group en una cápsula redondeada */
.controls-row .input-group,
.sr-controls .input-group,
.rot-search-bar .input-group,
.tot-controls .input-group,
.sit-controls .input-group,
.bkt-controls .input-group,
.prod-controls .input-group {
    border-radius: 99px !important;
    overflow: hidden !important;
    border: 1.5px solid var(--border) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
    flex-wrap: nowrap !important;
}
.controls-row .input-group .input-group-text,
.sr-controls .input-group .input-group-text,
.rot-search-bar .input-group .input-group-text,
.tot-controls .input-group .input-group-text,
.sit-controls .input-group .input-group-text,
.bkt-controls .input-group .input-group-text,
.prod-controls .input-group .input-group-text {
    border: none !important;
    background: transparent !important;
    padding-left: .9rem !important;
}
.controls-row .input-group .form-control,
.sr-controls .input-group .form-control,
.rot-search-bar .input-group .form-control,
.tot-controls .input-group .form-control,
.sit-controls .input-group .form-control,
.bkt-controls .input-group .form-control,
.prod-controls .input-group .form-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-right: .9rem !important;
}

/* Standalone search inputs (no input-group) */
.sr-controls input[type="text"],
.tot-controls input[type="text"],
.tot-controls input[type="month"],
.bkt-controls input[type="text"] {
    border-radius: 99px !important;
    border: 1.5px solid var(--border) !important;
    padding: .35rem .85rem !important;
    font-size: .83rem !important;
}

/* Standalone filter inputs (rot-filters, tot-controls) */
.rot-filters .form-control,
.rot-filters .form-select,
.tot-controls .form-control,
.tot-controls .form-select {
    border-radius: 12px !important;
    border: 1.5px solid var(--border) !important;
    font-size: .82rem !important;
}

/* Buttons rounded globally inside controls */
.controls-row .btn-sm,
.controls-row .btn.btn-sm,
.sr-controls .btn,
.rot-filters .btn,
.tot-controls .btn,
.sit-controls .btn,
.bkt-controls .btn,
.prod-controls .btn {
    border-radius: 99px !important;
    font-weight: 700 !important;
    padding: .35rem .85rem !important;
    font-size: .82rem !important;
}
.controls-row .btn-reload-cache,
.sr-controls .btn-reload-cache,
.bkt-controls .btn-reload-cache {
    border-radius: 99px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Dropdown toggles in controls */
.controls-row .dropdown-toggle,
.sr-controls .dropdown-toggle,
.tot-controls .dropdown-toggle,
.bkt-controls .dropdown-toggle,
.prod-controls .dropdown-toggle {
    border-radius: 99px !important;
}





/* ============================================================
   💎 FASE 5.1: REDISEÑO MINIMALISTA PRO (Corregido)
   ============================================================ */

/* 1. Fondos Generales (Mejora de Contraste) */
:root {
    /* Gris perla ligeramente más profundo para contrastar con las tarjetas blancas */
    --bg-modern: #e2e8f0; 
}
body.dark {
    /* Gris casi negro oscuro, y tarjetas un poco más claras */
    --bg-modern: #0f172a;
    --surface: #1e293b;
    --border: #334155;
    --text: #f8fafc;
}

/* 2. Rediseño del Layout (Aplicado a Light y Dark Mode) */
body { background-color: var(--bg-modern) !important; }
.content { background-color: transparent !important; }
.main-area { padding: 0 12px 12px 0 !important; }
#app-crm { padding: 12px; background-color: var(--bg-modern); }

/* 3. Sidebar Flotante (Efecto Cápsula en Escritorio y MÓVIL) */
.sidebar {
    height: calc(100vh - 24px) !important;
    border-radius: 24px !important;
    margin-right: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(0,0,0,0.03) !important;
    overflow: hidden;
}
body.dark .sidebar {
    background-color: var(--surface) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
}

/* Aplicando el diseño cápsula también en teléfonos móviles */
@media (max-width: 768px) {
    #app-crm { padding: 0 !important; background-color: var(--bg); }
    .sidebar { 
        height: calc(100% - 16px) !important; 
        border-radius: 20px !important; 
        margin: 8px !important; 
    }
    .topbar {
        margin: 0 !important;
        border-radius: 0 !important;
        border-bottom: 1px solid var(--border) !important;
    }
    .main-area { padding: 0 !important; }
}

/* 4. Topbar Glassmorphism y Flotante */
.topbar {
    border-radius: 20px !important;
    margin: 0 12px 12px 0 !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}
body.dark .topbar {
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}
@media (max-width: 768px) {
    .topbar { margin: 0 !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; }
}

/* 5. Refinamiento de Tarjetas y Tablas (Sombreado Premium) */
.card, .kpi-card, .pregunta-box, .detalle-item {
    background-color: var(--surface) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.04) !important;
}
body.dark .card, body.dark .kpi-card, body.dark .pregunta-box, body.dark .detalle-item {
    border: 1px solid rgba(255,255,255,0.04) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
}
.table-custom th {
    border-bottom: 2px solid rgba(0,0,0,0.03) !important;
    background-color: transparent !important;
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;
}
body.dark .table-custom th { border-bottom-color: rgba(255,255,255,0.03) !important; }
.table-custom td { border-top: 1px solid rgba(0,0,0,0.02) !important; }
body.dark .table-custom td { border-top: 1px solid rgba(255,255,255,0.02) !important; }

/* Legibilidad de color de texto en botones modo oscuro */
body.dark .btn-primary, body.dark .btn-outline-primary, body.dark .btn-outline-info {
    color: #ffffff !important;
}

/* Fin del override */

/* ============================================================
   💎 FASE 6: AJUSTES FINALES (Móvil, Dark Mode y FABs)
   ============================================================ */

/* 1. Solución de Desbordamiento del Menú en Móvil */
@media (max-width: 768px) {
    .sidebar {
        /* Se oculta completamente del layout flex para que el área principal ocupe todo el ancho sin desplazarse */
        display: none !important; 
    }
}

/* 2. Legibilidad de Textos en Modo Oscuro */
body.dark {
    color: #f8fafc !important; /* Texto base brillante */
}
body.dark .text-muted, 
body.dark .nav-section-label,
body.dark .small,
body.dark p {
    color: #cbd5e1 !important; /* Grises más claros para subtítulos */
}
body.dark .card, 
body.dark .kpi-card, 
body.dark .pregunta-box, 
body.dark .detalle-item,
body.dark .table-custom td {
    color: #f8fafc !important;
}

/* 3. Estilos de FABs (Botones flotantes animados) globales */
.fab-menu {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1050;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 12px;
}
.fab-main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--crm-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s;
    border: none;
}
.fab-main:hover {
    transform: scale(1.05);
}
.fab-menu.fab-menu-open .fab-main {
    transform: rotate(45deg);
}
.fab-options {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.fab-menu.fab-menu-open .fab-options {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.fab-item {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    cursor: pointer;
}
.fab-item-label {
    background: rgba(0,0,0,0.75);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
}
body.dark .fab-item-label {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
}
.fab-item-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--surface);
    color: var(--crm-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    border: 1px solid var(--border);
    transition: transform 0.2s;
}
.fab-item:hover .fab-item-btn {
    transform: scale(1.1);
    background-color: var(--crm-accent);
    color: white;
}


/* Rediseño de Contenedores de Módulos (Usuarios y Auditoría) */
#moduloUsuarios, #moduloAuditoria {
    margin: 16px;
    height: calc(100% - 32px) !important;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
}
@media (max-width: 768px) {
    #moduloUsuarios, #moduloAuditoria {
        margin: 10px;
        height: calc(100% - 20px) !important;
        border-radius: 20px;
    }
}


/* Botones de acción (Guardar/Eliminar) para Módulo Usuarios y otros */
.btn-gu-save {
    background: var(--crm-accent, #2563eb);
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(37,99,235,0.25);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-gu-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37,99,235,0.35);
    background: #1d4ed8;
    color: #ffffff;
}

.btn-gu-danger {
    background: transparent;
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.4);
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-gu-danger:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239,68,68,0.25);
}

/* Modificamos gu-panel-actions en desktop */
.gu-panel-actions {
    background: var(--surface);
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-radius: 0 0 24px 0;
}


/* ============================================================
   FASE 4: Rediseño Global UI (One UI 8.5 Style + Modulos Redondeados)
   ============================================================ */

/* 1. Redondeo maestro de todos los contenedores principales de los módulos */
/* Apuntamos al primer hijo directo de #layout-content que normalmente es el contenedor del módulo */
#layout-content > div {
    margin: 16px;
    height: calc(100% - 32px) !important;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    overflow: hidden;
    background: var(--bg); /* o var(--surface) dependiendo del módulo */
    border: 1px solid var(--border);
    position: relative;
}

@media (max-width: 768px) {
    #layout-content > div {
        margin: 0 0 80px 0 !important;
        height: 100% !important;
        border-radius: 0 !important;
        overflow: hidden;
        isolation: isolate; /* Para forzar clip de border-radius en webkit */
    }
}

/* Excepción: Si algún módulo usa flex-col internamente, aseguramos que se comporte bien */
#layout-content > div > .gu-header,
#layout-content > div > .audit-header,
#layout-content > div > .inv-header {
    border-radius: 24px 24px 0 0;
}
@media (max-width: 768px) {
    #layout-content > div > .gu-header,
    #layout-content > div > .audit-header,
    #layout-content > div > .inv-header {
        border-radius: 28px 28px 0 0;
    }
}

/* 3. Ajuste de contenido para evitar colisión con el Bottom Nav flotante */
/* Añadimos padding inferior generoso a los cuerpos de offcanvas y modales globales */
.offcanvas-body {
    padding-bottom: 110px !important;
}
.modal-body {
    padding-bottom: 60px !important;
}

/* Modificadores globales para levantar los botones flotantes en mobile */
@media (max-width: 767px) {
    .fab-menu, #inv-fab-wrap, .btn-fab-main {
        bottom: 110px !important;
    }
}

/* Desactivar sombras fantasma de offcanvas cerrados */
.offcanvas:not(.show) { box-shadow: none !important; visibility: hidden !important; }

/* === FORZAR PANTALLA COMPLETA TOTAL === */
html, body { width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; }
#app-crm, .content, .main-area, .modulo-wrapper { padding: 0 !important; margin: 0 !important; max-width: none !important; border-radius: 0 !important; box-shadow: none !important; }

@media (max-width: 1024px) { .sidebar { display: none !important; } }

/* Fix btn-reload focus ring */
.btn-reload-cache:focus, .btn-reload-cache:active, .btn-outline-secondary:focus, .btn-outline-secondary:active { box-shadow: none !important; outline: none !important; }