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

/* Automoves TEXMEX - estilos base extraidos del prototipo original */

:root {
    --primary-100: #DC2626; /* Rojo Automoves */
    --primary-200: #B91C1C; /* Rojo oscuro (Hover) */
    --primary-300: rgba(220, 38, 38, 0.1); /* Rojo tenue */
    --accent-100: #111827;  /* Negro */
    --accent-200: #374151;  
    --text-100: #111827;    /* Texto principal negro */
    --text-200: #4B5563;    /* Texto secundario gris */
    --bg-100: #FFFFFF;      /* Blanco (Fondo Tarjetas) */
    --bg-200: #F3F4F6;      /* Gris claro (Fondo Base) */
    --bg-300: #E5E7EB;      /* Bordes y separadores */
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --radius: 12px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', Roboto, 'Helvetica Neue', sans-serif; }
        body { background: var(--bg-200); height: 100vh; overflow: hidden; }
        
        /* ==================== LOGIN MODERNO ==================== */

.login-overlay-modern {
    position: fixed;
    inset: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(30, 32, 34, 0.34), transparent 30%),
        radial-gradient(circle at bottom right, rgba(82, 97, 107, 0.26), transparent 35%),
        linear-gradient(135deg, #171717 0%, #282828 50%, #111111 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    overflow: hidden;
}

.login-bg-shape {
    position: absolute;
    border-radius: 999px;
    filter: blur(8px);
    opacity: 0.32;
    animation: floatShape 8s ease-in-out infinite;
}

.shape-one {
    width: 280px;
    height: 280px;
    background: var(--primary-100);
    top: 8%;
    left: 10%;
}

.shape-two {
    width: 180px;
    height: 180px;
    background: var(--primary-200);
    bottom: 12%;
    right: 12%;
    animation-delay: 1.5s;
}

.shape-three {
    width: 120px;
    height: 120px;
    background: white;
    bottom: 18%;
    left: 22%;
    opacity: 0.08;
    animation-delay: 3s;
}

@keyframes floatShape {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(-22px) translateX(14px);
    }
}

.login-card-modern {
    width: min(980px, 92vw);
    min-height: 560px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 34px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    box-shadow: 0 35px 90px rgba(0,0,0,0.42);
    position: relative;
    z-index: 2;
    animation: loginCardIn 0.6s ease both;
}

@keyframes loginCardIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-brand-panel {
    background:
        linear-gradient(145deg, rgba(30, 32, 34, 0.96), rgba(52, 55, 59, 0.94)),
        linear-gradient(135deg, #1E2022, #34373b);
    color: white;
    padding: 58px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.login-brand-panel::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    right: -140px;
    top: -100px;
}

.login-logo-box {
    width: 150px;
    height: 86px;
    background: rgba(255,255,255,0.96);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    margin-bottom: 34px;
    box-shadow: 0 18px 35px rgba(0,0,0,0.22);
}

.login-logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.login-brand-panel h1 {
    font-size: 38px;
    line-height: 1;
    letter-spacing: 1.2px;
    font-weight: 900;
    margin-bottom: 6px;
}

.login-company {
    font-size: 15px;
    opacity: 0.9;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.login-system {
    font-size: 17px;
    opacity: 0.96;
    max-width: 360px;
    line-height: 1.5;
}

.login-brand-footer {
    margin-top: 54px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.login-brand-footer span {
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.22);
    padding: 9px 12px;
    border-radius: 999px;
    font-size: 12px;
    backdrop-filter: blur(8px);
}

.login-form-panel {
    padding: 58px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
}

.login-form-header {
    margin-bottom: 30px;
}

.login-pill {
    display: inline-flex;
    background: #e1e4e6;
    color: var(--primary-100);
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
}

.login-form-header h2 {
    font-size: 30px;
    color: var(--text-100);
    margin-bottom: 8px;
    font-weight: 850;
}

.login-form-header p {
    color: var(--text-200);
    font-size: 14px;
    line-height: 1.5;
}

.login-input-group {
    position: relative;
    margin-bottom: 16px;
}

.login-input-group i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-100);
    font-size: 14px;
}

.login-input-group input {
    width: 100%;
    padding: 15px 18px 15px 46px;
    border: 1.5px solid #e5e7eb;
    border-radius: 18px;
    font-size: 14px;
    background: #f9fafb;
    transition: all 0.25s ease;
}

.login-input-group input:focus {
    border-color: var(--primary-100);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(30, 32, 34, 0.12);
    outline: none;
}

.login-btn-modern {
    width: 100%;
    margin-top: 8px;
    padding: 15px 20px;
    border-radius: 18px;
    border: none;
    background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
    color: white;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.25s ease;
    box-shadow: 0 14px 28px rgba(30, 32, 34, 0.24);
}

.login-btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(30, 32, 34, 0.32);
}

.login-btn-modern i {
    transition: transform 0.25s ease;
}

.login-btn-modern:hover i {
    transform: translateX(4px);
}

.login-error {
    color: var(--primary-100);
    font-size: 12px;
    margin-top: 14px;
    min-height: 18px;
    text-align: center;
    font-weight: 700;
}

.login-copy {
    margin-top: 34px;
    text-align: center;
    color: #7a7a7a;
    font-size: 12px;
}

