/**
 * ============================================================
 * LIMITLESS THEME - Design System Centralizado v1.0.0
 * limitLessSystem - Sistema de Gestion Integral DNFR
 * Policia Boliviana
 * ============================================================
 * Este archivo es el CENTRO de todo el sistema visual.
 * Todos los modulos presentes y futuros lo usan.
 * ============================================================
 * Author: SATORI SIDARTHA
 */

/* =============================================================
   SECCION 1 - VARIABLES CSS (Design Tokens)
   ============================================================= */
:root {
    /* --- Colores institucionales --- */
    --color-primario:        #FFC107;
    --color-primario-hover:  #FFD54F;
    --color-primario-dark:   #E6AC00;
    --color-primario-light:  rgba(255, 193, 7, 0.15);
    --color-secundario:      #10b981;
    --color-secundario-dark: #065f46;
    --color-secundario-light:rgba(16, 185, 129, 0.15);
    --color-peligro:         #ef4444;
    --color-peligro-dark:    #dc2626;
    --color-advertencia:     #f59e0b;
    --color-info:            #3b82f6;
    --color-info-light:      rgba(59, 130, 246, 0.15);
    --color-exito:           #10b981;

    /* --- Textos --- */
    --color-texto-principal: #FFC107;
    --color-texto-secundario:#cbd5e1;
    --color-texto-muted:     #94a3b8;
    --color-texto-blanco:    #f0f6fc;
    --color-texto-cuerpo:    #c9d1d9;

    /* --- Fondos dark theme --- */
    --fondo-base:            #0d1117;
    --fondo-card:            #161b22;
    --fondo-card-alt:        #1c2128;
    --fondo-sidebar:         #010409;
    --fondo-header:          #161b22;
    --fondo-modal:           #161b22;
    --fondo-input:           #0d1117;
    --fondo-tabla-header:    #010409;
    --fondo-tabla-hover:     rgba(255, 193, 7, 0.08);
    --fondo-tabla-stripe:    #1c2128;

    /* --- Bordes --- */
    --borde-color:           #21262d;
    --borde-accent:          #30363d;
    --borde-input:           #30363d;

    /* --- Colores sidebar groups (Fase 4) --- */
    --color-grupo-dashboards:#a371f7;
    --color-grupo-usuario:   #3fb950;
    --color-grupo-admin:     #da3633;
    --color-grupo-admin-hover:#f85149;

    /* --- Colores institucionales policia --- */
    --color-policia-azul:    #003366;
    --color-policia-azul-claro:#004080;
    --color-policia-dorado:  #FFD700;

    /* --- ITV colores --- */
    --color-itv-verde:       #059669;
    --color-itv-verde-claro: #d1fae5;
    --color-itv-verde-oscuro:#065f46;
    --color-itv-azul:        #2563eb;
    --color-itv-azul-claro:  #dbeafe;

    /* --- Tipografia --- */
    --font-family-base:      'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, sans-serif;
    --font-size-base:        1rem;
    --font-size-sm:          0.875rem;
    --font-size-lg:          1.125rem;
    --font-size-mensaje:     1.1rem;
    --font-size-label:       0.9rem;
    --font-weight-normal:    400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;
    --line-height-base:      1.6;

    /* --- Espaciado --- */
    --espaciado-xs:   0.25rem;
    --espaciado-sm:   0.5rem;
    --espaciado-md:   1rem;
    --espaciado-lg:   1.5rem;
    --espaciado-xl:   2rem;
    --espaciado-2xl:  3rem;

    /* --- Bordes (radios) --- */
    --radio-sm:       4px;
    --radio-md:       8px;
    --radio-lg:       12px;
    --radio-xl:       16px;
    --radio-full:     9999px;

    /* --- Sombras --- */
    --sombra-sm:      0 1px 3px rgba(0,0,0,0.4);
    --sombra-md:      0 4px 12px rgba(0,0,0,0.5);
    --sombra-lg:      0 8px 24px rgba(0,0,0,0.6);
    --sombra-dorada:  0 0 20px rgba(255,193,7,0.15);

    /* --- Transiciones --- */
    --transicion-rapida:  all 0.15s ease;
    --transicion-normal:  all 0.25s ease;
    --transicion-lenta:   all 0.4s ease;

    /* --- Z-index --- */
    --z-dropdown:     1000;
    --z-sticky:       1020;
    --z-modal:        1050;
    --z-toast:        1080;
    --z-tooltip:      1090;
    --z-overlay:      9999;
}

/* =============================================================
   SECCION 2 - RESET Y BASE
   ============================================================= */
body {
    font-family: var(--font-family-base);
    background-color: var(--fondo-base);
    color: var(--color-texto-cuerpo);
    line-height: var(--line-height-base);
}

/* --- Scrollbar personalizado (Webkit) --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--fondo-base); }
::-webkit-scrollbar-thumb { background-color: var(--borde-accent); border-radius: var(--radio-sm); }
::-webkit-scrollbar-thumb:hover { background-color: var(--color-texto-muted); }

/* --- Scrollbar Firefox --- */
* { scrollbar-width: thin; scrollbar-color: var(--borde-accent) var(--fondo-base); }

