/* ==========================================
   DUROGEST - MODERN THEME OVERRIDES
   Sobrescribe estilos de Gentelella para diseño moderno
   ========================================== */

/* ==========================================
   FIX CRÍTICO - Paneles laterales NUNCA deben animarse
   ========================================== */
#panelLateral,
#panelLateral *,
#panelLateralMaquina,
#panelLateralMaquina *,
#panelLateralVehiculo,
#panelLateralVehiculo * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

/* Excepción: solo permitir transición de width cuando se abre */
#panelLateral.open,
#panelLateralMaquina.open,
#panelLateralVehiculo.open {
    transition: width 0.5s !important;
}

/* ==========================================
   VARIABLES CSS
   ========================================== */
:root {
    /* Colores principales */
    --primary-color: #2A3F54;
    --primary-hover: #1d2d3f;
    --secondary-color: #26B99A;
    --accent-color: #3498DB;
    --danger-color: #E74C3C;
    --warning-color: #F39C12;
    --success-color: #26B99A;

    /* Colores de fondo */
    --bg-light: #F7F7F7;
    --bg-white: #FFFFFF;
    --bg-dark: #2A3F54;

    /* Colores de texto */
    --text-primary: #333333;
    --text-secondary: #73879C;
    --text-light: #999999;

    /* Sombras */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);

    /* Bordes */
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 14px;

    /* Espaciado */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;

    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ==========================================
   MODO OSCURO
   ========================================== */