@media (max-width: 820px) {
    .login-card-modern {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .login-brand-panel {
        padding: 34px 28px;
        text-align: center;
        align-items: center;
    }

    .login-brand-panel h1 {
        font-size: 30px;
    }

    .login-brand-footer {
        justify-content: center;
        margin-top: 28px;
    }

    .login-form-panel {
        padding: 34px 28px;
    }
}
        
        /* SIDEBAR */
        .sidebar { width: 280px; background: var(--accent-100); color: white; display: flex; flex-direction: column; position: fixed; height: 100%; left: 0; top: 0; overflow-y: auto; z-index: 100; transition: var(--transition); }
        .sidebar-header { padding: 25px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); text-align: center; }
        .sidebar-header img { max-width: 120px; max-height: 50px; object-fit: contain; margin-bottom: 8px; }
        .sidebar-header h2 { color: white; font-size: 16px; font-weight: 700; letter-spacing: 1px; }
        .sidebar-header p { font-size: 10px; color: var(--accent-200); margin-top: 3px; }
        .sidebar-user { margin: 12px; background: rgba(255,255,255,0.1); border-radius: 16px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-size: 12px; }
        .sidebar-user i { color: var(--primary-200); }
        .nav-section { margin-top: 8px; }
        .nav-section-title { font-size: 9px; text-transform: uppercase; color: var(--accent-200); padding: 10px 20px 4px; letter-spacing: 1.5px; }
        .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; margin: 2px 10px; border-radius: 14px; cursor: pointer; color: var(--accent-200); font-size: 13px; transition: var(--transition); }
        .nav-item i { width: 20px; font-size: 1rem; text-align: center; }
        .nav-item.active { background: var(--primary-100); color: white; }
        .nav-item:hover:not(.active) { background: rgba(255,255,255,0.1); color: white; }
        .submenu { display: none; padding-left: 32px; }
        .submenu.open { display: block; }
        .submenu .nav-item { font-size: 12px; padding: 8px 16px; margin: 1px 8px; }
        
        /* MAIN CONTENT */
        .main-content { margin-left: 280px; padding: 20px 24px; height: 100vh; overflow-y: auto; background: var(--bg-200); }
        .page { display: none; animation: fadeIn 0.3s ease; }
        .active-page { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        /* CARDS */
        .card { background: var(--bg-100); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 24px; margin-bottom: 20px; transition: var(--transition); }
        .card:hover { box-shadow: 0 12px 28px rgba(0,0,0,0.12); }
        .card-header { font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; border-left: 4px solid var(--primary-100); padding-left: 14px; display: flex; align-items: center; gap: 8px; }
        .card-header i { color: var(--primary-100); }
        
        /* GRIDS */
        .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
        .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
        .grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
        
        /* FORMS */
        .form-group { margin-bottom: 12px; }
        label { font-weight: 600; font-size: 11px; color: var(--text-200); display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
        input, select, textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--bg-300); border-radius: 12px; font-size: 13px; background: var(--bg-100); transition: var(--transition); }
        input:focus, select:focus, textarea:focus { border-color: var(--primary-200); outline: none; box-shadow: 0 0 0 3px rgba(30,32,34,0.10); }
        textarea { resize: vertical; min-height: 60px; }
        
        /* BUTTONS */
        button { border: none; padding: 9px 18px; border-radius: 30px; font-weight: 600; cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; transition: var(--transition); }
        .btn-primary { background: var(--primary-100); color: white; }
        .btn-primary:hover { background: var(--primary-200); transform: translateY(-2px); }
        .btn-secondary { background: var(--accent-100); color: white; }
        .btn-secondary:hover { background: #52616B; transform: translateY(-2px); }
        .btn-success { background: #10b981; color: white; }
        .btn-success:hover { background: #059669; transform: translateY(-2px); }
        .btn-danger { background: #ef4444; color: white; }
        .btn-danger:hover { background: #dc2626; transform: translateY(-2px); }
        .btn-info { background: #3b82f6; color: white; }
        .btn-info:hover { background: #2563eb; transform: translateY(-2px); }
        .btn-warning { background: #f59e0b; color: white; }
        .btn-warning:hover { background: #d97706; transform: translateY(-2px); }
        .btn-sm { padding: 5px 12px; font-size: 10px; }
        
        /* TABLES */
        table { width: 100%; border-collapse: collapse; font-size: 12px; }
        th, td { padding: 12px 8px; border-bottom: 1px solid var(--bg-300); text-align: left; }
        th { background: var(--bg-200); font-weight: 600; color: var(--text-100); position: sticky; top: 0; }
        tr:hover { background: var(--bg-200); }
        .table-container { overflow-x: auto; max-height: 500px; overflow-y: auto; border-radius: 12px; }
        
        /* BADGES */
        .badge { padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: 600; display: inline-block; }
        .badge-success { background: #d1fae5; color: #065f46; }
        .badge-warning { background: #fed7aa; color: #92400e; }
        .badge-danger { background: #e1e4e6; color: #991b1b; }
        .badge-info { background: #dbeafe; color: #1e40af; }
        .badge-purple { background: #e9d5ff; color: #6b21a5; }
        
        /* KPI */
        .kpi-box { background: var(--bg-100); border-radius: var(--radius); padding: 20px; text-align: center; box-shadow: var(--shadow); border-bottom: 3px solid var(--primary-100); transition: var(--transition); }
        .kpi-box:hover { transform: translateY(-4px); }
        .kpi-number { font-size: 2rem; font-weight: 800; color: var(--text-100); }
        .kpi-label { font-size: 11px; color: var(--text-200); margin-top: 5px; text-transform: uppercase; letter-spacing: 1px; }
        
        .filtro-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; background: var(--bg-200); padding: 12px 16px; border-radius: 16px; }
        .filtro-bar input, .filtro-bar select { width: auto; min-width: 140px; }
        
        .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; justify-content: center; align-items: center; }
        .modal-overlay.active { display: flex; }
        .modal-box { background: var(--bg-100); border-radius: 24px; padding: 24px; max-width: 1000px; width: 95%; max-height: 85vh; overflow-y: auto; }
        
        .seleccion-multiple { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; background: var(--bg-200); padding: 14px; border-radius: 16px; }
        .seleccion-multiple label { display: flex; align-items: center; gap: 8px; background: var(--bg-100); padding: 8px 14px; border-radius: 30px; cursor: pointer; border: 1px solid var(--bg-300); font-size: 12px; transition: var(--transition); }
        .seleccion-multiple label:hover { border-color: var(--primary-200); background: var(--bg-200); }
        
        .alert-item { padding: 12px; border-radius: 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
        .alert-warning { background: #fed7aa; color: #92400e; }
        .alert-danger { background: #e1e4e6; color: #991b1b; }
        .alert-info { background: #dbeafe; color: #1e40af; }
        
        .logo-preview { max-width: 150px; max-height: 60px; margin-top: 10px; border: 1px solid var(--bg-300); border-radius: 8px; padding: 5px; }
        
        .btn-group { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
        
        .chart-container { height: 300px; position: relative; }
/* ==================== TOAST NOTIFICATIONS ==================== */

.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    min-width: 280px;
    max-width: 380px;
    padding: 14px 18px;
    border-radius: 14px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: toastIn 0.3s ease, toastOut 0.3s ease 3.7s forwards;
}

.toast.success {
    background: #10b981;
}

.toast.error {
    background: #ef4444;
}

.toast.warning {
    background: #f59e0b;
}

.toast.info {
    background: #3b82f6;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateX(40px);
    }
}
/* ==================== GLOBAL LOADER ==================== */

.global-loader {
    position: fixed;
    inset: 0;
    background: rgba(35, 33, 33, 0.45);
    backdrop-filter: blur(3px);
    z-index: 9998;
    display: none;
    justify-content: center;
    align-items: center;
}

.global-loader.active {
    display: flex;
}

.loader-box {
    background: white;
    border-radius: 22px;
    padding: 26px 34px;
    min-width: 240px;
    box-shadow: 0 20px 45px rgba(0,0,0,0.25);
    text-align: center;
    font-weight: 700;
    color: var(--text-100);
}

.loader-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid var(--bg-300);
    border-top-color: var(--primary-100);
    border-radius: 50%;
    margin: 0 auto 14px;
    animation: spinLoader 0.8s linear infinite;
}

@keyframes spinLoader {
    to {
        transform: rotate(360deg);
    }
}

/* ==================== COLORIMETRÍA AUTOMOVES - FASE 2 ==================== */

body {
    background: var(--bg-200);
    color: var(--text-100);
}

.login-overlay-modern {
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.15), transparent 32%),
        radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.10), transparent 38%),
        linear-gradient(135deg, var(--bg-100) 0%, var(--bg-200) 100%);
}

.shape-one { background: var(--primary-100); opacity: 0.18; }
.shape-two { background: var(--text-200); opacity: 0.18; }
.shape-three { background: var(--primary-300); opacity: 0.34; }

.login-card-modern {
    background: rgba(240, 245, 249, 0.92);
    border: 1px solid rgba(30, 32, 34, 0.10);
    box-shadow: 0 35px 90px rgba(30, 32, 34, 0.26);
}

.login-brand-panel {
    background:
        linear-gradient(145deg, rgba(30, 32, 34, 0.98), rgba(52, 55, 59, 0.94)),
        linear-gradient(135deg, var(--primary-100), var(--primary-200));
}

.login-logo-box {
    background: rgba(240, 245, 249, 0.96);
    border: 1px solid rgba(225, 228, 230, 0.75);
}

.login-form-panel,
.card,
.kpi-box,
.modal-box,
.loader-box {
    background: rgba(240, 245, 249, 0.96);
    border: 1px solid rgba(120, 129, 137, 0.18);
}

.login-pill,
.badge-info,
.badge-purple {
    background: var(--accent-200);
    color: var(--primary-100);
}

.sidebar {
    background: linear-gradient(180deg, var(--primary-100), var(--primary-200));
    box-shadow: 8px 0 28px rgba(30, 32, 34, 0.20);
}

.sidebar-header {
    border-bottom: 1px solid rgba(240, 245, 249, 0.14);
}

.sidebar-user,
.login-brand-footer span {
    background: rgba(240, 245, 249, 0.10);
    border: 1px solid rgba(240, 245, 249, 0.14);
}

.nav-section-title {
    color: var(--accent-200);
}

.nav-item {
    color: var(--accent-200);
}

.nav-item.active {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    color: #111827 !important;
    font-weight: 700;
    border-left: 4px solid #dc2626;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.nav-item.active i,
.nav-item.active span {
    color: #111827 !important;
}

.nav-item.active:hover {
    color: #111827 !important;
}

.nav-item:hover:not(.active) {
    background: rgba(240, 245, 249, 0.12);
    color: #ffffff;
}

.main-content {
    background: linear-gradient(135deg, var(--bg-100), var(--bg-200));
}

.card-header {
    border-left-color: var(--primary-100);
    color: var(--primary-100);
}

.card-header i,
.sidebar-user i,
.login-input-group i {
    color: var(--text-200);
}

input, select, textarea {
    background: rgba(240, 245, 249, 0.92);
    border-color: var(--bg-300);
    color: var(--text-100);
}

input:focus, select:focus, textarea:focus,
.login-input-group input:focus {
    border-color: var(--primary-100);
    box-shadow: 0 0 0 4px rgba(30, 32, 34, 0.10);
}

.login-input-group input {
    background: rgba(240, 245, 249, 0.86);
}

.login-btn-modern,
.btn-primary {
    background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
    color: var(--primary-300);
    box-shadow: 0 14px 30px rgba(30, 32, 34, 0.22);
}

.login-btn-modern:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-200), var(--text-200));
    transform: translateY(-2px);
}

.btn-secondary,
.btn-info {
    background: var(--text-200);
    color: var(--primary-300);
}

.btn-secondary:hover,
.btn-info:hover {
    background: var(--accent-100);
}

.btn-success {
    background: var(--accent-100);
    color: #ffffff;
}

.btn-success:hover {
    background: var(--text-200);
}

.btn-warning {
    background: var(--bg-300);
    color: var(--primary-100);
}

.btn-warning:hover {
    background: var(--accent-200);
}

.btn-danger {
    background: var(--primary-200);
    color: #ffffff;
}

.btn-danger:hover {
    background: var(--primary-100);
}

th {
    background: var(--accent-200);
    color: var(--primary-100);
}

tr:hover {
    background: rgba(201, 214, 223, 0.55);
}

.badge-success {
    background: var(--accent-200);
    color: var(--primary-100);
}

.badge-warning {
    background: var(--bg-300);
    color: var(--primary-100);
}

.badge-danger {
    background: var(--primary-200);
    color: #ffffff;
}

.kpi-box {
    border-bottom-color: var(--primary-100);
}

.kpi-box:hover,
.card:hover {
    box-shadow: 0 14px 34px rgba(30, 32, 34, 0.16);
}

.filtro-bar,
.seleccion-multiple {
    background: rgba(201, 214, 223, 0.55);
}

.seleccion-multiple label {
    background: var(--bg-100);
    border-color: var(--bg-300);
    color: var(--text-100);
}

.seleccion-multiple label:hover {
    border-color: var(--primary-100);
    background: var(--accent-200);
}

.toast.success,
.toast.info {
    background: var(--text-200);
}

.toast.warning {
    background: var(--accent-100);
}

.toast.error {
    background: var(--primary-100);
}

.global-loader {
    background: rgba(30, 32, 34, 0.38);
}


/* =========================================================
   AUTOMOVES TEXMEX · FASE 2 UI OVERHAUL
   Corrección integral de layout, sidebar, dashboard, tablas y formularios
   ========================================================= */

:root {
    --primary-100:#1E2022;
    --primary-200:#34373b;
    --primary-300:#F0F5F9;
    --accent-100:#788189;
    --accent-200:#e1e4e6;
    --text-100:#1E2022;
    --text-200:#52616B;
    --bg-100:#F0F5F9;
    --bg-200:#C9D6DF;
    --bg-300:#bfc7d1;

    --success:#198754;
    --warning:#b7791f;
    --danger:#b42318;
    --info:#2563eb;

    --sidebar-width:286px;
    --radius:18px;
    --radius-lg:26px;
    --shadow:0 14px 34px rgba(30,32,34,.12);
    --shadow-soft:0 8px 22px rgba(30,32,34,.08);
    --transition:all .24s ease;
}

* {
    box-sizing:border-box;
}

html, body {
    width:100%;
    min-height:100%;
}

body {
    margin:0;
    font-family:'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background:
        radial-gradient(circle at 8% 0%, rgba(120,129,137,.18), transparent 30%),
        radial-gradient(circle at 96% 100%, rgba(201,214,223,.55), transparent 34%),
        linear-gradient(135deg, var(--bg-100), var(--bg-200));
    color:var(--text-100);
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* ---------- LOGIN ---------- */
.login-overlay-modern {
    background:
        radial-gradient(circle at 12% 10%, rgba(30,32,34,.32), transparent 30%),
        radial-gradient(circle at 90% 86%, rgba(82,97,107,.24), transparent 34%),
        linear-gradient(135deg, var(--bg-100) 0%, var(--bg-200) 54%, var(--bg-300) 100%) !important;
}

.login-card-modern {
    border:1px solid rgba(30,32,34,.12);
    box-shadow:0 34px 90px rgba(30,32,34,.26);
}

.login-brand-panel {
    background:
        linear-gradient(145deg, rgba(30,32,34,.98), rgba(52,55,59,.94)),
        linear-gradient(135deg, var(--primary-100), var(--primary-200)) !important;
}

.login-form-header h2,
.login-input-group input,
.login-copy,
.login-error {
    color:var(--text-100);
}

.login-form-header p {
    color:var(--text-200);
}

.login-pill {
    background:var(--accent-200) !important;
    color:var(--text-100) !important;
}

/* ---------- SIDEBAR PREMIUM ---------- */
.sidebar {
    width:var(--sidebar-width) !important;
    height:100vh;
    position:fixed;
    left:0;
    top:0;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    overflow-x:hidden;
    z-index:100;
    background:
        linear-gradient(180deg, #17191c 0%, #202327 48%, #17191c 100%) !important;
    color:#fff;
    border-right:1px solid rgba(255,255,255,.06);
    box-shadow:10px 0 34px rgba(30,32,34,.26) !important;
}

.sidebar::-webkit-scrollbar { width:7px; }
.sidebar::-webkit-scrollbar-track { background:rgba(255,255,255,.03); }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.16); border-radius:99px; }

.sidebar-header {
    padding:24px 20px 18px !important;
    border-bottom:1px solid rgba(240,245,249,.10) !important;
    text-align:center;
    position:relative;
}

.sidebar-header::after {
    content:'';
    position:absolute;
    left:50%;
    bottom:-1px;
    width:76px;
    height:2px;
    transform:translateX(-50%);
    background:linear-gradient(90deg, transparent, var(--bg-300), transparent);
}

.sidebar-header img,
#sidebarLogo {
    width:128px !important;
    max-width:128px !important;
    height:auto !important;
    max-height:62px !important;
    object-fit:contain !important;
    display:block;
    margin:0 auto 12px !important;
    padding:8px;
    border-radius:16px;
    background:rgba(240,245,249,.96);
    box-shadow:0 10px 24px rgba(0,0,0,.22);
}

.sidebar-header h2 {
    margin:0;
    color:#fff !important;
    font-size:15px !important;
    line-height:1.15;
    letter-spacing:1.1px;
    font-weight:850 !important;
}

.sidebar-header p {
    margin-top:6px !important;
    color:rgba(240,245,249,.64) !important;
    font-size:10.5px !important;
}

.sidebar-user {
    margin:14px 14px 10px !important;
    padding:11px 14px !important;
    border-radius:16px !important;
    background:rgba(240,245,249,.08) !important;
    border:1px solid rgba(240,245,249,.10) !important;
    color:rgba(240,245,249,.88);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.sidebar-user i { color:var(--bg-300) !important; }

.nav-section { margin-top:10px !important; }

.nav-section-title {
    color:rgba(240,245,249,.48) !important;
    font-size:10px !important;
    font-weight:800;
    letter-spacing:1.6px !important;
    padding:11px 22px 5px !important;
}

.nav-item {
    margin:4px 12px !important;
    padding:11px 15px !important;
    border-radius:14px !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    color:rgba(240,245,249,.76) !important;
    font-size:13px !important;
    font-weight:650 !important;
    line-height:1.2;
    cursor:pointer;
    transition:var(--transition) !important;
}

.nav-item i {
    width:18px !important;
    text-align:center;
    font-size:14px;
    color:rgba(240,245,249,.72) !important;
}

.nav-item:hover:not(.active) {
    background:rgba(240,245,249,.09) !important;
    color:#fff !important;
    transform:translateX(3px);
}

.nav-item.active {
    background:linear-gradient(135deg, var(--bg-100), var(--accent-200)) !important;
    color:var(--primary-100) !important;
    box-shadow:0 10px 22px rgba(0,0,0,.18) !important;
}

.nav-item.active i { color:var(--primary-100) !important; }

.submenu {
    display:none;
    padding-left:12px !important;
    margin:2px 0 8px;
}

.submenu.open { display:block; }

.submenu .nav-item {
    padding:9px 14px !important;
    margin:2px 12px 2px 18px !important;
    font-size:12px !important;
    border-radius:12px !important;
    color:rgba(240,245,249,.68) !important;
}

/* ---------- MAIN LAYOUT ---------- */
.main-content {
    margin-left:var(--sidebar-width) !important;
    width:calc(100vw - var(--sidebar-width));
    height:100vh !important;
    overflow-y:auto !important;
    overflow-x:hidden;
    padding:26px 30px 34px !important;
    background:
        radial-gradient(circle at 90% 0%, rgba(120,129,137,.13), transparent 28%),
        linear-gradient(135deg, rgba(240,245,249,.96), rgba(201,214,223,.62)) !important;
}

.main-content::-webkit-scrollbar { width:9px; }
.main-content::-webkit-scrollbar-thumb { background:rgba(82,97,107,.32); border-radius:99px; }

.page {
    display:none;
    animation:fadePage .26s ease;
}
.active-page { display:block; }

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

.main-content h2 {
    margin:0 0 18px;
    color:var(--text-100);
    font-size:26px;
    font-weight:850;
    letter-spacing:-.4px;
}

/* ---------- CARDS / KPI ---------- */
.kpi-card {
    position: relative;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.92),
            rgba(255,255,255,0.72)
        );

    backdrop-filter: blur(14px);

    border:
        1px solid rgba(255,255,255,0.65);

    border-radius: 28px;

    padding: 26px 26px 22px;

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(15,23,42,0.08),
        inset 0 1px 0 rgba(255,255,255,0.6);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.kpi-card::before {
    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            #dc2626,
            #ef4444,
            #f97316
        );
}

.kpi-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 45px rgba(15,23,42,0.14);
}

.kpi-value {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;

    color: #111827;

    letter-spacing: -2px;

    margin-bottom: 10px;
}

.kpi-label {
    font-size: .82rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #6b7280;
}

.kpi-trend {
    margin-top: 16px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 12px;

    border-radius: 999px;

    background: rgba(220,38,38,0.08);

    color: #dc2626;

    font-size: .75rem;
    font-weight: 700;
}

.card {
    border-radius:24px !important;
    padding:22px 24px !important;
    margin-bottom:22px !important;
}

.card:hover,
.kpi-box:hover {
    transform:translateY(-2px);
    box-shadow:var(--shadow) !important;
}

.card-header {
    color:var(--text-100) !important;
    border-left:0 !important;
    padding-left:0 !important;
    font-size:16px !important;
    font-weight:850 !important;
    display:flex;
    align-items:center;
    gap:10px;
}

.card-header i {
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:var(--primary-100);
    color:var(--primary-300) !important;
}

.grid-4,
.grid-3,
.grid-2 {
    gap:18px !important;
}

.kpi-box {
    text-align:left !important;
    border-radius:22px !important;
    padding:20px 20px 18px !important;
    border-bottom:0 !important;
    position:relative;
    overflow:hidden;
}

.kpi-box::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg, var(--primary-100), var(--accent-100));
}

.kpi-number {
    color:var(--text-100) !important;
    font-size:30px !important;
    line-height:1;
    margin-top:6px;
}

.kpi-label {
    color:var(--text-200) !important;
    font-size:10.5px !important;
    font-weight:800;
}

/* ---------- CHARTS ---------- */
.chart-container {
    height:320px !important;
    max-height:320px !important;
    position:relative;
    padding:8px 4px 0;
}

.chart-container canvas {
    max-height:320px !important;
}

/* ---------- FORMS ---------- */
label {
    color:var(--text-200) !important;
    font-size:11px !important;
    font-weight:800 !important;
}

input,
select,
textarea {
    background:rgba(255,255,255,.72) !important;
    border:1px solid rgba(120,129,137,.28) !important;
    color:var(--text-100) !important;
    border-radius:14px !important;
    transition:var(--transition) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color:var(--primary-100) !important;
    box-shadow:0 0 0 4px rgba(30,32,34,.10) !important;
    background:#fff !important;
}

input[readonly] {
    background:rgba(201,214,223,.58) !important;
    color:var(--text-100) !important;
}

.filtro-bar,
.seleccion-multiple {
    background:rgba(201,214,223,.50) !important;
    border:1px solid rgba(120,129,137,.18);
}

/* ---------- BUTTONS ---------- */
button,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-info,
.btn-warning {
    border-radius:999px !important;
    font-weight:800 !important;
    box-shadow:none;
}

.btn-primary {
    background:linear-gradient(135deg, var(--primary-100), var(--primary-200)) !important;
    color:#fff !important;
}

.btn-secondary,
.btn-info {
    background:var(--text-200) !important;
    color:#fff !important;
}

.btn-success {
    background:var(--success) !important;
    color:#fff !important;
}

.btn-warning {
    background:var(--warning) !important;
    color:#fff !important;
}

.btn-danger {
    background:var(--danger) !important;
    color:#fff !important;
}

button:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-info:hover,
.btn-warning:hover {
    transform:translateY(-2px);
    filter:brightness(.96);
}

/* ---------- TABLES ---------- */
.table-container {
    background:rgba(255,255,255,.54);
    border:1px solid rgba(120,129,137,.18);
    border-radius:18px !important;
    overflow:auto !important;
    max-height:520px !important;
}

table {
    width:100%;
    border-collapse:separate !important;
    border-spacing:0;
    font-size:12px !important;
}

th {
    background:rgba(225,228,230,.94) !important;
    color:var(--text-100) !important;
    font-weight:850 !important;
    text-transform:uppercase;
    font-size:10.5px;
    letter-spacing:.5px;
    position:sticky;
    top:0;
    z-index:2;
}

th, td {
    padding:12px 10px !important;
    border-bottom:1px solid rgba(120,129,137,.16) !important;
}

td {
    color:var(--text-100);
}

tr:hover {
    background:rgba(201,214,223,.42) !important;
    cursor: pointer;
}

/* ---------- BADGES / ALERTS ---------- */
.badge {
    border-radius:999px !important;
    padding:5px 10px !important;
    font-weight:850 !important;
}
.badge-success { background:#d9f2e6 !important; color:#0f6b43 !important; }
.badge-warning { background:#fff1cc !important; color:#8a5a00 !important; }
.badge-danger { background:#ffe0e0 !important; color:#9b1c1c !important; }
.badge-info { background:#dbeafe !important; color:#1e40af !important; }
.badge-purple { background:#e9d5ff !important; color:#6b21a5 !important; }

.alert-item {
    border-radius:16px !important;
    border:1px solid rgba(120,129,137,.16);
}

/* ---------- MODALS / TOASTS ---------- */
.modal-overlay {
    background:rgba(30,32,34,.52) !important;
    backdrop-filter:blur(5px);
}

.modal-box {
    border-radius:26px !important;
    box-shadow:0 28px 76px rgba(30,32,34,.28) !important;
}

.toast {
    border-radius:16px !important;
    box-shadow:0 14px 36px rgba(30,32,34,.22) !important;
}
.toast.success { background:var(--success) !important; }
.toast.error { background:var(--danger) !important; }
.toast.warning { background:var(--warning) !important; }
.toast.info { background:var(--text-200) !important; }

.global-loader {
    background:rgba(30,32,34,.38) !important;
    backdrop-filter:blur(5px);
}
.loader-box { color:var(--text-100) !important; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
    :root { --sidebar-width:240px; }
    .main-content { padding:20px !important; }
    .sidebar-header img, #sidebarLogo { width:112px !important; }
}

@media (max-width: 760px) {
    body { overflow:auto; }
    .sidebar {
        position:relative !important;
        width:100% !important;
        height:auto !important;
        max-height:none;
    }
    .main-content {
        margin-left:0 !important;
        width:100% !important;
        height:auto !important;
        min-height:100vh;
    }
}

/* Override final: arbol superior compacto sin desplazamiento de pantalla */
.top-menu.sidebar,
body:not(.sidebar-collapsed) .top-menu.sidebar,
body.sidebar-collapsed .top-menu.sidebar,
.top-menu.sidebar:hover,
.top-menu.sidebar:focus-within {
    height:64px !important;
    min-height:64px !important;
    transform:none !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    padding:0 14px !important;
}

.top-menu .sidebar-header,
.top-menu .sidebar-title,
.top-menu .sidebar-toggle { display:none !important; }

.top-menu > .submenu.nav-tree-root {
    position:fixed !important;
    top:68px !important;
    left:16px !important;
    right:auto !important;
    width:min(380px, calc(100vw - 32px)) !important;
    max-height:calc(100vh - 90px) !important;
    overflow-y:auto !important;
    display:none !important;
    grid-template-columns:1fr !important;
    gap:4px !important;
    padding:10px !important;
}

.top-menu > .submenu.nav-tree-root.open,
.top-menu > .submenu.nav-tree-root[style*="display: block"] { display:grid !important; }

.top-menu .submenu.nav-tree-root .submenu {
    position:static !important;
    inset:auto !important;
    width:auto !important;
    display:none !important;
    padding:2px 0 6px 14px !important;
    margin:0 0 0 8px !important;
    border:0 !important;
    border-left:1px solid rgba(255,255,255,.14) !important;
    background:transparent !important;
    box-shadow:none !important;
    grid-template-columns:1fr !important;
}

.top-menu .submenu.nav-tree-root .submenu.open,
.top-menu .submenu.nav-tree-root .submenu[style*="display: block"] { display:block !important; }

.top-menu .submenu.nav-tree-root .nav-item {
    width:100% !important;
    min-height:34px !important;
    display:flex !important;
    align-items:center !important;
    padding:8px 10px !important;
}

.top-menu .nav-item:hover,
.top-menu .submenu .nav-item:hover { transform:none !important; }

.main-content,
body:not(.sidebar-collapsed) .main-content,
body.sidebar-collapsed .main-content,
.sidebar:hover ~ .main-content,
body.sidebar-pinned .main-content {
    margin-left:0 !important;
    width:100vw !important;
    padding-top:88px !important;
}

/* Revision final 2026-05-18: capa terminal formal, sin desplazamiento por hover */
:root {
    --primary-100:#8f0712;
    --primary-200:#5f050c;
    --primary-300:#f3dde0;
    --accent-100:#20262d;
    --accent-200:#c8ced6;
    --text-100:#171b20;
    --text-200:#4d5661;
    --bg-100:#ffffff;
    --bg-200:#e8ecef;
    --bg-300:#cbd2da;
    --success:#0f6f46;
    --warning:#9a6400;
    --danger:#a61e2b;
    --info:#28445f;
    --radius:3px;
    --radius-lg:4px;
    --shadow:0 8px 18px rgba(19,26,34,.12);
    --shadow-soft:0 4px 10px rgba(19,26,34,.08);
    --transition:none;
}

body {
    background:#e8ecef !important;
    color:var(--text-100) !important;
    font-family:Arial, Helvetica, sans-serif !important;
}

* {
    letter-spacing:0 !important;
}

.login-overlay-modern { background:#11161c !important; }
.login-bg-shape, .login-brand-panel::after { display:none !important; }
.login-card-modern, .login-logo-box, .login-pill, .login-input-group input, .login-btn-modern { border-radius:3px !important; }
.login-card-modern { border:1px solid #3b434d !important; box-shadow:0 18px 42px rgba(0,0,0,.42) !important; }
.login-brand-panel { background:#1d232a !important; border-right:6px solid var(--primary-100) !important; }
.login-form-panel { background:#f4f6f8 !important; }
.login-pill { background:#dfe4ea !important; border:1px solid #c4cbd3 !important; color:#171b20 !important; }

.top-menu.sidebar,
body:not(.sidebar-collapsed) .top-menu.sidebar,
body.sidebar-collapsed .top-menu.sidebar,
.top-menu.sidebar:hover,
.top-menu.sidebar:focus-within {
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100vw !important;
    height:58px !important;
    min-height:58px !important;
    transform:none !important;
    transition:none !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:2px !important;
    padding:0 10px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    background:#151a20 !important;
    border-right:0 !important;
    border-bottom:3px solid var(--primary-100) !important;
    box-shadow:0 4px 12px rgba(0,0,0,.22) !important;
}

.top-menu.sidebar::after,
.top-menu .sidebar-header,
.top-menu .sidebar-title,
.top-menu .sidebar-toggle,
body.sidebar-collapsed .sidebar-toggle.in-menu-toggle {
    display:none !important;
}

.top-menu .sidebar-user {
    height:38px !important;
    max-width:190px !important;
    margin:0 8px 0 0 !important;
    padding:7px 10px !important;
    border-radius:2px !important;
    border:1px solid #3b4652 !important;
    background:#20262d !important;
    color:#dce2e8 !important;
    box-shadow:none !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.top-menu .sidebar-user i { color:#adb7c2 !important; }

.top-menu > .nav-item {
    height:38px !important;
    min-width:max-content !important;
    margin:0 !important;
    padding:0 11px !important;
    border-radius:2px !important;
    border:1px solid transparent !important;
    background:transparent !important;
    color:#d9dee4 !important;
    box-shadow:none !important;
    font-size:12px !important;
    font-weight:700 !important;
    text-transform:uppercase !important;
    transform:none !important;
    transition:none !important;
}

.top-menu > .nav-item i { color:#aeb8c3 !important; font-size:13px !important; }
.top-menu > .nav-item:hover,
.top-menu > .nav-item:hover:not(.active),
.top-menu > .nav-item.submenu-active,
.top-menu > .nav-item.active {
    transform:none !important;
    background:#262d35 !important;
    border-color:#4b5663 !important;
    color:#fff !important;
}

.top-menu > .nav-item.active { border-left:0 !important; border-bottom:2px solid var(--primary-100) !important; }
.top-menu .nav-item.has-submenu::after { content:"\25BE" !important; margin-left:8px !important; color:#9ea8b3 !important; transform:none !important; }
.top-menu .nav-item.has-submenu.submenu-active::after { color:#fff !important; transform:none !important; }

.top-menu > .submenu.nav-tree-root {
    position:fixed !important;
    top:64px !important;
    right:auto !important;
    width:min(380px, calc(100vw - 32px)) !important;
    max-height:calc(100vh - 84px) !important;
    overflow:auto !important;
    display:none !important;
    grid-template-columns:1fr !important;
    gap:3px !important;
    margin:0 !important;
    padding:7px !important;
    border:1px solid #323b45 !important;
    border-top:3px solid var(--primary-100) !important;
    border-radius:2px !important;
    background:#20262d !important;
    box-shadow:0 16px 34px rgba(0,0,0,.28) !important;
    animation:none !important;
}

.top-menu > .submenu.nav-tree-root.open,
.top-menu > .submenu.nav-tree-root[style*="display: block"] { display:grid !important; }

.top-menu .submenu.nav-tree-root .nav-item {
    width:100% !important;
    min-height:32px !important;
    margin:0 !important;
    padding:8px 9px !important;
    border-radius:2px !important;
    border:1px solid transparent !important;
    background:transparent !important;
    color:#dce2e8 !important;
    font-size:12px !important;
    font-weight:700 !important;
    text-transform:none !important;
    transform:none !important;
    box-shadow:none !important;
}

.top-menu .submenu.nav-tree-root .nav-item:hover,
.top-menu .submenu.nav-tree-root .nav-item.active,
.top-menu .submenu.nav-tree-root .nav-item.submenu-active {
    background:#2d353e !important;
    border-color:#46515d !important;
    color:#fff !important;
    transform:none !important;
}

.top-menu .submenu.nav-tree-root .submenu {
    position:static !important;
    inset:auto !important;
    width:auto !important;
    max-height:none !important;
    display:none !important;
    margin:2px 0 4px 8px !important;
    padding:2px 0 2px 9px !important;
    border:0 !important;
    border-left:2px solid #4b5663 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

.top-menu .submenu.nav-tree-root .submenu.open,
.top-menu .submenu.nav-tree-root .submenu[style*="display: block"] { display:block !important; }

.main-content,
body:not(.sidebar-collapsed) .main-content,
body.sidebar-collapsed .main-content,
.sidebar:hover ~ .main-content,
.sidebar:focus-within ~ .main-content,
body.sidebar-pinned .main-content {
    margin-left:0 !important;
    width:100vw !important;
    height:100vh !important;
    padding:78px 24px 24px !important;
    background:#e8ecef !important;
    transition:none !important;
}

.page, .card, .kpi-card, .kpi-box, .fleet-card, .modal-box, button,
.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-info, .btn-warning {
    animation:none !important;
    transition:none !important;
}

.card, .kpi-card, .kpi-box, .fleet-card, .modal-box, .inline-form-panel,
.filter-modal-panel, .table-container, .filtro-bar, .seleccion-multiple,
.alert-item, .toast, .system-alert {
    border-radius:3px !important;
    box-shadow:var(--shadow-soft) !important;
}

.card, .kpi-card, .kpi-box, .fleet-card, .modal-box {
    background:#fff !important;
    border:1px solid #cbd2da !important;
}

.card:hover, .kpi-card:hover, .kpi-box:hover, .fleet-card:hover, button:hover,
.btn-primary:hover, .btn-secondary:hover, .btn-success:hover, .btn-danger:hover,
.btn-info:hover, .btn-warning:hover, .operator-check-card:hover {
    transform:none !important;
}

.card-header {
    min-height:34px !important;
    margin-bottom:14px !important;
    padding:0 0 0 10px !important;
    border-left:4px solid var(--primary-100) !important;
    color:#171b20 !important;
    font-size:15px !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
}

.card-header i {
    width:28px !important;
    height:28px !important;
    border-radius:2px !important;
    background:#20262d !important;
    color:#fff !important;
}

.module-subtitle { color:#4d5661 !important; font-weight:700 !important; }
label { color:#3f4852 !important; font-size:10px !important; font-weight:800 !important; text-transform:uppercase !important; }

input, select, textarea {
    border-radius:2px !important;
    border:1px solid #aeb8c3 !important;
    background:#fff !important;
    color:#171b20 !important;
    box-shadow:inset 0 1px 2px rgba(19,26,34,.06) !important;
}

input:focus, select:focus, textarea:focus {
    border-color:var(--primary-100) !important;
    box-shadow:0 0 0 2px rgba(143,7,18,.14) !important;
}

button, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-info, .btn-warning {
    border-radius:2px !important;
    border:1px solid transparent !important;
    min-height:34px;
    font-size:12px !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
    box-shadow:none !important;
}

.btn-primary { background:var(--primary-100) !important; border-color:var(--primary-200) !important; color:#fff !important; }
.btn-secondary, .btn-info { background:#20262d !important; border-color:#14191f !important; color:#fff !important; }
.btn-success { background:var(--success) !important; border-color:#0b5635 !important; }
.btn-warning { background:var(--warning) !important; border-color:#744b00 !important; }
.btn-danger { background:var(--danger) !important; border-color:#7d1620 !important; }

.filtro-bar, .seleccion-multiple, .inline-form-panel {
    background:#f3f5f7 !important;
    border:1px solid #cbd2da !important;
}

.table-container { background:#fff !important; border:1px solid #bfc8d2 !important; }
table { border-collapse:collapse !important; font-size:12px !important; }
thead th, th {
    background:#20262d !important;
    color:#fff !important;
    border:1px solid #323b45 !important;
    font-size:10px !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
}

td { border:1px solid #d9dee4 !important; color:#171b20 !important; }
tbody tr:hover td, tr:hover { background:#f6ecee !important; }
.kpi-box, .kpi-card { border-top:4px solid var(--primary-100) !important; }
.kpi-card::before, .kpi-box::before, .fleet-card::before { display:none !important; }
.kpi-number, .kpi-value { color:#171b20 !important; }
.kpi-label, .fleet-type { color:#4d5661 !important; text-transform:uppercase !important; }
.badge, .status-pill { border-radius:2px !important; border:1px solid currentColor !important; font-weight:800 !important; }

.system-alert, .alert-item {
    border-left:5px solid var(--warning) !important;
    background:#fff8e8 !important;
    color:#4c3300 !important;
}

.toast { border-left:5px solid #fff !important; background:#20262d !important; color:#fff !important; }
.toast.success { background:var(--success) !important; }
.toast.error { background:var(--danger) !important; }
.toast.warning { background:var(--warning) !important; }
.toast.info { background:var(--info) !important; }
.global-loader { background:rgba(17,22,28,.62) !important; backdrop-filter:none !important; }
.loader-box { border-radius:3px !important; border:1px solid #cbd2da !important; color:#171b20 !important; }

@media (max-width:760px) {
    .top-menu.sidebar,
    body:not(.sidebar-collapsed) .top-menu.sidebar,
    body.sidebar-collapsed .top-menu.sidebar {
        height:56px !important;
        min-height:56px !important;
        padding:0 8px !important;
    }

    .top-menu .sidebar-user { max-width:150px !important; }

    .top-menu > .submenu.nav-tree-root {
        top:62px !important;
        left:10px !important;
        width:calc(100vw - 20px) !important;
    }

    .main-content,
    body:not(.sidebar-collapsed) .main-content,
    body.sidebar-collapsed .main-content {
        padding:72px 12px 16px !important;
    }
}

/* Revision 2026-05-18: consola operativa formal y menu anclado al modulo */
:root {
    --primary-100:#8f0712;
    --primary-200:#5f050c;
    --primary-300:#f3dde0;
    --accent-100:#20262d;
    --accent-200:#c8ced6;
    --text-100:#171b20;
    --text-200:#4d5661;
    --bg-100:#ffffff;
    --bg-200:#e8ecef;
    --bg-300:#cbd2da;
    --success:#0f6f46;
    --warning:#9a6400;
    --danger:#a61e2b;
    --info:#28445f;
    --radius:3px;
    --radius-lg:4px;
    --shadow:0 8px 18px rgba(19,26,34,.12);
    --shadow-soft:0 4px 10px rgba(19,26,34,.08);
    --transition:none;
}

* {
    letter-spacing:0 !important;
}

body {
    background:#e8ecef !important;
    color:var(--text-100) !important;
    font-family:Arial, Helvetica, sans-serif !important;
}

.login-overlay-modern {
    background:#11161c !important;
}

.login-bg-shape,
.login-brand-panel::after {
    display:none !important;
}

.login-card-modern,
.login-logo-box,
.login-pill,
.login-input-group input,
.login-btn-modern {
    border-radius:3px !important;
}

.login-card-modern {
    border:1px solid #3b434d !important;
    box-shadow:0 18px 42px rgba(0,0,0,.42) !important;
}

.login-brand-panel {
    background:#1d232a !important;
    border-right:6px solid var(--primary-100) !important;
}

.login-form-panel {
    background:#f4f6f8 !important;
}

.login-pill {
    background:#dfe4ea !important;
    border:1px solid #c4cbd3 !important;
    color:#171b20 !important;
}

.top-menu.sidebar,
body:not(.sidebar-collapsed) .top-menu.sidebar,
body.sidebar-collapsed .top-menu.sidebar,
.top-menu.sidebar:hover,
.top-menu.sidebar:focus-within {
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100vw !important;
    height:58px !important;
    min-height:58px !important;
    transform:none !important;
    transition:none !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:2px !important;
    padding:0 10px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    background:#151a20 !important;
    border-right:0 !important;
    border-bottom:3px solid var(--primary-100) !important;
    box-shadow:0 4px 12px rgba(0,0,0,.22) !important;
}

.top-menu.sidebar::after,
.top-menu .sidebar-header,
.top-menu .sidebar-title,
.top-menu .sidebar-toggle,
body.sidebar-collapsed .sidebar-toggle.in-menu-toggle {
    display:none !important;
}

.top-menu .sidebar-user {
    height:38px !important;
    max-width:190px !important;
    margin:0 8px 0 0 !important;
    padding:7px 10px !important;
    border-radius:2px !important;
    border:1px solid #3b4652 !important;
    background:#20262d !important;
    color:#dce2e8 !important;
    box-shadow:none !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.top-menu .sidebar-user i {
    color:#adb7c2 !important;
}

.top-menu > .nav-item {
    height:38px !important;
    min-width:max-content !important;
    margin:0 !important;
    padding:0 11px !important;
    border-radius:2px !important;
    border:1px solid transparent !important;
    background:transparent !important;
    color:#d9dee4 !important;
    box-shadow:none !important;
    font-size:12px !important;
    font-weight:700 !important;
    text-transform:uppercase !important;
    transform:none !important;
    transition:none !important;
}

.top-menu > .nav-item i {
    color:#aeb8c3 !important;
    font-size:13px !important;
}

.top-menu > .nav-item:hover,
.top-menu > .nav-item:hover:not(.active),
.top-menu > .nav-item.submenu-active,
.top-menu > .nav-item.active {
    transform:none !important;
    background:#262d35 !important;
    border-color:#4b5663 !important;
    color:#fff !important;
}

.top-menu > .nav-item.active {
    border-left:0 !important;
    border-bottom:2px solid var(--primary-100) !important;
}

.top-menu .nav-item.has-submenu::after {
    content:"\25BE" !important;
    margin-left:8px !important;
    color:#9ea8b3 !important;
    transform:none !important;
}

.top-menu .nav-item.has-submenu.submenu-active::after {
    color:#fff !important;
    transform:none !important;
}

.top-menu > .submenu.nav-tree-root {
    position:fixed !important;
    top:64px !important;
    right:auto !important;
    width:min(380px, calc(100vw - 32px)) !important;
    max-height:calc(100vh - 84px) !important;
    overflow:auto !important;
    display:none !important;
    grid-template-columns:1fr !important;
    gap:3px !important;
    margin:0 !important;
    padding:7px !important;
    border:1px solid #323b45 !important;
    border-top:3px solid var(--primary-100) !important;
    border-radius:2px !important;
    background:#20262d !important;
    box-shadow:0 16px 34px rgba(0,0,0,.28) !important;
    animation:none !important;
}

.top-menu > .submenu.nav-tree-root.open,
.top-menu > .submenu.nav-tree-root[style*="display: block"] {
    display:grid !important;
}

.top-menu .submenu.nav-tree-root .nav-item {
    width:100% !important;
    min-height:32px !important;
    margin:0 !important;
    padding:8px 9px !important;
    border-radius:2px !important;
    border:1px solid transparent !important;
    background:transparent !important;
    color:#dce2e8 !important;
    font-size:12px !important;
    font-weight:700 !important;
    text-transform:none !important;
    transform:none !important;
    box-shadow:none !important;
}

.top-menu .submenu.nav-tree-root .nav-item:hover,
.top-menu .submenu.nav-tree-root .nav-item.active,
.top-menu .submenu.nav-tree-root .nav-item.submenu-active {
    background:#2d353e !important;
    border-color:#46515d !important;
    color:#fff !important;
    transform:none !important;
}

.top-menu .submenu.nav-tree-root .submenu {
    position:static !important;
    inset:auto !important;
    width:auto !important;
    max-height:none !important;
    display:none !important;
    margin:2px 0 4px 8px !important;
    padding:2px 0 2px 9px !important;
    border:0 !important;
    border-left:2px solid #4b5663 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

.top-menu .submenu.nav-tree-root .submenu.open,
.top-menu .submenu.nav-tree-root .submenu[style*="display: block"] {
    display:block !important;
}

.main-content,
body:not(.sidebar-collapsed) .main-content,
body.sidebar-collapsed .main-content,
.sidebar:hover ~ .main-content,
.sidebar:focus-within ~ .main-content,
body.sidebar-pinned .main-content {
    margin-left:0 !important;
    width:100vw !important;
    height:100vh !important;
    padding:78px 24px 24px !important;
    background:#e8ecef !important;
    transition:none !important;
}

.page,
.card,
.kpi-card,
.kpi-box,
.fleet-card,
.modal-box,
button,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-info,
.btn-warning {
    animation:none !important;
    transition:none !important;
}

.card,
.kpi-card,
.kpi-box,
.fleet-card,
.modal-box,
.inline-form-panel,
.filter-modal-panel,
.table-container,
.filtro-bar,
.seleccion-multiple,
.alert-item,
.toast,
.system-alert {
    border-radius:3px !important;
    box-shadow:var(--shadow-soft) !important;
}

.card,
.kpi-card,
.kpi-box,
.fleet-card,
.modal-box {
    background:#fff !important;
    border:1px solid #cbd2da !important;
}

.card:hover,
.kpi-card:hover,
.kpi-box:hover,
.fleet-card:hover,
button:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-info:hover,
.btn-warning:hover,
.operator-check-card:hover {
    transform:none !important;
}

.card-header {
    min-height:34px !important;
    margin-bottom:14px !important;
    padding:0 0 0 10px !important;
    border-left:4px solid var(--primary-100) !important;
    color:#171b20 !important;
    font-size:15px !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
}

.card-header i {
    width:28px !important;
    height:28px !important;
    border-radius:2px !important;
    background:#20262d !important;
    color:#fff !important;
}

.module-subtitle {
    color:#4d5661 !important;
    font-weight:700 !important;
}

label {
    color:#3f4852 !important;
    font-size:10px !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
}

input,
select,
textarea {
    border-radius:2px !important;
    border:1px solid #aeb8c3 !important;
    background:#fff !important;
    color:#171b20 !important;
    box-shadow:inset 0 1px 2px rgba(19,26,34,.06) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color:var(--primary-100) !important;
    box-shadow:0 0 0 2px rgba(143,7,18,.14) !important;
}

button,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-info,
.btn-warning {
    border-radius:2px !important;
    border:1px solid transparent !important;
    min-height:34px;
    font-size:12px !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
    box-shadow:none !important;
}

.btn-primary {
    background:var(--primary-100) !important;
    border-color:var(--primary-200) !important;
    color:#fff !important;
}

.btn-secondary,
.btn-info {
    background:#20262d !important;
    border-color:#14191f !important;
    color:#fff !important;
}

.btn-success {
    background:var(--success) !important;
    border-color:#0b5635 !important;
}

.btn-warning {
    background:var(--warning) !important;
    border-color:#744b00 !important;
}

.btn-danger {
    background:var(--danger) !important;
    border-color:#7d1620 !important;
}

.filtro-bar,
.seleccion-multiple,
.inline-form-panel {
    background:#f3f5f7 !important;
    border:1px solid #cbd2da !important;
}

.table-container {
    background:#fff !important;
    border:1px solid #bfc8d2 !important;
}

table {
    border-collapse:collapse !important;
    font-size:12px !important;
}

thead th,
th {
    background:#20262d !important;
    color:#fff !important;
    border:1px solid #323b45 !important;
    font-size:10px !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
}

td {
    border:1px solid #d9dee4 !important;
    color:#171b20 !important;
}

tbody tr:hover td,
tr:hover {
    background:#f6ecee !important;
}

.kpi-box,
.kpi-card {
    border-top:4px solid var(--primary-100) !important;
}

.kpi-card::before,
.kpi-box::before,
.fleet-card::before {
    display:none !important;
}

.kpi-number,
.kpi-value {
    color:#171b20 !important;
}

.kpi-label,
.fleet-type {
    color:#4d5661 !important;
    text-transform:uppercase !important;
}

.badge,
.status-pill {
    border-radius:2px !important;
    border:1px solid currentColor !important;
    font-weight:800 !important;
}

.system-alert,
.alert-item {
    border-left:5px solid var(--warning) !important;
    background:#fff8e8 !important;
    color:#4c3300 !important;
}

.toast {
    border-left:5px solid #fff !important;
    background:#20262d !important;
    color:#fff !important;
}

.toast.success { background:var(--success) !important; }
.toast.error { background:var(--danger) !important; }
.toast.warning { background:var(--warning) !important; }
.toast.info { background:var(--info) !important; }

.global-loader {
    background:rgba(17,22,28,.62) !important;
    backdrop-filter:none !important;
}

.loader-box {
    border-radius:3px !important;
    border:1px solid #cbd2da !important;
    color:#171b20 !important;
}

@media (max-width:760px) {
    .top-menu.sidebar,
    body:not(.sidebar-collapsed) .top-menu.sidebar,
    body.sidebar-collapsed .top-menu.sidebar {
        height:56px !important;
        min-height:56px !important;
        padding:0 8px !important;
    }

    .top-menu .sidebar-user {
        max-width:150px !important;
    }

    .top-menu > .submenu.nav-tree-root {
        top:62px !important;
        left:10px !important;
        width:calc(100vw - 20px) !important;
    }

    .main-content,
    body:not(.sidebar-collapsed) .main-content,
    body.sidebar-collapsed .main-content {
        padding:72px 12px 16px !important;
    }
}

/* Ajuste 2026-05-18: menu superior en arbol compacto */
.top-menu.sidebar,
body:not(.sidebar-collapsed) .top-menu.sidebar,
body.sidebar-collapsed .top-menu.sidebar,
.top-menu.sidebar:hover,
.top-menu.sidebar:focus-within {
    width: 100vw !important;
    height: 64px !important;
    min-height: 64px !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 14px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    background: #191d22 !important;
}

.top-menu .sidebar-header,
.top-menu .sidebar-title,
.top-menu .sidebar-toggle {
    display: none !important;
}

.top-menu .sidebar-user {
    margin: 0 8px 0 0 !important;
    max-width: 240px !important;
    flex: 0 0 auto !important;
}

.top-menu > .nav-item {
    flex: 0 0 auto !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    transform: none !important;
}

.top-menu .nav-item:hover,
.top-menu .nav-item:hover:not(.active),
.top-menu .submenu .nav-item:hover,
.top-menu .submenu .nav-item:hover:not(.active) {
    transform: none !important;
}

.top-menu > .submenu.nav-tree-root {
    position: fixed !important;
    top: 68px !important;
    left: 16px !important;
    width: min(380px, calc(100vw - 32px)) !important;
    right: auto !important;
    max-height: calc(100vh - 90px) !important;
    overflow-y: auto !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 10px !important;
    margin: 0 !important;
    background: #242a30 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
    box-shadow: 0 20px 50px rgba(17,24,39,.28) !important;
}

.top-menu > .submenu.nav-tree-root.open,
.top-menu > .submenu.nav-tree-root[style*="display: block"] {
    display: grid !important;
}

.top-menu .submenu.nav-tree-root .submenu {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-height: none !important;
    display: none !important;
    padding: 2px 0 6px 14px !important;
    margin: 0 0 0 8px !important;
    border: 0 !important;
    border-left: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.top-menu .submenu.nav-tree-root .submenu.open,
.top-menu .submenu.nav-tree-root .submenu[style*="display: block"] {
    display: block !important;
}

.top-menu .submenu.nav-tree-root .nav-item {
    display: flex !important;
    width: 100% !important;
    min-height: 34px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    color: #d6dbe1 !important;
}

.top-menu .nav-item.has-submenu::after {
    margin-left: auto !important;
}

.main-content,
body:not(.sidebar-collapsed) .main-content,
body.sidebar-collapsed .main-content,
.sidebar:hover ~ .main-content,
body.sidebar-pinned .main-content {
    margin-left: 0 !important;
    width: 100vw !important;
    padding-top: 88px !important;
}
/* FIX DEFINITIVO - CONTRASTE MENU LATERAL ACTIVO */

.sidebar .nav-item.active,
.sidebar .submenu .nav-item.active,
.sidebar .sub-item.active {
    background: linear-gradient(135deg, #f8fafc 0%, #e5ebf1 100%) !important;
    color: #111827 !important;
    font-weight: 800 !important;
    border-left: 4px solid #dc2626 !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.18) !important;
}

.sidebar .nav-item.active *,
.sidebar .submenu .nav-item.active *,
.sidebar .sub-item.active * {
    color: #111827 !important;
}

.sidebar .nav-item.active i,
.sidebar .submenu .nav-item.active i,
.sidebar .sub-item.active i {
    color: #dc2626 !important;
}

.sidebar .nav-item.active:hover,
.sidebar .submenu .nav-item.active:hover,
.sidebar .sub-item.active:hover {
    background: linear-gradient(135deg, #ffffff 0%, #edf2f7 100%) !important;
    color: #111827 !important;
}
/* =========================================================
   FASE 3.1 · FLUJOS, FLOTA EN CARDS Y EXPORTACIONES
   ========================================================= */

.nav-item.has-submenu {
    position: relative;
}

.nav-item.has-submenu::after {
    content: '▾';
    margin-left: auto;
    opacity: .55;
    font-size: 11px;
    transition: transform .22s ease;
}

.nav-item.has-submenu.submenu-active::after {
    transform: rotate(180deg);
    opacity: .95;
}

.submenu {
    overflow: hidden;
    animation: submenuIn .22s ease;
}

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

.module-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.module-header-row .card-header {
    margin-bottom: 4px !important;
}

.module-subtitle {
    margin: 0;
    color: var(--text-200);
    font-size: 12px;
    font-weight: 600;
}

.fleet-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 10px;
}

.fleet-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(240,245,249,.76));
    border: 1px solid rgba(120,129,137,.20);
    box-shadow: 0 10px 24px rgba(30,32,34,.08);
    transition: var(--transition);
}

.fleet-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--primary-100), var(--accent-100));
}

.fleet-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(30,32,34,.14);
}

.fleet-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.fleet-type {
    display: block;
    color: var(--text-200);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.fleet-card h3 {
    margin: 0;
    font-size: 28px;
    letter-spacing: -.6px;
    color: var(--text-100);
}

.fleet-title {
    color: var(--text-200);
    font-weight: 800;
    margin-bottom: 14px;
}

.fleet-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.fleet-metric {
    background: rgba(201,214,223,.34);
    border: 1px solid rgba(120,129,137,.12);
    border-radius: 14px;
    padding: 10px;
    min-width: 0;
}

.fleet-metric span {
    display: block;
    color: var(--text-200);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.fleet-metric strong {
    display: block;
    color: var(--text-100);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 760px) {
    .module-header-row {
        flex-direction: column;
        align-items: stretch;
    }

    .module-header-row button {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   FIX DEFINITIVO SUBMENÚS · FASE 3.1
   Fuerza visibilidad real de hijos al desplegar.
   ========================================================= */
.sidebar .submenu {
    display: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding-left: 12px !important;
    margin: 2px 0 10px !important;
}

.sidebar .submenu.open,
.sidebar .submenu[style*="display: block"] {
    display: block !important;
}

.sidebar .submenu.open .nav-item,
.sidebar .submenu[style*="display: block"] .nav-item {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: rgba(240,245,249,.78) !important;
}

.sidebar .submenu .nav-item:hover:not(.active) {
    background: rgba(240,245,249,.10) !important;
    color: #ffffff !important;
}

.sidebar .nav-item.has-submenu.submenu-active {
    background: rgba(240,245,249,.07) !important;
    color: #ffffff !important;
}

/* =========================================================
   FASE 3.2 · Ajustes de flujo, liquidaciones y flota editable
   ========================================================= */

.fleet-actions {
    display:flex;
    align-items:center;
    gap:8px;
}

.fleet-edit-btn {
    width:34px;
    height:34px;
    padding:0 !important;
    border-radius:12px !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(30,32,34,.08) !important;
    color:var(--primary-100) !important;
    border:1px solid rgba(120,129,137,.20) !important;
    box-shadow:none !important;
}

.fleet-edit-btn:hover {
    background:var(--primary-100) !important;
    color:var(--primary-300) !important;
    transform:translateY(-2px);
}

.liq-operator-panel {
    background:rgba(255,255,255,.52);
    border:1px solid rgba(120,129,137,.20);
    border-radius:22px;
    padding:18px;
    margin-bottom:18px;
}

.liq-operator-head {
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
    margin-bottom:14px;
}

.section-eyebrow {
    display:inline-block;
    font-size:10px;
    font-weight:900;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--text-200);
    margin-bottom:4px;
}

.liq-operator-head h3 {
    margin:0;
    color:var(--text-100);
    font-size:18px;
    font-weight:900;
}

.liq-operator-head p {
    margin:4px 0 0;
    color:var(--text-200);
    font-size:12px;
}

.liq-actions {
    min-width:210px;
    justify-content:flex-end;
}

.operator-picker {
    display:grid !important;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:10px !important;
    background:transparent !important;
    border:none !important;
    padding:0 !important;
}

.operator-picker label,
.operator-check-card {
    width:100%;
    justify-content:flex-start;
    min-height:48px;
    border-radius:16px !important;
    background:rgba(240,245,249,.92) !important;
    border:1px solid rgba(120,129,137,.22) !important;
    font-weight:800;
}

.operator-check-card input {
    width:auto !important;
}

.operator-check-card span {
    display:flex;
    align-items:center;
    gap:8px;
}

.operator-check-card:hover {
    background:#fff !important;
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(30,32,34,.10);
}

#liqResumenCards.grid-3 {
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}

.modal-box h3 {
    color:var(--text-100);
    font-weight:900;
    margin-bottom:18px;
}

/* ===== FASE 3.3 AJUSTES FUNCIONALES ===== */
.sidebar-toggle{position:fixed;top:18px;left:calc(var(--sidebar-width,286px) + 16px);z-index:250;background:#1E2022!important;color:#F0F5F9!important;width:42px;height:42px;border-radius:14px!important;box-shadow:0 10px 24px rgba(30,32,34,.22)!important}
body.sidebar-collapsed .sidebar{transform:translateX(-100%)}
body.sidebar-collapsed .main-content{margin-left:0!important;width:100vw!important}
body.sidebar-collapsed .sidebar-toggle{left:16px}

/* ---------- FASE 7: NAVEGACION Y FLUIDEZ ---------- */
.sidebar .nav-item,
.sidebar .submenu .nav-item {
    color: rgba(255,255,255,.86) !important;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.sidebar .nav-item:hover,
.sidebar .submenu .nav-item:hover {
    color: #fff !important;
    background: rgba(255,255,255,.13) !important;
    transform: translateX(3px);
}

.sidebar .nav-item.active,
.sidebar .submenu .nav-item.active,
.sidebar .sub-item.active {
    color: #111827 !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
    font-weight: 800 !important;
}

.sidebar .nav-item.active *,
.sidebar .submenu .nav-item.active *,
.sidebar .sub-item.active * {
    color: #111827 !important;
}

.sidebar .nav-item.has-submenu.submenu-active {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--primary-100);
}

.sidebar .nav-item.has-submenu.submenu-active * {
    color: #fff !important;
}

.page {
    animation: pageFadeIn .18s ease;
}

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

select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #52616b 50%),
        linear-gradient(135deg, #52616b 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 36px !important;
}

.modal-overlay {
    backdrop-filter: blur(8px);
    background: rgba(15, 23, 42, .45) !important;
}

.modal-box {
    animation: modalIn .2s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.permissions-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) repeat(4, 82px);
    gap: 1px;
    background: #d7dee6;
    border: 1px solid #d7dee6;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 16px;
}
.permissions-grid > div,
.permissions-grid > label {
    background: #fff;
    padding: 9px 10px;
    min-height: 38px;
}
.permissions-grid .perm-head {
    background: #0f6684;
    color: #fff;
    font-weight: 800;
    text-align: center;
}
.perm-check {
    display:flex;
    justify-content:center;
    align-items:center;
}
.perm-check input {
    width:18px;
    height:18px;
}
.status-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.4px}
.status-activo{background:#d9f2e6;color:#0f6b43}.status-baja{background:#ffe0e0;color:#9b1c1c}.status-suspendido{background:#fff1cc;color:#8a5a00}.status-documentos-vencidos{background:#e9d5ff;color:#6b21a5}.status-default{background:#e1e4e6;color:#52616B}
.operator-check-card{min-width:220px;justify-content:flex-start!important;border-radius:18px!important}.operator-check-card input{width:auto!important}.operator-check-card span{display:flex;align-items:center;gap:8px}
.modal-box.wide-modal{max-width:1180px!important}
.table-filter-row th {
    top: 39px;
    background: rgba(240,245,249,.98) !important;
    padding: 6px !important;
}
.table-filter-input {
    width: 100% !important;
    min-width: 96px;
    padding: 6px 8px !important;
    font-size: 10px !important;
    border-radius: 8px !important;
}

/* FASE 8.1 - Redisenio ejecutivo Automoves */
:root{--primary-100:#910311;--primary-200:#6f020d;--primary-300:#f8e8ea;--accent-100:#2b3036;--accent-200:#eef1f4;--text-100:#17191d;--text-200:#5e6670;--bg-100:#ffffff;--bg-200:#edf1f5;--bg-300:#d7dde4;--success:#147a52;--warning:#b7791f;--danger:#b4232c;--info:#314b68;--shadow:0 18px 44px rgba(25,31,38,.11);--radius:8px;--sidebar-width:292px;--sidebar-peek:18px;--transition:all .22s cubic-bezier(.2,.8,.2,1)}
body{background:linear-gradient(135deg,#f4f6f8 0%,#e7edf2 100%)!important;color:var(--text-100)!important}
.login-overlay-modern{background:linear-gradient(135deg,rgba(145,3,17,.94),rgba(42,45,50,.96)),#111827!important}.login-bg-shape{display:none!important}.login-card-modern{border-radius:10px!important;box-shadow:0 32px 90px rgba(17,24,39,.38)!important}.login-brand-panel{background:linear-gradient(145deg,#910311,#2b3036)!important}.login-brand-panel::after{border-radius:0!important;transform:rotate(16deg);border-color:rgba(255,255,255,.18)!important}.login-logo-box,.login-brand-footer span,.login-pill,.login-input-group input{border-radius:6px!important}.login-input-group input:focus{box-shadow:0 0 0 3px rgba(145,3,17,.12)!important;border-color:#910311!important}
.sidebar{background:linear-gradient(180deg,#191d22 0%,#242a30 52%,#111418 100%)!important;border-right:1px solid rgba(255,255,255,.08)!important;box-shadow:12px 0 40px rgba(17,24,39,.26)!important;transform:translateX(calc(-1 * (var(--sidebar-width) - var(--sidebar-peek))))!important;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease!important}
.sidebar:hover,.sidebar:focus-within,body.sidebar-pinned .sidebar{transform:translateX(0)!important}.sidebar::after{content:"";position:fixed;top:0;right:-1px;width:3px;height:100%;background:#910311;box-shadow:0 0 18px rgba(145,3,17,.72)}
.sidebar-header{padding:18px 18px 12px!important;border-bottom:1px solid rgba(255,255,255,.08)!important;text-align:left!important;display:flex!important;align-items:center!important;gap:10px!important}.sidebar-mark{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:#910311;color:#fff;font-weight:900;border-radius:6px;letter-spacing:.5px}.sidebar-title{color:#f8fafc;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.8px}.sidebar-user{border-radius:6px!important;background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.1)!important}.nav-section-title{color:#9aa3ad!important;letter-spacing:1.4px!important}
.sidebar .nav-item,.sidebar .submenu .nav-item{border-radius:6px!important;border:1px solid transparent;color:#d6dbe1!important;transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease!important}.sidebar .nav-item:hover:not(.active),.sidebar .submenu .nav-item:hover:not(.active){background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.1)!important;transform:translateX(3px)!important}.sidebar .nav-item.active,.sidebar .submenu .nav-item.active,.sidebar .sub-item.active{background:#910311!important;color:#fff!important;box-shadow:0 10px 22px rgba(145,3,17,.28)!important}.sidebar .nav-item.has-submenu.submenu-active{background:rgba(145,3,17,.2)!important;border-color:rgba(145,3,17,.32)!important}.submenu{border-left:1px solid rgba(255,255,255,.08);margin-left:20px!important;padding-left:8px!important}
.main-content{margin-left:var(--sidebar-peek)!important;width:calc(100vw - var(--sidebar-peek))!important;padding:24px 28px!important;transition:margin-left .28s cubic-bezier(.2,.8,.2,1),width .28s cubic-bezier(.2,.8,.2,1)!important}.sidebar:hover ~ .main-content,body.sidebar-pinned .main-content{margin-left:var(--sidebar-width)!important;width:calc(100vw - var(--sidebar-width))!important}.sidebar-toggle{left:32px!important;top:16px!important;width:42px!important;height:42px!important;border-radius:6px!important;background:#910311!important;color:#fff!important}.sidebar:hover ~ .sidebar-toggle,body.sidebar-pinned .sidebar-toggle{left:calc(var(--sidebar-width) + 14px)!important}
.page{animation:pageSlideFade .2s cubic-bezier(.2,.8,.2,1)!important}@keyframes pageSlideFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.executive-home{min-height:calc(100vh - 48px);display:flex;flex-direction:column;justify-content:center;gap:34px;padding:7vh 7vw;background:linear-gradient(110deg,rgba(255,255,255,.96),rgba(255,255,255,.84)),linear-gradient(135deg,rgba(145,3,17,.12),rgba(43,48,54,.1));border:1px solid rgba(43,48,54,.08);box-shadow:var(--shadow)}.executive-home-brand{display:flex;align-items:center;gap:28px}.executive-home-brand img{width:min(240px,28vw);max-height:132px;object-fit:contain;background:#fff;border:1px solid #e1e5ea;padding:18px;border-radius:8px;box-shadow:0 18px 45px rgba(17,24,39,.12)}.executive-home h1{font-size:clamp(38px,6vw,74px);line-height:1;letter-spacing:0;color:#17191d;margin:0 0 12px;font-weight:900}.executive-home p{font-size:20px;color:#5e6670;font-weight:600}.executive-home-meta{display:flex;flex-wrap:wrap;gap:10px}.executive-home-meta span{border:1px solid #cfd6df;border-left:4px solid #910311;padding:10px 14px;background:#fff;font-weight:800;color:#2b3036;border-radius:4px}
.card,.kpi-box,.modal-box{border-radius:8px!important;background:var(--bg-100)!important;border:1px solid rgba(43,48,54,.09)!important;box-shadow:var(--shadow)!important}.card:hover,.kpi-box:hover{transform:translateY(-2px)!important;box-shadow:0 22px 50px rgba(25,31,38,.13)!important}.card-header{border-left:4px solid #910311!important;color:var(--text-100)!important;letter-spacing:0!important}.card-header i{color:#910311!important}
button,.btn-primary,.btn-secondary,.btn-success,.btn-danger,.btn-info,.btn-warning{border-radius:6px!important;box-shadow:none!important;text-transform:none!important;letter-spacing:0!important;transition:background .18s ease,transform .18s ease,box-shadow .18s ease!important}.btn-primary{background:#910311!important;color:#fff!important}.btn-primary:hover{background:#6f020d!important}.btn-secondary,.btn-info{background:#2b3036!important;color:#fff!important}.btn-success{background:#147a52!important;color:#fff!important}.btn-warning{background:#b7791f!important;color:#fff!important}.btn-danger{background:#b4232c!important;color:#fff!important}button:hover,.btn-primary:hover,.btn-secondary:hover,.btn-success:hover,.btn-danger:hover,.btn-info:hover,.btn-warning:hover{transform:translateY(-1px)!important;box-shadow:0 10px 18px rgba(17,24,39,.14)!important}
input,select,textarea{border-radius:6px!important;border:1px solid #cfd6df!important;background:var(--bg-100)!important;color:var(--text-100)!important;}input:focus,select:focus,textarea:focus{border-color:#910311!important;box-shadow:0 0 0 3px rgba(145,3,17,.1)!important;outline:none!important}.filtro-bar{border-radius:8px!important;border:1px solid #d7dde4!important;background:var(--bg-200)!important}.table-container{border-radius:8px!important;border:1px solid #d7dde4;background:var(--bg-100)}table{border-collapse:separate!important;border-spacing:0!important}thead th{background:#2b3036!important;color:#fff!important;border-color:#2b3036!important}th,td{border-color:#e0e5eb!important;color:var(--text-100)!important;}tbody tr:hover td{background:var(--bg-200)!important}.kpi-box{border-bottom:3px solid #910311!important}.kpi-number{color:var(--text-100)!important}.badge,.status-pill{border-radius:4px!important}.modal-overlay{backdrop-filter:blur(5px);background:rgba(17,24,39,.46)!important}.modal-box{border-radius:8px!important}.toast{border-radius:8px!important;box-shadow:0 18px 36px rgba(17,24,39,.2)!important}
.system-alert{padding:12px 14px;border-radius:6px;margin:12px 0;border:1px solid #ecd08a;background:#fff8e6;color:#66420b}.inline-editor{box-shadow:none!important;border:1px solid #d7dde4!important}
@media (max-width:760px){.sidebar{transform:translateX(-100%)!important}.sidebar:hover,.sidebar:focus-within,body.sidebar-pinned .sidebar{transform:translateX(0)!important}.main-content{margin-left:0!important;width:100vw!important;padding:18px!important}.executive-home-brand{align-items:flex-start;flex-direction:column}.executive-home-brand img{width:180px}}

/* FASE 8.2 - Sidebar fijo con flecha dinamica */
body:not(.sidebar-collapsed) .sidebar,
body:not(.sidebar-collapsed) .sidebar:hover,
body:not(.sidebar-collapsed) .sidebar:focus-within {
    transform: translateX(0) !important;
}

body:not(.sidebar-collapsed) .main-content,
body:not(.sidebar-collapsed) .sidebar:hover ~ .main-content,
body:not(.sidebar-collapsed) .sidebar:focus-within ~ .main-content {
    margin-left: var(--sidebar-width) !important;
    width: calc(100vw - var(--sidebar-width)) !important;
}

body:not(.sidebar-collapsed) .sidebar-toggle,
body:not(.sidebar-collapsed) .sidebar:hover ~ .sidebar-toggle,
body:not(.sidebar-collapsed) .sidebar:focus-within ~ .sidebar-toggle {
    left: calc(var(--sidebar-width) + 14px) !important;
}

body.sidebar-collapsed .sidebar,
body.sidebar-collapsed .sidebar:hover,
body.sidebar-collapsed .sidebar:focus-within {
    transform: translateX(-100%) !important;
}

body.sidebar-collapsed .main-content,
body.sidebar-collapsed .sidebar:hover ~ .main-content,
body.sidebar-collapsed .sidebar:focus-within ~ .main-content {
    margin-left: 0 !important;
    width: 100vw !important;
}

body.sidebar-collapsed .sidebar-toggle,
body.sidebar-collapsed .sidebar:hover ~ .sidebar-toggle,
body.sidebar-collapsed .sidebar:focus-within ~ .sidebar-toggle {
    left: 16px !important;
}

.sidebar-toggle.in-menu-toggle {
    position: static !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    margin-left: auto !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    color: #fff !important;
    box-shadow: none !important;
    z-index: auto !important;
}

body.sidebar-collapsed .sidebar-toggle.in-menu-toggle {
    position: fixed !important;
    top: 16px !important;
    left: 16px !important;
    z-index: 260 !important;
    background: #910311 !important;
}

.inline-form-panel {
    border: 1px solid #d7dde4;
    background: #f7f9fb;
    border-radius: 8px;
    padding: 16px;
    margin: 14px 0 18px;
}

body.tablas-compactas table {
    font-size: 11px;
}

body.tablas-compactas th,
body.tablas-compactas td {
    padding: 7px 6px;
}

/* Revision UI: encabezados mas limpios y sin bloque rojo junto al titulo */
.card-header {
    border-left: 0 !important;
    padding-left: 0 !important;
    gap: 10px !important;
}

.card-header i {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #910311 !important;
}

.main-content h2::before,
.card-header::before,
.module-header-row .card-header::before {
    display: none !important;
    content: none !important;
}

.table-container {
    max-height: min(62vh, 620px) !important;
}

.bank-match-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bank-concept-input {
    min-width: 220px;
}

.match-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    background: #eef1f4;
    color: #2b3036;
    font-size: 11px;
    font-weight: 700;
}

.filter-modal-panel {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2300 !important;
    margin: 0 !important;
    padding: min(8vh, 54px) max(22px, calc((100vw - 720px) / 2)) !important;
    background: rgba(17,24,39,.48) !important;
    backdrop-filter: blur(8px);
    border: 0 !important;
    border-radius: 0 !important;
    align-content: flex-start;
    overflow-y: auto;
}

.filter-modal-panel.active {
    display: flex !important;
}

.filter-modal-panel > * {
    max-width: 720px;
}

.filter-modal-panel input,
.filter-modal-panel select,
.filter-modal-panel button {
    width: 100% !important;
    min-width: 0 !important;
}

.filter-modal-head {
    width: 100%;
    max-width: 720px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 18px;
    margin-bottom: 4px;
}

.filter-modal-head button {
    width: 38px !important;
    height: 38px !important;
    justify-content: center;
    padding: 0 !important;
}

/* Ajustes Operaciones 2026-05-14 */
.filter-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2290;
    background: rgba(17,24,39,.46);
    backdrop-filter: blur(5px);
}

.filter-modal-panel {
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(720px, calc(100vw - 32px)) !important;
    max-height: min(82vh, 680px) !important;
    padding: 18px !important;
    background: #fff !important;
    border: 1px solid rgba(43,48,54,.09) !important;
    border-radius: 8px !important;
    box-shadow: 0 24px 60px rgba(17,24,39,.28) !important;
    backdrop-filter: none !important;
    flex-direction: column;
    gap: 12px;
}

.filter-modal-panel.active {
    display: flex !important;
}

.filter-modal-head {
    color: var(--text-100) !important;
    max-width: none !important;
    margin-bottom: 2px !important;
}

.filter-modal-panel > * {
    max-width: none !important;
}

.filter-modal-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.filter-modal-actions button {
    width: auto !important;
    min-width: 118px !important;
}

/* Revision 2026-05-18: interfaz mas simple y fluida */
.sidebar-mark { display:none !important; }
.sidebar-header { justify-content:space-between !important; }
.sidebar-title { font-size:15px !important; color:#fff !important; }
.sidebar-user { word-break:break-word; font-size:11px !important; line-height:1.25; }
.sidebar-toggle.in-menu-toggle,
body.sidebar-collapsed .sidebar-toggle.in-menu-toggle {
    position:fixed !important;
    top:14px !important;
    left:calc(var(--sidebar-width) + 10px) !important;
    z-index:260 !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    border-radius:50% !important;
    background:#fff !important;
    color:#910311 !important;
    border:1px solid #d7dde4 !important;
    box-shadow:0 8px 18px rgba(17,24,39,.14) !important;
}
body.sidebar-collapsed .sidebar-toggle.in-menu-toggle { left:14px !important; }
.sidebar-toggle.in-menu-toggle i { color:inherit !important; background:transparent !important; }
.logout-nav { margin-top:10px; border-top:1px solid rgba(255,255,255,.1) !important; }
.page, .modal-box, .card, .kpi-box { animation:none !important; transition:none !important; }
.card:hover, .kpi-box:hover, button:hover { transform:none !important; }
.filter-modal-backdrop { pointer-events:auto; }
.filter-modal-panel { pointer-events:auto; }
#tableroProgramacionesPage #filtrosProgramaciones,
#tableroProgramacionesPage > .card > .btn-group,
#tableroProgramacionesPage #tablaProgramarViajes { display:none !important; }
#fianzasPlataformasPage > .card > .card-header,
#fianzasPlataformasPage > .card > .grid-4,
#fianzasPlataformasPage > .card > button.btn-primary,
#fianzasPlataformasPage #fianzasResumen { display:none !important; }
.fianzas-clean-header { margin-bottom:12px; }
.table-container table { min-width:100%; }

body.modal-open .main-content,
body.modal-open .sidebar {
    pointer-events: none;
}

body.modal-open .modal-overlay.active {
    pointer-events: auto;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.detail-field {
    border: 1px solid #d7dde4;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
}

.detail-field span {
    display: block;
    color: #66717e;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.detail-field strong {
    color: #17191d;
    font-size: 14px;
    word-break: break-word;
}

.fleet-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.fleet-view-btn {
    border: 0;
    border-radius: 6px;
    background: #2b3036;
    color: #fff;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.rh-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.rh-person-card {
    border: 1px solid #d7dde4;
    border-radius: 8px;
    background: #fff;
    padding: 14px;
}

.rh-person-card h3 {
    margin: 4px 0 6px;
    font-size: 16px;
}

.rh-card-meta {
    color: #66717e;
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 10px;
}

.rh-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Propuesta 2026-05-18: menu superior horizontal */
.sidebar {
    width: 100vw !important;
    height: 74px !important;
    min-height: 74px !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    transform: none !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 0 18px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
}

.sidebar::after,
.sidebar-toggle.in-menu-toggle,
body.sidebar-collapsed .sidebar-toggle.in-menu-toggle {
    display: none !important;
}

.sidebar-header {
    flex: 0 0 auto !important;
    height: 100% !important;
    padding: 0 14px 0 0 !important;
    border-bottom: 0 !important;
    border-right: 1px solid rgba(255,255,255,.1) !important;
}

.sidebar-title {
    white-space: nowrap !important;
}

.sidebar-user {
    flex: 0 0 auto !important;
    max-width: 230px !important;
    margin: 0 8px 0 0 !important;
    padding: 8px 10px !important;
}

.nav-section {
    display: none !important;
}

.sidebar .nav-item,
.sidebar .submenu .nav-item {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    white-space: nowrap !important;
    transform: none !important;
}

.sidebar .nav-item:hover,
.sidebar .submenu .nav-item:hover {
    transform: none !important;
}

.sidebar .nav-item.has-submenu::after {
    position: static !important;
    display: inline-block !important;
    margin-left: 8px !important;
    transform: none !important;
}

.sidebar .submenu {
    position: fixed !important;
    top: 72px !important;
    left: 18px !important;
    right: 18px !important;
    z-index: 2400 !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
    background: #242a30 !important;
    box-shadow: 0 18px 42px rgba(17,24,39,.22) !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, max-content)) !important;
    gap: 8px !important;
}

.sidebar .submenu.open,
.sidebar .submenu[style*="display: block"] {
    display: grid !important;
}

.main-content,
body:not(.sidebar-collapsed) .main-content,
body.sidebar-collapsed .main-content,
.sidebar:hover ~ .main-content,
body.sidebar-pinned .main-content {
    margin-left: 0 !important;
    width: 100vw !important;
    padding: 98px 28px 24px !important;
}

@media (max-width: 760px) {
    .sidebar {
        height: 66px !important;
        min-height: 66px !important;
        padding: 0 12px !important;
    }
    .sidebar-user {
        max-width: 170px !important;
    }
    .sidebar .submenu {
        top: 66px !important;
        left: 10px !important;
        right: 10px !important;
        grid-template-columns: 1fr !important;
    }
    .main-content,
    body:not(.sidebar-collapsed) .main-content,
    body.sidebar-collapsed .main-content {
        padding: 86px 14px 18px !important;
    }
}

/* Override final: arbol superior compacto sin desplazamiento de pantalla */
.top-menu.sidebar,
body:not(.sidebar-collapsed) .top-menu.sidebar,
body.sidebar-collapsed .top-menu.sidebar,
.top-menu.sidebar:hover,
.top-menu.sidebar:focus-within {
    height:64px !important;
    min-height:64px !important;
    transform:none !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    padding:0 14px !important;
}

.top-menu .sidebar-header,
.top-menu .sidebar-title,
.top-menu .sidebar-toggle { display:none !important; }

.top-menu > .submenu.nav-tree-root {
    position:fixed !important;
    top:68px !important;
    left:16px !important;
    right:auto !important;
    width:min(380px, calc(100vw - 32px)) !important;
    max-height:calc(100vh - 90px) !important;
    overflow-y:auto !important;
    display:none !important;
    grid-template-columns:1fr !important;
    gap:4px !important;
    padding:10px !important;
}

.top-menu > .submenu.nav-tree-root.open,
.top-menu > .submenu.nav-tree-root[style*="display: block"] { display:grid !important; }

.top-menu .submenu.nav-tree-root .submenu {
    position:static !important;
    inset:auto !important;
    width:auto !important;
    display:none !important;
    padding:2px 0 6px 14px !important;
    margin:0 0 0 8px !important;
    border:0 !important;
    border-left:1px solid rgba(255,255,255,.14) !important;
    background:transparent !important;
    box-shadow:none !important;
    grid-template-columns:1fr !important;
}

.top-menu .submenu.nav-tree-root .submenu.open,
.top-menu .submenu.nav-tree-root .submenu[style*="display: block"] { display:block !important; }

.top-menu .submenu.nav-tree-root .nav-item {
    width:100% !important;
    min-height:34px !important;
    display:flex !important;
    align-items:center !important;
    padding:8px 10px !important;
}

.top-menu .nav-item:hover,
.top-menu .submenu .nav-item:hover { transform:none !important; }

.main-content,
body:not(.sidebar-collapsed) .main-content,
body.sidebar-collapsed .main-content,
.sidebar:hover ~ .main-content,
body.sidebar-pinned .main-content {
    margin-left:0 !important;
    width:100vw !important;
    padding-top:88px !important;
}

/* Revision terminal 2026-05-18: estilo formal y menu sin empuje lateral */
:root{--primary-100:#8f0712;--primary-200:#5f050c;--primary-300:#f3dde0;--accent-100:#20262d;--accent-200:#c8ced6;--text-100:#171b20;--text-200:#4d5661;--bg-100:#fff;--bg-200:#e8ecef;--bg-300:#cbd2da;--success:#0f6f46;--warning:#9a6400;--danger:#a61e2b;--info:#28445f;--radius:3px;--radius-lg:4px;--shadow:0 8px 18px rgba(19,26,34,.12);--shadow-soft:0 4px 10px rgba(19,26,34,.08);--transition:none}
body{background:#e8ecef!important;color:var(--text-100)!important;font-family:Arial,Helvetica,sans-serif!important}
*{letter-spacing:0!important}
.login-overlay-modern{background:#11161c!important}.login-bg-shape,.login-brand-panel::after{display:none!important}.login-card-modern,.login-logo-box,.login-pill,.login-input-group input,.login-btn-modern{border-radius:3px!important}.login-card-modern{border:1px solid #3b434d!important;box-shadow:0 18px 42px rgba(0,0,0,.42)!important}.login-brand-panel{background:#1d232a!important;border-right:6px solid var(--primary-100)!important}.login-form-panel{background:#f4f6f8!important}.login-pill{background:#dfe4ea!important;border:1px solid #c4cbd3!important;color:#171b20!important}
.top-menu.sidebar,body:not(.sidebar-collapsed) .top-menu.sidebar,body.sidebar-collapsed .top-menu.sidebar,.top-menu.sidebar:hover,.top-menu.sidebar:focus-within{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100vw!important;height:auto!important;min-height:64px!important;transform:none!important;transition:none!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;gap:2px!important;padding:8px 10px!important;overflow:visible!important;background:#151a20!important;border-right:0!important;border-bottom:3px solid var(--primary-100)!important;box-shadow:0 4px 12px rgba(0,0,0,.22)!important; z-index: 1000 !important;}
.top-menu.sidebar::after,.top-menu .sidebar-header,.top-menu .sidebar-title,.top-menu .sidebar-toggle,body.sidebar-collapsed .sidebar-toggle.in-menu-toggle{display:none!important}
.top-menu .sidebar-user{height:38px!important;max-width:190px!important;margin:0 8px 0 0!important;padding:7px 10px!important;border-radius:2px!important;border:1px solid #3b4652!important;background:#20262d!important;color:#dce2e8!important;box-shadow:none!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.top-menu .sidebar-user i{color:#adb7c2!important}
.top-menu>.nav-item{height:38px!important;min-width:max-content!important;margin:0!important;padding:0 11px!important;border-radius:2px!important;border:1px solid transparent!important;background:transparent!important;color:#d9dee4!important;box-shadow:none!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase!important;transform:none!important;transition:none!important}.top-menu>.nav-item i{color:#aeb8c3!important;font-size:13px!important}
.top-menu>.nav-item:hover,.top-menu>.nav-item:hover:not(.active),.top-menu>.nav-item.submenu-active,.top-menu>.nav-item.active{transform:none!important;background:#262d35!important;border-color:#4b5663!important;color:#fff!important}.top-menu>.nav-item.active{border-left:0!important;border-bottom:2px solid var(--primary-100)!important}
.top-menu .nav-item.has-submenu::after{content:"\25BE"!important;margin-left:8px!important;color:#9ea8b3!important;transform:none!important}.top-menu .nav-item.has-submenu.submenu-active::after{color:#fff!important;transform:none!important}
.top-menu>.submenu.nav-tree-root{position:fixed!important;top:100%!important;margin-top: 2px !important; right:auto!important;width:max-content!important;min-width:300px!important;max-width:800px!important;max-height:calc(100vh - 84px)!important;overflow:auto!important;display:none!important;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))!important;gap:16px!important;padding:16px!important;border:1px solid #323b45!important;border-top:3px solid var(--primary-100)!important;border-radius:8px!important;background:#20262d!important;box-shadow:0 16px 34px rgba(0,0,0,.28)!important;animation:none!important}
.top-menu>.submenu.nav-tree-root.open,.top-menu>.submenu.nav-tree-root[style*="display: block"]{display:grid!important}
.top-menu .submenu.nav-tree-root .nav-item{width:100%!important;min-height:32px!important;margin:0!important;padding:8px 9px!important;border-radius:2px!important;border:1px solid transparent!important;background:transparent!important;color:#dce2e8!important;font-size:12px!important;font-weight:700!important;text-transform:none!important;transform:none!important;box-shadow:none!important}
.top-menu .submenu.nav-tree-root .nav-item:hover,.top-menu .submenu.nav-tree-root .nav-item.active,.top-menu .submenu.nav-tree-root .nav-item.submenu-active{background:#2d353e!important;border-color:#46515d!important;color:#fff!important;transform:none!important}
.top-menu .submenu.nav-tree-root .submenu{position:static!important;inset:auto!important;width:auto!important;max-height:none!important;display:none!important;margin:2px 0 4px 8px!important;padding:2px 0 2px 9px!important;border:0!important;border-left:2px solid #4b5663!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.top-menu .submenu.nav-tree-root .submenu.open,.top-menu .submenu.nav-tree-root .submenu[style*="display: block"]{display:block!important}
.main-content,body:not(.sidebar-collapsed) .main-content,body.sidebar-collapsed .main-content,.sidebar:hover~.main-content,.sidebar:focus-within~.main-content,body.sidebar-pinned .main-content{margin-left:0!important;width:100vw!important;height:100vh!important;padding:78px 24px 24px!important;background:#e8ecef!important;transition:none!important}
.page,.card,.kpi-card,.kpi-box,.fleet-card,.modal-box,button,.btn-primary,.btn-secondary,.btn-success,.btn-danger,.btn-info,.btn-warning{animation:none!important;transition:none!important}
.card,.kpi-card,.kpi-box,.fleet-card,.modal-box,.inline-form-panel,.filter-modal-panel,.table-container,.filtro-bar,.seleccion-multiple,.alert-item,.toast,.system-alert{border-radius:3px!important;box-shadow:var(--shadow-soft)!important}
.card,.kpi-card,.kpi-box,.fleet-card,.modal-box{background:var(--bg-100)!important;border:1px solid rgba(17,24,39,0.08)!important}
.card:hover,.kpi-card:hover,.kpi-box:hover,.fleet-card:hover,button:hover,.btn-primary:hover,.btn-secondary:hover,.btn-success:hover,.btn-danger:hover,.btn-info:hover,.btn-warning:hover,.operator-check-card:hover{transform:none!important}
.card-header{min-height:34px!important;margin-bottom:14px!important;padding:0 0 0 10px!important;border-left:4px solid var(--primary-100)!important;color:var(--text-100)!important;font-size:15px!important;font-weight:800!important;text-transform:uppercase!important}.card-header i{width:28px!important;height:28px!important;border-radius:2px!important;background:#20262d!important;color:#fff!important}
.module-subtitle{color:var(--text-200)!important;font-weight:700!important}label{color:var(--text-200)!important;font-size:10px!important;font-weight:800!important;text-transform:uppercase!important}
input,select,textarea{border-radius:2px!important;border:1px solid #aeb8c3!important;background:var(--bg-100)!important;color:var(--text-100)!important;box-shadow:inset 0 1px 2px rgba(19,26,34,.06)!important}input:focus,select:focus,textarea:focus{border-color:var(--primary-100)!important;box-shadow:0 0 0 2px rgba(143,7,18,.14)!important}
button,.btn-primary,.btn-secondary,.btn-success,.btn-danger,.btn-info,.btn-warning{border-radius:2px!important;border:1px solid transparent!important;min-height:34px;font-size:12px!important;font-weight:800!important;text-transform:uppercase!important;box-shadow:none!important}.btn-primary{background:var(--primary-100)!important;border-color:var(--primary-200)!important;color:#fff!important}.btn-secondary,.btn-info{background:#20262d!important;border-color:#14191f!important;color:#fff!important}.btn-success{background:var(--success)!important;border-color:#0b5635!important}.btn-warning{background:var(--warning)!important;border-color:#744b00!important}.btn-danger{background:var(--danger)!important;border-color:#7d1620!important}
.filtro-bar,.seleccion-multiple,.inline-form-panel{background:var(--bg-100)!important;border:1px solid var(--bg-300)!important}.table-container{background:var(--bg-100)!important;border:1px solid var(--bg-300)!important; border-radius: 12px !important; overflow: hidden; }table{border-collapse:collapse!important;font-size:13px!important; width: 100%; }thead th,th{background:var(--bg-200)!important;color:var(--text-100)!important;border-bottom:2px solid var(--bg-300)!important;border-right:none !important;border-left:none !important;border-top:none !important;font-size:11px!important;font-weight:600!important;text-transform:uppercase!important; padding: 14px 12px !important; letter-spacing: 0.5px;}td{border-bottom:1px solid var(--bg-300)!important;border-right:none !important;border-left:none !important;border-top:none !important;color:var(--text-100)!important; padding: 14px 12px !important; transition: background 0.2s;}tbody tr:hover td,tr:hover{background:rgba(255,255,255,0.03)!important}
.kpi-box,.kpi-card{border-top:4px solid var(--primary-100)!important; background: var(--bg-100) !important; color: var(--text-100) !important; border-radius: 16px !important;}.kpi-card::before,.kpi-box::before,.fleet-card::before{display:none!important}.kpi-number,.kpi-value{color:var(--text-100)!important}.kpi-label,.fleet-type{color:var(--text-200)!important;text-transform:uppercase!important; letter-spacing: 1px; font-weight: 600;}.badge,.status-pill{border-radius:6px!important;border:none !important; background: rgba(59, 130, 246, 0.2); color: #60a5fa; font-weight:700!important; padding: 4px 10px;}
.system-alert,.alert-item{border-left:5px solid var(--warning)!important;background:#fff8e8!important;color:#4c3300!important}.toast{border-left:5px solid #fff!important;background:#20262d!important;color:#fff!important}.toast.success{background:var(--success)!important}.toast.error{background:var(--danger)!important}.toast.warning{background:var(--warning)!important}.toast.info{background:var(--info)!important}.global-loader{background:rgba(17,22,28,.62)!important;backdrop-filter:none!important}.loader-box{border-radius:3px!important;border:1px solid #cbd2da!important;color:#171b20!important}
@media (max-width:760px){.top-menu.sidebar,body:not(.sidebar-collapsed) .top-menu.sidebar,body.sidebar-collapsed .top-menu.sidebar{height:56px!important;min-height:56px!important;padding:0 8px!important}.top-menu .sidebar-user{max-width:150px!important}.top-menu>.submenu.nav-tree-root{top:62px!important;left:10px!important;width:calc(100vw - 20px)!important}.main-content,body:not(.sidebar-collapsed) .main-content,body.sidebar-collapsed .main-content{padding:72px 12px 16px!important}}

/* Candado final: el menu superior nunca empuja el area de trabajo */
body:not(.sidebar-collapsed) .top-menu.sidebar:hover ~ .main-content,
body:not(.sidebar-collapsed) .top-menu.sidebar:focus-within ~ .main-content,
body.sidebar-collapsed .top-menu.sidebar:hover ~ .main-content,
body.sidebar-collapsed .top-menu.sidebar:focus-within ~ .main-content,
body:not(.sidebar-collapsed) .sidebar:hover ~ .main-content,
body:not(.sidebar-collapsed) .sidebar:focus-within ~ .main-content,
body.sidebar-collapsed .sidebar:hover ~ .main-content,
body.sidebar-collapsed .sidebar:focus-within ~ .main-content,
.top-menu.sidebar:hover ~ .main-content,
.top-menu.sidebar:focus-within ~ .main-content,
.sidebar:hover ~ .main-content,
.sidebar:focus-within ~ .main-content {
    margin-left:0 !important;
    width:100vw !important;
    padding:78px 24px 24px !important;
    transform:none !important;
}

.flota-tabs {
    display:flex;
    gap:6px;
    border-bottom:1px solid #aeb8c3;
    margin-top:8px;
}

.flota-tabs button {
    border-radius:2px 2px 0 0 !important;
    background:#dfe4ea !important;
    color:#20262d !important;
    border:1px solid #aeb8c3 !important;
    border-bottom:0 !important;
}

.flota-tabs button.active {
    background:var(--bg-100) !important;
    color:var(--primary-100) !important;
    border-bottom: 2px solid var(--primary-100) !important;
}

/* ====== CORPORATE ORGANIC THEME OVERRIDES ====== */
:root {
    --corp-red: #DC2626;
    --corp-red-hover: #B91C1C;
    --corp-bg: #F3F4F6;
    --corp-card: #FFFFFF;
    --corp-border: #E5E7EB;
    --corp-text: #111827;
    --corp-text-sec: #4B5563;
    --corp-shadow: 0 10px 25px rgba(0,0,0,0.04);
}

body, html, .main-content { background: var(--corp-bg) !important; color: var(--corp-text) !important; font-family: 'Inter', sans-serif !important; }

/* Animaciones Fluidas */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.card, .kpi-card, .kpi-box, .fleet-card, .modal-box, .filter-modal-panel, .inline-form-panel { 
    background: var(--corp-card) !important; 
    border: 1px solid var(--corp-border) !important; 
    box-shadow: var(--corp-shadow) !important; 
    color: var(--corp-text) !important; 
    border-radius: 16px !important; 
    animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.top-menu, .sidebar { 
    background: var(--corp-card) !important; 
    border-bottom: 1px solid var(--corp-border) !important; 
    border-right: 1px solid var(--corp-border) !important; 
    color: var(--corp-text) !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
}
.top-menu .brand, .top-menu h1, .sidebar-user-name, .sidebar-role, .nav-item { color: var(--corp-text-sec) !important; font-weight: 600 !important; }
.top-menu > .nav-item.active { border-bottom: 3px solid var(--corp-red) !important; color: var(--corp-red) !important; background: transparent !important;}
.top-menu > .nav-item:hover { color: var(--corp-red) !important; background: #FEF2F2 !important; border-radius: 8px !important; }

h1, h2, h3, h4, h5, h6 { color: var(--corp-text) !important; font-weight: 700 !important; letter-spacing: -0.5px !important; }
p, label, td, th { color: var(--corp-text-sec) !important; }

.kpi-box, .kpi-card { border-top: 4px solid var(--corp-red) !important; border-bottom: none !important; }

/* Botones Orgánicos */
button, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-info, .btn-warning {
    border-radius: 50px !important; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
}

.btn-primary { background: var(--corp-red) !important; color: #fff !important; border: none !important; box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25) !important; }
.btn-primary:hover { background: var(--corp-red-hover) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35) !important; }

.btn-secondary, .btn-info { background: var(--corp-bg) !important; color: var(--corp-text) !important; border: 1px solid var(--corp-border) !important; box-shadow: none !important; }
.btn-secondary:hover { background: var(--corp-border) !important; transform: translateY(-2px) !important; color: var(--corp-text) !important; }

.btn-danger { background: #111827 !important; color: white !important; border: none !important; box-shadow: 0 4px 14px rgba(17, 24, 39, 0.15) !important;}
.btn-danger:hover { background: #000000 !important; transform: translateY(-2px) !important; }

.btn-success { background: #10b981 !important; color: white !important; border: none !important; }

input, select, textarea { background: #FFFFFF !important; color: var(--corp-text) !important; border: 1px solid var(--corp-border) !important; border-radius: 10px !important; transition: all 0.2s ease !important; }
input:focus, select:focus, textarea:focus { border-color: var(--corp-red) !important; box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1) !important; }

.table-container { background: #FFFFFF !important; border: 1px solid var(--corp-border) !important; border-radius: 12px !important; box-shadow: var(--corp-shadow) !important; }
table { border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important;}
thead th, th { background: #F9FAFB !important; color: var(--corp-text) !important; border-bottom: 2px solid var(--corp-border) !important; font-weight: 600 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; font-size: 11px !important;}
td { border-bottom: 1px solid var(--corp-border) !important; border-right: none !important; border-left: none !important; color: var(--corp-text-sec) !important; transition: background 0.2s ease !important; }
tbody tr:hover td, tr:hover { background: #F3F4F6 !important; cursor: pointer !important; color: var(--corp-text) !important;}

.badge, .status-pill { background: #F3F4F6 !important; color: var(--corp-text) !important; border: 1px solid var(--corp-border) !important; padding: 6px 12px !important; font-weight: 600 !important; border-radius: 50px !important; }
.badge-disp { background: #DCFCE7 !important; color: #16A34A !important; border-color: #BBF7D0 !important; }
.badge-taller { background: #FEF9C3 !important; color: #CA8A04 !important; border-color: #FEF08A !important; }
.badge-baja { background: #FEE2E2 !important; color: #DC2626 !important; border-color: #FECACA !important; }
.badge-ruta { background: #E0F2FE !important; color: #0284C7 !important; border-color: #BAE6FD !important; }

/* Submenu Dropdown fixes */
.top-menu>.submenu.nav-tree-root { background: #FFFFFF !important; border: 1px solid var(--corp-border) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important; border-radius: 16px !important; border-top: none !important; padding: 10px !important; }
.top-menu .submenu.nav-tree-root .nav-item { color: var(--corp-text-sec) !important; border-radius: 8px !important; transition: all 0.2s ease !important; }
.top-menu .submenu.nav-tree-root .nav-item:hover { background: #F3F4F6 !important; color: var(--corp-text) !important; }

/* Nuevos estilos para tabs en Módulo Llantas */

.tabs .tab { padding: 10px 20px; cursor: pointer; font-weight: 500; color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; }
.tabs .tab:hover { color: #0f172a; }
.tabs .tab.active { color: #2563eb; border-bottom-color: #2563eb; }

/* Nuevos estilos para tabs en Módulo Llantas y otros */
.tabs { display: flex; gap: 0px; margin-bottom: 20px; border-bottom: 1px solid #cbd5e1; }
.tabs .tab { padding: 10px 20px; cursor: pointer; font-weight: 600; color: #334155; background: #e2e8f0; border: 1px solid #cbd5e1; border-bottom: none; margin-bottom: -1px; transition: background 0.2s; border-radius: 2px 2px 0 0; }
.tabs .tab:hover { background: #cbd5e1; }
.tabs .tab.active { background: white; color: #991b1b; border-bottom: 3px solid #991b1b; }

/* --- RETOQUE VISUAL Y ANIMACIONES (OPTIMIZACION) --- */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-box, .filter-modal-panel, .dropdown-content, #floatingMassViajes {
    animation: fadeSlideUp 0.3s ease-out !important;
}
.modal-overlay.active {
    animation: fadeIn 0.2s ease-out !important;
}

button, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-info, .btn-warning {
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}
button:hover, .btn-primary:hover, .btn-secondary:hover, .btn-success:hover, .btn-danger:hover, .btn-info:hover, .btn-warning:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.05);
}

.table-container tbody tr {
    transition: background-color 0.15s ease !important;
}
.table-container tbody tr:hover td {
    background-color: var(--bg-300) !important;
}

#floatingMassViajes {
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
    border-radius: 12px !important;
}

/* MASS ACTION FLOATING MENU */
.floating-mass-action {
    display: none;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-200);
    padding: 12px 25px;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 9999;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--border-color);
    animation: fadeSlideUp 0.3s ease-out forwards;
}

.floating-mass-action.visible {
    display: flex;
}

/* PAGINATION DOTS */
.pagination-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    padding: 0 8px;
    font-size: 1.2rem;
    align-self: center;
    letter-spacing: 2px;
    opacity: 0.6;
}

/* ----- PREMIUM EXECUTIVE LOGIN REDESIGN ----- */
.login-overlay-modern { background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%) !important; }
.login-card-modern { background: #ffffff !important; border: none !important; border-radius: 16px !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 40px rgba(0,0,0,0.05) !important; overflow: hidden !important; }
.login-brand-panel { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important; border-right: none !important; position: relative !important; }
.login-brand-panel::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: radial-gradient(circle at top right, rgba(145, 3, 17, 0.15), transparent 60%) !important; }
.login-logo-box { background: #ffffff !important; padding: 15px !important; border-radius: 12px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important; display: inline-block !important; }
.login-logo-box img { filter: none !important; opacity: 1 !important; max-width: 140px !important; }
.login-brand-panel h1 { color: #f8fafc !important; font-weight: 800 !important; text-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; margin-top: 20px !important; }
.login-company { color: #cbd5e1 !important; font-weight: 600 !important; letter-spacing: 2px !important; }
.login-system { color: #94a3b8 !important; font-size: 0.95rem !important; line-height: 1.6 !important; }
.login-form-panel { background: #ffffff !important; padding: 50px 40px !important; }
.login-form-header h2 { color: #1e293b !important; font-weight: 800 !important; font-size: 2rem !important; margin-bottom: 8px !important; }
.login-form-header p { color: #64748b !important; font-size: 0.95rem !important; }
.login-pill { background: rgba(145, 3, 17, 0.1) !important; color: #910311 !important; border: 1px solid rgba(145, 3, 17, 0.2) !important; font-weight: 700 !important; border-radius: 20px !important; padding: 6px 14px !important; margin-bottom: 20px !important; display: inline-block !important; }
.login-input-group { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; transition: all 0.3s ease !important; margin-bottom: 16px !important; }
.login-input-group:focus-within { background: #ffffff !important; border-color: #910311 !important; box-shadow: 0 0 0 4px rgba(145, 3, 17, 0.1) !important; }
.login-input-group i { color: #94a3b8 !important; }
.login-input-group:focus-within i { color: #910311 !important; }
.login-input-group input { background: transparent !important; color: #1e293b !important; font-weight: 500 !important; }
.login-input-group input::placeholder { color: #94a3b8 !important; }
.login-btn-modern { background: linear-gradient(to right, #910311, #b91c2c) !important; color: #ffffff !important; font-weight: 700 !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(145, 3, 17, 0.3) !important; transition: all 0.3s ease !important; text-transform: uppercase !important; letter-spacing: 1px !important; padding: 14px !important; margin-top: 10px !important; }
.login-btn-modern:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(145, 3, 17, 0.4) !important; }
.login-copy { color: #94a3b8 !important; font-size: 0.85rem !important; margin-top: 30px !important; }