/* --- Seleccion de texto --- */
::selection { background-color: var(--color-primario); color: #000; }
::-moz-selection { background-color: var(--color-primario); color: #000; }

/* --- Links globales --- */
a { color: var(--color-secundario); transition: var(--transicion-rapida); }
a:hover { color: var(--color-primario); }

/* --- HR y bordes --- */
hr { border-color: var(--borde-color); opacity: 1; }
.border-top { border-color: var(--borde-color) !important; }
.text-muted { color: var(--color-texto-muted) !important; }

/* =============================================================
   SECCION 3 - LAYOUT (AdminLTE overrides)
   ============================================================= */

/* --- Sidebar --- */
.main-sidebar {
    background: var(--fondo-sidebar) !important;
    border-right: 1px solid var(--borde-color);
    overflow-y: auto !important;
    height: 100vh;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--color-primario-dark) !important;
    color: #000 !important;
}
.sidebar-dark-primary .nav-sidebar .nav-link {
    color: var(--color-texto-secundario) !important;
    transition: var(--transicion-rapida);
}
.sidebar-dark-primary .nav-sidebar .nav-link:hover {
    background-color: var(--color-primario-light) !important;
    color: var(--color-texto-blanco) !important;
}
.brand-link {
    border-bottom: 1px solid var(--borde-color) !important;
    background-color: var(--fondo-sidebar) !important;
}
.brand-text { color: var(--color-primario) !important; font-weight: var(--font-weight-bold); }
.brand-image { opacity: 0.9; width: 33px; height: 33px; }
.nav-header { color: var(--color-texto-muted) !important; }
.sidebar .user-panel { border-bottom-color: var(--borde-color); }

/* --- Sidebar menu groups (Fase 4) --- */
.nav-header-dashboards { color: var(--color-grupo-dashboards) !important; font-weight: var(--font-weight-bold); letter-spacing: 0.5px; }
.nav-header-usuario { color: var(--color-grupo-usuario) !important; font-weight: var(--font-weight-bold); letter-spacing: 0.5px; }
.nav-header-admin { color: var(--color-grupo-admin) !important; font-weight: var(--font-weight-bold); letter-spacing: 0.5px; }

.nav-group-dashboards > .nav-link:hover,
.nav-group-dashboards > .nav-treeview .nav-link:hover {
    background-color: rgba(163, 113, 247, 0.12) !important;
    color: var(--color-grupo-dashboards) !important;
}
.nav-group-dashboards > .nav-link.active {
    background-color: #6e40c9 !important;
    color: #fff !important;
}
.nav-group-usuario > .nav-link:hover,
.nav-group-usuario > .nav-treeview .nav-link:hover {
    background-color: rgba(63, 185, 80, 0.12) !important;
    color: var(--color-grupo-usuario) !important;
}
.nav-group-usuario > .nav-link.active,
.nav-group-usuario .nav-treeview .nav-link.active {
    background-color: var(--color-secundario-dark) !important;
    color: #fff !important;
}
.nav-group-admin > .nav-link:hover,
.nav-group-admin > .nav-treeview .nav-link:hover {
    background-color: rgba(218, 54, 51, 0.12) !important;
    color: var(--color-grupo-admin-hover) !important;
}
.nav-group-admin > .nav-link.active {
    background-color: var(--color-grupo-admin) !important;
    color: #fff !important;
}

/* --- Sidebar icons por grupo --- */
.nav-group-dashboards .nav-icon { color: var(--color-grupo-dashboards) !important; }
.nav-group-usuario .nav-icon { color: var(--color-grupo-usuario) !important; }
.nav-group-admin .nav-icon { color: var(--color-grupo-admin-hover) !important; }

/* --- Separador y badge proximamente --- */
.nav-separator { border-top: 1px solid var(--borde-color); margin: 8px 16px; }
.badge-proximamente {
    background-color: var(--borde-accent) !important;
    color: var(--color-texto-muted) !important;
    font-size: 0.65rem; font-weight: var(--font-weight-semibold); padding: 2px 6px;
}

/* --- Navbar --- */
.main-header {
    background-color: var(--fondo-header) !important;
    border-bottom: 2px solid var(--color-primario) !important;
}
.main-header .nav-link { color: var(--color-texto-cuerpo) !important; }
.main-header .nav-link:hover { color: var(--color-texto-blanco) !important; }

/* --- Foto perfil navbar --- */
.lls-foto-perfil-nav {
    width: 28px; height: 28px; object-fit: cover;
    border: 1px solid var(--borde-accent);
}

/* --- Nombre usuario navbar --- */
.lls-usuario-nombre { color: var(--color-primario); font-weight: var(--font-weight-medium); }

/* --- Content wrapper --- */
.content-wrapper { background-color: var(--fondo-base) !important; }
.content-header h1, .content-header .h1 { color: var(--color-texto-blanco); }
.breadcrumb { background: transparent; }
.breadcrumb-item a { color: var(--color-secundario); }
.breadcrumb-item.active { color: var(--color-texto-muted); }

/* --- Footer --- */
.main-footer {
    background-color: var(--fondo-card) !important;
    border-top: 2px solid var(--color-primario);
    color: var(--color-texto-muted);
}
.main-footer a { color: var(--color-secundario); }

/* =============================================================
   SECCION 4 - COMPONENTES REUTILIZABLES
   ============================================================= */

/* --- Cards --- */
.card {
    background-color: var(--fondo-card);
    border: 1px solid var(--borde-color);
    color: var(--color-texto-cuerpo);
}
.card-header {
    background-color: var(--fondo-card-alt);
    border-bottom: 1px solid var(--borde-color);
}
.card-body { color: var(--color-texto-cuerpo); }
.card-footer {
    background-color: var(--fondo-card-alt);
    border-top: 1px solid var(--borde-color);
}

/* .lls-card - card con borde superior dorado */
.lls-card {
    background-color: var(--fondo-card);
    border: 1px solid var(--borde-color);
    border-top: 3px solid var(--color-primario);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-sm);
    transition: var(--transicion-normal);
    color: var(--color-texto-cuerpo);
}
.lls-card:hover { box-shadow: var(--sombra-md); }

.lls-card-header {
    background-color: var(--fondo-card-alt);
    border-bottom: 2px solid var(--color-primario);
    padding: var(--espaciado-md) var(--espaciado-lg);
    color: var(--color-texto-blanco);
}
.lls-card-header .card-title,
.lls-card-header h3,
.lls-card-header h5 {
    color: var(--color-primario);
    font-weight: var(--font-weight-bold);
    margin: 0;
}
.lls-card-body { padding: var(--espaciado-lg); }
.lls-card-footer {
    background-color: var(--fondo-card-alt);
    border-top: 1px solid var(--borde-color);
    padding: var(--espaciado-md) var(--espaciado-lg);
}

/* Card variantes */
.lls-card-exito { border-top-color: var(--color-exito); }
.lls-card-peligro { border-top-color: var(--color-peligro); }
.lls-card-info { border-top-color: var(--color-info); }

/* Compatibilidad card-dnfr */
.card-dnfr { border-top: 3px solid var(--color-primario); }
.card-dnfr .card-header {
    background-color: var(--fondo-card-alt);
    border-bottom: 1px solid var(--borde-color);
    color: var(--color-texto-blanco);
}

/* --- Tablas --- */
.table {
    color: var(--color-texto-cuerpo);
    --bs-table-bg: var(--fondo-card);
    --bs-table-striped-bg: var(--fondo-tabla-stripe);
    --bs-table-hover-bg: var(--fondo-tabla-hover);
    --bs-table-border-color: var(--borde-color);
}
.table thead th {
    border-bottom-color: var(--borde-accent);
    color: var(--color-primario);
    font-weight: var(--font-weight-semibold);
    background-color: var(--fondo-tabla-header);
}
.table td { color: var(--color-primario); }
.table th { color: var(--color-primario); }
.table td, .table th { border-color: var(--borde-color); vertical-align: middle; }
.table-hover tbody tr:hover {
    background-color: var(--fondo-tabla-hover) !important;
    color: var(--color-texto-blanco);
}
.table-light, thead.table-light th {
    background-color: var(--fondo-card-alt) !important;
    color: var(--color-texto-cuerpo) !important;
    border-color: var(--borde-color) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--fondo-tabla-stripe);
}

/* .lls-tabla - tabla dark estilizada */
.lls-tabla { width: 100%; border-collapse: collapse; }
.lls-tabla thead th {
    background-color: var(--fondo-tabla-header);
    color: var(--color-primario);
    font-weight: var(--font-weight-semibold);
    padding: var(--espaciado-sm) var(--espaciado-md);
    border-bottom: 2px solid var(--color-primario);
    position: sticky; top: 0; z-index: 1;
}
.lls-tabla tbody tr { transition: var(--transicion-rapida); }
.lls-tabla tbody tr:hover { background-color: var(--fondo-tabla-hover); }
.lls-tabla tbody tr:nth-child(even) { background-color: var(--fondo-tabla-stripe); }
.lls-tabla td, .lls-tabla th {
    padding: var(--espaciado-sm) var(--espaciado-md);
    border-bottom: 1px solid var(--borde-color);
    font-size: var(--font-size-base);
    color: var(--color-primario);
}

/* Estado vacio de tabla */
.lls-tabla-vacia { text-align: center; padding: var(--espaciado-2xl); color: var(--color-texto-muted); }
.lls-tabla-vacia i { font-size: 3rem; margin-bottom: var(--espaciado-md); display: block; }