[data-theme="dark"] {
    /* Colores principales - más brillantes en modo oscuro */
    --primary-color: #4A6B8A;
    --primary-hover: #5A7B9A;
    --secondary-color: #2EBFA8;
    --accent-color: #5DADE2;
    --danger-color: #EC7063;
    --warning-color: #F4D03F;
    --success-color: #2EBFA8;

    /* Colores de fondo oscuros */
    --bg-light: #2C3E50;
    --bg-white: #34495E;
    --bg-dark: #1A252F;

    /* Colores de texto para modo oscuro */
    --text-primary: #ECF0F1;
    --text-secondary: #BDC3C7;
    --text-light: #95A5A6;

    /* Sombras más sutiles en modo oscuro */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Body en modo oscuro */
[data-theme="dark"] body {
    background-color: var(--bg-dark);
}

/* ==========================================
   ELEMENTOS ESPECÍFICOS EN MODO OSCURO
   ========================================== */

/* Top navigation */
[data-theme="dark"] .top_nav {
    background-color: var(--bg-dark) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navigation menu dentro de top_nav */
[data-theme="dark"] .top_nav .nav_menu {
    background-color: var(--bg-dark) !important;
}

/* Main content area */
[data-theme="dark"] .right_col[role="main"] {
    background-color: var(--bg-light) !important;
}

/* Footer */
[data-theme="dark"] footer {
    background-color: var(--bg-dark) !important;
    color: var(--text-secondary) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================
   TABLAS EN MODO OSCURO
   ========================================== */

/* Filas alternas en tablas (sobrescribir Bootstrap) */

[data-theme="dark"] .table-striped:not(#tablaInformeObras) tbody tr:nth-child(odd),
[data-theme="dark"] .table:not(#tablaInformeObras) tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table-striped:not(#tablaInformeObras) tbody tr:nth-child(even),
[data-theme="dark"] .table:not(#tablaInformeObras) tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .table .table {
    background-color: var(--bg-white) !important;
    color: var(--text-primary) !important;
}

/* Hover en filas de tabla en modo oscuro */
[data-theme="dark"] .table:not(#tablaInformeObras) tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}


/* Bordes de tabla en modo oscuro */
[data-theme="dark"] .table:not(#tablaInformeObras) tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Encabezados de tabla en modo oscuro */
[data-theme="dark"] .table thead th {
    background: var(--bg-dark) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Footer de DataTables en modo oscuro */
[data-theme="dark"] table.dataTable tfoot {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] table.dataTable tfoot th,
[data-theme="dark"] table.dataTable tfoot td {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Header de DataTables en modo oscuro */
[data-theme="dark"] table.dataTable thead {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] table.dataTable thead td {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Paginación de DataTableBuilder en modo oscuro */
[data-theme="dark"] #dataTableBuilder_paginate, [data-theme="dark"] .dataTables_paginate {
    background-color: var(--bg-white) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: var(--spacing-md) 0 !important;
}

[data-theme="dark"] #dataTableBuilder_paginate .paginate_button a,
[data-theme="dark"] .dataTables_paginate .paginate_button a {
    background-color: var(--bg-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
    border-radius: var(--border-radius-sm) !important;
    margin: 0 2px !important;
    transition: all var(--transition-fast) !important;
}

[data-theme="dark"] #dataTableBuilder_paginate .paginate_button:hover,
[data-theme="dark"] .dataTables_paginate .paginate_button:hover {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] #dataTableBuilder_paginate .paginate_button.current,
[data-theme="dark"] #dataTableBuilder_paginate .paginate_button.active,
[data-theme="dark"] .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_paginate .paginate_button.active {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: white !important;
    font-weight: 600;
}

[data-theme="dark"] #dataTableBuilder_paginate .paginate_button.disabled,
[data-theme="dark"] .dataTables_paginate .paginate_button.disabled {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-light) !important;
    opacity: 0.6;
}

/* ==========================================
   SUMOSELECT (Select Mejorado) EN MODO OSCURO
   ========================================== */

/* Contenedor principal del SumoSelect */
[data-theme="dark"] .SumoSelect > .CaptionCont {
    background-color: var(--bg-white) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .SumoSelect:focus > .CaptionCont,
[data-theme="dark"] .SumoSelect:hover > .CaptionCont,
[data-theme="dark"] .SumoSelect.open > .CaptionCont {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 2px var(--accent-color) !important;
}

/* Placeholder en modo oscuro */
[data-theme="dark"] .SumoSelect > .CaptionCont > span.placeholder {
    color: var(--text-light) !important;
}

/* Dropdown del SumoSelect */
[data-theme="dark"] .SumoSelect > .optWrapper {
    background-color: var(--bg-white) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.5) !important;
}

/* Opciones individuales */
[data-theme="dark"] .SumoSelect > .optWrapper > .options li.opt {
    background-color: var(--bg-white) !important;
    color: var(--text-primary) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .SumoSelect > .optWrapper > .options li.opt:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .SumoSelect > .optWrapper > .options li.opt.sel,
[data-theme="dark"] .SumoSelect .select-all.sel {
    background-color: var(--accent-color) !important;
    color: white !important;
}

/* Controles múltiples (OK/Cancel) */
[data-theme="dark"] .SumoSelect > .optWrapper > .MultiControls {
    background-color: var(--bg-white) !important;
    border-top-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .SumoSelect > .optWrapper.multiple > .MultiControls > p:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Botón "Select All" */
[data-theme="dark"] .SumoSelect .select-all {
    background-color: var(--bg-white) !important;
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
}

/* Grupos de opciones */
[data-theme="dark"] .SumoSelect > .optWrapper > .options li.group > label {
    color: var(--text-primary) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Estado deshabilitado */
[data-theme="dark"] .SumoSelect.disabled > .CaptionCont {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-light) !important;
}

/* Checkbox en opciones múltiples */
[data-theme="dark"] .SumoSelect > .optWrapper.multiple > .options li.opt span i,
[data-theme="dark"] .SumoSelect .select-all > span i {
    background-color: var(--bg-white) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Checkbox seleccionado */
[data-theme="dark"] .SumoSelect > .optWrapper.multiple > .options li.opt.selected span i,
[data-theme="dark"] .SumoSelect .select-all.selected > span i,
[data-theme="dark"] .SumoSelect .select-all.partial > span i {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Checkbox seleccionado */
[data-theme="dark"] .SumoSelect > .optWrapper.multiple > .options li.opt.selected span i,
[data-theme="dark"] .SumoSelect .select-all.selected > span i,
[data-theme="dark"] .SumoSelect .select-all.partial > span i {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Campo de búsqueda cuando SumoSelect está abierto */
[data-theme="dark"] .SumoSelect.open .search-txt {
    background-color: var(--bg-white) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .SumoSelect.open .search-txt:focus {
    background-color: var(--bg-white) !important;
    color: var(--text-primary) !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2) !important;
}

/* ==========================================
   FORMULARIOS E INPUTS EN MODO OSCURO
   ========================================== */

/* Inputs y textareas */
[data-theme="dark"] .form-control {
    background-color: var(--bg-white) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--bg-white) !important;
    border-color: var(--accent-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2) !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--text-light) !important;
}

/* Labels */
[data-theme="dark"] .form-group label {
    color: var(--text-primary) !important;
}

/* Selects nativos */
[data-theme="dark"] select.form-control, [data-theme="dark"] select.yadcf-filter {
    background-color: var(--bg-white) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] select.form-control option,
[data-theme="dark"] select.yadcf-filter option {
    background-color: var(--bg-white) !important;
    color: var(--text-primary) !important;
}

/* Inputs de tipo number con spinners */
[data-theme="dark"] input[type="number"] {
    background-color: var(--bg-white) !important;
    color: var(--text-primary) !important;
}

/* Textareas */
[data-theme="dark"] textarea.form-control {
    background-color: var(--bg-white) !important;
    color: var(--text-primary) !important;
}


[data-theme="dark"] .yadcf-filter-reset-button {
    background-color: var(--bg-white) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] button.dt-button, [data-theme="dark"] div.dt-button, [data-theme="dark"] a.dt-button {
background: linear-gradient(135deg, #495057 0%, #343a40 100%) !important;
  color: #ffffff !important;
  border: 1px solid #6c757d !important;
}

/* ==========================================
   SELECT2 EN MODO OSCURO
   ========================================== */

/* Contenedor principal de Select2 */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--bg-white) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered{
    color: var(--text-primary) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single:focus,
[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple:focus,
[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple
{
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2) !important;
}

/* Placeholder de Select2 */
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--text-light) !important;
}

/* Flecha de Select2 */
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b,
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__arrow b {
    border-color: var(--text-secondary) transparent transparent transparent !important;
}

/* Dropdown de Select2 */
[data-theme="dark"] .select2-dropdown {
    background-color: var(--bg-white) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option {
    background-color: var(--bg-white) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--accent-color) !important;
    color: white !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(52, 152, 219, 0.1) !important;
    color: var(--text-primary) !important;
}

/* Búsqueda en Select2 */
[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--bg-white) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--accent-color) !important;
}

/* Select2 múltiple */
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--bg-white) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--accent-color) !important;
    color: white !important;
    border-color: var(--accent-color) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: white !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ==========================================
   DATERANGEPICKER EN MODO OSCURO
   ========================================== */

/* Contenedor principal del daterangepicker */
[data-theme="dark"] .daterangepicker {
    background-color: var(--bg-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    color: var(--text-primary) !important;
}

/* Header del calendario */
[data-theme="dark"] .daterangepicker .calendar-table .table-condensed thead tr:first-child {
    background-color: var(--bg-dark) !important;
}

[data-theme="dark"] .daterangepicker .calendar-table .table-condensed thead tr:first-child th {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Celdas del calendario */
[data-theme="dark"] .daterangepicker .calendar-table td,
[data-theme="dark"] .daterangepicker .calendar-table th {
    background-color: var(--bg-white) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .daterangepicker .calendar-table td.available:hover {
    background-color: rgba(52, 152, 219, 0.1) !important;
    color: var(--text-primary) !important;
}

/* Días seleccionados */
[data-theme="dark"] .daterangepicker .calendar-table td.active,
[data-theme="dark"] .daterangepicker .calendar-table td.active:hover {
    background-color: var(--accent-color) !important;
    color: white !important;
}

/* Rango de fechas seleccionado */
[data-theme="dark"] .daterangepicker .calendar-table td.in-range {
    background-color: rgba(52, 152, 219, 0.1) !important;
    color: var(--text-primary) !important;
}

/* Días fuera del mes actual */
[data-theme="dark"] .daterangepicker .calendar-table td.off,
[data-theme="dark"] .daterangepicker .calendar-table td.off.in-range,
[data-theme="dark"] .daterangepicker .calendar-table td.off:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-light) !important;
}

/* Días deshabilitados */
[data-theme="dark"] .daterangepicker .calendar-table td.disabled {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: var(--text-light) !important;
}

/* Controles de navegación (prev/next) */
[data-theme="dark"] .daterangepicker .calendar-table .prev,
[data-theme="dark"] .daterangepicker .calendar-table .next {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .daterangepicker .calendar-table .prev:hover,
[data-theme="dark"] .daterangepicker .calendar-table .next:hover {
    background-color: rgba(52, 152, 219, 0.1) !important;
    color: var(--accent-color) !important;
}

/* Mes y año */
[data-theme="dark"] .daterangepicker .calendar-table .month,
[data-theme="dark"] .daterangepicker .calendar-table .yearselect,
[data-theme="dark"] .daterangepicker .calendar-table .year {
    color: var(--text-primary) !important;
}

/* Botones de aplicar y cancelar */
[data-theme="dark"] .daterangepicker .drp-buttons .btn {
    background-color: var(--bg-dark) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .daterangepicker .drp-buttons .btn:hover {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: white !important;
}

/* Separador entre calendarios */
[data-theme="dark"] .daterangepicker .calendar.left,
[data-theme="dark"] .daterangepicker .calendar.right {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Input del daterangepicker */
[data-theme="dark"] .daterangepicker .input-mini {
    background-color: var(--bg-white) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .daterangepicker .input-mini:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2) !important;
}

/* ==========================================
   NAV-TABS (PESTAÑAS) EN MODO OSCURO
   ========================================== */

/* Contenedor de pestañas */
[data-theme="dark"] .nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Pestañas individuales */
[data-theme="dark"] .nav-tabs > li > a {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-secondary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: none !important;
    transition: all var(--transition-normal) !important;
}

[data-theme="dark"] .nav-tabs > li > a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Pestaña activa */
[data-theme="dark"] .nav-tabs > li.active > a,
[data-theme="dark"] .nav-tabs > li.active > a:hover,
[data-theme="dark"] .nav-tabs > li.active > a:focus {
    background-color: var(--bg-white) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    border-bottom: 1px solid var(--bg-white) !important;
}

/* Contenido de pestañas */
[data-theme="dark"] .tab-content {
    background-color: var(--bg-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: none !important;
    padding: var(--spacing-md) !important;
}

[data-theme="dark"] .tab-pane {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tab-pane {
    color: var(--text-primary) !important;
}

/* ==========================================
   PIZARRA (PLANNING BOARD) EN MODO OSCURO
   ========================================== */

/* Contenedor principal de la pizarra */
[data-theme="dark"] #pizarra {
    background-color: var(--bg-light) !important;
    border-radius: var(--border-radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Días de la semana */
[data-theme="dark"] .day-of-week {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Celdas del calendario */
[data-theme="dark"] .calendar-cell,
[data-theme="dark"] .day-cell {
    background-color: var(--bg-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .calendar-cell:hover,
[data-theme="dark"] .day-cell:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Celdas de fin de semana */
[data-theme="dark"] .weekend-cell {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Celdas con empleados asignados */
[data-theme="dark"] .assigned-cell,
[data-theme="dark"] .employee-cell {
    background-color: var(--accent-color) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .assigned-cell:hover,
[data-theme="dark"] .employee-cell:hover {
    background-color: #2980b9 !important; /* Tono más oscuro del azul */
}

/* Información de empleados en celdas */
[data-theme="dark"] .employee-info,
[data-theme="dark"] .employee-name {
    color: white !important;
    font-weight: 600 !important;
}

/* Celdas vacías */
[data-theme="dark"] .empty-cell {
    background-color: rgba(255, 255, 255, 0.01) !important;
}

/* Celdas de días festivos */
[data-theme="dark"] .holiday-cell {
    background-color: rgba(255, 193, 7, 0.1) !important;
    border: 1px solid rgba(255, 193, 7, 0.3) !important;
}

/* Nombres de meses/años */
[data-theme="dark"] .month-header,
[data-theme="dark"] .year-header {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
}

/* Leyendas y controles de la pizarra */
[data-theme="dark"] .pizarra-legend,
[data-theme="dark"] .pizarra-controls {
    background-color: var(--bg-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

/* Tooltips en la pizarra */
[data-theme="dark"] .pizarra-tooltip,
[data-theme="dark"] .calendar-tooltip {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ==========================================
   GRÁFICOS Y CHART.JS EN MODO OSCURO
   ========================================== */

/* Contenedores de gráficos */
[data-theme="dark"] .chart-container,
[data-theme="dark"] .chart-wrapper,
[data-theme="dark"] .chartjs-wrapper {
    background-color: var(--bg-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--border-radius-md);
}

/* Leyendas de gráficos */
[data-theme="dark"] .chart-legend,
[data-theme="dark"] .chartjs-legend {
    background-color: var(--bg-white) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .chart-legend li,
[data-theme="dark"] .chartjs-legend li {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .chart-legend li span,
[data-theme="dark"] .chartjs-legend li span {
    color: var(--text-secondary) !important;
}

/* Tooltips de gráficos */
[data-theme="dark"] .chartjs-tooltip,
[data-theme="dark"] .chart-tooltip {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Transición suave al cambiar de tema */
* {
    transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}


[data-theme="dark"] .alert-info #heatmapInfoContent h5, 
[data-theme="dark"] .alert-info #heatmapInfoContent p,
[data-theme="dark"] .alert-info #heatmapInfoContent small {
    color: #0c5460;
 
}
/* ==========================================
   TARJETAS (x_panel)
   ========================================== */
.x_panel {
    background: var(--bg-white);
    border: none !important;
    border-radius: var(--border-radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
}

/* Solo aplicar transiciones y hover a x_panel que NO sean paneles laterales */
.x_panel:not(#panelLateral):not(#panelLateralMaquina):not(#panelLateralVehiculo) {
    transition: all var(--transition-normal);
}

.x_panel:not(#panelLateral):not(#panelLateralMaquina):not(#panelLateralVehiculo):hover {
    box-shadow: var(--shadow-lg) !important;
    /* transform: translateY(-2px); */
    /* DESACTIVADO - causaba problemas con paneles laterales */
}



.x_title h2,
.x_title h3 {
   
    font-weight: 600;
    margin: 0;
}
.x_title h3 {
    font-size: 18px;
}


/* Reducir padding en contextos específicos como pizarra */
#pizarra .x_content {
    padding: var(--spacing-sm) !important;
}

/* Tarjetas especiales (tiles) */
.x_panel.tile {
    border-radius: var(--border-radius-lg) !important;
}

.tile h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* ==========================================
   BOTONES
   ========================================== */
.btn {
    border-radius: var(--border-radius-sm) !important;

    font-weight: 500;
    transition: all var(--transition-normal);
    border: none;
    box-shadow: var(--shadow-sm);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%) !important;
}

.btn-success {
    background: linear-gradient(135deg, var(--success-color) 0%, #1e9e85 100%) !important;
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger-color) 0%, #c0392b 100%) !important;
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning-color) 0%, #e67e22 100%) !important;
}

.btn-info {
    background: linear-gradient(135deg, var(--accent-color) 0%, #2980b9 100%) !important;
}

/* Botones pequeños */
.btn-sm {
    padding: 6px 14px !important;
    font-size: 0.875rem;
    border-radius: 5px !important;
}

/* Botones grandes */
.btn-lg {
    padding: 14px 28px !important;
}
.btn-group {
    display: inline-flex;
    gap: 4px;

}

/* ==========================================
   BOTONES - MODO OSCURO
   ========================================== */
[data-theme="dark"] .btn-default {
    background: linear-gradient(135deg, #495057 0%, #343a40 100%) !important;
    color: #ffffff !important;
    border: 1px solid #6c757d !important;
}

[data-theme="dark"] .btn-default:hover {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
    color: #ffffff !important;
    border-color: #adb5bd !important;
}

[data-theme="dark"] .btn-default:active,
[data-theme="dark"] .btn-default:focus {
    background: linear-gradient(135deg, #343a40 0%, #212529 100%) !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
}

[data-theme="dark"] .btn-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    color: #ffffff !important;
    border: 1px solid #adb5bd !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background: linear-gradient(135deg, #adb5bd 0%, #6c757d 100%) !important;
    color: #ffffff !important;
    border-color: #ced4da !important;
}

[data-theme="dark"] .btn-secondary:active,
[data-theme="dark"] .btn-secondary:focus {
    background: linear-gradient(135deg, #5a6268 0%, #495057 100%) !important;
    color: #ffffff !important;
    border-color: #adb5bd !important;
}

/* ==========================================
   FORMULARIOS
   ========================================== */

/* Tamaño de texto consistente en todos los inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
    font-size: 14px !important;
}

.form-control {
    border: 2px solid #e8e8e8;
    border-radius: var(--border-radius-sm) !important;
    height: 36px !important;
    transition: all var(--transition-normal);
    font-size: 14px !important;
}

.form-control:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    outline: none;
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: block;
    font-size: 14px !important;
}

/* Form inline - mantener alineación horizontal */
.form-inline .form-group {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 10px;
    vertical-align: middle;
}

.form-inline label {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 0;
    vertical-align: middle;

}

.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.form-inline .btn {
    vertical-align: middle;
}

/* Placeholders legibles */
.form-control::placeholder {
    color: #999;
    opacity: 1;

}

.form-control::-webkit-input-placeholder {
    color: #999;

}

.form-control::-moz-placeholder {
    color: #999;

}

/* Select2 mejorado */
.select2-container--default .select2-selection--single{
    border: 2px solid #e8e8e8 !important;
    border-radius: var(--border-radius-sm) !important;
    height: 36px !important;
    padding: 0 12px;
}
.select2-container--default .select2-selection--multiple{
    border: 2px solid #e8e8e8 !important;
    border-radius: var(--border-radius-sm) !important;
    min-height: 36px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px !important;
}

.select2-container--default .select2-selection--single:focus {
    border-color: var(--accent-color) !important;
}

/* ==========================================
   TABLAS
   ========================================== */
.table {
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}

/* Tablas dentro de x_content: reducir márgenes */
.x_content>.table,
.x_content .table-responsive>.table {
    margin-top: -10px;
}

.table thead th {
    background: var(--bg-light);
    color: var(--text-primary);
    font-weight: 600;
    border: none;
    padding: 12px 15px;
    letter-spacing: 0.5px;
}

.table tbody tr {
    transition: all var(--transition-fast);
    border-bottom: 1px solid #f0f0f0;
}

.table tbody tr:hover {
    background-color: #f8f9fa;
    transform: scale(1.001);
}

.table tbody td {
    padding: 12px 15px;
    vertical-align: middle;
    border: none;
}

/* DataTables modernos */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--border-radius-sm) !important;
    margin: 0 2px;
    transition: all var(--transition-fast);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: white !important;
}

/* ==========================================
   NAVEGACIÓN Y SIDEBAR
   ========================================== */

/* Sidebar principal (.left_col) */
.left_col {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    border-right: 1px solid #e9ecef;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

/* Título del sitio */
.nav_title {
    border: none !important;
    margin-bottom: var(--spacing-md);
}

.site_title {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: white !important;
    margin-bottom: 0;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    display: block;
    text-decoration: none;
}

.site_title:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.site_title a {
    color: white !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.site_title img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
}

/* Perfil de usuario */
.profile {
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--border-radius-md);
    margin-left:  var(--spacing-md);
    margin-right: var(--spacing-md);

    padding: var(--spacing-sm) var(--spacing-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.profile_pic {
    flex-shrink: 0;
}

.profile_pic img {
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    width: 40px !important;
    height: 40px !important;
    object-fit: cover;
    transition: all var(--transition-fast);
}

.profile_pic img:hover {
    border-color: var(--secondary-color);
    transform: scale(1.05);
}

.profile_info {
    flex: 1;
    min-width: 0; /* Permite que el texto se ajuste */
    padding:0 ;
}

.profile_info span {
    color: var(--text-secondary);
    display: block;
}

.profile_info h2 {
    margin: 0;
    font-weight: 600;
    line-height: 1.1;
}

.profile_info h2 a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.profile_info h2 a:hover {
    color: var(--accent-color);
}

/* Secciones del menú */
.nav.side-menu > li.active, .nav.side-menu > li.current-page{
    border: 0;
}
.nav li li.current-page a{
    color: var(--accent-color) !important;
    font-weight: 600;
}
.menu_section {
    margin-bottom: var(--spacing-lg);
}

.menu_section h3 {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    border-bottom: 1px solid #e9ecef;
}

/* Menú lateral */
.nav-md .nav.side-menu {
    padding: 0 var(--spacing-sm);
}

.nav.side-menu>li {
    margin-bottom: 2px;
}

.nav.side-menu>li>a {
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
    font-weight: 500;
    position: relative;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
}
.nav-md .nav.side-menu>li>a {
    display: flex;
    align-items: center;
}
.nav.side-menu>li>a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: transparent;
    transition: all var(--transition-fast);
}

.nav.side-menu>li>a:hover {
    background: rgba(52, 152, 219, 0.1);
    color: var(--accent-color);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}
.nav.side-menu > li > a:hover {
     color: var(--accent-color) !important;
}
.nav.side-menu>li>a:hover:before {
    background: var(--accent-color);
}

.nav.side-menu>li.active>a {
    background: linear-gradient(135deg, var(--accent-color) 0%, #2980b9 100%);
    color: white !important;
    box-shadow: var(--shadow-md);
}

.nav.side-menu>li.active>a:before {
    background: rgba(255, 255, 255, 0.3);
}

.nav.side-menu>li.active>a:hover {
    background: linear-gradient(135deg, #2980b9 0%, var(--accent-color) 100%);
}

/* Iconos del menú */
.nav.side-menu>li>a i {
    margin-right: var(--spacing-sm);
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
    transition: all var(--transition-fast);
}

.nav.side-menu>li.active>a i,
.nav.side-menu>li>a:hover i {
    color: inherit;
    transform: scale(1.1);
}

/* Submenús */
.nav-md ul.nav.child_menu li::before {
  left: 16px;
}
.nav-md ul.nav.child_menu li::after {
  left: 20px;
}
.nav.child_menu {
    margin-top: var(--spacing-xs);
}
.nav.child_menu li {
  padding-left: 20px;
}
.nav.child_menu li a {

    color: var(--text-secondary);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.nav.child_menu li a:hover {
    background: rgba(52, 152, 219, 0.08);
    color: var(--accent-color);
    transform: translateX(2px);
}

.nav.child_menu li.active a {
    background: rgba(52, 152, 219, 0.15);
    color: var(--accent-color);
    font-weight: 600;
}

/* Iconos de expansión */
.fa-chevron-down {
    margin-left: auto;
    transition: transform var(--transition-fast);
}

.nav.side-menu>li.open > a .fa-chevron-down {
    transform: rotate(180deg);
}

/* Bordes decorativos en submenús */
.nav.child_menu li:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* ==========================================
   MENÚ COLAPSADO (.nav-sm)
   ========================================== */

/* Submenús en modo colapsado */
.nav-sm ul.nav.child_menu {
    left: 100%;
    position: absolute;
    top: 0;
    width: 240px;
    z-index: 4000;
    background: linear-gradient(135deg, var(--bg-white) 0%, #f8f9fa 100%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    display: none;
    margin-top: 0;
    padding: var(--spacing-sm) 0;
}

/* Estilos de enlaces en submenús colapsados */
.nav-sm ul.nav.child_menu li a {
    color: var(--text-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
    font-size: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.nav-sm ul.nav.child_menu li a:hover {
    background: rgba(52, 152, 219, 0.08);
    color: var(--accent-color);
    transform: translateX(2px);
}

.nav-sm ul.nav.child_menu li.active a {
    background: rgba(52, 152, 219, 0.15);
    color: var(--accent-color);
    font-weight: 600;
}

/* ==========================================
   MODO OSCURO - SIDEBAR
   ========================================== */
[data-theme="dark"] .left_col {
    background: linear-gradient(180deg, var(--primary-color) 0%, #2c3e50 100%);
    border-right: 1px solid #34495e;
}

[data-theme="dark"] .site_title {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
}

[data-theme="dark"] .profile {
    background: rgba(52, 73, 94, 0.8);
    border-color: #34495e;
}

[data-theme="dark"] .profile_info span {
    color: var(--text-light);
}

[data-theme="dark"] .profile_info h2 a {
    color: var(--text-primary);
}

[data-theme="dark"] .menu_section h3 {
    color: var(--text-light);
    border-bottom-color: #34495e;
}

[data-theme="dark"] .nav.side-menu>li>a {
    color: var(--text-secondary);
}

[data-theme="dark"] .nav.side-menu>li>a:hover {
    background: rgba(52, 152, 219, 0.2);
    color: var(--accent-color);
}

[data-theme="dark"] .nav.side-menu>li.active>a {
    background: linear-gradient(135deg, var(--accent-color) 0%, #2980b9 100%);
    color: white !important;
}

[data-theme="dark"] .nav.child_menu li a {
    color: var(--text-light);
}

[data-theme="dark"] .nav.child_menu li a:hover {
    background: rgba(52, 152, 219, 0.15);
    color: var(--accent-color);
}

[data-theme="dark"] .nav.child_menu li.active a {
    background: rgba(52, 152, 219, 0.25);
    color: var(--accent-color);
}

[data-theme="dark"] .nav.child_menu li:not(:last-child) {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Submenús en modo colapsado - modo oscuro */
[data-theme="dark"] .nav-sm ul.nav.child_menu {
    background: linear-gradient(135deg, var(--primary-color) 0%, #2c3e50 100%);
    border: 1px solid #34495e;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .nav-sm ul.nav.child_menu li a {
    color: var(--text-light);
}

[data-theme="dark"] .nav-sm ul.nav.child_menu li a:hover {
    background: rgba(52, 152, 219, 0.15);
    color: var(--accent-color);
}

[data-theme="dark"] .nav-sm ul.nav.child_menu li.active a {
    background: rgba(52, 152, 219, 0.25);
    color: var(--accent-color);
}

/* ==========================================
   PANELES LATERALES EN MODO OSCURO
   ========================================== */

/* Panel lateral principal */
[data-theme="dark"] #panelLateral {
    background: linear-gradient(135deg, var(--primary-color) 0%, #2c3e50 100%);
    border: 1px solid #34495e;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
}

/* Contenido del panel lateral */
[data-theme="dark"] #panelLateral .x_content {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

/* Título del panel lateral */
[data-theme="dark"] #panelLateral .x_title {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* Elementos dentro del panel lateral */
[data-theme="dark"] #panelLateral .empleadoBox,
[data-theme="dark"] #panelLateral .vehiculoBox,
[data-theme="dark"] #panelLateral .maquinaBox {
    background: var(--bg-white);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] #panelLateral .empleadoBox:hover,
[data-theme="dark"] #panelLateral .vehiculoBox:hover,
[data-theme="dark"] #panelLateral .maquinaBox:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Panel lateral de máquinas */
[data-theme="dark"] #panelLateralMaquina {
    background: linear-gradient(135deg, var(--primary-color) 0%, #2c3e50 100%);
    border: 1px solid #34495e;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
}

/* Contenido del panel lateral de máquinas */
[data-theme="dark"] #panelLateralMaquina .x_content {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

/* Título del panel lateral de máquinas */
[data-theme="dark"] #panelLateralMaquina .x_title {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* Elementos dentro del panel lateral de máquinas */
[data-theme="dark"] #panelLateralMaquina .maquinaBox {
    background: var(--bg-white);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] #panelLateralMaquina .maquinaBox:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Panel lateral de vehículos */
[data-theme="dark"] #panelLateralVehiculo {
    background: linear-gradient(135deg, var(--primary-color) 0%, #2c3e50 100%);
    border: 1px solid #34495e;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
}

/* Contenido del panel lateral de vehículos */
[data-theme="dark"] #panelLateralVehiculo .x_content {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

/* Título del panel lateral de vehículos */
[data-theme="dark"] #panelLateralVehiculo .x_title {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* Elementos dentro del panel lateral de vehículos */
[data-theme="dark"] #panelLateralVehiculo .vehiculoBox {
    background: var(--bg-white);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] #panelLateralVehiculo .vehiculoBox:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ==========================================
   MODALES
   ========================================== */
.modal-content {
    border: none;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--shadow-xl);
}

.modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: white;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0 !important;
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
}

.modal-header .close {
    color: white;
    opacity: 0.9;
    text-shadow: none;
}

.modal-header h5,
.modal-header .modal-title {
    color: white;
    font-weight: 600;
}

.modal-body {
    padding: var(--spacing-lg);
}

.modal-footer {
    border-top: 1px solid #e8e8e8;
    padding: var(--spacing-md) var(--spacing-lg);
}

/* ==========================================
   MODO OSCURO - MODALES
   ========================================== */
[data-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

[data-theme="dark"] .modal-content {
    background-color: var(--bg-white) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%) !important;
    color: white !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .modal-header .close {
    color: white !important;
    opacity: 0.9 !important;
    text-shadow: none !important;
}

[data-theme="dark"] .modal-header .close:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    opacity: 1 !important;
}

[data-theme="dark"] .modal-header h5,
[data-theme="dark"] .modal-header .modal-title {
    color: white !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .modal-body {
    border-radius: var(--border-radius-lg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .modal-footer .btn {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .modal-footer .btn:hover {
    color: white !important;
}

/* ==========================================
   PIZARRA (PLANNING BOARD)
   ========================================== */
#pizarra {
    background: var(--bg-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
}

/* Optimizar espacio en contenedor de pizarra */
.x_panel:has(#pizarra) .x_content {
    padding: var(--spacing-sm) !important;
}

/* Días del calendario */
.day-of-week {
    background: var(--bg-light);
    padding: var(--spacing-sm);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
}

/* Celdas de día */
#dia {
    transition: all var(--transition-fast);
    border: 1px solid #e8e8e8 !important;
    border-radius: var(--border-radius-sm);
}

#dia:hover {
    background: #f8f9fa !important;
    box-shadow: var(--shadow-sm);
}

/* Drag and drop */
.empleadoBox,
.vehiculoBox,
.maquinaBox  {
    background: white;
    border: 2px solid #e8e8e8;
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-xs);
    cursor: move;
    box-shadow: var(--shadow-sm);
    font-size: 12px;
}

.obraBox {
    .empleadoBox,
    .vehiculoBox,
    .maquinaBox  {
        margin-bottom: 0px;
    }
}

/* Solo aplicar animaciones de hover fuera de los paneles laterales */
.empleadoBox:not(#panelLateral *):not(#panelLateralMaquina *):not(#panelLateralVehiculo *):hover,
.vehiculoBox:not(#panelLateral *):not(#panelLateralMaquina *):not(#panelLateralVehiculo *):hover,
.maquinariaBox:not(#panelLateral *):not(#panelLateralMaquina *):not(#panelLateralVehiculo *):hover {
    border-color: var(--accent-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    transition: all var(--transition-fast);
}

#panelLateralMaquina{
    .select2.select2-container  {
        display: none !important;
    }
}
#panelLateralMaquina.open{
    .select2.select2-container  {
        display: block !important;
    }
}


/* Panel lateral - NO sobrescribir estilos originales */

/* ==========================================
   ALERTAS Y MENSAJES
   ========================================== */
.alert {
    border: none;
    border-radius: var(--border-radius-sm) !important;
    padding: 15px 20px;
    box-shadow: var(--shadow-sm);
}

.alert-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
}

.alert-danger {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
}

.alert-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
}

.alert-info {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    color: #0c5460;
}

/* ==========================================
   TÍTULOS DE PÁGINA
   ========================================== */
.page-title h3 {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* ==========================================
   BADGES Y LABELS
   ========================================== */
.badge,
.label {
    border-radius: var(--border-radius-sm);
    padding: 6px 12px;
    font-weight: 500;
    font-size: 0.85rem;
}

/* ==========================================
   MEJORAS DE ACCESIBILIDAD
   ========================================== */
*:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ==========================================
   ANIMACIONES SUTILES
   ========================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Animación fadeIn solo para alerts, NO para x_panel */
.alert {
    animation: fadeIn 0.3s ease;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .x_title {
        padding: var(--spacing-sm) var(--spacing-md) !important;
    }

    .x_content {
        padding: var(--spacing-sm) !important;
    }

    .btn {
        padding: 8px 16px !important;
    }
}

/* ==========================================
   OPTIMIZACIONES ADICIONALES
   ========================================== */

/* Mejorar visualización de filtros y formularios de búsqueda */
.x_content .row:first-child {
    margin-top: 0;
}

/* Inputs pequeños en filtros */
.form-control-sm {
    font-size: 0.9rem !important;
    padding: 6px 10px !important;
}


/* Mejorar espaciado en formularios densos */
.form-row .form-group,
.form-inline .form-group {
    margin-bottom: 10px;
}

/* Ajustar select2 para que no rompa el layout */

.select2-container .select2-selection--single {
    min-height: 30px !important;
}

/* Paginación más compacta */
.pagination {
    margin: 10px 0;
}

.pagination li {
    margin: 0 2px;
}

/* Reducir espacio en alerts dentro de x_content */
.x_content .alert {
    margin-bottom: 15px;
}

.x_content .alert:last-child {
    margin-bottom: 0;
}

/* ==========================================
   LOADING STATES
   ========================================== */
[wire\:loading] {
    opacity: 0.6;
    transition: opacity var(--transition-normal);
}

/* ==========================================
   SCROLLBAR PERSONALIZADO
   ========================================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-light);
    border-radius: var(--border-radius-sm);
}

::-webkit-scrollbar-thumb {
    background: var(--text-light);
    border-radius: var(--border-radius-sm);
    transition: background var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ==========================================
   TOGGLE MODO OSCURO
   ========================================== */
.theme-toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
    cursor: pointer;
    border-radius: 30px;
    background: var(--bg-light);
    border: 2px solid var(--text-light);
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.theme-toggle:hover {
    border-color: var(--accent-color);
    box-shadow: var(--shadow-md);
}

.theme-toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--text-primary);
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.theme-toggle::after {
    content: '☀️';
    position: absolute;
    top: 50%;
    left: 35px;
    transform: translateY(-50%);
    font-size: 14px;
    transition: all var(--transition-normal);
    pointer-events: none;
}

.theme-toggle.dark {
    background: var(--bg-dark);
    border-color: var(--accent-color);
}

.theme-toggle.dark::before {
    left: 32px;
    background: var(--accent-color);
}

.theme-toggle.dark::after {
    content: '🌙';
    left: 8px;
}

/* Contenedor del toggle en la navbar */
/* ==========================================
   TOGGLE MODO OSCURO
   ========================================== */
.theme-toggle-container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 15px;
    margin: 0;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.theme-toggle-container:hover {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .theme-toggle-container:hover {
    background: rgba(255, 255, 255, 0.1);
}

.theme-toggle-container label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.theme-toggle-container label i {
    font-size: 14px;
    opacity: 0.8;
}

.theme-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: none;
    outline: none;
    overflow: hidden; /* Prevenir que la pelota se salga del contenedor */
}

.theme-toggle:focus {
    box-shadow: 0 0 0 2px var(--accent-color);
}

.theme-toggle:hover {
    background: #d0d0d0;
}

.theme-toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: all var(--transition-normal);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.theme-toggle::after {
    content: '☀️';
    position: absolute;
    top: 50%;
    left: 26px;
    transform: translateY(-50%);
    font-size: 12px;
    transition: all var(--transition-normal);
    opacity: 0.7;
}

.theme-toggle.dark {
    background: var(--accent-color);
}

.theme-toggle.dark::before {
    transform: translateX(22px); /* Ajuste preciso para mantener la pelota dentro del contenedor */
}

.theme-toggle.dark::after {
    content: '🌙';
    left: 4px;
}

/* Integración en navbar */
.theme-toggle-nav-item {
    margin-left: 10px;
}

.theme-toggle-nav-item .theme-toggle-container {
    padding: 8px 12px;
    margin: 0;
    min-height: 50px;
}

/* Responsive */
@media (max-width: 768px) {
    .theme-toggle-container {
        padding: 8px;
        gap: 6px;
    }

    .theme-toggle-container label {
        font-size: 12px;
    }

    .theme-toggle-container label .hidden-xs {
        display: none !important;
    }

    .theme-toggle {
        width: 40px;
        height: 22px;
    }

    .theme-toggle::before {
        width: 18px;
        height: 18px;
    }

    .theme-toggle.dark::before {
        transform: translateX(18px);
    }

    .theme-toggle::after {
        left: 22px;
    }

    .theme-toggle.dark::after {
        left: 2px;
    }
}

/* ==========================================
   ICONOS FONTAWESOME MEJORADOS
   ========================================== */
.fas,
.far,
.fal,
.fab,
.fa {
    transition: all var(--transition-fast);
}

/* Iconos en navegación */
.nav.side-menu li a i {
    width: 24px;
    text-align: center;
    margin-right: 12px;
    font-size: 1.4rem;
}

/* Iconos en títulos */
.x_title i,
.x_title .fa {
    margin-right: 10px;
    color: var(--accent-color);
    font-size: 1.5rem;
}


/* Iconos en alerts */
.alert i,
.alert .fa {
    margin-right: 10px;
    font-size: 1.3rem;
}

/* Iconos en badges */
.badge i,
.badge .fa,
.label i,
.label .fa {
    margin-right: 6px;
    font-size: 1.1rem;
}

/* Iconos en tablas */
.table i,
.table .fa {
    font-size: 1.2rem;
}

/* Iconos interactivos - hover effects */
.nav.side-menu li a:hover i,
.btn:hover i,
.btn:hover .fa {
    transform: scale(1.1);
}

/* Iconos de estado */
.text-success i,
.text-success .fa { color: var(--success-color); }
.text-danger i,
.text-danger .fa { color: var(--danger-color); }
.text-warning i,
.text-warning .fa { color: var(--warning-color); }
.text-info i,
.text-info .fa { color: var(--accent-color); }
.text-primary i,
.text-primary .fa { color: var(--primary-color); }

/* Iconos en tiles/estadísticas */
.tile .fa,
.tile i {
    /*font-size: 3.5rem;*/
    margin-bottom: 10px;
    opacity: 0.8;
}

.tile:hover .fa,
.tile:hover i {
    opacity: 1;
    transform: scale(1.05);
}

/* Iconos en modales */
.modal-header i,
.modal-header .fa {
    margin-right: 10px;
    font-size: 1.4rem;
}


/* ==========================================
   TOOLTIPS MODERNOS
   ========================================== */
.tooltip {
    font-size: 0.875rem;
}

.tooltip-inner {
    background: var(--bg-dark) !important;
    color: white !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 8px 12px !important;
    box-shadow: var(--shadow-lg) !important;
    font-weight: 500;
    max-width: 250px;
    text-align: center;
}

.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: var(--bg-dark) !important;
}

.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: var(--bg-dark) !important;
}

.tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: var(--bg-dark) !important;
}

.tooltip.bs-tooltip-right .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: var(--bg-dark) !important;
}

/* Animación de entrada suave */
.tooltip.show {
    animation: tooltipFadeIn 0.2s ease;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================
   DROPDOWNS MEJORADOS
   ========================================== */
.dropdown-menu {
    border: none !important;
    border-radius: var(--border-radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 8px 0 !important;
    margin-top: 8px !important;
    background: var(--bg-white) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.dropdown-item {
    padding: 10px 20px !important;
    color: var(--text-primary) !important;
    font-weight: 500;
    transition: all var(--transition-fast) !important;
    border-radius: var(--border-radius-sm) !important;
    margin: 2px 8px !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--accent-color) !important;
    color: white !important;
    transform: translateX(4px);
}

.dropdown-item i,
.dropdown-item .fa {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

.dropdown-divider {
    margin: 8px 0 !important;
    border-top: 1px solid #f0f0f0 !important;
}

/* Dropdown toggle button */
.dropdown-toggle {
    transition: all var(--transition-fast) !important;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus,
.dropdown-toggle:active {
    box-shadow: var(--shadow-sm) !important;
}

/* Animación de entrada para dropdown */
.dropdown-menu.show {
    animation: dropdownSlideIn 0.2s ease;
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================
   DROPDOWNS EN MODO OSCURO
   ========================================== */

[data-theme="dark"] .dropdown-menu {
    background: var(--bg-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .dropdown-menu a.checked{
    background: var(--accent-color) !important;
    color: white !important;
}
[data-theme="dark"] .dropdown-menu a{
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-menu a:hover,
[data-theme="dark"] .dropdown-menu a:focus {
    background: var(--accent-color) !important;
    color: white !important;
}

[data-theme="dark"] .dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================
   DROPDOWNS EN NAVBAR - MODO OSCURO
   ========================================== */

[data-theme="dark"] .navbar-nav .dropdown {
    position: relative;
}

[data-theme="dark"] .navbar-nav .dropdown-toggle {
    color: var(--text-primary) !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--border-radius-sm) !important;
    transition: all var(--transition-fast) !important;
}

[data-theme="dark"] .navbar-nav .dropdown-toggle:hover,
[data-theme="dark"] .navbar-nav .dropdown-toggle:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--accent-color) !important;
}

[data-theme="dark"] .navbar-nav .dropdown-menu {
    background: var(--bg-dark) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    margin-top: 4px !important;
}

[data-theme="dark"] ul.msg_list li {
    background-color: #212529 !important;
}


/* ==========================================
   PROGRESS BARS MODERNOS
   ========================================== */
.progress {
    border-radius: 20px !important;
    background: #f0f0f0 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: var(--spacing-md);
}

.progress-bar {
    border-radius: 20px !important;
    transition: width 0.6s ease !important;
    position: relative;
    overflow: hidden;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: progressShine 2s infinite;
}

@keyframes progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Colores específicos para progress bars */
.progress-bar-success {
    background: linear-gradient(135deg, var(--success-color) 0%, #1e9e85 100%) !important;
}

.progress-bar-info {
    background: linear-gradient(135deg, var(--accent-color) 0%, #2980b9 100%) !important;
}

.progress-bar-warning {
    background: linear-gradient(135deg, var(--warning-color) 0%, #e67e22 100%) !important;
}

.progress-bar-danger {
    background: linear-gradient(135deg, var(--danger-color) 0%, #c0392b 100%) !important;
}

/* Progress bars animados */
.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
    background-size: 20px 20px !important;
    animation: progress-bar-stripes 1s linear infinite !important;
}

@keyframes progress-bar-stripes {
    0% { background-position: 20px 0; }
    100% { background-position: 0 0; }
}

/* Progress bars pequeños */
.progress-sm {
    height: 8px !important;
}

.progress-lg {
    height: 16px !important;
}

/* ==========================================
   PROGRESS BARS EN MODO OSCURO
   ========================================== */

[data-theme="dark"] .progress {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}


/* ==========================================
   CARDS DE ESTADÍSTICAS (TILES)
   ========================================== */
.tile {
    background: var(--bg-white) !important;
    border: none !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    margin-bottom: var(--spacing-lg);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color), var(--success-color));
}

.tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl) !important;
}

.tile:hover::before {
    height: 6px;
}

/* Variantes de colores para tiles */
.tile.tile-success {
    border-left: 4px solid var(--success-color);
}

.tile.tile-success::before {
    background: linear-gradient(90deg, var(--success-color), #1e9e85);
}

.tile.tile-info {
    border-left: 4px solid var(--accent-color);
}

.tile.tile-info::before {
    background: linear-gradient(90deg, var(--accent-color), #2980b9);
}

.tile.tile-warning {
    border-left: 4px solid var(--warning-color);
}

.tile.tile-warning::before {
    background: linear-gradient(90deg, var(--warning-color), #e67e22);
}

.tile.tile-danger {
    border-left: 4px solid var(--danger-color);
}

.tile.tile-danger::before {
    background: linear-gradient(90deg, var(--danger-color), #c0392b);
}


/* Tiles pequeños */
.tile.tile-sm {
    padding: var(--spacing-md) !important;
}

.tile.tile-sm h3 {
    font-size: 1.8rem !important;
}

.tile.tile-sm .fa,
.tile.tile-sm i {
    font-size: 3.2rem !important;
}

/* Tiles con gradientes de fondo */
.tile-gradient {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%) !important;
    color: white !important;
}

.tile-gradient h3,
.tile-gradient h2,
.tile-gradient p,
.tile-gradient span {
    color: white !important;
}

.tile-gradient .fa,
.tile-gradient i {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ==========================================
   TYPOGRAPHY MEJORADA
   ========================================== */
/* Jerarquía de títulos */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 2rem; font-weight: 700; }
h3 { font-size: 1.75rem; font-weight: 600; }
h4 { font-size: 1.5rem; font-weight: 600; }
h5 { font-size: 1.25rem; font-weight: 600; }
h6 { font-size: 1.1rem; font-weight: 600; }

/* Texto del cuerpo */
body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    font-weight: 400;
    background-color: var(--bg-light);
    min-height: 100vh;
}

p {
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

/* Texto pequeño y grande */
.text-small,
small {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.text-large {
    font-size: 1.125rem;
    line-height: 1.5;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.4;
}

/* Texto con peso */
.text-light { font-weight: 300; }
.text-normal { font-weight: 400; }
.text-medium { font-weight: 500; }
.text-semibold { font-weight: 600; }
.text-bold { font-weight: 700; }

/* Espaciado de letras */
.text-tracking-tight { letter-spacing: -0.025em; }
.text-tracking-normal { letter-spacing: 0; }
.text-tracking-wide { letter-spacing: 0.025em; }

/* Líneas de texto */
.text-leading-tight { line-height: 1.25; }
.text-leading-normal { line-height: 1.5; }
.text-leading-relaxed { line-height: 1.625; }

/* Enlaces mejorados */
a {
    color: var(--accent-color);
    text-decoration: none;
    transition: all var(--transition-fast);
    font-weight: 500;
}

a:hover,
a:focus {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Listas mejoradas */
ul, ol {
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

li {
    margin-bottom: 4px;
    line-height: 1.6;
}

/* Blockquotes */
blockquote {
    border-left: 4px solid var(--accent-color);
    padding-left: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    font-style: italic;
    color: var(--text-secondary);
    background: var(--bg-light);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
}

/* Código inline */
code {
    background: var(--bg-light);
    color: var(--danger-color);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
}

/* Bloques de código */
pre {
    background: var(--bg-light);
    border: 1px solid #e8e8e8;
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md);
    overflow-x: auto;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
    line-height: 1.5;
}

pre code {
    background: none;
    padding: 0;
    border-radius: 0;
}

/* ==========================================
   MICRO-INTERACCIONES
   ========================================== */
/* Efectos hover sutiles */
.btn:not(:hover) {
    transform: none;
}

.card:hover {
    transform: translateY(-2px);
}

.table tbody tr:hover {
    transform: scale(1.002);
}

/* Estados de foco mejorados */
.form-control:focus,
.select2-container--default .select2-selection--single:focus {
    transform: scale(1.01);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15) !important;
}

/* Transiciones suaves para todos los elementos interactivos */
button,
.btn,
.nav a,
.dropdown-item,
.table tbody tr,
.tile,
.x_panel:not(#panelLateral):not(#panelLateralMaquina):not(#panelLateralVehiculo),
.form-control,
.select2-container {
    transition: all var(--transition-fast);
}

/* Efectos de presión para botones */
.btn:active {
    transform: translateY(1px) scale(0.98);
}

/* Micro-animaciones para elementos que aparecen */
.x_panel,
.tile,
.alert {
    animation: slideInUp 0.4s ease-out;
}

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

/* Efectos de ripple para botones */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:active::before {
    width: 300px;
    height: 300px;
}

/* Estados de éxito/error con animación */
.success-animation {
    animation: successPulse 0.6s ease;
}

@keyframes successPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.error-animation {
    animation: errorShake 0.5s ease;
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Transiciones de entrada escalonadas para listas */
.x_content .row > div {
    animation: fadeInStagger 0.6s ease-out both;
}

.x_content .row > div:nth-child(1) { animation-delay: 0.1s; }
.x_content .row > div:nth-child(2) { animation-delay: 0.2s; }
.x_content .row > div:nth-child(3) { animation-delay: 0.3s; }
.x_content .row > div:nth-child(4) { animation-delay: 0.4s; }
.x_content .row > div:nth-child(5) { animation-delay: 0.5s; }
.x_content .row > div:nth-child(6) { animation-delay: 0.6s; }

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

/* ==========================================
   ESTADOS DE CARGA MEJORADOS
   ========================================== */
/* Spinner moderno */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(52, 152, 219, 0.3);
    border-radius: 50%;
    border-top-color: var(--accent-color);
    animation: spin 1s ease-in-out infinite;
    margin-right: 8px;
}

.spinner-lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

.spinner-sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

/* Estados de carga para botones */
.btn.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Estados de carga para tarjetas */
.x_panel.loading {
    position: relative;
    overflow: hidden;
}

.x_panel.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: loadingShimmer 1.5s infinite;
    z-index: 10;
}

@keyframes loadingShimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Skeleton loading states */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
    border-radius: var(--border-radius-sm);
}

@keyframes skeletonLoading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Skeleton para texto */
.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-text:last-child {
    width: 60%;
}

.skeleton-text:nth-child(2) {
    width: 80%;
}

.skeleton-text:nth-child(3) {
    width: 70%;
}

/* Skeleton para títulos */
.skeleton-title {
    height: 1.5rem;
    margin-bottom: 1rem;
    width: 70%;
}

/* Skeleton para avatares */
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* Skeleton para botones */
.skeleton-btn {
    height: 2.5rem;
    width: 120px;
    border-radius: var(--border-radius-sm);
}

/* Skeleton para tarjetas */
.skeleton-card {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.skeleton-card .skeleton-title {
    margin-bottom: var(--spacing-md);
}

/* Overlay de carga para secciones completas */
.loading-overlay {
    position: relative;
}

.loading-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-overlay::before {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid rgba(52, 152, 219, 0.3);
    border-top: 3px solid var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Estados de carga para tablas */
.table.loading tbody tr {
    opacity: 0.5;
    pointer-events: none;
}

.table.loading::after {
    content: 'Cargando datos...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-white);
    padding: 10px 20px;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-md);
    font-weight: 500;
    color: var(--text-secondary);
    z-index: 10;
}

/* Estados de carga para formularios */
.form-control.loading {
    background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
    color: transparent;
    pointer-events: none;
}

/* ==========================================
   PASILLO-HEADER EN MODO OSCURO
   ========================================== */

[data-theme="dark"] .pasillo-header {
    background-color: var(--bg-dark) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

/* ==========================================
   WELL EN MODO OSCURO
   ========================================== */

[data-theme="dark"] .well {
    background-color: var(--bg-dark) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================
   FRAPPE GANTT EN MODO OSCURO
   ========================================== */

[data-theme="dark"] #gantt {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .gantt-container {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .gantt-container .grid-header {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .gantt-container .grid-row {
    background-color: var(--bg-white) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .gantt-container .grid-row:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .gantt-container .grid-row:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .gantt-container .bar {
    background-color: var(--accent-color) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

[data-theme="dark"] .gantt-container .bar:hover {
    background-color: var(--secondary-color) !important;
}

[data-theme="dark"] .gantt-container .bar-label {
    color: white !important;
    font-weight: 600;
}

[data-theme="dark"] .gantt-container .bar-progress {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] .gantt-container .handle {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] .gantt-container .handle:hover {
    background-color: white !important;
}

[data-theme="dark"] .gantt-container .arrow {
    border-color: var(--accent-color) !important;
}

[data-theme="dark"] .gantt-container .arrow::after {
    border-color: var(--accent-color) !important;
}

[data-theme="dark"] .gantt-container .popup {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .gantt-container .popup h3 {
    color: var(--text-primary) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .gantt-container .popup p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .gantt-container .today-highlight {
    background-color: rgba(52, 152, 219, 0.1) !important;
    border-left: 2px solid var(--accent-color) !important;
}

[data-theme="dark"] .gantt-container .grid-line {
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .gantt-container .grid-line-thick {
    border-left: 2px solid rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .gantt-container .date {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .gantt-container .viewmode-select {
    background-color: var(--bg-white) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .gantt-container .viewmode-select:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2) !important;
}

[data-theme="dark"] .gantt-container .viewmode-select option {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .gantt-container .side-header {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .gantt-container .current-upper {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .gantt-container .upper-text {
    color: var(--text-secondary) !important;
    font-weight: 500;
}

[data-theme="dark"] .gantt-container .popup-wrapper {
    background-color: var(--bg-dark) !important;
}

[data-theme="dark"] .gantt-container .popup-wrapper .subtitle {
    color: var(--text-secondary) !important;
}

.empleadosPanel div{
  background-color:#fff;
  padding:0 10px  0 0;
  border-radius:3px;
  margin-bottom:10px;
  display:flex;
  align-items: center; 
}
[data-theme="dark"] .empleadosPanel div{
  background-color:var(--bg-dark);
}