/* --- Variables de Tema --- */
:root {
    --bg-color: #f8f9fa;
    --text-color: #212529;
    --card-bg: #ffffff;
    --border-color: #dee2e6;
    --sidebar-bg: #f8f9fa;
    --table-striped-bg: rgba(0, 0, 0, 0.05);
    --table-header-bg: #e7f1ff; /* Celeste para encabezados en modo claro */
    --modal-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: #ced4da;
}

body.dark-mode {
    --bg-color: #2c3034; /* Un gris un poco más claro que el negro puro */
    --text-color: #dee2e6; /* Gris claro para el texto principal */
    --card-bg: #343a40;
    --border-color: #495057;
    --sidebar-bg: #2b3035;
    --table-striped-bg: #3a4045; /* Un gris ligeramente más claro para el efecto cebra */
    --table-header-bg: #0d6efd; /* Azul Bootstrap para encabezados en modo oscuro */
    --modal-bg: #343a40;    
    --input-bg: #495057;
    --input-border: #6c757d;
}

/* --- Aplicación de Variables --- */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

.sidebar { background-color: var(--sidebar-bg) !important; }
.card, .modal-content, .list-group-item { background-color: var(--card-bg); color: var(--text-color); border-color: var(--border-color); }
body.dark-mode .table {
    /* Establece el color de fondo base para las filas pares en modo oscuro */
    background-color: var(--card-bg);
}
.table, .table td, .table th { color: var(--text-color); border-color: var(--border-color); }
.table thead th {
    background-color: var(--table-header-bg);
}
body.dark-mode .table thead th {
    color: #f8f9fa; /* Texto casi blanco para encabezados en modo oscuro */
    border-color: #0a58ca; /* Borde un poco más oscuro que el fondo azul */
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--table-striped-bg); }
.form-control, .form-select { background-color: var(--input-bg); color: var(--text-color); border-color: var(--input-border); }
.form-control:focus, .form-select:focus { background-color: var(--input-bg); color: var(--text-color); }
body.dark-mode .form-control::placeholder { color: #adb5bd; }
body.dark-mode .text-muted { color: #adb5bd !important; }
body.dark-mode .bg-light { background-color: #495057 !important; }
body.dark-mode .text-dark { color: #f8f9fa !important; }
body.dark-mode .card-header {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}

/* --- Ajustes para enlaces en Modo Oscuro --- */
body.dark-mode a {
    color: #dee2e6; /* Un gris claro para los enlaces */
}
body.dark-mode a:hover {
    color: #f8f9fa; /* Blanco al pasar el ratón */
}

/* Estilos para Platflow */

.gantt .bar-progress {
    fill: #0d6efd; /* Color azul de Bootstrap para el progreso */
}

.gantt .bar-label {
    font-size: 12px;
    font-weight: 500;
}

.gantt .bar-complete .bar-progress {
    fill: #198754; /* Verde para tareas completadas */
}

.gantt .bar-overdue .bar-progress {
    fill: #dc3545; /* Rojo para tareas atrasadas */
}

/* Estilos para el buscador global */
#global-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
}
body.dark-mode #global-search-results {
    background-color: var(--card-bg);
}