/* --- Modales --- */
.modal-content {
    background-color: var(--fondo-modal);
    border: 1px solid var(--borde-accent);
    color: var(--color-texto-cuerpo);
}
.modal-header {
    border-bottom: 2px solid var(--color-primario);
    background-color: var(--fondo-card-alt);
}
.modal-header .modal-title {
    color: var(--color-primario);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
}
.modal-footer {
    border-top: 1px solid var(--borde-color);
    background-color: var(--fondo-card-alt);
}
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* .lls-modal variantes */
.lls-modal .modal-header {
    border-bottom: 2px solid var(--color-primario);
    background-color: var(--fondo-card-alt);
}
.lls-modal .modal-body { background-color: var(--fondo-modal); padding: var(--espaciado-lg); }
.lls-modal .modal-footer { background-color: var(--fondo-card-alt); }

/* Modal creditos (policia) */
.lls-modal-policia .modal-header {
    background: linear-gradient(135deg, var(--color-policia-azul) 0%, var(--color-policia-azul-claro) 100%);
    border-bottom: 2px solid var(--color-policia-dorado);
}
.lls-modal-policia .modal-title { color: var(--color-policia-dorado); }
.lls-modal-policia .lls-policia-icono { color: var(--color-policia-dorado); }
.lls-modal-policia .lls-policia-titulo { color: var(--color-policia-dorado); }
.lls-modal-policia .lls-policia-subtitulo { color: var(--color-secundario); }
.lls-modal-policia .lls-policia-equipo-titulo { color: var(--color-policia-dorado); }
.lls-modal-policia .lls-badge-rango {
    background-color: var(--color-policia-azul) !important;
    color: #fff; padding: 6px 14px;
}
.lls-modal-policia .lls-nombre-persona { color: var(--color-texto-blanco); }

/* Modal admin roles */
.lls-modal-admin .modal-header {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-bottom: 2px solid var(--color-primario);
}
.lls-modal-admin .modal-title { color: var(--color-primario); }

/* Backdrop modal mas oscuro */
.modal-backdrop.show { opacity: 0.7; }

/* --- Formularios --- */
.form-control, .form-select {
    background-color: var(--fondo-input);
    color: var(--color-texto-cuerpo);
    border-color: var(--borde-input);
    transition: var(--transicion-rapida);
}
.form-control:focus, .form-select:focus {
    background-color: var(--fondo-input);
    color: var(--color-texto-blanco);
    border-color: var(--color-primario);
    box-shadow: 0 0 0 0.2rem var(--color-primario-light), var(--sombra-dorada);
}
.form-control::placeholder { color: var(--color-texto-muted); }
.form-label {
    color: var(--color-primario);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
}
.input-group-text {
    background-color: var(--fondo-card-alt);
    border-color: var(--borde-input);
    color: var(--color-texto-muted);
}
.form-control:disabled, .form-control[readonly] {
    background-color: var(--fondo-card-alt);
    color: var(--color-texto-muted);
}

/* .lls-form-grupo */
.lls-form-grupo { margin-bottom: var(--espaciado-md); }
.lls-label {
    display: block; color: var(--color-primario);
    font-size: var(--font-size-label); font-weight: var(--font-weight-medium);
    margin-bottom: var(--espaciado-xs);
}
.lls-label.required::after {
    content: ' *'; color: var(--color-primario); font-weight: var(--font-weight-bold);
}
.lls-input {
    width: 100%; background-color: var(--fondo-input);
    color: var(--color-texto-cuerpo); border: 1px solid var(--borde-input);
    border-radius: var(--radio-sm); padding: var(--espaciado-sm) var(--espaciado-md);
    transition: var(--transicion-rapida);
}
.lls-input:focus {
    border-color: var(--color-primario); box-shadow: var(--sombra-dorada);
    outline: none; color: var(--color-texto-blanco);
}
.lls-input-error { border-color: var(--color-peligro) !important; }
.lls-error-msg {
    color: var(--color-peligro); font-size: var(--font-size-sm);
    margin-top: var(--espaciado-xs);
}

/* --- Botones --- */
.btn-dnfr {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
    color: #000; font-weight: var(--font-weight-semibold);
    transition: var(--transicion-normal);
}
.btn-dnfr:hover, .btn-dnfr:focus {
    background-color: var(--color-primario-hover);
    border-color: var(--color-primario-hover);
    color: #000; box-shadow: var(--sombra-dorada);
}
.btn-dnfr:active {
    background-color: var(--color-primario-dark) !important;
    border-color: var(--color-primario-dark) !important;
}

/* Botones outline para hub de funcionario */
.btn-outline-sl {
    background-color: var(--fondo-card-alt);
    border: 2px solid var(--borde-accent);
    color: var(--color-texto-cuerpo);
    transition: var(--transicion-normal);
}
.btn-outline-sl:hover {
    background-color: var(--color-primario-light);
    border-color: var(--color-primario);
    color: var(--color-texto-blanco);
}
.btn-outline-sl i { color: var(--color-secundario); transition: color 0.2s ease; }
.btn-outline-sl:hover i { color: var(--color-texto-blanco); }

/* Variante QR dorado: icono y texto dorado, borde normal, hover dorado */
.btn-outline-sl.btn-sl-dorado i { color: #FFC107; }
.btn-outline-sl.btn-sl-dorado span { color: #FFC107; }
.btn-outline-sl.btn-sl-dorado:hover { background-color: rgba(255,193,7,.15); border-color: #FFC107; }
.btn-outline-sl.btn-sl-dorado:hover i { color: #FFD54F; }
.btn-outline-sl.btn-sl-dorado:hover span { color: #fff; }

/* Variante rojo: icono y texto rojo, borde normal, hover rojo */
.btn-outline-sl.btn-sl-rojo i { color: #dc3545; }
.btn-outline-sl.btn-sl-rojo span { color: #dc3545; }
.btn-outline-sl.btn-sl-rojo:hover { background-color: rgba(220,53,69,.15); border-color: #dc3545; }
.btn-outline-sl.btn-sl-rojo:hover i { color: #ff6b7a; }
.btn-outline-sl.btn-sl-rojo:hover span { color: #fff; }
.btn-outline-sl.btn-sl-rojo:disabled { opacity: .5; }
.btn-outline-sl.btn-sl-rojo:disabled i,
.btn-outline-sl.btn-sl-rojo:disabled span { color: #6c757d; }

/* Variante azul: icono y texto azul, borde normal, hover azul */
.btn-outline-sl.btn-sl-azul i { color: #0d6efd; }
.btn-outline-sl.btn-sl-azul span { color: #0d6efd; }
.btn-outline-sl.btn-sl-azul:hover { background-color: rgba(13,110,253,.15); border-color: #0d6efd; }
.btn-outline-sl.btn-sl-azul:hover i { color: #5ea3ff; }
.btn-outline-sl.btn-sl-azul:hover span { color: #fff; }
.btn-outline-sl.btn-sl-azul:disabled { opacity: .5; }
.btn-outline-sl.btn-sl-azul:disabled i,
.btn-outline-sl.btn-sl-azul:disabled span { color: #6c757d; }

/* Tags para idiomas/profesiones en modal actualizacion */
.tag-item {
    display: inline-flex; align-items: center; gap: 6px;
    background-color: rgba(13,110,253,.15); color: #8bb4f0;
    border: 1px solid rgba(13,110,253,.3); border-radius: 20px;
    padding: 4px 12px; margin: 3px; font-size: .85rem;
}
.tag-item .tag-remove {
    cursor: pointer; color: #ff6b6b; font-weight: bold;
    margin-left: 4px; font-size: 1rem; line-height: 1;
}
.tag-item .tag-remove:hover { color: #ff3333; }

/* .lls-btn - botones del design system */
.lls-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--espaciado-xs); padding: var(--espaciado-sm) var(--espaciado-lg);
    border: none; border-radius: var(--radio-sm);
    font-weight: var(--font-weight-semibold); font-size: var(--font-size-base);
    cursor: pointer; transition: var(--transicion-normal); text-decoration: none;
}
.lls-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.lls-btn-primario { background-color: var(--color-primario); color: #000; }
.lls-btn-primario:hover:not(:disabled) {
    background-color: var(--color-primario-hover); box-shadow: var(--sombra-dorada); color: #000;
}
.lls-btn-secundario { background-color: var(--color-secundario); color: #fff; }
.lls-btn-secundario:hover:not(:disabled) { background-color: var(--color-secundario-dark); color: #fff; }
.lls-btn-peligro { background-color: var(--color-peligro); color: #fff; }
.lls-btn-peligro:hover:not(:disabled) { background-color: var(--color-peligro-dark); color: #fff; }
.lls-btn-info { background-color: var(--color-info); color: #fff; }
.lls-btn-info:hover:not(:disabled) { filter: brightness(1.15); color: #fff; }
.lls-btn-outline { background: transparent; border: 2px solid var(--color-primario); color: var(--color-primario); }
.lls-btn-outline:hover:not(:disabled) { background-color: var(--color-primario); color: #000; }
.lls-btn-sm { padding: var(--espaciado-xs) var(--espaciado-sm); font-size: var(--font-size-sm); }
.lls-btn-lg { padding: var(--espaciado-md) var(--espaciado-xl); font-size: var(--font-size-lg); }
.lls-btn-icon {
    width: 36px; height: 36px; padding: 0; border-radius: var(--radio-full);
    display: inline-flex; align-items: center; justify-content: center;
}

/* ITV boton verde */
.btn-itv {
    background-color: var(--color-itv-verde); border-color: var(--color-itv-verde);
    color: #fff; font-weight: var(--font-weight-semibold);
}
.btn-itv:hover {
    background-color: var(--color-itv-verde-oscuro); border-color: var(--color-itv-verde-oscuro); color: #fff;
}

/* --- Badges --- */
.badge-activo { background-color: var(--color-exito); color: #fff; }
.badge-inactivo { background-color: var(--color-peligro); color: #fff; }

.lls-badge {
    display: inline-flex; align-items: center; padding: 4px 10px;
    border-radius: var(--radio-full); font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}
.lls-badge-success { background-color: var(--color-exito); color: #fff; }
.lls-badge-warning { background-color: var(--color-advertencia); color: #000; }
.lls-badge-danger  { background-color: var(--color-peligro); color: #fff; }
.lls-badge-info    { background-color: var(--color-info); color: #fff; }
.lls-badge-regular  { background-color: #0d6efd; color: #fff; }
.lls-badge-remolque { background-color: #fd7e14; color: #fff; }
.lls-badge-protegido {
    background: linear-gradient(135deg, var(--color-policia-dorado), #FFA500);
    color: #000; font-weight: var(--font-weight-bold); padding: 6px 14px; font-size: var(--font-size-sm);
}

/* --- Toggle switch ON/OFF --- */
.lls-toggle { cursor: pointer; min-width: 90px; font-weight: var(--font-weight-semibold); transition: var(--transicion-rapida); }
.lls-toggle-on { background-color: var(--color-exito); color: #fff; border-color: var(--color-exito); }
.lls-toggle-off { background-color: var(--color-peligro); color: #fff; border-color: var(--color-peligro); }

/* --- Alertas --- */
.alert { border-color: var(--borde-color); font-size: var(--font-size-mensaje) !important; }
.alert-info    { background-color: rgba(59,130,246,0.1); color: var(--color-info); border-color: rgba(59,130,246,0.2); }
.alert-success { background-color: rgba(16,185,129,0.1); color: var(--color-exito); border-color: rgba(16,185,129,0.2); }
.alert-warning { background-color: rgba(245,158,11,0.1); color: var(--color-advertencia); border-color: rgba(245,158,11,0.2); }
.alert-danger  { background-color: rgba(239,68,68,0.1); color: var(--color-peligro); border-color: rgba(239,68,68,0.2); }

.lls-alerta {
    padding: var(--espaciado-md); border-radius: var(--radio-md);
    font-size: var(--font-size-mensaje); display: flex; align-items: flex-start; gap: var(--espaciado-sm);
}
.lls-alerta i { margin-top: 2px; }
.lls-alerta-info    { background-color: var(--color-info-light); color: var(--color-info); border: 1px solid rgba(59,130,246,0.3); }
.lls-alerta-success { background-color: var(--color-secundario-light); color: var(--color-exito); border: 1px solid rgba(16,185,129,0.3); }
.lls-alerta-warning { background-color: rgba(245,158,11,0.1); color: var(--color-advertencia); border: 1px solid rgba(245,158,11,0.3); }
.lls-alerta-danger  { background-color: rgba(239,68,68,0.1); color: var(--color-peligro); border: 1px solid rgba(239,68,68,0.3); }

/* --- Wizard multipaso (ITV) --- */
.lls-wizard {
    display: flex; justify-content: center; gap: var(--espaciado-xs);
    margin-bottom: var(--espaciado-lg); flex-wrap: wrap;
}
.lls-wizard-paso {
    display: flex; align-items: center; gap: var(--espaciado-xs);
    padding: var(--espaciado-sm) var(--espaciado-md);
    background: var(--fondo-card-alt); color: var(--color-texto-muted);
    border-radius: var(--radio-full); font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold); transition: var(--transicion-normal);
    border: 2px solid var(--borde-color);
}
.lls-wizard-paso .lls-wizard-numero {
    width: 28px; height: 28px; border-radius: var(--radio-full);
    display: flex; align-items: center; justify-content: center;
    background: var(--borde-accent); color: var(--color-texto-muted);
    font-weight: var(--font-weight-bold);
}
.lls-wizard-paso-activo { background: var(--color-primario-light); color: var(--color-primario); border-color: var(--color-primario); }
.lls-wizard-paso-activo .lls-wizard-numero { background: var(--color-primario); color: #000; }
.lls-wizard-paso-completo { background: var(--color-secundario-light); color: var(--color-exito); border-color: var(--color-exito); }
.lls-wizard-paso-completo .lls-wizard-numero { background: var(--color-exito); color: #fff; }
.lls-wizard-contenido { display: none; }
.lls-wizard-contenido.activo { display: block; animation: lls-fadeIn 0.3s ease; }

/* --- ITV Wizard (clases usadas en itv_semi_remolques) --- */
.punto-info {
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.03));
    border: 1px solid rgba(16,185,129,0.2);
    border-left: 4px solid var(--color-itv-verde);
    border-radius: var(--radio-md);
    padding: var(--espaciado-md) var(--espaciado-lg);
    margin-bottom: var(--espaciado-md);
}
.wizard-steps {
    display: flex; justify-content: center; gap: 8px;
    margin-bottom: var(--espaciado-lg); flex-wrap: wrap;
    padding: var(--espaciado-md);
    background: var(--fondo-card);
    border-radius: var(--radio-lg);
    border: 1px solid var(--borde-color);
}
.wizard-step {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: var(--radio-full);
    background: var(--fondo-card-alt); border: 2px solid var(--borde-accent);
    color: var(--color-texto-muted); font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
    cursor: default;
}
.wizard-step .step-num {
    width: 26px; height: 26px; border-radius: var(--radio-full);
    background: var(--borde-accent); color: var(--color-texto-muted);
    display: flex; align-items: center; justify-content: center;
    font-weight: var(--font-weight-bold); font-size: 0.75rem;
    transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
}
.wizard-step.active {
    background: linear-gradient(135deg, var(--color-itv-verde), var(--color-itv-verde-oscuro));
    border-color: var(--color-itv-verde); color: #fff;
    box-shadow: 0 4px 15px rgba(5,150,105,0.4);
    transform: scale(1.05);
}
.wizard-step.active .step-num { background: #fff; color: var(--color-itv-verde-oscuro); }
.wizard-step.done {
    background: rgba(16,185,129,0.12); border-color: var(--color-exito);
    color: var(--color-exito);
}
.wizard-step.done .step-num { background: var(--color-exito); color: #fff; }
.wizard-panel { display: none; }
.wizard-panel.active { display: block; animation: lls-fadeIn 0.3s ease; }

/* --- ITV componentes especificos --- */
.card-itv .card-header {
    background: linear-gradient(135deg, var(--color-itv-verde), var(--color-itv-verde-oscuro));
    color: #fff; font-weight: var(--font-weight-bold);
    border-bottom: none; padding: 12px 20px;
}
.card-itv .card-header .card-title { color: #fff; font-size: 1rem; }
.card-itv .card-footer { background: var(--fondo-card-alt); border-top: 1px solid var(--borde-color); }
.card-itv { border-color: rgba(16,185,129,0.2); }

/* Badge ITV */
.badge-itv {
    display: inline-flex; align-items: center; gap: 4px;
    background: linear-gradient(135deg, var(--color-itv-verde), var(--color-itv-verde-oscuro));
    color: #fff; padding: 6px 14px; border-radius: var(--radio-full);
    font-size: 0.8rem; font-weight: var(--font-weight-bold);
    text-transform: uppercase; letter-spacing: 0.3px;
}

/* Datos grid (resultado seleccionado) */
.datos-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.dato-item {
    background: var(--fondo-card-alt);
    border: 1px solid var(--borde-accent);
    border-left: 3px solid var(--color-itv-verde);
    border-radius: var(--radio-sm);
    padding: 10px 14px;
    transition: var(--transicion-rapida);
}
.dato-item:hover { border-left-color: var(--color-primario); background: rgba(16,185,129,0.05); }
.dato-label {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--color-itv-verde); font-weight: var(--font-weight-semibold);
    margin-bottom: 2px;
}
.dato-value {
    font-size: 0.95rem; color: var(--color-texto-blanco);
    font-weight: var(--font-weight-medium);
}

/* Foto preview */
.foto-preview {
    border: 2px dashed rgba(16,185,129,0.3); border-radius: var(--radio-md);
    background: var(--fondo-card-alt); display: flex; align-items: center; justify-content: center;
    min-height: 130px; cursor: pointer; transition: var(--transicion-normal);
    overflow: hidden;
}
.foto-preview:hover { border-color: var(--color-itv-verde); background: rgba(16,185,129,0.05); }
.foto-preview img { max-width: 100%; max-height: 130px; object-fit: cover; border-radius: var(--radio-sm); }
.foto-preview .placeholder-icon { color: var(--color-texto-muted); font-size: 2.5rem; transition: color 0.3s ease; }
.foto-preview:hover .placeholder-icon { color: var(--color-itv-verde); }

/* SEGIP result */
.segip-ok { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.25); border-radius: var(--radio-md); padding: var(--espaciado-md); }
.segip-warn { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.25); border-radius: var(--radio-md); padding: var(--espaciado-md); }

/* Resumen final */
.resumen-table { width: 100%; }
.resumen-table .label-col {
    color: var(--color-itv-verde); font-weight: var(--font-weight-semibold);
    background: rgba(16,185,129,0.05); width: 35%; padding: 8px 12px;
    border-bottom: 1px solid var(--borde-color);
}
.resumen-table td { padding: 8px 12px; border-bottom: 1px solid var(--borde-color); color: var(--color-texto-cuerpo); }

/* --- Mapa Leaflet --- */
.lls-mapa { height: 350px; width: 100%; border-radius: var(--radio-md); border: 2px solid var(--borde-accent); }

/* --- Visor PDF --- */
.lls-pdf-visor { border: 2px solid var(--color-itv-verde-oscuro); border-radius: var(--radio-md); overflow: hidden; background: var(--fondo-card); }

/* --- QR container --- */
.qr-container { display: flex; align-items: center; justify-content: center; padding: 20px; }
.qr-container img { border: 3px solid var(--color-primario); border-radius: var(--radio-md); padding: 8px; background: #fff; }
.qr-countdown { font-size: 2rem; font-weight: var(--font-weight-bold); color: var(--color-advertencia); }
.qr-countdown.expirando { color: var(--color-peligro); animation: lls-pulso 1s infinite; }

/* --- Loading overlay --- */
.loading-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(13, 17, 23, 0.85); display: flex; align-items: center; justify-content: center;
    z-index: var(--z-overlay);
}

/* --- Skeleton loader --- */
.lls-skeleton {
    background: linear-gradient(90deg, var(--fondo-card-alt) 25%, var(--borde-accent) 50%, var(--fondo-card-alt) 75%);
    background-size: 200% 100%; animation: lls-skeleton 1.5s ease-in-out infinite;
    border-radius: var(--radio-sm); height: 20px; margin-bottom: var(--espaciado-sm);
}
.lls-skeleton-texto { width: 80%; }
.lls-skeleton-titulo { height: 28px; width: 50%; }
.lls-skeleton-avatar { width: 40px; height: 40px; border-radius: var(--radio-full); }

/* --- Spinner --- */
.spinner-border { color: var(--color-secundario); }
.lls-spinner { display: flex; align-items: center; justify-content: center; padding: var(--espaciado-2xl); }

/* --- Estados activo/inactivo --- */
.lls-estado-activo { color: var(--color-exito); font-weight: var(--font-weight-semibold); }
.lls-estado-activo::before { content: '\25CF'; margin-right: var(--espaciado-xs); }
.lls-estado-inactivo { color: var(--color-peligro); font-weight: var(--font-weight-semibold); }
.lls-estado-inactivo::before { content: '\25CF'; margin-right: var(--espaciado-xs); }

/* --- Verificacion publica --- */
.verificacion-valida { border: 3px solid var(--color-exito); border-radius: var(--radio-lg); padding: 30px; background: var(--fondo-card); }
.verificacion-invalida { border: 3px solid var(--color-peligro); border-radius: var(--radio-lg); padding: 30px; background: var(--fondo-card); }
.lls-verificacion-icono-ok { color: var(--color-exito); }
.lls-verificacion-titulo-ok { color: var(--color-exito); }
.lls-verificacion-subtitulo { color: #a3e635; font-size: var(--font-size-sm); }
.lls-verificacion-icono-error { color: var(--color-peligro); }
.lls-verificacion-titulo-error { color: var(--color-peligro); }
.lls-verificacion-icono-anulado { color: var(--color-advertencia); }
.lls-verificacion-titulo-anulado { color: var(--color-advertencia); }
.lls-verificacion-texto { color: #e2e8f0; font-size: var(--font-size-base); }
.lls-verificacion-advertencia { color: #fbbf24; font-size: var(--font-size-sm); }
.lls-verificacion-tabla { color: #e2e8f0; }
.lls-verificacion-hr-ok { border-color: var(--color-itv-verde-oscuro); }
.lls-verificacion-hr-error { border-color: #7f1d1d; }
.lls-verificacion-hr-anulado { border-color: #78350f; }
.lls-verificacion-btn-verde { background: var(--color-itv-verde-oscuro); color: white; border-radius: 20px; padding: 8px 20px; }
.lls-verificacion-btn-verde-claro { background: var(--color-itv-verde); color: white; border-radius: 20px; padding: 8px 20px; }
.lls-verificacion-pdf-container { border: 2px solid var(--color-itv-verde-oscuro); border-radius: 8px; overflow: hidden; background: var(--fondo-card); }

/* --- Login card --- */
.login-card { background: var(--fondo-card); border: 1px solid var(--borde-accent); border-radius: var(--radio-lg); box-shadow: var(--sombra-lg); max-width: 420px; width: 100%; color: var(--color-texto-cuerpo); }
.login-card h2 { color: var(--color-primario) !important; }
.login-card .fa-shield-alt { color: var(--color-primario) !important; }
.login-logo img { width: 80px; height: 80px; }

/* --- Paginas publicas iconos y titulos --- */
.lls-publico-icono { color: var(--color-primario); }
.lls-publico-titulo { color: var(--color-primario); }
.lls-publico-enlace { color: var(--color-primario); }

/* --- Links institucionales (inicio) --- */
.lls-link-institucional { transition: all 0.2s ease; opacity: 0.7; }
.lls-link-institucional:hover { opacity: 1; color: var(--color-primario) !important; }
.lls-link-institucional:hover img { opacity: 1 !important; }

/* --- Pagina publica fondo --- */
.lls-fondo-publico { background: linear-gradient(135deg, #0d1117 0%, #0f1f1a 50%, #0d1117 100%); min-height: 100vh; }

/* --- Pagina proximamente --- */
.proximamente-panel { text-align: center; padding: 60px 20px; }
.proximamente-panel i { font-size: 4rem; color: var(--borde-accent); margin-bottom: 20px; }
.proximamente-panel h3 { color: var(--color-texto-muted); margin-bottom: 10px; }
.proximamente-panel .btn-proximamente {
    background-color: var(--borde-accent); color: var(--color-texto-muted);
    border: none; font-size: var(--font-size-mensaje); padding: 10px 30px; cursor: not-allowed; opacity: 0.7;
}

/* --- Directorio items --- */
.directorio-item { background-color: var(--fondo-card-alt); border: 1px solid var(--borde-color); border-radius: var(--radio-md); padding: 15px; margin-bottom: 10px; transition: border-color 0.2s ease; }
.directorio-item:hover { border-color: var(--color-primario); }

/* --- Coordenadas monospace --- */
.coord-display { font-family: monospace; font-size: 0.95rem; color: var(--color-primario); }

/* --- Sin acceso --- */
.lls-sin-acceso { background: var(--fondo-card); border: 1px solid var(--borde-accent); }

/* --- Admin usuarios roles --- */
.grupo-header-dashboards { color: #17a2b8; }
.grupo-header-usuario    { color: var(--color-exito); }
.grupo-header-admin      { color: var(--color-peligro); }
.grupo-header-master     { color: var(--color-policia-dorado); }
.btn-roles { color: var(--color-primario); transition: var(--transicion-rapida); }
.btn-roles:hover { color: var(--color-policia-dorado); }

/* =============================================================
   SECCION 5 - UTILIDADES
   ============================================================= */
.lls-texto-primario   { color: var(--color-primario) !important; }
.lls-texto-secundario { color: var(--color-secundario) !important; }
.lls-texto-muted      { color: var(--color-texto-muted) !important; }
.lls-texto-peligro    { color: var(--color-peligro) !important; }
.lls-texto-exito      { color: var(--color-exito) !important; }
.lls-texto-blanco     { color: var(--color-texto-blanco) !important; }
.lls-texto-cuerpo     { color: var(--color-texto-cuerpo) !important; }

.lls-fondo-card       { background: var(--fondo-card) !important; }
.lls-fondo-card-alt   { background: var(--fondo-card-alt) !important; }
.lls-fondo-base       { background: var(--fondo-base) !important; }

.lls-borde-primario   { border-color: var(--color-primario) !important; }
.lls-borde-accent     { border-color: var(--borde-accent) !important; }
.lls-sin-borde        { border: none !important; }

.lls-cursor-pointer   { cursor: pointer; }
.lls-mayusculas       { text-transform: uppercase; }
.lls-truncar          { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lls-responsive-tabla { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =============================================================
   SECCION 6 - ANIMACIONES
   ============================================================= */
@keyframes lls-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lls-slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lls-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes lls-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.lls-animar-entrada { animation: lls-fadeIn 0.3s ease, lls-slideUp 0.3s ease; }

/* =============================================================
   SECCION 7 - ADMINLTE OVERRIDES Y BOOTSTRAP
   ============================================================= */
.callout { background-color: var(--fondo-card-alt); color: var(--color-texto-cuerpo); }
.callout-info    { border-left-color: var(--color-info); }
.callout-success { border-left-color: var(--color-exito); }
.callout-warning { border-left-color: var(--color-advertencia); }
.callout-danger  { border-left-color: var(--color-peligro); }
.small-box { border-radius: 6px; }
.small-box .small-box-footer { color: rgba(255,255,255,0.8); }
.small-box .small-box-footer:hover { color: #fff; }
.info-box { background-color: var(--fondo-card); color: var(--color-texto-cuerpo); }

.nav-pills .nav-link { color: var(--color-texto-muted); transition: var(--transicion-rapida); }
.nav-pills .nav-link.active { background-color: var(--color-primario-dark); color: #000; }
.nav-pills .nav-link:hover:not(.active) { color: var(--color-texto-blanco); background-color: var(--color-primario-light); }

.dropdown-menu { background-color: var(--fondo-card); border-color: var(--borde-accent); }
.dropdown-item { color: var(--color-texto-cuerpo); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--color-primario-light); color: var(--color-texto-blanco); }

.page-link { background-color: var(--fondo-card); color: var(--color-texto-cuerpo); border-color: var(--borde-color); transition: var(--transicion-rapida); }
.page-item.active .page-link { background-color: var(--color-primario); border-color: var(--color-primario); color: #000; }
.page-link:hover { background-color: var(--color-primario-light); color: var(--color-texto-blanco); border-color: var(--borde-accent); }

.toast { background-color: var(--fondo-card) !important; color: var(--color-texto-cuerpo) !important; }
.alert, .modal .alert, .toast-message, .toast-title { font-size: var(--font-size-mensaje) !important; }
.swal2-popup { font-size: var(--font-size-mensaje) !important; }
.swal2-title { font-size: 1.3rem !important; }
#toast-container > div { font-size: var(--font-size-mensaje) !important; }
.box-profile .profile-username { color: var(--color-texto-blanco); }

/* =============================================================
   SECCION 8 - RESPONSIVE
   ============================================================= */
@media (max-width: 992px) {
    .lls-card-header { padding: var(--espaciado-sm) var(--espaciado-md); }
    .lls-wizard { gap: var(--espaciado-xs); }
    .lls-wizard-paso { padding: var(--espaciado-xs) var(--espaciado-sm); font-size: 0.75rem; }
    .wizard-steps { gap: 4px; padding: var(--espaciado-sm); }
    .wizard-step { padding: 8px 12px; font-size: 0.75rem; }
    .wizard-step .step-label { display: none; }
    .wizard-step .step-num { width: 28px; height: 28px; font-size: 0.8rem; }
    .datos-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

@media (max-width: 768px) {
    .lls-responsive-tabla { margin: 0 calc(var(--espaciado-md) * -1); }
    .lls-tabla td, .lls-tabla th { padding: var(--espaciado-xs) var(--espaciado-sm); font-size: var(--font-size-sm); }
    .lls-wizard { flex-direction: column; align-items: stretch; }
    .lls-wizard-paso { justify-content: center; }
    .lls-mapa { height: 250px; }
    .modal-dialog { margin: var(--espaciado-sm); }
    .wizard-steps { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 4px; }
    .wizard-step { flex-shrink: 0; }
    .datos-grid { grid-template-columns: 1fr 1fr; }
    .punto-info .row { gap: 8px; }
}


/* =============================================================
   SECCION 9 - DARK THEME OVERRIDES (Bootstrap components)
   ============================================================= */

/* --- bg-light: must look good on dark theme --- */
.bg-light {
    background-color: var(--fondo-card-alt) !important;
    color: var(--color-texto-cuerpo) !important;
}

/* --- SweetAlert2 dark theme --- */
.swal2-popup {
    background: var(--fondo-card) !important;
    color: var(--color-texto-cuerpo) !important;
    border: 1px solid var(--borde-accent) !important;
    border-radius: var(--radio-lg) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6) !important;
}
.swal2-title { color: var(--color-texto-blanco) !important; }
.swal2-html-container { color: var(--color-texto-cuerpo) !important; font-size: var(--font-size-mensaje) !important; }
.swal2-input, .swal2-textarea, .swal2-select {
    background: var(--fondo-input) !important;
    color: var(--color-texto-cuerpo) !important;
    border: 1px solid var(--borde-input) !important;
    border-radius: var(--radio-sm) !important;
}
.swal2-input:focus, .swal2-textarea:focus {
    border-color: var(--color-primario) !important;
    box-shadow: 0 0 0 0.2rem var(--color-primario-light) !important;
}
.swal2-actions { gap: 8px; }
.swal2-styled {
    border-radius: var(--radio-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
    padding: 10px 28px !important;
    transition: all 0.2s ease !important;
}
.swal2-styled:hover { transform: translateY(-1px); }
.swal2-styled:active { transform: translateY(0); }
.swal2-icon { border-color: var(--borde-accent) !important; }
.swal2-icon.swal2-success { border-color: var(--color-exito) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(16,185,129,0.3) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--color-exito) !important; }
.swal2-icon.swal2-error { border-color: var(--color-peligro) !important; }
.swal2-icon.swal2-error .swal2-x-mark-line-left,
.swal2-icon.swal2-error .swal2-x-mark-line-right { background-color: var(--color-peligro) !important; }
.swal2-icon.swal2-warning { border-color: var(--color-advertencia) !important; color: var(--color-advertencia) !important; }
.swal2-icon.swal2-info { border-color: var(--color-info) !important; color: var(--color-info) !important; }

/* --- DataTables dark theme enhancements --- */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--fondo-input) !important;
    color: var(--color-texto-cuerpo) !important;
    border: 1px solid var(--borde-input) !important;
    border-radius: var(--radio-sm) !important;
    padding: 4px 8px;
    transition: var(--transicion-rapida);
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--color-primario) !important;
    box-shadow: var(--sombra-dorada) !important;
    outline: none;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--color-texto-muted) !important;
    font-size: var(--font-size-sm);
}
.dataTables_empty {
    color: var(--color-texto-muted) !important;
    font-style: italic;
    padding: 2rem !important;
}
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
    opacity: 0.4;
}
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::after { opacity: 0.9; }

/* --- Nav-tabs dark theme --- */
.nav-tabs { border-bottom-color: var(--borde-color); }
.nav-tabs .nav-link {
    color: var(--color-texto-muted);
    border-color: transparent;
    transition: var(--transicion-rapida);
    border-radius: var(--radio-sm) var(--radio-sm) 0 0;
}
.nav-tabs .nav-link:hover {
    border-color: var(--borde-accent) var(--borde-accent) var(--borde-color);
    color: var(--color-texto-blanco);
    background-color: var(--fondo-card-alt);
}
.nav-tabs .nav-link.active {
    background-color: var(--fondo-card) !important;
    color: var(--color-primario) !important;
    border-color: var(--borde-color) var(--borde-color) var(--fondo-card) !important;
    font-weight: var(--font-weight-semibold);
}
.tab-content { background: var(--fondo-card); }

/* --- Toastr dark theme --- */
#toast-container > .toast-success {
    background-color: rgba(16,185,129,0.92) !important;
    box-shadow: 0 4px 12px rgba(16,185,129,0.3) !important;
}
#toast-container > .toast-error {
    background-color: rgba(239,68,68,0.92) !important;
    box-shadow: 0 4px 12px rgba(239,68,68,0.3) !important;
}
#toast-container > .toast-warning {
    background-color: rgba(245,158,11,0.92) !important;
    box-shadow: 0 4px 12px rgba(245,158,11,0.3) !important;
}
#toast-container > .toast-info {
    background-color: rgba(59,130,246,0.92) !important;
    box-shadow: 0 4px 12px rgba(59,130,246,0.3) !important;
}
#toast-container > div {
    border-radius: var(--radio-md) !important;
    backdrop-filter: blur(8px);
}

/* --- List-group dark theme --- */
.list-group-item {
    background-color: var(--fondo-card);
    color: var(--color-texto-cuerpo);
    border-color: var(--borde-color);
    transition: var(--transicion-rapida);
}
.list-group-item:hover { background-color: var(--fondo-card-alt); }
.list-group-item.active {
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    color: #000 !important;
}

/* --- Progress bar dark --- */
.progress {
    background-color: var(--fondo-card-alt);
    border-radius: var(--radio-full);
    height: 6px;
    overflow: hidden;
}
.progress-bar {
    transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
    border-radius: var(--radio-full);
}

/* --- Accordion dark --- */
.accordion-item {
    background-color: var(--fondo-card);
    border-color: var(--borde-color);
    color: var(--color-texto-cuerpo);
}
.accordion-button {
    background-color: var(--fondo-card-alt);
    color: var(--color-texto-cuerpo);
    transition: var(--transicion-rapida);
}
.accordion-button:not(.collapsed) {
    background-color: var(--color-primario-light);
    color: var(--color-primario);
    box-shadow: inset 0 -1px 0 var(--borde-color);
}
.accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.accordion-body { background-color: var(--fondo-card); }

/* --- Popover/tooltip dark --- */
.popover {
    background-color: var(--fondo-card) !important;
    border-color: var(--borde-accent) !important;
    box-shadow: var(--sombra-lg);
}
.popover-header {
    background-color: var(--fondo-card-alt) !important;
    border-bottom-color: var(--borde-color) !important;
    color: var(--color-texto-blanco) !important;
}
.popover-body { color: var(--color-texto-cuerpo) !important; }
.bs-popover-top > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after { border-top-color: var(--fondo-card) !important; }
.bs-popover-bottom > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after { border-bottom-color: var(--fondo-card) !important; }

.tooltip-inner {
    background-color: var(--fondo-card-alt);
    border: 1px solid var(--borde-accent);
    color: var(--color-texto-cuerpo);
    font-size: var(--font-size-sm);
    padding: 6px 12px;
    box-shadow: var(--sombra-md);
}
.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--fondo-card-alt); }
.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--fondo-card-alt); }
.bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--fondo-card-alt); }
.bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--fondo-card-alt); }

/* --- Offcanvas dark --- */
.offcanvas {
    background-color: var(--fondo-card) !important;
    color: var(--color-texto-cuerpo) !important;
    border-color: var(--borde-accent) !important;
}
.offcanvas-header { border-bottom: 1px solid var(--borde-color); }
.offcanvas-title { color: var(--color-texto-blanco); }

/* =============================================================
   SECCION 10 - UTILITY CLASSES (Beautification)
   ============================================================= */

/* --- Page layout for public pages --- */
.lls-page-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.lls-page-container {
    text-align: center;
    width: 100%;
    padding: 20px;
}
.lls-page-container-sm  { max-width: 450px; }
.lls-page-container-md  { max-width: 500px; }
.lls-page-container-lg  { max-width: 550px; }
.lls-page-container-xl  { max-width: 650px; }

/* --- Text sizes --- */
.lls-text-xs      { font-size: 0.75rem; }
.lls-text-sm      { font-size: 0.85rem; }
.lls-text-caption { font-size: 0.9rem; }
.lls-text-lg      { font-size: 1.1rem; }
.lls-text-xl      { font-size: 1.25rem; }
.lls-text-2xl     { font-size: 1.5rem; }
.lls-text-hero    { font-size: 2rem; }

/* --- Profile images --- */
.lls-profile-img {
    width: 120px; height: 120px;
    object-fit: cover;
    border: 3px solid var(--borde-accent);
    border-radius: 50%;
    transition: var(--transicion-normal);
    box-shadow: 0 0 0 4px var(--fondo-card);
}
.lls-profile-img:hover {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 4px var(--fondo-card), var(--sombra-dorada);
    transform: scale(1.03);
}
.lls-profile-img-sm {
    width: 100px; height: 130px;
    object-fit: cover;
    border: 2px solid var(--borde-accent);
    border-radius: var(--radio-sm);
}
.lls-thumbnail {
    max-width: 80px; max-height: 100px;
    border: 1px solid var(--borde-color);
    border-radius: var(--radio-sm);
    transition: var(--transicion-rapida);
}
.lls-thumbnail:hover { border-color: var(--color-primario); }

/* --- Section divider --- */
.lls-section-divider {
    border-bottom: 1px solid var(--borde-color);
    padding-bottom: var(--espaciado-md);
    margin-bottom: var(--espaciado-md);
}

/* --- Code/monospace input (2FA) --- */
.lls-code-input {
    letter-spacing: 8px;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
}

/* --- Map container --- */
.lls-map-container {
    height: 300px;
    border-radius: var(--radio-md);
    border: 1px solid var(--borde-accent);
    overflow: hidden;
    transition: var(--transicion-normal);
}
.lls-map-container:hover { border-color: var(--color-primario); }

/* --- Glassmorphism card --- */
.lls-card-glass {
    background: rgba(22,27,34,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(48,54,61,0.6);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-md);
}

/* --- Glow effects --- */
.lls-glow-primario { box-shadow: 0 0 20px rgba(255,193,7,0.2); }
.lls-glow-exito    { box-shadow: 0 0 20px rgba(16,185,129,0.2); }
.lls-glow-peligro  { box-shadow: 0 0 20px rgba(239,68,68,0.2); }
.lls-glow-info     { box-shadow: 0 0 20px rgba(59,130,246,0.2); }

/* --- Gradient text --- */
.lls-texto-gradiente {
    background: linear-gradient(135deg, var(--color-primario), var(--color-secundario));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Stat cards (dashboard) --- */
.lls-stat-card {
    background: var(--fondo-card);
    border: 1px solid var(--borde-color);
    border-radius: var(--radio-md);
    padding: var(--espaciado-lg);
    transition: var(--transicion-normal);
    position: relative;
    overflow: hidden;
}
.lls-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primario), var(--color-secundario));
}
.lls-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-md);
    border-color: var(--borde-accent);
}
.lls-stat-valor {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-texto-blanco);
    line-height: 1.2;
}
.lls-stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-texto-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Empty state --- */
.lls-empty-state {
    text-align: center;
    padding: var(--espaciado-2xl);
    color: var(--color-texto-muted);
}
.lls-empty-state i {
    font-size: 3.5rem;
    margin-bottom: var(--espaciado-md);
    opacity: 0.4;
}
.lls-empty-state h5 { color: var(--color-texto-muted); margin-bottom: var(--espaciado-sm); }
.lls-empty-state p { font-size: var(--font-size-sm); opacity: 0.7; }

/* =============================================================
   SECCION 11 - POLISH & MICRO-INTERACTIONS
   ============================================================= */

/* --- Enhanced card hover --- */
.card { transition: var(--transicion-normal); }

/* --- Better focus rings --- */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-primario);
    outline-offset: 2px;
}

/* --- Button ripple/lift on hover --- */
.btn { transition: var(--transicion-rapida); }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }

/* --- Smooth image loading --- */
img { transition: opacity 0.3s ease; }
img[loading="lazy"] { opacity: 0; }
img[loading="lazy"].loaded, img:not([loading="lazy"]) { opacity: 1; }

/* --- Badge pulse for notifications --- */
.lls-badge-pulse {
    position: relative;
}
.lls-badge-pulse::after {
    content: '';
    position: absolute;
    top: -2px; right: -2px;
    width: 8px; height: 8px;
    background: var(--color-peligro);
    border-radius: 50%;
    animation: lls-pulso 1.5s infinite;
}

/* --- Striped animated progress --- */
.progress-bar-animated {
    background-image: linear-gradient(
        45deg,
        rgba(255,255,255,.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,.15) 50%,
        rgba(255,255,255,.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

/* --- Enhanced form group spacing --- */
.mb-3 > .form-label { margin-bottom: 0.35rem; }

/* --- Better disabled state --- */
.btn:disabled, .btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
}

/* --- Table row transition --- */
.table tbody tr { transition: background-color 0.15s ease; }

/* --- Responsive modal improvements --- */
@media (max-width: 576px) {
    .modal-dialog { margin: 8px; }
    .modal-body { padding: var(--espaciado-md); }
    .swal2-popup { padding: 1.5rem !important; }
    .swal2-title { font-size: 1.1rem !important; }
}

/* --- Print styles --- */
@media print {
    .main-sidebar, .main-header, .main-footer,
    .btn, .no-print { display: none !important; }
    .content-wrapper {
        margin-left: 0 !important;
        background: #fff !important;
        color: #000 !important;
    }
    .card { border: 1px solid #ddd !important; box-shadow: none !important; }
}

/* --- Smooth page transitions --- */
.content-wrapper { animation: lls-fadeIn 0.2s ease; }

/* --- Selection colors inside cards --- */
.card ::selection { background-color: var(--color-primario); color: #000; }

/* --- Better badge spacing in tables --- */
.table .badge { font-size: 0.78rem; padding: 4px 10px; }

/* --- Input icons --- */
.input-group-text .fas,
.input-group-text .far,
.input-group-text .fab {
    color: var(--color-primario);
    width: 16px;
    text-align: center;
}