:root {
  --bg-main: #ffffff;
  --bg-card: #f5f6fa;
  --text-main: #2c3e50;
  --border: #e0e0e0;
}

.dark {
  --bg-main: #0a0a1a;
  --bg-card: #1a1a3a;
  --text-main: #ffffff;
  --border: rgba(255,255,255,0.1);
}




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



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f4f4f4;
  color: #333;
}

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2c3e50;
  color: white;
  padding: 10px 20px;
}

.logo {
  font-size: 1.2em;
  font-weight: bold;
}

#newProjectBtn,
.pdf-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

#newTaskBtn {
  background-color: #2ecc71;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

/* Container principal */
.container {
  display: flex;
  min-height: 100vh;
  padding: 20px;
}

/* Sidebar */
aside {
  width: 200px;
  background-color: #ecf0f1;
  padding: 20px;
  border-right: 1px solid #ccc;
}

aside h3 {
  margin-bottom: 10px;
}

aside ul {
  list-style: none;
  margin-top: 10px;
}

aside li {
  margin: 5px 0;
  padding: 8px;
  cursor: pointer;
}

aside i {
  margin-right: 10px;
}

/* Main Content */
main {
  flex: 1;
  padding: 20px;
}

.project-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.project-info h2 {
  font-size: 1.5em;
}

/* Kanban Board */
.kanban-board {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.column {
  flex: 1;
  min-width: 280px;
  background-color: white;
  border-radius: 8px;
  padding: 10px;
}

.column h3 {
  margin-bottom: 10px;
  font-size: 1.2em;
  font-weight: bold;
}

.tasks {
  min-height: 300px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
}

.task-card {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
  position: relative;
  cursor: grab;
}

.task-card .options {
  position: absolute;
  top: 5px;
  right: 5px;
  display: none;
  z-index: 10;
}

.task-card:hover .options {
  display: block;
}

.options button {
  background: none;
  border: none;
  color: #3498db;
  cursor: pointer;
  margin-left: 5px;
}

.options button:hover {
  color: red;
}

/* Banderas de Prioridad */
.priority-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 4px;
  color: white;
  font-size: 0.85em;
  font-weight: bold;
  text-transform: uppercase;
}

.priority-badge.baja {
  background-color: #f1c40f;
  color: black;
}

.priority-badge.media {
  background-color: #3498db;
  color: white;
}

.priority-badge.alta {
  background-color: #e74c3c;
  color: white;
}

/* === Banderillas de Estado - Texto negro excepto rezagado === */
.status-badge {
  display: inline-block;
  min-width: 100px;        /* Más espacio para texto como "En Progreso" */
  height: 28px;            /* Un poco más alto para mejor centrado */
  line-height: 28px;       /* Centra verticalmente el texto */
  text-align: center;
  border-radius: 4px;
  color: white;
  font-size: 0.9em;         /* Fuente un poco más grande */
  font-weight: bold;
  text-transform: uppercase;
  padding: 0 6px;          /* Pequeño relleno adicional */
  white-space: nowrap;     /* Evita que el texto se rompa en varias líneas */
}
/* Colores específicos */
.status-badge.pending {
  background-color: #f1c40f;
  color: black;
}

.status-badge.inProgress {
  background-color: #008090;
  color: white;
}

.status-badge.completed {
  background-color: #00FF00;
  color: black;
}

.status-badge.overdue {
  background-color: #e74c3c;
  color: white; /* Solo Rezagado mantiene texto blanco */
}

.status-badge.pending {
  background-color: #f1c40f;
  color: black;
}


/* Sección de estadísticas */
.statistics {
  margin-top: 40px;
  text-align: center;
}

.stats-title {
  font-size: 1.5em;
  margin-bottom: 20px;
  color: #2c3e50;
}

.stats-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.stats-box {
  min-width: 120px;
  padding: 12px 20px;
  border-radius: 6px;
  color: white;
  font-weight: bold;
  font-size: 0.95em;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#totalTasks { background-color: #3498db; }
#pendingCount { background-color: #f1c40f; }
#inProgressCount { background-color: #008090; }
#completedCount { background-color: #00FF00; }
#overdueCount { background-color: #e74c3c; }

/* Gráfico de Pastel */
.chart-container {
  background-color: transparent; /* Hace el contenedor transparente */
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-left: 0px; /* 🔁 Este valor mueve la gráfica a la derecha */
  width: 400px;
}
.chart-container canvas {
 background-color: transparent; /* Hace el canvas transparente */
  max-width: 100%;
  height: auto !important;
}

/* Botón PDF */
.pdf-btn-container {
  text-align: center;
  margin-top: 20px;
}

.pdf-btn {
  background-color: #8e44ad;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.pdf-btn:hover {
  background-color: #732d91;
}

/* Modales */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: white;
  margin: 10% auto;
  padding: 20px;
  width: 80%;
  max-width: 600px;
  border-radius: 8px;
}

.close,
.close-detail {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close-detail:hover {
  color: black;
}

/* Formulario de nueva tarea */
.new-task-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.new-task-form label {
  font-weight: bold;
  margin-top: 10px;
}

.new-task-form input[type="text"],
.new-task-form textarea,
.new-task-form select,
.new-task-form input[type="number"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none;
}

.new-task-form button[type="submit"],
.new-task-form .cancel-btn {
  margin-top: 10px;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.new-task-form button[type="submit"] {
  background-color: #2c3e50;
  color: white;
}

.new-task-form button[type="submit"]:hover {
  background-color: #1abc9c;
}

.cancel-btn {
  background-color: #ccc;
  color: white;
}

.cancel-btn:hover {
  background-color: #999;
}

/* Detalles de la Tarea - Modal */
#taskDetailsModal .modal-content {
  width: 600px;
  max-width: 90%;
  margin: 5% auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: 'Segoe UI', sans-serif;
}

#taskDetailsModal h3 {
  color: #fff;
  font-size: 1.4em;
  margin-bottom: 20px;
  font-weight: bold;
  background-color: #2c3e50;
  padding: 10px;
  text-align: center;
}

.task-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-details p strong {
  min-width: 130px;
  display: inline-block;
  color: #2c3e50;
  font-weight: bold;
}

.time-tracking-info {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 4px;
  border-left: 4px solid #2c3e50;
  font-size: 0.95em;
  margin-top: 10px;
}

.time-tracking-info p {
  margin-bottom: 8px;
}

/* Historial de Tiempo */
#timeHistory {
  list-style-type: none;
  padding-left: 0;
  margin-top: 15px;
}

#timeHistory li {
  background-color: #ecf0f1;
  padding: 10px 12px;
  border-radius: 4px;
  margin-bottom: 8px;
  font-size: 0.9em;
  border-left: 4px solid #2c3e50;
}

#timeHistory li.total-time {
  background-color: #fdeeed;
  color: #e74c3c;
  font-weight: bold;
  border-left: 4px solid #e74c3c;
}

/* Notificación */
.notification {
  visibility: hidden;
  min-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 12px;
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.notification.show {
  visibility: visible;
  opacity: 1;
}
/* === Menú Lateral Izquierdo Mejorado === */
aside {
  width: 240px;
  background: linear-gradient(135deg, #ffffff, #f1f2f6);
  padding: 20px;
  border-right: 1px solid #ccc;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  font-family: 'Segoe UI', sans-serif;
}

aside h3 {
  font-size: 1em;
  margin-bottom: 12px;
  color: #2c3e50;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
}

aside ul {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}

aside li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  background-color: #ecf0f1;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Efecto hover */
aside li:hover {
  background-color: #dcdde1;
  transform: translateX(4px);
  box-shadow: inset 4px 0 0 #1abc9c;
}

/* Iconos con transición */
aside i.fas {
  color: #2c3e50;
  transition: color 0.3s ease;
}

aside li:hover i.fas {
  color: #1abc9c;
}

/* Separación entre secciones */
aside h3 + ul {
  margin-top: 10px;
}

aside .actions {
  margin-top: 20px;
}

/* Acciones especiales */
aside .actions li {
  background-color: #dbeafe;
  border-left: 4px solid #3b82f6;
  transition: all 0.3s ease;
}

aside .actions li:hover {
  background-color: #bfdbfe;
  transform: translateX(4px);
  box-shadow: inset 4px 0 0 #2563eb;
}
/* === Asistente de IA === */
.ai-assistant {
  margin-top: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ai-assistant h3 {
  font-size: 1em;
  margin-bottom: 10px;
  color: #2c3e50;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#aiForm {
  display: flex;
  align-items: center;
  gap: 10px;
}

#aiForm label {
  font-weight: bold;
  font-size: 0.9em;
  min-width: 180px;
}

#aiForm input[type="text"] {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#aiForm button {
  background-color: #2c3e50;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}

#aiForm button:hover {
  background-color: #1abc9c;
}

#responseContainer {
  margin-top: 10px;
  font-size: 0.9em;
  color: #333;
}
/* === Lista de Tareas === */
#taskList {
  margin-top: 20px;
}

.hidden {
  display: none;
}
/* === Calendario === */
#calendarContainer {
  margin-top: 20px;
}

#calendar {
  width: 100%;
  background-color: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#taskList table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

/* Estilo para celdas de la tabla - Vista List */
#taskList th,
#taskList td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  font-size: 0.9em;
  text-align: center; /* Centrado por defecto */
}

/* Alinea a la izquierda solo la columna NOMBRE */
#taskList td:first-child,
#taskList th:first-child {
  text-align: left !important;
}

/* === Tabla - Vista List === */
#taskList table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#taskList th,
#taskList td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

#taskList th {
  background-color: #2c3e50; /* Color azul marino */
  color: white;               /* Texto blanco */
  font-size: 1em;              /* Tamaño mayor, como un título */
  text-transform: uppercase;  /* Para estilo profesional */
  font-weight: bold;
  text-align: center;
}

#taskList tr:hover {
  background-color: #f2f2f2;
}

#taskList tr:nth-child(even) {
  background-color: #f2f2f2;
}

#taskList tr:hover {
  background-color: #e9ecef;
}
/* === Calendario === */
#calendarContainer {
  margin-top: 20px;
}

#calendar {
  width: 100%;
  background-color: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* === Menú de tres puntos === */
.task-card .menu-dots {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 1.2em;
  cursor: pointer;
}

.task-card .dropdown-menu {
  position: absolute;
  right: 10px;
  top: 30px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: none;
  z-index: 100;
}

.task-card .dropdown-menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.9em;
}

.task-card .dropdown-menu button:hover {
  background-color: #f2f2f2;
}

/* === Etiquetas de estado y prioridad === */
.priority-badge {
  display: inline-block;
  padding: 3px 8px; /* Más pequeño */
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 4px;
  color: black;
}

.priority-badge.baja { background-color: #f1c40f; } /* Amarillo claro */
.priority-badge.media { background-color: #e67e22; } /* Naranja */
.priority-badge.alta { background-color: #e74c3c; } /* Rojo */

/* === Bandera de Estado (Estado) === */
.status-badge {
  display: inline-block;
  width: 90px; /* Ancho fijo para todas las banderas */
  height: 20px; /* Alto fijo para todas las banderas */
  line-height: 20px; /* Alinea verticalmente el texto */
  text-align: center; /* Centra el texto horizontalmente */
  border-radius: 4px;
  color: white;
  font-size: 0.85em;
  font-weight: bold;
  text-transform: capitalize;
}

}/* === Cuadros de estadísticas === */
.stats-box.pending {
  background-color: #f1c40f;
  color: black;
}
.stats-box.inProgress {
  background-color: #008080;
  color: white;
}
.stats-box.completed {
  background-color: #00FF00;
  color: white;
}
.stats-box.overdue {
  background-color: #e74c3c;
  color: white;
}

/* === Bandera de fecha límite === */
.deadline-flag {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 6px;
  border-radius: 4px;
}

.status-overdue .deadline-flag {
  background-color: #e74c3c;
}

.status-inProgress .deadline-flag {
  background-color: #008080;
}

.status-completed .deadline-flag {
  background-color: #00FF00;
}

.status-pending .deadline-flag {
  background-color: #f1c40f;
}
/* === Vista Reports === */
#reportsContainer {
  margin-top: 20px;
}

#powerBiDashboard {
  width: 100%;
  height: 80vh;
  border: none;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.task-card div strong {
  font-weight: normal;
  color: #555;
}
.task-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-footer p {
  font-size: 0.9em;
  color: #555;
}
/* === Meta info en tarjetas === */
.task-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9em;
  margin-top: 6px;
}

.task-meta span strong {
  font-weight: normal;
  color: #555;
}

/* === Banderas de prioridad y estado === */
.priority-badge,
.status-flag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
}

.priority-badge.baja {
  background-color: #f1c40f;
  color: black;
}

.priority-badge.media {
  background-color: #3498db;
  color: white;
}

.priority-badge.alta {
  background-color: #e74c3c;
  color: white;
}

.status-flag.status-pending {
  background-color: #f1c40f;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.status-flag.status-inProgress {
  background-color: #008080;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.status-flag.status-completed {
  background-color: #00FF00;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.status-flag.status-overdue {
  background-color: #e74c3c;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.task-footer {
  margin-top: 8px;
  font-size: 0.85em;
  color: #555;
}

.task-footer p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

/* Banderillas de estado */
.status-flag {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

.status-flag.status-pending {
  background-color: #f1c40f;
}

.status-flag.status-inProgress {
  background-color: #008080;
}

.status-flag.status-completed {
  background-color: #00FF00;
}

.status-flag.status-overdue {
  background-color: #e74c3c;
}
/* === Banderillas de estado y prioridad === */
.priority-badge,
..status-badge {
  display: inline-block;
  min-width: 90px;          /* Ancho fijo */
  height: 26px;            /* Alto uniforme */
  line-height: 26px;       /* Centra verticalmente el texto */
  text-align: center;      /* Centra horizontalmente el texto */
  border-radius: 4px;
  color: white;
  font-size: 0.75em;        /* Letra un poco más pequeña */
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;     /* Evita saltos de línea */
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}

/* === Tabla de tareas - Vista List === */
#taskList table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#taskList th,
#taskList td {
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
  font-size: 0.9em;
}

#taskList th {
  background-color: #2c3e50; /* Color del logo "Jackson Technologies" */
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

#taskList tr:hover {
  background-color: #f2f2f2;
}

/* === Banderillas de Estado - Texto negro excepto rezagado === */
.status-badge {
  display: inline-block;
  min-width: 105px;          /* Aumentado para EN PROGRESO */
  min-width: 105px;          /* Aumentado para C0MPLETADO */
  height: 30px;             /* Un poco más alto */
  line-height: 30px;        /* Centra verticalmente */
  text-align: center;
  border-radius: 4px;
  color: white;
  font-size: 0.8em;          /* Un poco más grande si es necesario */
  font-weight: bold;
  text-transform: uppercase;
  padding: 0 6px;
  white-space: nowrap;      /* Evita saltos de línea */
  overflow: hidden;
  text-overflow: ellipsis;   /* Si texto muy largo, agrega "..." */
}

.status-badge.overdue {
  background-color: #e74c3c;
  color: white; /* Solo Rezagado mantiene texto blanco */
}

/* Colores de prioridad */
.priority-badge.baja {
  background-color: #AFEEEE;
  color: black;
}
.priority-badge.media {
  background-color: #FFA500;
  color: black;
}
.priority-badge.alta {
  background-color: #CD5C5C;
  color: black;
}

/* Colores de estado */
.status-badge.pending {
  background-color: #f1c40f;
  color: black;
}
.status-badge.inProgress {
  background-color: #008090;
  color: white;
}
.status-badge.completed {
  background-color: #00FF00;
  color: white;
}
.status-badge.overdue {
  background-color: #e74c3c;
  color: white;
}

/* Celdas centradas */
td.centered,
th.centered {
  text-align: center;
}
/* === Tabla de tareas - Vista List === */
#taskList table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* === Tabla - Vista List === */
#taskList table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#taskList th,
#taskList td {
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
  font-size: 0.9em;
}

#taskList th {
  background-color: #2c3e50; /* Azul marino oscuro */
  color: black;              /* Texto blanco */
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}

#taskList th {
  background-color: #f1f1f1;
  text-transform: uppercase;
  font-size: 0.9em;
}

#taskList tr:hover {
  background-color: #f2f2f2;
}

/* === Banderillas de estado y prioridad === */
.status-badge,
.priority-badge {
  display: inline-block;
  min-width: 90px;          /* Ancho fijo para todos */
  height: 26px;            /* Alto uniforme */
  line-height: 26px;        /* Centrado vertical */
  text-align: center;
  border-radius: 4px;
  color: white;
  font-size: 0.7em;         /* Letra un poco más pequeña */
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;      /* Evita saltos de línea */
  overflow: hidden;
  text-overflow: ellipsis;  /* Si es muy largo, muestra "..." */
  margin: 2px 0;
}

/* === Modal de Detalles de Tarea - Fondo azul marino y texto blanco === */
.task-details-content {
  background-color: #2c3e50 !important; /* Azul marino */
  color: white;
  text-align: center;
}

.task-details-content h3 {
  color: white;
  margin-bottom: 20px;
  font-weight: bold;
}

.task-details-content .close-detail {
  color: white;
}

.task-details-content #taskDetails {
  text-align: left;
  padding: 0 20px;
  margin: auto;
  max-width: 100%;
  color: white;
}

.task-details-content #taskDetails p {
  margin-bottom: 10px;
  font-size: 1em;
  line-height: 1.6;
  text-align: left;
}
/* === Modal de Detalles de Tarea - Bandera de Estado === */
.task-details .status-badge {
  display: inline-block;
  width: 90px; /* Ancho fijo */
  height: 20px; /* Alto fijo */
  line-height: 20px; /* Alinea verticalmente el texto */
  text-align: center; /* Centra el texto horizontalmente */
  border-radius: 4px;
  color: white;
  font-size: 0.85em;
  font-weight: bold;
  text-transform: capitalize;
}
#taskList .status-badge,
#taskList .priority-badge {
  font-size: 0.7em;
  min-width: 90px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  padding: 0 8px;
}

/* === Estilo específico para columnas importantes === */
#taskList .priority-cell,
#taskList .status-cell,
#taskList .assignee-cell,
#taskList .startDate-cell,
#taskList .deadline-cell {
  text-align: center !important;
}
/* === Calendario === */
#calendar {
  max-width: 1200px;
  margin: 0 auto;
}

.fc-event {
  cursor: pointer;
}

.fc-event-title {
  font-weight: bold;
}

.fc-daygrid-event-harness {
  display: flex;
  align-items: center;
}

.fc-daygrid-event-dot {
  margin-right: 5px;
}

.fc-daygrid-event-body {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* === Colores según estado en calendario === */
.fc-daygrid-event.pending {
  background-color: #f1c40f;
  color: black;
}

.fc-daygrid-event.inProgress {
  background-color: #008080;
  color: white;
}

.fc-daygrid-event.completed {
  background-color: #00FF00;
  color: white;
}

.fc-daygrid-event.overdue {
  background-color: #e74c3c;
  color: white;
}
/* === Calendario === */
#calendarContainer {
  margin-top: 20px;
}

#calendar {
  width: 100%;
  background-color: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* === Calendario Personalizado === */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.month-navigation button {
  background: #3498db;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  margin: 0 10px;
}
.current-month {
  font-size: 1.2em;
  font-weight: bold;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.day-header {
  background: #dfe1e6;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  border-radius: 3px;
}
.day-cell {
  background: white;
  border-radius: 3px;
  min-height: 100px;
  padding: 10px;
  box-shadow: 0 1px 0 rgba(9, 30, 66, 0.25);
  position: relative;
}
.day-number {
  font-weight: bold;
  margin-bottom: 5px;
  float: right;
}
.task {
  background: #e3fcef;
  border-left: 3px solid #36b37e;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 3px;
  font-size: 0.9em;
  cursor: pointer;
}
.task:hover {
  background: #abf5d1;
}
.task.bug {
  background: #ffebe6;
  border-left-color: #ff5630;
}
.task.improvement {
  background: #e6fcff;
  border-left-color: #00b8d9;
}
.add-task {
  color: #5e6c84;
  font-size: 0.8em;
  cursor: pointer;
  margin-top: 5px;
  display: block;
  text-align: center;
}
.add-task:hover {
  text-decoration: underline;
  color: #0052cc;
}
/* === Contenedor de Reports - Gráfico + Tarjetas === */
.report-content {
  display: flex;
  justify-content: center; /* Centra todo horizontalmente */
  align-items: flex-start;
  gap: 30px; /* Espacio entre cada grupo */
  flex-wrap: nowrap; /* Evita saltos de línea */
  padding: 20px;
  overflow-x: auto; /* Añade scroll si hay mucho contenido */
}

/* Cuadros de la izquierda (nuevos) */
.time-cards.vertical.left {
  order: 0; /* Asegura su posición a la izquierda */
}

/* Gráfico de pastel */
.chart-container {
  order: 1; /* En el centro */
  flex-shrink: 0;
}

/* Cuadros originales de tiempo (derecha) */
.time-cards.vertical.right {
  order: 2; /* A la derecha */
}

/* Ajuste opcional para hacerlo responsivo */
@media (max-width: 900px) {
  .report-content {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .time-cards.vertical.left,
  .time-cards.vertical.right {
    order: initial;
  }
}
.time-card {
  background-color: #2c3e50; /* Azul marino */
  color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  min-width: 00px;
  max-width: 220px;
  display: flex; /* Asegura que el contenido se alinea correctamente */
  flex-direction: column; /* Organiza elementos verticalmente */
  align-items: center; /* Centra horizontalmente */
  justify-content: center; /* Centra verticalmente */
  height: auto; /* Ajusta automáticamente según el contenido */
}
.time-card h4 {
  font-size: 1em;
  margin-bottom: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.time-card p {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0;
}
/* === Botón personalizado en Acciones === */
.action-button {
  background-color: #1abc9c !important; /* Turquesa que combina bien */
  font-weight: bold;
  transition: all 0.3s ease;
}
.action-button i.fas {
  color: white !important;
}
.action-button:hover {
  background-color: #16a085 !important;
  transform: translateX(4px);
  box-shadow: inset 4px 0 0 #1abc9c;
}
.action-button .fas-plus-circle {
  color: white;
}
/* === Tabla de tareas - Solo en Reports === */
#reportsTaskTableContainer {
  margin-top: 30px;
}

.task-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  font-size: 0.9em;
}

.task-table thead {
  background-color: #2c3e50; /* Azul marino */
  color: white;
}

.task-table th,
.task-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.task-table tr:hover {
  background-color: #f2f2f2;
}

.task-table tbody tr:last-child td {
  border-bottom: none;
}
/* === Contenedor de tabla con scroll - Reports === */
.table-wrapper {
  max-height: 400px; /* Altura máxima para scroll */
  overflow-y: auto;
  margin-top: 15px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Estilo de la tabla */
.task-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  background-color: white;
}

.task-table thead {
  background-color: #2c3e50; /* Azul marino */
  color: white;
  position: sticky;
  top: 0;
  z-index: 1;
}

.task-table th,
.task-table td {
  padding: 12px 8px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.task-table tbody tr:hover {
  background-color: #f2f2f2;
}

/* Scroll personalizado */
.table-wrapper::-webkit-scrollbar {
  width: 8px;
}
.table-wrapper::-webkit-scrollbar-thumb {
  background-color: #bdc3c7;
  border-radius: 4px;
}
.table-wrapper::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
/* === Contenedor de tabla con scroll === */
.table-wrapper {
  max-height: 400px; /* Altura máxima antes de mostrar scroll */
  overflow-y: auto;
  margin-top: 15px;
  background-color: white;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Estilo de la tabla */
.task-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}
.task-table thead {
  background-color: #2c3e50;
  color: white;
  position: sticky;
  top: 0;
  z-index: 1;
}
.task-table th,
.task-table td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
.task-table tr:hover {
  background-color: #f2f2f2;
}

/* Scroll personalizado */
.table-wrapper::-webkit-scrollbar {
  width: 8px;
}
.table-wrapper::-webkit-scrollbar-thumb {
  background-color: #bdc3c7;
  border-radius: 4px;
}
.table-wrapper::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
/* === Centrar solo la columna "Estado" === */
#taskList .status-cell,
#taskList .status-cell * {
  text-align: center !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* === Bandera de estado - Vista List === */
.status-cell {
  text-align: center;
}

.status-badge {
  display: inline-block;
  min-width: 90px;
  height: 26px;
  line-height: 26px;
  border-radius: 4px;
  color: white;
  font-size: 0.7em;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  padding: 0 8px;
}

/* === Tabla - Vista List === */
#taskList table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#taskList th,
#taskList td {
  padding: 12px 15px;
  font-size: 0.9em;
  text-align: center;       /* ✅ Centra todo el contenido */
  vertical-align: middle;   /* ✅ Centra verticalmente */
  border-bottom: 1px solid #ddd;
}

#taskList th.status-cell,
#taskList td.status-cell {
  text-align: center !important;
  vertical-align: middle !important;
}

/* === Bandera de estado === */
.status-badge {
  display: inline-block;
  min-width: 100px;
  height: 28px;
  line-height: 28px;
  border-radius: 4px;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  padding: 0 6px;
  white-space: nowrap;
}

.status-badge.pending {
  background-color: #f1c40f;
  color: black;
}
/* === Estilo para botón "Nuevo Proyecto" en menú lateral === */
.new-project-btn {
  background-color: #3498db;
  color: white;
  font-weight: bold;
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.new-project-btn:hover {
  background-color: #2980b9;
  transform: translateX(4px);
  box-shadow: inset 4px 0 0 #1abc9c;
}
.new-project-btn i.fas {
  color: white;
  transition: color 0.3s ease;
}
.new-project-btn:hover i.fas {
  color: #ecf0f1;
}
/* === Botones de acción - Vista central === */
.action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.action-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}
.action-btn:hover {
  background-color: #2980b9;
  transform: translateX(-4px);
  box-shadow: inset -4px 0 0 #1abc9c;
}
.action-btn i.fas {
  font-size: 1.1em;
}
.new-project {
  background-color: #3498db;
}
.new-project:hover {
  background-color: #2980b9;
}
.new-task {
  background-color: #2ecc71;
}
.new-task:hover {
  background-color: #27ae60;
}
/* === Menú de tres puntitos - Proyectos === */
.dots-btn {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 6px 0;
  z-index: 100;
  display: none;
  min-width: 120px;
  font-weight: normal;
}

.dropdown-menu button {
  width: 100%;
  background: none;
  border: none;
  padding: 6px 12px;
  text-align: left;
  font-size: 0.9em;
  cursor: pointer;
}

.dropdown-menu button:hover {
  background-color: #f2f2f2;
}

.dropdown-menu button:nth-child(2) {
  color: #e74c3c;
}
/* === Menú de tres puntitos - Proyectos === */
.dots-btn {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  right: 30px;
  top: 0;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 6px 0;
  z-index: 100;
  display: none;
  min-width: 140px;
  font-weight: normal;
}

.dropdown-menu button {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9em;
}

.dropdown-menu button:hover {
  background-color: #f2f2f2;
}

.dropdown-menu button:nth-child(2) {
  color: #e74c3c;
}
/* === Menú de tres puntitos - Proyectos === */
.dots-btn {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 6px 0;
  z-index: 100;
  display: none;
  min-width: 140px;
  font-weight: normal;
}

.dropdown-menu button {
  width: 100%;
  background: none;
  border: none;
  padding: 8px 12px;
  text-align: left;
  font-size: 0.9em;
  cursor: pointer;
}

.dropdown-menu button:hover {
  background-color: #f2f2f2;
}

.dropdown-menu button:nth-child(2) {
  color: #e74c3c;
}
/* === Menú Contextual Mejorado === */
.dropdown-menu {
  position: absolute;
  top: 0;
  right: 0;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 6px 0;
  z-index: 100;
  display: none;
  min-width: 150px; /* Ancho mínimo para mostrar todo */
  font-weight: normal;
}

.dropdown-menu button {
  width: 100%;
  background: none;
  border: none;
  padding: 6px 12px;
  text-align: left;
  font-size: 0.9em;
  cursor: pointer;
}

.dropdown-menu button:hover {
  background-color: #f2f2f2;
}
/* === Menú Contextual Mejorado === */
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 6px 0;
  z-index: 100;
  display: none;
  min-width: 150px;
  font-weight: normal;
}

.dropdown-menu button {
  width: 100%;
  background: none;
  border: none;
  padding: 8px 12px;
  text-align: left;
  font-size: 0.9em;
  cursor: pointer;
}

.dropdown-menu button:hover {
  background-color: #f2f2f2;
}

.dots-btn {
  background: none;
  border: none;
  font-size: 1.5em;
  color: #3498db;
  cursor: pointer;
}
/* === Menú Contextual Mejorado === */
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 6px 0;
  z-index: 100;
  display: none;
  min-width: 150px;
  font-weight: normal;
}

.dropdown-menu button {
  width: 100%;
  background: none;
  border: none;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
}

.dropdown-menu button:hover {
  background-color: #f2f2f2;
}

.dots-btn {
  background: none;
  border: none;
  font-size: 1.5em;
  color: #3498db;
  cursor: pointer;
}
/* === Menú Contextual Mejorado === */
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 6px 0;
  z-index: 100;
  display: none;
  min-width: 150px;
  font-weight: normal;
}

.dropdown-menu button {
  width: 100%;
  background: none;
  border: none;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
}

.dropdown-menu button:hover {
  background-color: #f2f2f2;
}

.dots-btn {
  background: none;
  border: none;
  font-size: 1.5em;
  color: #3498db;
  cursor: pointer;
}
/* === Menú contextual de proyecto - Estilo igual al de tareas === */
.options {
  position: absolute;
  right: 0;
  top: 5px;
  display: none;
  z-index: 10;
}

.task-card:hover .options,
.options.show {
  display: block;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: 30px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 6px 0;
  z-index: 100;
  display: none;
  min-width: 120px;
  font-weight: normal;
}

.dropdown-menu button {
  width: 100%;
  background: none;
  border: none;
  padding: 6px 12px;
  text-align: left;
  font-size: 0.9em;
  cursor: pointer;
}

.dropdown-menu button:hover {
  background-color: #f2f2f2;
}
/* === Menú contextual de proyecto - Igual al de tarea === */
.options {
  position: absolute;
  right: 0;
  top: 5px;
  display: none;
  z-index: 10;
}

.task-card:hover .options,
.options.show {
  display: block;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: 30px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 6px 0;
  z-index: 100;
  display: none;
  min-width: 120px;
  font-weight: normal;
}

.dropdown-menu button {
  width: 100%;
  background: none;
  border: none;
  padding: 8px 12px;
  text-align: left;
  font-size: 0.9em;
  cursor: pointer;
}

.dropdown-menu button:hover {
  background-color: #f2f2f2;
}

/* === Menú contextual de proyectos === */
.options {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  z-index: 1000;
}

.dropdown-menu {
  position: absolute;
  top: 30px; /* Ajusta según necesites */
  right: 0;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 6px 0;
  min-width: 120px;
  font-weight: normal;
  display: none;
}

.dropdown-menu button {
  width: 100%;
  background: none;
  border: none;
  padding: 8px 12px;
  text-align: left;
  font-size: 0.9em;
  cursor: pointer;
}

.dropdown-menu button:hover {
  background-color: #f2f2f2;
}
/* Asegurar espacio vertical para el menú contextual */
.task-card {
  position: relative;
  margin-bottom: 20px; /* Espacio entre tarjetas */
}
.task-card .dropdown-menu {
  position: absolute;
  top: 30px; /* Ajusta según necesites */
  right: 0;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 6px 0;
  min-width: 120px;
  font-weight: normal;
  display: none;
}
.blue-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.blue-btn:hover {
  background-color: #2980b9;
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  margin-bottom: 20px;
  background-color: #f8f9fa;
  padding: 10px 15px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.filter-bar label {
  font-size: 0.9em;
  display: flex;
  flex-direction: column;
}

.filter-bar select,
.filter-bar input[type="date"] {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
}
/* Estilos para el formulario editable */
#editTaskForm {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  font-weight: bold;
  color: #2c3e50;
}

.editable-field {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

select.editable-field {
  padding: 8px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.btn-save {
  background-color: #2ecc71;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-cancel {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
.editable-field[type="date"] {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.editable-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.editable-field {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-actions {
  margin-top: 20px;
  text-align: right;
}

.form-actions button {
  padding: 8px 15px;
  margin-left: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#saveTaskChangesBtn {
  background-color: #2ecc71;
  color: white;
}

#cancelTaskChangesBtn {
  background-color: #e74c3c;
  color: white;
}

#uploadNewFileBtn, #removeAttachmentBtn {
  padding: 5px 10px;
  margin-left: 5px;
  font-size: 0.9em;
}
.task-details-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
}

.task-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.task-details-body {
  display: flex;
  padding: 20px;
}

.task-info-section {
  flex: 1;
  padding-right: 20px;
}

.time-tracking-section {
  flex: 1;
  border-left: 1px solid #eee;
  padding-left: 20px;
}

.time-entry-form {
  background: #f9f9f9;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.time-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f5f5f5;
  border-radius: 4px;
}

.stat-label {
  font-weight: 600;
  color: #555;
}

.stat-value {
  font-weight: 600;
}

.time-history {
  max-height: 300px;
  overflow-y: auto;
}

.time-history-table {
  width: 100%;
  border-collapse: collapse;
}

.time-history-table th, 
.time-history-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.time-history-table th {
  background: #f5f5f5;
  font-weight: 600;
}

.time-history-table tfoot td {
  font-weight: 600;
  background: #f5f5f5;
}

.empty-history {
  text-align: center;
  color: #777;
  padding: 20px;
}

.task-details-footer {
  display: flex;
  justify-content: flex-end;
  padding: 15px 20px;
  border-top: 1px solid #eee;
  gap: 10px;
}

.btn-cancel, .btn-save {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
}

.btn-cancel {
  background: #eee;
  color: #333;
}

.btn-save {
  background: #3498db;
  color: white;
}

.close-detail {
  font-size: 24px;
  cursor: pointer;
  color: #777;
}

.close-detail:hover {
  color: #333;
}
.move-controls {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 8px;
}
.move-btn {
  background: rgba(0,0,0,0.1);
  border: none;
  border-radius: 3px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}
.task-card:hover .move-btn {
  opacity: 1;
}
.task-movement-buttons {
  display: inline-block;
  margin-left: 10px;
}

.move-up-btn, .move-down-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 5px;
  margin: 0 2px;
  color: #555;
}

.move-up-btn:hover, .move-down-btn:hover {
  color: #3498db;
}
/* === Banderillas de estado (Status Badge) === */
.status-badge {
  display: inline-block;
  min-width: 110px; /* Aumentado para "En Progreso" y "Completado" */
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 4px;
  color: white;
  font-size: 0.85em;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0 10px; /* Añadimos más relleno horizontal */
  white-space: nowrap; /* Evita saltos de línea */
  overflow: visible; /* Quitamos el overflow que corta el texto */
  text-overflow: clip; /* Quitar la elipsis */
}
/* Estilo para el campo de tiempo total del proyecto */
#projectTotalTime {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* Estilo para la visualización en detalles de tarea */
.task-details-container .form-group span {
  display: inline-block;
  padding: 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
  min-width: 100px;
}
.time-card input[type="text"] {
  width: 100%; /* Ocupa todo el ancho del contenedor */
  height: 100%; /* Ocupa toda la altura del contenedor */
  background-color: transparent; /* No muestra fondo adicional */
  color: inherit; /* Hereda el color del contenedor */
  border: none; /* Sin bordes */
  text-align: center; /* Centra el texto */
  font-size: 1.5em; /* Tamaño grande */
  font-weight: bold; /* Fuente negrita */
  outline: none; /* Elimina el borde de foco */
}
.time-card {
  background-color: #2c3e50; /* Azul marino */
  color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
}

.time-card input[type="text"] {
  width: 100%;
  height: 100%;
  background-color: transparent;
  color: inherit;
  border: none;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  outline: none;
}
/* === Bloque de estadísticas en horizontal === */
.stats-cards.horizontal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.time-card {
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  min-width: 140px;
  max-width: 160px;
  flex: 1 1 140px;
}

.time-card h4 {
  font-size: 1em;
  margin-bottom: 10px;
  font-weight: bold;
  text-transform: uppercase;
}

.time-card p {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0;
}
.report-content.horizontal {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
}
/* ===== LIST VIEW STYLES ===== */
#taskList {
  margin-top: 20px;
}

#taskList table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#taskList th, 
#taskList td {
  padding: 12px 15px;
  font-size: 0.9em;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #ddd;
}

#taskList th {
  background-color: #2c3e50;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

#taskList tr:hover {
  background-color: #f2f2f2;
}

#taskList tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* Alinear la primera columna (Nombre) a la izquierda */
#taskList td:first-child, 
#taskList th:first-child {
  text-align: left !important;
}
/* ===== CALENDAR VIEW STYLES ===== */
#calendarContainer {
  margin-top: 20px;
}

#calendar {
  width: 100%;
  background-color: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.fc-event {
  cursor: pointer;
  font-size: 0.85em;
  padding: 2px 4px;
}

.fc-event-title {
  font-weight: bold;
}

/* Colores para diferentes estados en calendario */
.fc-event.pending {
  background-color: #f1c40f;
  color: black;
}

.fc-event.inProgress {
  background-color: #008080;
  color: white;
}

.fc-event.completed {
  background-color: #00FF00;
  color: white;
}

.fc-event.overdue {
  background-color: #e74c3c;
  color: white;
}
/* ===== REPORTS VIEW STYLES ===== */
#reportsContainer {
  margin-top: 20px;
}

.report-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  flex-wrap: wrap;
  padding: 20px;
}

.time-cards {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.time-card {
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  min-width: 200px;
}

.time-card h4 {
  font-size: 1em;
  margin-bottom: 10px;
  font-weight: bold;
  text-transform: uppercase;
}

.time-card p {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0;
}

.table-wrapper {
  max-height: 400px;
  overflow-y: auto;
  margin-top: 15px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Power BI Embed */
#powerBiDashboard {
  width: 100%;
  height: 80vh;
  border: none;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.hidden { display: none; }
.active { background-color: #2c3e50; color: white; } /* Para botones activos */
.no-tasks-message {
  padding: 20px;
  text-align: center;
  color: #666;
  font-style: italic;
}
.no-tasks {
  padding: 20px;
  text-align: center;
  color: #666;
  font-style: italic;
  grid-column: 1 / -1; /* Para que ocupe todas las columnas */
}
.priority-badge { 
  padding: 3px 8px; 
  border-radius: 12px; 
  font-size: 0.8em; 
}
.status-badge { 
  /* similar a priority-badge con colores por estado */
}
.day-cell { 
  min-height: 80px; 
  border: 1px solid #ddd; 
}
.task.priority { 
  margin: 2px; 
  padding: 2px; 
  border-radius: 3px; 
}
.report-header, .report-section {
  margin-bottom: 20px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}
.stat-card {
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  color: white;
}
.stat-value {
  font-size: 24px;
  font-weight: bold;
  display: block;
}
.chart-container {
  margin-top: 20px;
}
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  width: 80%;
  max-width: 600px;
  border-radius: 8px;
  position: relative;
}

.close {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 24px;
  cursor: pointer;
}

.cancel-btn {
  background-color: #e74c3c;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.cancel-btn:hover {
  background-color: #c0392b;
}
/* Cabecera de filtros como en imagen */
.calendar-filter-bar {
  display: flex;
  gap: 15px;
  padding: 10px;
  background: #f5f5f5;
  margin-bottom: 15px;
}

/* Estilo de celdas de día */
.day-cell {
  min-height: 120px;
  border: 1px solid #ddd;
  padding: 5px;
}

/* Tareas en calendario */
.calendar-task {
  font-size: 12px;
  background: #e3f2fd;
  margin: 3px 0;
  padding: 3px;
  border-radius: 3px;
}

.task-name {
  font-weight: bold;
  display: block;
}

.task-assignee {
  color: #666;
  font-size: 11px;
}
/* Colores por estado */
.calendar-task.pending {
  background-color: #FFF3CD; /* Amarillo claro para pendientes */
  border-left: 3px solid #FFC107;
}

.calendar-task.inprogress {
  background-color: #008080; /* Azul claro para en progreso */
  border-left: 3px solid #17A2B8;
}

.calendar-task.completed {
  background-color: #D4EDDA; /* Verde claro para completadas */
  border-left: 3px solid #28A745;
}

.calendar-task.overdue {
  background-color: #F8D7DA; /* Rojo claro para rezagadas */
  border-left: 3px solid #DC3545;
}

/* Estilos base para tareas (mantener los existentes) */
.calendar-task {
  margin: 3px 0;
  padding: 4px;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}

.task-name {
  font-weight: bold;
  display: block;
}

.task-assignee {
  color: #666;
  font-size: 11px;
  display: block;
}
/* Contenedor de filtros */
.filters-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.filter-select, .filter-date {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.filter-button {
  padding: 8px 16px;
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.filter-button:hover {
  background-color: #c0392b;
}

/* Estilos para la tabla */
.task-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.task-table th {
  background-color: #3498db;
  color: white;
  padding: 12px 15px;
  text-align: left;
}

.task-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
}

.task-table tr:hover {
  background-color: #f9f9f9;
}

/* Badges para prioridad y estado */
.priority-badge, .status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.priority-badge {
  background-color: #ecf0f1;
  color: #2c3e50;
}

.priority-badge.alta {
  background-color: #e74c3c;
  color: white;
}

.priority-badge.media {
  background-color: #f39c12;
  color: white;
}

.priority-badge.baja {
  background-color: #2ecc71;
  color: white;
}

.status-badge {
  color: white;
}

.status-badge.pending {
  background-color: #f1c40f;
}

.status-badge.inProgress {
  background-color: #008080;
}

.status-badge.completed {
  background-color: #00FF00;
}

.status-badge.overdue {
  background-color: #e74c3c;
}
/* === Estilos para el calendario === */
#calendarContainer {
  margin-top: 20px;
}

#calendar {
  width: 100%;
  background-color: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Estilos para los eventos del calendario */
.fc-event {
  cursor: pointer;
  border: none;
  font-size: 0.9em;
}

.fc-event-title {
  font-weight: bold;
  padding: 2px 4px;
}

/* Colores según estado */
.fc-event.pending {
  background-color: #f1c40f;
  color: black;
}

.fc-event.inProgress {
  background-color: #008080;
  color: white;
}

.fc-event.completed {
  background-color: #00FF00;
  color: white;
}

.fc-event.overdue {
  background-color: #e74c3c;
  color: white;
}

/* Cabecera del calendario */
.fc-header-toolbar {
  margin-bottom: 1em;
}

.fc-toolbar-title {
  font-size: 1.2em;
}

.fc-button {
  background-color: #2c3e50;
  border: none;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
}

.fc-button:hover {
  background-color: #1abc9c;
}

.fc-button-active {
  background-color: #1abc9c;
}

/* Vista de día/semana */
.fc-timegrid-event {
  border-radius: 4px;
}
/* En style.css */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.calendar-filters {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.calendar-filters label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.calendar-filters select {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ddd;
}
/* Filtros específicos para Reports */
#reportsView .filter-bar.reports-filters {
  margin: 0 0 20px 0;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Opcional: Ajusta el diseño para pantallas pequeñas */
@media (max-width: 768px) {
  #reportsView .filter-bar.reports-filters {
    flex-direction: column;
    gap: 10px;
  }
}
/* Estilos para las tarjetas de estadísticas */
.stats-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 25px;
}

.stat-box {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  padding: 15px 20px;
  flex: 1;
  min-width: 150px;
  border-left: 4px solid #3498db;
}

.stat-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-text {
  font-size: 14px;
  color: #555;
  font-weight: 500;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
}

/* === Contenedor principal de estadísticas === */
.stats-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}
.stat-box {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  padding: 15px 20px;
  flex: 1;
  min-width: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-box.totalTask { background-color: #3498db; } /* Azul claro */
.stat-box.pending    { background-color: #f1c40f; } /* Amarillo-naranja */
.stat-box.inProgress { background-color: #008090; } /* Verde oscuro */
.stat-box.completed  { background-color: #00FF00; } /* Verde claro */
.stat-box.overdue    { background-color: #e74c3c; } /* Rojo */

/* Texto y número dentro del cuadro */
.stat-box .stat-text,
.stat-box .stat-number {
  color: white;
  font-weight: bold;
}
/* === Estilo base para todos los .stat-box === */
.stat-box {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  padding: 15px 20px;
  flex: 1;
  min-width: 150px;

  /* Centrado horizontal y vertical */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

/* Opcional: Si usas .stat-content como contenedor interno */
.stat-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Asegúrate de que el texto y números estén centrados */
.stat-text,
.stat-number {
  display: block;
  text-align: center;
  margin: 0 auto;
}
.editable-time-input {
  background-color: #2c3e50;
  color: white;
  border: 1px solid #34495e;
  border-radius: 4px;
  padding: 8px;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.editable-time-input:focus {
  outline: none;
  border-color: #3498db;
  background-color: #34495e;
}
/* Estilos para la tabla profesional */
.table-header-row {
  background-color: #2c3e50;
  color: white;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.header-cell {
  padding: 12px 15px;
  text-align: left;
  font-weight: 600;
}

.data-cell {
  padding: 15px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
}

.task-data-row:hover {
  background-color: #f9f9f9;
}

/* Estilos para celdas específicas */
.task-name-cell {
  font-weight: 500;
  color: #34495e;
}

.task-name-wrapper {
  display: flex;
  align-items: center;
}

.task-icon {
  margin-right: 10px;
  color: #7f8c8d;
}

/* Estilos para los estados */
.status-pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-pending {
  background-color: #f39c12;
  color: white;
}

.status-inProgress {
  background-color: #008080;
  color: white;
}

.status-completed {
  background-color: #00FF00;
  color: white;
}

.status-overdue {
  background-color: #e74c3c;
  color: white;
}

/* Estilos para prioridades */
.priority-pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 0.75rem;
  font-weight: 600;
}

.priority-baja {
  background-color: #2ecc71 !important;
  color: white !important;
}

.priority-media {
  background-color: #f39c12 !important;
  color: white !important;
}

.priority-alta {
  background-color: #e74c3c !important;
  color: white !important;
}



/* Estilos para fechas */
.date-cell {
  font-size: 0.9rem;
  color: #7f8c8d;
  font-family: 'Courier New', monospace;
}

/* Estilos para asignado */
.assignee-wrapper {
  display: flex;
  align-items: center;
}

.assignee-icon {
  margin-right: 8px;
  color: #7f8c8d;
  font-size: 0.9rem;
}

/* Mensaje cuando no hay tareas */
.empty-row {
  background-color: #f9f9f9;
}

.empty-cell {
  padding: 30px;
  text-align: center;
  color: #7f8c8d;
  font-size: 1rem;
}

.empty-cell i {
  font-size: 1.5rem;
  margin-bottom: 10px;
  display: block;
  color: #bdc3c7;
}
/* Estructura de tabla completa */
#taskTableBody {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

/* Fondos alternados */
.even-row { background-color: #ffffff; }
.odd-row { background-color: #f8f9fa; }

/* Celdas con padding amplio */
.data-cell {
  padding: 16px 12px;
  vertical-align: middle;
  text-align: center;
  border-bottom: none;
}

/* Distribución de columnas */
.task-name-cell { width: 28%; padding-left: 20px; }
.date-cell { width: 14%; }
.status-cell { width: 18%; }
.assignee-cell { width: 22%; }
.priority-cell { width: 18%; }

/* Contenido de celdas */
.task-name-content {
  font-weight: 500;
  color: #2c3e50;
  font-size: 0.95rem;
  text-align: left;
  padding-left: 8px;
}

.date-content {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.85rem;
  color: #5d6d7e;
  letter-spacing: 0.5px;
}

.assignee-content {
  font-size: 0.9rem;
  color: #34495e;
}

/* Píldoras de estado y prioridad */
.status-pill,
.priority-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
  min-width: 100px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Colores de estado */
.status-pending { background-color: #f39c12; }
.status-inProgress { background-color: #008080; }
.status-completed { background-color: #00FF00; }
.status-overdue { background-color: #e74c3c; }

/* Colores de prioridad */
.priority-baja { background-color: #27ae60; }
.priority-media { background-color: #e67e22; }
.priority-alta { background-color: #c0392b; }

/* Efecto hover */
.task-data-row:hover {
  background-color: #f1f5f9 !important;
  transition: background-color 0.2s ease;
}

/* Mensaje vacío */
.empty-row {
  background-color: transparent !important;
}

.empty-cell {
  padding: 40px;
  text-align: center;
  color: #95a5a6;
  font-size: 0.95rem;
  border-bottom: none;
}

.empty-cell i {
  font-size: 2rem;
  margin-bottom: 12px;
  color: #bdc3c7;
  display: block;
}
.editable-time-input {
  background: #2c3e50;
  color: white;
  border: 1px solid #34495e;
  border-radius: 4px;
  padding: 8px;
  text-align: center;
  font-size: 1.2em;
  width: 100%;
}
.btn-pdf {
  background-color: #e74c3c;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-pdf:hover {
  background-color: #c0392b;
}

.btn-pdf i {
  margin-right: 5px;
}
/* Estilos para la vista de Rentabilidad */
#profitabilityView {
  padding: 20px;
}

.profitability-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.profitability-cards .stat-box {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.profitability-cards h3 {
  color: #555;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.profitability-cards .stat-number {
  font-size: 24px;
  font-weight: bold;
}

#profitabilityChart {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  max-height: 400px;
}
.view-content {
  padding: 20px;
}

.hidden {
  display: none;
}

/* Estilos específicos para cada vista */
.list-view-container {
  overflow-x: auto;
}

.list-view-container table {
  width: 100%;
  border-collapse: collapse;
}

#calendar {
  max-width: 100%;
  margin: 0 auto;
}

.reports-container,
.profitability-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.stat-card {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  min-width: 200px;
}

.chart-container {
  flex: 1;
  min-width: 300px;
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.chart-container {
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
}

#pieChart {
  width: 100% !important;
  height: auto !important;
}
/* Contenedor del gráfico */
.chart-container {
  width: 500px; /* Aumenta este valor */
  height: 450px; /* Aumenta este valor */
  margin: 0 auto;
}

/* Canvas del gráfico */
#pieChart {
  width: 100% !important;
  height: 100% !important;
  max-width: none; /* Elimina límites máximos si existen */
}
/* === Barra de progreso del proyecto === */
.progress-container {
  margin-top: 30px;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  margin: 10px auto;
  max-width: 400px;
  position: relative;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background-color: #2ecc71;
  transition: width 0.4s ease-in-out;
  border-radius: 10px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}

.progress-label {
  font-size: 1.2em;
  font-weight: bold;
  color: #2c3e50;
}
/* === Centrado de columnas en tabla "List" === */
#taskList th,
#taskList td {
  text-align: center;
  vertical-align: middle;
}
/* Estilo base */
.progress-percent {
  color: #2ecc71; /* Verde por defecto */
  transition: color 0.3s ease;
}

/* Estilos específicos */
.percent-20 {
  color: #000000 !important; /* Negro */
  font-weight: 500; /* Opcional: grosor de texto */
}


.percent-low {
  color: #e74c3c; /* Rojo para <30% */
}

.percent-medium {
  color: #f39c12; /* Naranja para 30%-69% */
}
.task-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.total-time-card {
  grid-column: 1 / -1; /* Ocupa todo el ancho */
  text-align: center;
  margin: 10px auto;
  max-width: 300px;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.total-time-card h4 {
  margin-bottom: 10px;
  color: #2c3e50;
}

.total-time-card p {
  font-size: 1.2em;
  font-weight: bold;
  color: #3498db;
  margin: 0;
}
/* Asegúrate de que coincida con los otros time-card */
.time-card {
  background-color: #2c3e50;
  color: white;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  min-width: 150px;
}

.time-card h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #ecf0f1;
}

.time-card p {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

/* Estilo específico para el cuadro de tiempo total si necesitas algún ajuste especial */
.total-time-card {
  background-color: #2c3e50; /* Mismo color que los demás */
}

/* Ajustes para el layout de los time-cards */
.time-cards {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}
.report-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-top: 20px;
}

.time-cards {
  flex: 1;
  max-width: 200px;
}

.chart-center {
  flex: 2;
  display: flex;
  justify-content: center;
}
/* Contenedor principal */
.report-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Alinear al inicio verticalmente */
  gap: 20px;
  margin-top: 30px;
  width: 100%;
}

/* Contenedores de tarjetas izquierda/derecha */
.left-time-cards,
.right-time-cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 160px; /* Ancho mínimo para mantener proporción */
  max-width: 200px; /* Ancho máximo para mantener equilibrio */
}

/* Gráfico centrado */
.chart-center {
  flex: 2; /* Ocupa más espacio que los laterales */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}

/* Estilos consistentes para todas las tarjetas */
.time-card {
  background-color: #2c3e50;
  color: white;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  width: 100%;
}

.time-card h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #ecf0f1;
}

.time-card p {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

/* Asegurar que el gráfico no sea demasiado grande */
.chart-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .report-content {
    flex-direction: column;
    align-items: center;
  }
  
  .left-time-cards,
  .right-time-cards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    margin-bottom: 20px;
  }
  
  .time-card {
    min-width: 160px;
    margin: 0 10px 15px 10px;
  }
  
  .chart-center {
    order: -1; /* Mover el gráfico arriba en móviles */
    margin-bottom: 30px;
    width: 100%;
  }
}
.report-content {
  display: flex;
  justify-content: center; /* Centramos todo el conjunto */
  align-items: flex-start;
  gap: 0; /* Eliminamos el gap general */
  margin-top: 30px;
  width: 100%;
}
/* Cuadros izquierda */
.left-time-cards {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-right: 0; /* Eliminamos margen derecho */
  padding-right: 10px; /* Pequeño espacio visual */
}

/* Gráfico centrado */
.chart-center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px; /* Reducimos padding lateral */
}

/* Cuadros derecha */
.right-time-cards {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-left: 0; /* Eliminamos margen izquierdo */
  padding-left: 10px; /* Pequeño espacio visual */
}
/* Contenedor principal compacto */
.report-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin: 30px auto 0;
  max-width: 900px; /* Ajustar según necesidad */
}

/* Grupos de elementos sin espacios externos */
.left-time-cards, 
.right-time-cards {
  flex: 0 0 auto; /* No crecen ni encogen */
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Gráfica pegada a los cuadros */
.chart-center {
  flex: 0 0 auto;
  margin: 0 -5px; /* Compensación para pegar visualmente */
}

/* Ajuste fino de tarjetas */
.time-card {
  width: 160px; /* Ancho fijo para uniformidad */
  padding: 12px 8px;
}
.chart-container {
  width: 400px !important;
  height: 500px !important;
}
.status-badge.onTime {
    background-color: #2ecc71; /* Verde claro */
    color: white;
}

.status-badge.offTime {
    background-color: #e74c3c; /* Rojo */
    color: white;
}
/* Estilo para la etiqueta "Estado del Proyecto" */
#projectStatusLabel {
    display: inline-block;
    min-width: 200px; /* Ancho similar al botón de generar PDF */
    height: 36px; /* Altura similar al botón */
    line-height: 36px; /* Centra verticalmente el texto */
    text-align: center;
    border-radius: 4px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 10px;
}

/* Si ya tienes un estilo .status-badge, asegúrate de que coincida */
.status-badge {
    display: inline-block;
    min-width: 200px; /* Ajusta según sea necesario */
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 4px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 10px;
}

/* Ejemplo para contenedores comunes */
.card, .bg-white, .status-container {
    background: transparent !important;
    box-shadow: none !important;
}
function generateReports() {
    // ... tu código existente ...
    const statusContainer = document.querySelector('.status-container'); // Ajusta el selector
    if (statusContainer) {
        statusContainer.style.background = 'transparent';
        statusContainer.style.boxShadow = 'none';
    }
}
/* Elimina el fondo, sombra y bordes del contenedor principal */
#projectStatusLabelContainer.stat-box {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 20px auto !important;  /* Ajusta el margen según necesites */
}

/* Estilo para el título "Estado del Proyecto" */
#projectStatusLabelContainer strong {
    font-size: 1.1rem;
    color: #333;  /* Color del texto (ajustable) */
}

/* Estilo para el valor (En tiempo/Fuera de tiempo) */
#projectStatusLabel {
    font-size: 1.2rem;
    font-weight: bold;
    padding: 0 !important;
    background: transparent !important;
}

/* Colores para los estados (ya definidos en tu JS) */
#projectStatusLabel.onTime {
    color: #2ecc71;  /* Verde */
}

#projectStatusLabel.offTime {
    color: #e74c3c;  /* Rojo */
}
<style>
  /* Estilos para la vista Gantt */
  .gantt-container {
    margin-top: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .gantt-header {
    display: flex;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
  }
  
  .gantt-header-task {
    width: 200px;
    padding: 8px;
    border-right: 1px solid #ddd;
  }
  
  .gantt-header-time {
    flex-grow: 1;
    padding: 8px;
    display: flex;
    position: relative;
  }
  
  .gantt-time-scale {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
  }
  
  .gantt-time-unit {
    border-right: 1px solid #ddd;
    text-align: center;
    padding-top: 4px;
    font-size: 12px;
  }
  
  .gantt-row {
    display: flex;
    border-bottom: 1px solid #eee;
  }
  
  .gantt-task-info {
    width: 200px;
    padding: 8px;
    border-right: 1px solid #ddd;
    display: flex;
    align-items: center;
  }
  
  .gantt-task-name {
    flex-grow: 1;
  }
  
  .gantt-task-bars {
    flex-grow: 1;
    position: relative;
    height: 30px;
  }
  
  .gantt-bar {
    position: absolute;
    height: 20px;
    top: 5px;
    border-radius: 3px;
    background-color: #3498db;
    cursor: pointer;
  }
  
  .gantt-bar.pending { background-color: #f1c40f; }
  .gantt-bar.inProgress { background-color: #008090; }
  .gantt-bar.completed { background-color: #2ecc71; }
  .gantt-bar.overdue { background-color: #e74c3c; }
  
  .gantt-bar:hover {
    opacity: 0.8;
  }
  
  .gantt-milestone {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #9b59b6;
    top: 5px;
    cursor: pointer;
  }
  
  .gantt-milestone:hover {
    opacity: 0.8;
  }
</style>
/* Dashboard Styles */
.dashboard-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.metric-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  text-align: center;
}

.metric-value {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.metric-label {
  color: #666;
  font-size: 0.9rem;
}

.dashboard-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.chart-container {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  height: 300px;
}

.dashboard-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.dashboard-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.dashboard-section.full-width {
  grid-column: 1 / -1;
}

.dashboard-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
  font-size: 1.1rem;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboard-task-item {
  padding: 12px;
  border-radius: 6px;
  background: #f9f9f9;
  cursor: pointer;
  transition: background 0.2s;
}

.dashboard-task-item:hover {
  background: #f0f0f0;
}

.task-name {
  font-weight: 500;
  margin-bottom: 5px;
}

.task-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.8rem;
}

.assignee-distribution {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.assignee-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.assignee-name {
  min-width: 150px;
  font-weight: 500;
}

.assignee-stats {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-bar {
  flex: 1;
  height: 10px;
  background: #eee;
  border-radius: 5px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #2ecc71;
  transition: width 0.3s;
}

.assignee-numbers {
  min-width: 100px;
  text-align: right;
  font-size: 0.8rem;
  color: #666;
}

.empty-message {
  color: #999;
  font-style: italic;
  text-align: center;
  padding: 20px 0;
}
/* En la sección de estilos del dashboard */
.progress-metric {
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  flex: 1;
  margin: 0 5px;
}

.progress-metric:nth-child(1) {
  background-color: rgba(46, 204, 113, 0.1); /* Verde claro para "En tiempo" */
  border: 1px solid #2ecc71;
}

.progress-metric:nth-child(2) {
  background-color: rgba(231, 76, 60, 0.1); /* Rojo claro para "Rezagadas" */
  border: 1px solid #e74c3c;
}

.progress-metric:nth-child(3) {
  background-color: rgba(241, 196, 15, 0.1); /* Amarillo claro para "Bloqueadas" */
  border: 1px solid #f1c40f;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.metric-label {
  font-size: 12px;
  color: #7f8c8d;
  text-transform: uppercase;
}
/* Colores consistentes con la vista de Status */
.status-pending {
  background-color: #f1c40f;
  color: #000;
}

.status-inProgress {
  background-color: #008090;
  color: #008090;
}

.status-completed {
  background-color: #2ecc71;
  color: #fff;
}

.status-overdue {
  background-color: #e74c3c;
  color: #fff;
}
/* En la sección de estilos del dashboard */
.progress-metrics {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  gap: 10px;
}

.progress-metric {
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  flex: 1;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid #ecf0f1;
}

.progress-metric:nth-child(1) { /* Total */
  background-color:#3498db; /* Azul */
  border-color: #3498db;
  color: white;
}

.progress-metric:nth-child(2) { /* Pendientes */
  background-color: #f1c40f;
  border-color: #f1c40f;
  color: white;
}

.progress-metric:nth-child(3) { /* En Progreso */
  background-color: #008090;
  border-color: #008090;
  color: white;
}

.progress-metric:nth-child(4) { /* Completadas */
  background-color: #2ecc71;
  border-color: #2ecc71;
  color: white;
}

.progress-metric:nth-child(5) { /* Rezagadas */
  background-color: #e74c3c
  border-color: #e74c3c;
  color: white;
}

.metric-value {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.metric-label {
  font-size: 12px;
  color: #7f8c8d;
  text-transform: uppercase;
}
/* Barra de progreso */
.progress-container {
  margin: 15px 0;
}

.progress-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 5px;
}

.progress-percentage {
  font-weight: bold;
  color: #2c3e50;
  font-size: 14px;
}

.progress-bar {
  height: 10px;
  background: #ecf0f1;
  border-radius: 5px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s ease;
}

/* Cuadros de métricas */
.progress-metrics {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 8px;
}

.progress-metric {
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  flex: 1;
  min-width: 0;
}

.progress-metric:nth-child(1) { /* Total */
  background-color: #3498db;
  border: 1px solid #3498db;
  color: white;
}

.progress-metric:nth-child(2) { /* Pendientes */
  background-color: #f1c40f;
  border: 1px solid #f1c40f;
  color: white;
}

.progress-metric:nth-child(3) { /* En Progreso */
  background-color: #008090;
  border: 1px solid #008090;
  color: white;
}

.progress-metric:nth-child(4) { /* Completadas */
  background-color: #2ecc71;
  border: 1px solid #2ecc71;
  color: white;
}

.progress-metric:nth-child(5) { /* Rezagadas */
  background-color: #e74c3c;
  border: 1px solid #e74c3c;
  color: white;
}

.metric-value {
  font-size: 20px;
  font-weight: bold;
  display: block;
  margin-bottom: 4px;
}

.metric-label {
  font-size: 12px;
  color: #7f8c8d;
  text-transform: uppercase;
  display: block;
}
/* Contenedor principal del progreso */
.progress-container {
  margin: 15px 0 25px; /* Más margen inferior para espacio */
  position: relative; /* Necesario para posicionar el porcentaje */
}

/* Barra de progreso */
.progress-bar {
  height: 10px;
  background: #ecf0f1;
  border-radius: 5px;
  overflow: hidden;
  position: relative; /* Para el texto de porcentaje */
}

/* Relleno de la barra */
.progress-fill {
  height: 100%;
  border-radius: 5px;
  background-color: #2ecc71; /* Verde */
  transition: width 0.3s ease;
  width: 0%; /* Inicialmente en 0 */
}

/* Texto del porcentaje - Solución definitiva */
.progress-percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  color: #2c3e50;
  font-size: 14px;
  z-index: 2;
  width: 100%;
  text-align: center;
  pointer-events: none; /* Permite interactuar con la barra */
}

/* Fondo degradado para mejor legibilidad */
.progress-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, 
              rgba(255,255,255,0.5) 0%, 
              rgba(255,255,255,0.2) 30%, 
              rgba(255,255,255,0.2) 70%, 
              rgba(255,255,255,0.5) 100%);
  z-index: 1;
}

/* Cuadros de métricas (manteniendo tu tamaño perfecto) */
.progress-metrics {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 8px;
}

.progress-metric {
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  flex: 1;
  min-width: 0;
}

/* ... (mantén tus colores existentes para los cuadros) ... */
/* Contenedor principal del progreso */
.progress-container {
  margin: 15px 0 25px;
  position: relative;
}

/* Barra de progreso */
.progress-bar {
  height: 10px;
  background: #ecf0f1;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  margin-top: 25px; /* Espacio para el porcentaje arriba */
}

/* Texto del porcentaje - Solución definitiva centrada */
.progress-percentage {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  color: #2c3e50;
  font-size: 14px;
  white-space: nowrap; /* Evita salto de línea */
  padding: 2px 8px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Relleno de la barra */
.progress-fill {
  height: 100%;
  border-radius: 5px;
  background-color: #2ecc71;
  transition: width 0.3s ease;
  width: 0%;
}
/* Contenedor principal del dashboard card */
.dashboard-card.wide {
  padding-bottom: 15px; /* Espacio adicional en la parte inferior */
}

/* Contenedor del progreso - Ajustamos márgenes */
.progress-container {
  margin: 25px 0 15px; /* 25px arriba, 15px abajo */
  position: relative;
}

/* Texto del porcentaje - Bajamos y centramos */
.progress-percentage {
  position: absolute;
  top: 10px; /* Posición relativa arriba de la barra */
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  color: #2c3e50;
  font-size: 14px;
  background-color: white;
  padding: 2px 10px;
  border-radius: 12px;
  box-shadow: #00000000;
  z-index: 2;
  white-space: nowrap;
}

/* Barra de progreso - Bajamos un poco más */
.progress-bar {
  height: 10px;
  background: #ecf0f1;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  margin-top: 50px; /* Espacio entre texto y barra */
}

/* Cuadros de métricas - Bajamos y ajustamos */
.progress-metrics {
  margin-top: 50px; /* Más espacio arriba de los cuadros */
  display: flex;
  justify-content: space-between;
  gap: 18px;
}
.progress-percentage {
  background-color: transparent !important; /* Elimina fondo */
  box-shadow: none !important; /* Elimina sombra */
  color: #2c3e50; /* Texto negro */
  padding: 0; /* Elimina relleno */
  text-shadow: 0 1px 1px rgba(255,255,255,0.7); /* Sombra blanca para legibilidad */
}
/* Ajustes para el contenedor principal */
.progress-container {
  margin-bottom: 50px !important; /* Aumenté a 50px para mayor separación */
  position: relative;
}

/* Texto de porcentaje (sin fondo) */
.progress-percentage {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  color: #2c3e50;
  font-weight: bold;
  font-size: 14px;
  background: transparent;
  padding: 0;
  z-index: 2;
}

/* Barra de progreso */
.progress-bar {
  margin-top: 25px; /* Espacio arriba de la barra */
}

/* Cuadros de métricas - Bajamos significativamente */
.progress-metrics {
  margin-top: 60px !important; /* Aumenté a 60px */
  transform: translateY(30px); /* Baja adicionalmente 20px */
}
/* Ajustes específicos para bajar barra+texto */
.progress-container {
  transform: translateY(30px); /* Baja todo el bloque 20px */
  margin-bottom: 0; /* Elimina margen inferior para no afectar cuadros */
}

/* Mantener alineación centrada */
.progress-bar {
  margin-left: auto;
  margin-right: auto;
}

/* Texto del porcentaje (ajuste fino) */
.progress-percentage {
  top: -15px; /* Posición relativa sobre la barra */
}
/* Sube los cuadros de métricas sin mover la barra */
.progress-metrics {
  margin-top: 60px !important; /* Reduce este valor para subir más */
  transform: translateY(-15px); /* Sube los cuadros 15px */
}

/* Asegura que el contenedor de la barra no tenga margen inferior */
.progress-container {
  margin-bottom: 0 !important;
}
/* Contenedor principal del dashboard card */
.dashboard-card.wide {
  padding-bottom: 15px; /* Espacio adicional en la parte inferior */
}

/* Contenedor del progreso - Ajustamos márgenes */
.progress-container {
  margin: 25px 0 15px; /* 25px arriba, 15px abajo */
  position: relative;
}

/* Texto del porcentaje - Bajamos y centramos */
.progress-percentage {
  position: absolute;
  top: -15px; /* Posición relativa arriba de la barra */
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  color: #2c3e50;
  font-size: 14px;
  background-color: white;
  padding: 2px 10px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 2;
  white-space: nowrap;
}

/* Barra de progreso - Bajamos un poco más */
.progress-bar {
  height: 10px;
  background: #ecf0f1;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  margin-top: 20px; /* Espacio entre texto y barra */
}

/* Cuadros de métricas - Bajamos y ajustamos */
.progress-metrics {
  margin-top: 30px; /* Más espacio arriba de los cuadros */
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
/* Cuadros de métricas - Colores actualizados para coincidir con la gráfica */
.progress-metric:nth-child(1) { /* Total */
  background-color: rgba(52, 152, 219, 0.1);
  border: 1px solid #3498db;
}

.progress-metric:nth-child(2) { /* Pendientes - Amarillo (#f1c40f) */
  background-color: rgba(241, 196, 15, 0.1);
  border: 1px solid #f1c40f;
}

.progress-metric:nth-child(3) { /* En Progreso - Verde azulado (#008090) */
  background-color: rgba(0, 128, 144, 0.1); /* 008090 con opacidad */
  border: 1px solid #008090;
}

.progress-metric:nth-child(4) { /* Completadas - Verde (#2ecc71) */
  background-color: rgba(46, 204, 113, 0.1);
  border: 1px solid #2ecc71;
}

.progress-metric:nth-child(5) { /* Rezagadas - Rojo (#e74c3c) */
  background-color: rgba(231, 76, 60, 0.1);
  border: 1px solid #e74c3c;
}
/* CUADROS DE ESTADO - COLORES SÓLIDOS (iguales a la gráfica) */
.progress-metric:nth-child(1) { /* Total */
  background-color: #3498db; /* Azul */
  border: 1px solid #2980b9;
  color: white;
}

.progress-metric:nth-child(2) { /* Pendientes */
  background-color: #f1c40f; /* Amarillo */
  border: 1px solid #f39c12;
  color: #2c3e50; /* Texto oscuro para mejor contraste */
}

.progress-metric:nth-child(3) { /* En Progreso */
  background-color: #008090; /* Verde azulado */
  border: 1px solid #006070;
  color: white;
}

.progress-metric:nth-child(4) { /* Completadas */
  background-color: #2ecc71; /* Verde */
  border: 1px solid #27ae60;
  color: white;
}

.progress-metric:nth-child(5) { /* Rezagadas */
  background-color: #e74c3c; /* Rojo */
  border: 1px solid #c0392b;
  color: white;
}

/* Ajustes adicionales para mejor visualización */
.progress-metric {
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2); /* Legibilidad */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Profundidad */
}
/* CUADROS DE ESTADO - COLORES SÓLIDOS CON TEXTO BLANCO */
.progress-metric {
  color: white !important; /* Texto blanco para todos */
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Sombra para mejor contraste */
}

/* Fondo sólido (igual a la gráfica) */
.progress-metric:nth-child(1) { /* Total */
  background-color: #3498db;
  border: 1px solid #2980b9;
}

.progress-metric:nth-child(2) { /* Pendientes */
  background-color: #f1c40f;
  border: 1px solid #f39c12;
}

.progress-metric:nth-child(3) { /* En Progreso */
  background-color: #008090;
  border: 1px solid #006070;
}

.progress-metric:nth-child(4) { /* Completadas */
  background-color: #2ecc71;
  border: 1px solid #27ae60;
}

.progress-metric:nth-child(5) { /* Rezagadas */
  background-color: #e74c3c;
  border: 1px solid #c0392b;
}
/* Ajustes para el contenedor principal */
.progress-container {
  margin-bottom: 50px !important; /* Aumenté a 50px para mayor separación */
  position: relative;
}

/* Texto de porcentaje (sin fondo) */
.progress-percentage {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  color: #2c3e50;
  font-weight: bold;
  font-size: 14px;
  background: transparent;
  padding: 0;
  z-index: 2;
}

/* Barra de progreso */
.progress-bar {
  margin-top: 25px; /* Espacio arriba de la barra */
}

/* Cuadros de métricas - Bajamos significativamente */
.progress-metrics {
  margin-top: 60px !important; /* Aumenté a 60px */
  transform: translateY(20px); /* Baja adicionalmente 20px */
}
/* Contenedor principal - Ajuste de posición vertical */
.progress-container {
  margin: 35px 0 40px; /* 35px arriba, 40px abajo */
  position: relative;
}

/* Texto de porcentaje - Centrado y posicionado */
.progress-percentage {
  position: absolute;
  top: -18px; /* Posición relativa sobre la barra */
  left: 50%;
  transform: translateX(-50%);
  color: #2c3e50;
  font-weight: bold;
  font-size: 14px;
  z-index: 2;
  text-shadow: 
    0 0 3px white,
    0 0 5px white; /* Efecto de borde blanco para legibilidad */
}

/* Barra de progreso - Ajuste fino */
.progress-bar {
  margin-top: 22px;
  transform: translateY(10px); /* Baja la barra 10px adicionales */
}
/* Aplica texto blanco a TODOS los elementos dentro de los cuadros */
.progress-metric,
.progress-metric .metric-value,
.progress-metric .metric-label {
  color: white !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Sombra para mejor legibilidad */
}

/* Refuerza el blanco en estados hover/focus */
.progress-metric:hover,
.progress-metric:focus {
  color: white !important;
}

/* Versión de respaldo para navegadores antiguos */
.progress-metric * {
  color: white !important;
}
.time-metric:first-child {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ecf0f1;
}


.time-metric:first-child .time-value {
  font-size: 26px; /* Más grande para destacar */
  color: #2c3e50;
}
/* DISTRIBUCIÓN ORIGINAL DEL DASHBOARD */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  margin-bottom: 20px;
}

/* Primera fila: Info proyecto + métricas */
.project-header-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.project-title {
  flex: 2;
}

.project-metrics-summary {
  flex: 1;
  display: flex;
  gap: 15px;
}

/* Segunda fila: Barra de progreso (ancho completo) */
.progress-fullwidth {
  width: 100%;
  margin-bottom: 20px;
}

/* Tercera fila: 2 columnas (Control tiempo + Asignación recursos) */
.time-resources-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.time-container {
  flex: 1;
}

.resources-container {
  flex: 1;
}

/* Cuarta fila: Gráfico y riesgos */
.chart-risks-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-container {
  flex: 2;
}

.risks-container {
  flex: 1;
}

/* Quinta fila: 3 columnas (Acciones, hitos, quick actions) */
.footer-actions-row {
  display: flex;
  gap: 20px;
}

.actions-panel, 
.upcoming-milestones, 
.quick-actions {
  flex: 1;
}

/* Mantenemos todos los estilos visuales existentes */
.metric-card, .progress-bar, .time-metric, 
.risk-item, .milestone-item, .quick-action-btn {
  /* Tus estilos actuales se mantienen igual */
}
/* SOLO ESTOS CAMBIOS - TODO LO DEMÁS PERMANECE IGUAL */
.dashboard-card.wide {
  /* Ampliamos el contenedor */
  padding: 30px 25px; /* Aumentamos el padding (original era 20px) */
}

/* Ajustamos los cuadros inferiores para llenar el nuevo espacio */
.progress-metrics {
  margin-top: 25px; /* Aumentamos espacio superior (original 15px) */
  gap: 20px; /* Mantenemos separación entre cuadros */
}

/* Garantizamos que la barra y texto NO se muevan */
.progress-container {
  /* Posición original exacta */
  margin: 15px 0 !important; 
}

.progress-percentage {
  /* Estilo original exacto */
  top: -15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
/* Ajuste para cuadros de métricas - Texto en una sola línea */
.progress-metrics {
  display: flex;
  gap: 15px; /* Espacio entre cuadros */
  margin-top: 20px;
}

.progress-metric {
  flex: 1;
  min-width: 120px; /* Ancho mínimo aumentado */
  padding: 15px 10px;
  white-space: nowrap; /* Evita saltos de línea */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ajuste específico para textos */
.metric-value {
  font-size: 22px;
  white-space: nowrap;
}

.metric-label {
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* Contenedor para la fila de Tiempos + Recursos */
.time-resources-row {
  display: flex;
  gap: 20px; /* Mismo espacio que entre otros elementos */
  margin-bottom: 20px; /* Conserva el margen original */
}

/* Contenedor de Control de Tiempos (mitad izquierda) */
.time-container {
  flex: 1;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Contenedor de Asignación de Recursos (mitad derecha) */
.resources-container {
  flex: 1;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* Estilo para la nueva sección de tiempo */
.time-metrics-compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}

.performance-indicator {
  margin-top: 10px;
  padding: 8px;
  border-radius: 6px;
  background: #f8f9fa;
  text-align: center;
  font-weight: bold;
}

.performance-value {
  color: #27ae60; /* Verde por defecto */
}

/* Colores dinámicos para el indicador (debes controlarlo via JS) */
.performance-value.warning { color: #f39c12; }
.performance-value.critical { color: #e74c3c; }
/* Estilos para los cuadros estadísticos */
.progress-metrics {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 10px;
}

.progress-metric {
  flex: 1;
  min-width: 0;
  padding: 12px 8px;
  border-radius: 8px;
  text-align: center;
}

/* Colores originales de los cuadros */
.progress-metric:nth-child(1) { background-color: #3498db; border: #3498db; } /* Total */
.progress-metric:nth-child(2) { background-color: #f1c40f; border: #f1c40f; } /* Pendientes */
.progress-metric:nth-child(3) { background-color: #008090; border: #008090; } /* En Progreso */
.progress-metric:nth-child(4) { background-color: #00FF00; border: #00FF00; } /* Completadas */
.progress-metric:nth-child(5) { background-color: #e74c3c; border: #e74c3c; } /* Rezagadas */

/* Texto en blanco */
.progress-metric,
.progress-metric .metric-value,
.progress-metric .metric-label {
  color: white;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
/* Estilos para los títulos de bloques del Dashboard */
.dashboard-card h3 {
  background-color: #002244; /* Azul marino */
  color: #ffffff;
  padding: 10px 15px;
  margin: -20px -20px 20px -20px; /* Alineación con el borde de la tarjeta */
  border-radius: 8px 8px 0 0;
  font-weight: 600;
}

/* Ajustes para mantener la consistencia visual */
.dashboard-card {
  padding-top: 0; /* Compensa el padding del título */
  overflow: hidden; /* Para que el borde radius del título funcione */
}
/* Elimina cualquier color de texto heredado */
.dashboard-card h3,
.dashboard-card h3 * {
  color: white !important;
  all: unset; /* Resetea estilos heredados */
}

/* Estilos base */
.dashboard-card h3 {
  background: #003366;
  color: white;
  padding: 12px 16px;
  margin: -20px -20px 15px -20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px 8px 0 0;
  display: block;
}
.dashboard-card h3 {
  background-color: #003366;
  color: white !important;
  text-align: center;
  padding: 12px 15px;
  margin: -20px -20px 20px -20px;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  width: calc(100% + 40px);
  box-sizing: border-box;
  
  /* Efectos adicionales */
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

/* Efecto hover sutil (opcional) */
.dashboard-card h3:hover {
  background-color: #002b57;
}
/* Estilos para las pastillas de estado en la vista de lista */
.status-pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  text-align: center;
  min-width: 100px;  /* Mismo ancho para todos */
  box-sizing: border-box;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Colores para cada estado (manteniendo tus colores actuales) */
.status-pill.status-pending {
  background-color: #f1c40f; /* Naranja */
}

.status-pill.status-inProgress {
  background-color: #008090; /* Azul */
}

.status-pill.status-completed {
  background-color: #2ecc71; /* Verde */
}

.status-pill.status-overdue {
  background-color: #e74c3c; /* Rojo */
}
/* Estilos para las tarjetas en el tablero Kanban */
.task-card {
  color: white; /* Texto blanco para toda la tarjeta */
}

/* Color específico para el texto en el estado Pendiente */
.task-card[data-status="pending"] {
  color: white;
}

/* Fondo para estado Pendiente (asegúrate que tenga buen contraste) */
.status-badge.pending {
  background-color: #f1c40f; /* Naranja */
  color: white !important; /* Fuerza texto blanco */
}

/* Asegurar contraste en todos los estados */
.status-badge {
  color: white !important;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}
.risk-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.risk-delete-btn {
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.8em;
  cursor: pointer;
  margin-left: 10px;
  padding: 4px 8px;
}

.risk-delete-btn:hover {
  background-color: #c0392b;
}
/* Estados del riesgo */
.risk-status.no-resuelto { background-color: #e74c3c; color: white; padding: 2px 6px; border-radius: 4px; }
.risk-status.en-revision { background-color: #f1c40f; color: black; padding: 2px 6px; border-radius: 4px; }
.risk-status.monitoreando { background-color: #3498db; color: white; padding: 2px 6px; border-radius: 4px; }
.risk-status.resuelto { background-color: #2ecc71; color: white; padding: 2px 6px; border-radius: 4px; }

.time-feedback {
  text-align: center;
  padding: 10px;
  border-radius: 6px;
  font-weight: bold;
  margin-top: 10px;
  font-size: 14px;
}

.time-feedback.positive {
  background-color: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.time-feedback.negative {
  background-color: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}
/* Estilos para igualar con Progreso del Proyecto */
.time-metrics-centered {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.time-metric {
  text-align: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  min-width: 80px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.time-feedback-container {
  width: 80%;
  margin: 0 auto 20px;
  text-align: center;
}

.time-feedback {
  padding: 10px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 14px;
  display: inline-block;
  min-width: 200px;
}

.time-feedback.positive {
  background-color: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.time-feedback.negative {
  background-color: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

.dashboard-card.wide {
  flex: 3;                   /* 50% más ancho que otros */
  min-height: 350px;         /* Altura aumentada */
  padding: 25px;             /* Más espacio interno */
}

.metrics-grid {
  gap: 25px;                 /* Más separación entre métricas */
}

.metric-item {
  min-width: 120px;          /* Cuadros internos más anchos */
  padding: 20px;             /* Más espacio en cada métrica */
}
.dashboard-card.wide {
  flex: 3;                   /* 50% más ancho que otros */
  min-height: 350px;         /* Altura aumentada */
  padding: 25px;             /* Más espacio interno */
}

.metrics-grid {
  gap: 25px;                 /* Más separación entre métricas */
}

.metric-item {
  min-width: 120px;          /* Cuadros internos más anchos */
  padding: 20px;             /* Más espacio en cada métrica */
}
/* Estilos específicos para Control de Tiempos */
.dashboard-card.wide.control-tiempos {
  flex: 3;
  min-height: 350px;
  padding: 25px;
}

/* Estilos específicos para Avance del Proyecto */
.dashboard-card.wide.avance-proyecto {
  flex: 3;
  min-height: 350px;
  padding: 25px;
}
Mover el mensaje de buen trabajo a la derecha
.time-feedback-container {
  display: flex;
  justify-content: flex-end; /* Cambia de 'center' a 'flex-end' */
  margin-right: 20px; /* Ajuste fino de posición */
  padding: 0;
}

.time-feedback {
  margin-left: 08px; /* Empuja el mensaje a la derecha */
  margin-right: 0; /* Elimina margen derecho predeterminado */
}

/* En tu archivo CSS */
.dashboard-card.wide.control-tiempo {
  position: relative; /* Necesario para ajustes finos */
}

/* Contenedor principal del contenido */
.dashboard-card.wide .metrics-grid,
.dashboard-card.wide .tiempo-feedback {
  margin-top: 40px; /* ▲ Ajusta este valor (20px, 50px, etc.) */
}
/* Ajustes específicos para bajar barra+texto */
.progress-container {
  transform: translateY(20px); /* Baja todo el bloque 20px */
  margin-bottom: 0; /* Elimina margen inferior para no afectar cuadros */
}

/* Mantener alineación centrada */
.progress-bar {
  margin-left: auto;
  margin-right: auto;
}

/* Texto del porcentaje (ajuste fino) */
.progress-percentage {
  top: -15px; /* Posición relativa sobre la barra */
}
/* Ajustes específicos para bajar barra+texto */
.progress-container {
  transform: translateY(160px); /* Baja todo el bloque 20px */
  margin-bottom: 0; /* Elimina margen inferior para no afectar cuadros */
}

/* Mantener alineación centrada */
.progress-bar {
  margin-left: auto;
  margin-right: auto;
}

/* Texto del porcentaje (ajuste fino) */
.progress-percentage {
  top: -15px; /* Posición relativa sobre la barra */
}

/* Sube los cuadros de métricas sin mover la barra */
.progress-metrics {
  margin-top: 20px !important; /* Reduce este valor para subir más */
  transform: translateY(190px); /* Sube los cuadros 15px */
}

/* Asegura que el contenedor de la barra no tenga margen inferior */
.progress-container {
  margin-bottom: 0 !important;
}

@media (max-width: 100px) {
  .dashboard-card.wide {
    min-width: 60% !important; /* En pantallas pequeñas */
    flex: 1 !important;
  }
}
/* Estilos mejorados para el Dashboard */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-bottom: 20px;
  border-left: 4px solid #3498db;
}

.project-title h1 {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.project-status {
  margin-top: 8px;
  font-size: 14px;
  color: #7f8c8d;
  display: flex;
  gap: 15px;
}

.project-metrics-summary {
  display: flex;
  gap: 15px;
}

.metric-card {
  text-align: center;
  padding: 15px 25px;
  border-radius: 8px;
  background: #f8f9fa;
  min-width: 100px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
}

.metric-label {
  font-size: 12px;
  color: #7f8c8d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dashboard-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dashboard-row {
  display: flex;
  gap: 20px;
}

.dashboard-card {
  flex: 1;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.dashboard-card.wide {
  flex: 2;
}

.dashboard-card h3 {
  margin-top: 0;
  color: #2c3e50;
  font-size: 16px;
  border-bottom: 1px solid #ecf0f1;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

/* Barra de progreso mejorada */
.progress-container {
  margin: 15px 0;
}

.progress-percentage {
  text-align: right;
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 5px;
}

.progress-bar {
  height: 10px;
  background: #ecf0f1;
  border-radius: 5px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #3498db;
  border-radius: 5px;
  transition: width 0.5s ease;
}

.progress-metrics {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.progress-metric {
  text-align: center;
  flex: 1;
}

/* Estilos para métricas de tiempo */
.time-metric {
  margin: 15px 0;
  text-align: center;
}

.time-value {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
}

.time-label {
  font-size: 12px;
  color: #7f8c8d;
  text-transform: uppercase;
}

.time-feedback {
  font-size: 12px;
  text-align: center;
  padding: 8px;
  border-radius: 4px;
  margin: 10px 0;
}

.time-feedback.positive {
  background-color: #e8f5e9;
  color: #2ecc71;
}

.time-feedback.negative {
  background-color: #ffebee;
  color: #e74c3c;
}

/* Estilos para gráficos */
canvas {
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
  font-size: 12px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-item:before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
}

.legend-item.pending:before { background: #f1c40f; }
.legend-item.inProgress:before { background: #3498db; }
.legend-item.completed:before { background: #2ecc71; }

/* Estilos para riesgos */
.risks-container {
  margin-top: 15px;
}

.risk-item {
  padding: 10px 15px;
  margin-bottom: 8px;
  border-radius: 4px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.risk-item.high {
  background: #ffebee;
  border-left: 3px solid #e74c3c;
}

.risk-item.medium {
  background: #fff8e1;
  border-left: 3px solid #f39c12;
}

.risk-item.low {
  background: #e8f5e9;
  border-left: 3px solid #2ecc71;
}

.add-risk-btn {
  width: 100%;
  padding: 10px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s;
}

.add-risk-btn:hover {
  background: #2980b9;
}

/* Estilos para el pie de página del dashboard */
.dashboard-footer {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.actions-panel, .upcoming-milestones, .quick-actions {
  flex: 1;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

#requiredActions {
  list-style-type: none;
  padding-left: 0;
}

#requiredActions li {
  padding: 8px 0;
  border-bottom: 1px solid #ecf0f1;
  font-size: 13px;
}

.milestone-item {
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: #f8f9fa;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.milestone-item.upcoming {
  border-left: 3px solid #3498db;
}

.milestone-item.current {
  border-left: 3px solid #2ecc71;
  font-weight: bold;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-action-btn {
  padding: 12px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s;
}

.quick-action-btn:hover {
  background: #2980b9;
}

/* Responsive design */
@media (max-width: 1200px) {
  .dashboard-row {
    flex-direction: column;
  }
  
  .dashboard-footer {
    flex-direction: column;
  }
  
  .dashboard-card.wide {
    flex: 1;
  }
}
/* Estilos para la barra de progreso - Versión centrada */
.progress-container {
  margin: 15px 0;
  text-align: center; /* Centramos todo el contenido */
}

.progress-percentage {
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 5px;
  display: inline-block; /* Cambiamos a inline-block para que ocupe solo su espacio */
  width: auto; /* Ancho automático según contenido */
  padding: 0 10px; /* Un poco de espacio a los lados */
  background: #f8f9fa; /* Fondo sutil para mejor legibilidad */
  border-radius: 10px; /* Bordes redondeados */
}

.progress-bar {
  height: 10px;
  background: #ecf0f1;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 5px; /* Espacio entre texto y barra */
}

.progress-fill {
  height: 100%;
  background: #3498db;
  border-radius: 5px;
  transition: width 0.5s ease;
}
.time-feedback {
  margin-left: 78px; /* Empuja el mensaje a la derecha */
  margin-right: 0; /* Elimina margen derecho predeterminado */
}
.risk-delete-btn {
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.2s;
}

.risk-delete-btn:hover {
    background-color: #c0392b;
}
/* Estilos para estados de riesgo */
.risk-item.status-no-resuelto {
    background-color: #fff0f0;
}

.risk-item.status-en-revision {
    background-color: #fff9e6;
}

.risk-item.status-monitoreando {
    background-color: #e6f7ff;
}

.risk-item.status-resuelto {
    background-color: #f0fff0;
    opacity: 0.7;
}

/* Estilos para el select de estado */
.risk-status-select {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-size: 13px;
    margin: 0 10px;
}
/* Estilos para el título de Acciones Requeridas */
.actions-panel h3 {
  color: white;
  background-color: #2c3e50; /* Azul marino */
  padding: 8px 12px;
  border-radius: 4px;
  margin: 0;
  font-size: 16px;
  display: inline-block;
}

/* Ajustes para el contenedor del header */
.actions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  gap: 10px;
}

/* Ajuste para el botón de agregar */
.add-action-btn {
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.2s;
  white-space: nowrap;
}
/* Estilos para la sección de hitos */
.upcoming-milestones {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.milestones-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.add-milestone-btn {
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.add-milestone-btn:hover {
  background: #2980b9;
}

.milestone-item {
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: #f8f9fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.milestone-item.upcoming {
  border-left: 3px solid #3498db;
}

.milestone-item.current {
  border-left: 3px solid #2ecc71;
  font-weight: bold;
}

.milestone-item.overdue {
  border-left: 3px solid #e74c3c;
}

.milestone-date {
  font-weight: bold;
  color: #2c3e50;
  min-width: 80px;
}

.milestone-name {
  flex-grow: 1;
  margin: 0 10px;
}

.milestone-remove {
  color: #e74c3c;
  background: none;
  border: none;
  cursor: pointer;
}
/* Añade esto al final de tu sección de estilos en index.html */
.actions-header, .milestones-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 2px solid #2c3e50; /* Azul marino */
  padding-bottom: 8px;
}

.actions-header h3, .milestones-header h3 {
  margin: 0;
  color: #2c3e50; /* Azul marino */
  font-size: 16px;
  font-weight: 600;
}

.add-action-btn, .add-milestone-btn {
  background: none;
  border: none;
  color: #2c3e50; /* Azul marino */
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.add-action-btn:hover, .add-milestone-btn:hover {
  color: #3498db; /* Azul más claro al pasar el mouse */
}
/* Estilo para los botones de eliminar en ambas secciones */
.action-remove, .milestone-remove {
  background: none;
  border: none;
  color: #e74c3c; /* Rojo para eliminar */
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.action-remove:hover, .milestone-remove:hover {
  background-color: #f5f5f5;
}

.action-remove i, .milestone-remove i {
  font-size: 14px;
}

/* Estilo para los ítems de la lista */
.action-item, .milestone-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.action-item:hover, .milestone-item:hover {
  background-color: #ecf0f1;
}

.action-text, .milestone-name {
  flex-grow: 1;
  margin-right: 10px;
}

.milestone-date {
  margin-right: 15px;
  color: #7f8c8d;
  font-size: 12px;
  min-width: 80px;
}
/* Mantener los estilos de estado para hitos */
.milestone-item.upcoming {
  border-left: 3px solid #3498db; /* Azul para próximos */
}

.milestone-item.current {
  border-left: 3px solid #2ecc71; /* Verde para actuales */
  font-weight: bold;
}

.milestone-item.overdue {
  border-left: 3px solid #e74c3c; /* Rojo para vencidos */
}
/* Estilos para el título de Acciones Requeridas */
.actions-panel h3 {
  color: white;
  background-color: #2c3e50; /* Azul marino */
  padding: 8px 12px;
  border-radius: 4px;
  margin: 0;
  font-size: 16px;
  display: inline-block;
}

/* Ajustes para el contenedor del header */
.actions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  gap: 10px;
}

/* Ajuste para el botón de agregar */
.add-action-btn {
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.2s;
  white-space: nowrap;
}
.upcoming-milestones h3 {
  color: white;
  background-color: #2c3e50; /* Azul marino, igual que Acciones Requeridas */
  padding: 8px 12px;
  border-radius: 4px;
  margin: 0;
  font-size: 16px;
  display: inline-block;
}

.milestones-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  gap: 10px;
}

.add-milestone-btn {
  background: #3498db; /* Color azul igual que el botón de "Agregar" en Acciones Requeridas */
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.2s;
}

/* Estado de los hitos - Ejemplo de colores basados en lo usado en otras partes */
.milestone-item.upcoming {
  border-left: 3px solid #3498db; /* Azul para próximos */
}
.milestone-item.current {
  border-left: 3px solid #2ecc71; /* Verde para actuales */
}
.milestone-item.overdue {
  border-left: 3px solid #e74c3c; /* Rojo para vencidos */
}
#projectStatusLabel {
  font-size: 16px;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: bold;
}

.status-badge {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.status-badge.healthy {
  background: #2ecc71; /* Verde */
}

.status-badge.critical {
  background: #e74c3c; /* Rojo */
}
.status-badge {
  padding: 5px 12px;  /* Más espacio interno */
  border-radius: 15px; /* Bordes más redondeados */
  font-size: 13px;     /* Tamaño de fuente ligeramente mayor */
  font-weight: bold;
  color: white;
  display: inline-block;
  min-width: 80px;     /* Ancho mínimo para mantener consistencia */
  text-align: center;  /* Centrar el texto */
  white-space: nowrap; /* Evitar saltos de línea */
  transition: all 0.3s ease;
  margin-left: 5px;    /* Espacio del texto "Estado:" */
}

/* Ajustar el contenedor para mejor alineación */
.project-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 14px;
  color: #7f8c8d;
}

/* Estilos de estado (colores) */
.status-badge.healthy {
  background: #2ecc71; /* Verde */
}

.status-badge.critical {
  background: #e74c3c; /* Rojo */
}
/* Para pantallas pequeñas */
@media (max-width: 768px) {
  .project-status {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .status-badge {
    margin-left: 0;
    margin-top: 5px;
  }
}
.status-badge {
  padding: 6px 14px;           /* Más espacio interno */
  border-radius: 20px;         /* Bordes más redondeados */
  font-size: 13px;             /* Tamaño de fuente óptimo */
  font-weight: 600;            /* Grosor de texto medio */
  color: white;
  display: inline-flex;        /* Mejor alineación del contenido */
  align-items: center;
  justify-content: center;
  min-width: 120px;            /* Ancho mínimo generoso */
  box-sizing: border-box;      /* Incluye padding en el ancho */
  line-height: 1.3;            /* Espaciado entre líneas */
  white-space: nowrap;         /* Evita saltos de línea no deseados */
  margin-left: 8px;            /* Separación del texto "Estado:" */
  transition: all 0.2s ease;
}

/* Estado saludable */
.status-badge.healthy {
  background: #27ae60;         /* Verde más vibrante */
  box-shadow: 0 2px 4px rgba(39, 174, 96, 0.2);
}

/* Estado crítico */
.status-badge.critical {
  background: #e74c3c;         /* Rojo intenso */
  box-shadow: 0 2px 4px rgba(231, 76, 60, 0.2);
}

/* Contenedor flexible */
.project-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  color: #34495e;              /* Texto más oscuro para mejor contraste */
}
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 20px;
  width: 80%;
  max-width: 600px;
  border-radius: 5px;
}
/* Estilos para la sección de hitos */
.upcoming-milestones {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.milestones-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.add-milestone-btn {
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.add-milestone-btn:hover {
  background: #2980b9;
}

.milestone-item {
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: #f8f9fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.milestone-item.upcoming {
  border-left: 3px solid #3498db;
}

.milestone-item.current {
  border-left: 3px solid #2ecc71;
  font-weight: bold;
}

.milestone-item.overdue {
  border-left: 3px solid #e74c3c;
}

.milestone-date {
  font-weight: bold;
  color: #2c3e50;
  min-width: 80px;
}

.milestone-name {
  flex-grow: 1;
  margin: 0 10px;
}

.milestone-remove {
  color: #e74c3c;
  background: none;
  border: none;
  cursor: pointer;
}
/* Estilos para el título de Acciones Requeridas */
.actions-panel h3 {
  color: white;
  background-color: #2c3e50; /* Azul marino */
  padding: 8px 12px;
  border-radius: 4px;
  margin: 0;
  font-size: 16px;
  display: inline-block;
}

/* Ajustes para el contenedor del header */
.actions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  gap: 10px;
}

/* Ajuste para el botón de agregar */
.add-action-btn {
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.2s;
  white-space: nowrap;
}
/* Estilos para la sección de acciones */
.actions-panel {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.actions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.add-action-btn {
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.2s;
}

.add-action-btn:hover {
  background: #2980b9;
}

#requiredActions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.action-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.action-text {
  flex-grow: 1;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.action-text[contenteditable="true"] {
  border-color: #3498db;
  background: #f8fafc;
  outline: none;
}

.action-remove {
  background: none;
  border: none;
  color: #e74c3c;
  cursor: pointer;
  margin-left: 10px;
  font-size: 14px;
}
.progress-container {
  margin-top: 20px;
  margin-bottom: 30px;
}



<div class="status-info-block">
  <!-- Botón PDF -->
  <div class="pdf-button-section">
    <button id="generatePdfBtn" class="add-risk-btn">📄 Generar PDF</button>
  </div>

  <!-- Avance del Proyecto -->
  <div class="progress-container">
    <h3>Avance del Proyecto</h3>
    <div class="progress-bar">
      <div class="progress-fill" id="projectProgressFillStatus"></div>
    </div>
    <div id="projectProgressLabelStatus">0% Completado</div>
  </div>

  <!-- Gráfico y leyenda -->
  <div class="chart-container">
    <canvas id="statusPieChart"></canvas>
    <div class="chart-legend">
      <div class="legend-item pending">Pendientes <span id="pendingCountStatus">0</span></div>
      <div class="legend-item inProgress">En Progreso <span id="inProgressCountStatus">0</span></div>
      <div class="legend-item completed">Completadas <span id="completedCountStatus">0</span></div>
    </div>
  </div>

  <!-- Estado general -->
  <div class="project-status-summary">
    <h4>Estado del Proyecto</h4>
    <div id="overallProjectStatus" class="status-badge pending">Pendiente</div>
  </div>
</div>






/* Cuadro base */
.status-badge {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  min-width: 150px;
}

/* Fondo verde: En tiempo */
.status-badge.onTime {
  background-color: #2ecc71 !important;
  color: #2ecc71 !important;
  
}

/* Fondo rojo: Fuera de tiempo */
.status-badge.offTime {
  background-color: #e74c3c !important;
  color: #e74c3c !important;

}



.view-content {
  display: none; /* Ocultar por defecto */
  width: 100%;
  height: 100%;
}

.view-content:not(.hidden) {
  display: block; /* Mostrar solo la vista activa */
}
<!-- Vista Board (Kanban) -->
<div id="boardView" class="view-content">
  <!-- Solo contenido del board -->
</div>

<!-- Vista Lista -->
<div id="listView" class="view-content hidden">
  <!-- Solo contenido de lista -->
</div>

<!-- Vista Calendario -->
<div id="calendarView" class="view-content hidden">
  <!-- Solo contenido de calendario -->
</div>

<!-- Vista Diagrama Gantt -->
<div id="ganttView" class="view-content hidden">
  <!-- Solo contenido de Gantt -->
</div>

<!-- Vista Reportes -->
<div id="reportsView" class="view-content hidden">
  <!-- Solo contenido de reportes -->
</div>

<!-- Vista Rentabilidad -->
<div id="profitabilityView" class="view-content hidden">
  <!-- Solo contenido de rentabilidad -->
</div>

<!-- Vista Dashboard -->
<div id="dashboardView" class="view-content hidden">
  <!-- Solo contenido de dashboard -->
</div>



.view-content {
  display: none; /* Ocultar por defecto */
  width: 100%;
  height: 100%;
}

.view-content:not(.hidden) {
  display: block; /* Mostrar solo la vista activa */
}

/* === Estilo único para banderas de estado y prioridad === */
.status-badge,
.priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px !important; /* Ajustado para texto más largo */
  height: 30px !important;
  line-height: 30px !important;
  text-align: center !important;
  border-radius: 6px !important;
  color: white !important;
  font-size: 0.95em !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  transition: all 0.2s ease !important;
}

/* === Evitar que un badge se vea diferente por otros estilos === */
.status-badge.pending,
.status-badge.inProgress,
.status-badge.completed,
.status-badge.overdue,
.priority-badge.baja,
.priority-badge.media,
.priority-badge.alta {
  min-width: 110px !important;
  height: 30px !important;
  line-height: 30px !important;
}
.subtask-progress {
  margin: 10px 0 5px 0;
  position: relative;
}

.progress-bar {
  height: 8px;
  width: 92%;
  background: #f0f0f0;
  border-radius: 4px;
  margin: 0 auto;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(to right, #3498db, #2ecc71);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.progress-text {
  font-size: 11px;
  font-weight: 600;
  color: #444;
  text-align: center;
  margin-top: 8px;
  position: relative;
  text-shadow: 0 1px 1px rgba(255,255,255,0.8);
  padding: 2px 8px;
  background: rgba(255,255,255,0.7);
  border-radius: 10px;
  display: inline-block;
}
.progress-text {
  font-size: 11px;
  font-weight: 600;
  color: #444;
  text-shadow: 0 1px 1px rgba(255,255,255,0.8);
  /* Nuevos estilos de posicionamiento: */
  display: block;
  text-align: center;
  margin: 10px auto 0 auto;
  width: fit-content;
}
/* Contenedor principal */
.task-details-container {
  max-height: 80vh;
  overflow-y: auto;
  padding: 15px;
  width: 90%;
  max-width: 800px;
}

/* Encabezado */
.task-details-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  position: relative;
}

.task-meta-header {
  display: flex;
  gap: 10px;
}

/* Grid de detalles */
.task-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.details-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Grupos de detalle */
.detail-group {
  margin-bottom: 8px;
}

.detail-group label {
  font-weight: 600;
  color: #555;
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.detail-group .detail-value {
  background: #f8f9fa;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
}

.detail-group.full-width {
  grid-column: span 2;
}

/* Descripción */
.description-text {
  min-height: 60px;
  max-height: 120px;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* Subtareas */
.subtasks-header {
  margin-bottom: 10px;
}

.subtasks-header h4 {
  margin: 0 0 8px 0;
  font-size: 15px;
}

/* Barra de progreso (ajustada para el modal) */
.subtasks-section .progress-bar {
  height: 8px;
  margin: 5px 0 10px 0;
}

/* Responsive */
@media (max-width: 768px) {
  .task-details-grid {
    grid-template-columns: 1fr;
  }
  
  .detail-group.full-width {
    grid-column: span 1;
  }
  
  .task-details-container {
    width: 95%;
    padding: 10px;
  }
}
/* Contenedor principal */
.task-details-container {
  max-height: 80vh;
  overflow-y: auto;
  padding: 15px;
  width: 90%;
  max-width: 800px;
}

/* Encabezado */
.task-details-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  position: relative;
}

.task-meta-header {
  display: flex;
  gap: 10px;
}

/* Grid de detalles */
.task-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.details-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Grupos de detalle */
.detail-group {
  margin-bottom: 8px;
}

.detail-group label {
  font-weight: 600;
  color: #555;
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.detail-group .detail-value {
  background: #f8f9fa;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
}

.detail-group.full-width {
  grid-column: span 2;
}

/* Descripción */
.description-text {
  min-height: 60px;
  max-height: 120px;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* Subtareas */
.subtasks-header {
  margin-bottom: 10px;
}

.subtasks-header h4 {
  margin: 0 0 8px 0;
  font-size: 15px;
}

/* Barra de progreso (ajustada para el modal) */
.subtasks-section .progress-bar {
  height: 8px;
  margin: 5px 0 10px 0;
}

/* Responsive */
@media (max-width: 768px) {
  .task-details-grid {
    grid-template-columns: 1fr;
  }
  
  .detail-group.full-width {
    grid-column: span 1;
  }
  
  .task-details-container {
    width: 95%;
    padding: 10px;
  }
}
/* Estados de tiempo */
.time-good {
  color: #2ecc71;
  font-weight: 600;
  background-color: rgba(46, 204, 113, 0.1);
  padding: 6px;
  border-radius: 4px;
  border-left: 3px solid #2ecc71;
}

.time-bad {
  color: #e74c3c;
  font-weight: 600;
  background-color: rgba(231, 76, 60, 0.1);
  padding: 6px;
  border-radius: 4px;
  border-left: 3px solid #e74c3c;
}

.detail-value {
  /* Asegurar consistencia con otros campos */
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
}

/* === BARRA DE AVANCE - PEQUEÑA Y CENTRADA === */

/* Contenedor: centrado y con ancho controlado */
.status-progress-container-small {
  margin: 25px auto; /* Centrado horizontal */
  width: 300px; /* Ancho fijo (ajustable) */
  max-width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Título */
.status-progress-container-small h3 {
  font-size: 1.2em;
  color: #2c3e50;
  margin: 0 0 8px 0;
  font-weight: 600;
}

/* Barra de progreso (muy pequeña) */
.status-progress-bar-small {
  width: 100%; /* Ocupa el 100% del contenedor (300px) */
  height: 10px;
  background: #ecf0f1;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Relleno de la barra */
.status-progress-fill-small {
  height: 100%;
  background: linear-gradient(90deg, #3498db, #1abc9c);
  border-radius: 5px;
  transition: width 0.6s ease;
}

/* Porcentaje debajo de la barra */
#statusProgressLabel {
  font-weight: bold;
  font-size: 1.1em;
  color: #2c3e50;
  margin-top: 6px;
  padding: 4px 12px;

  border-radius: 4px;

  display: inline-block;
}
/* Asegúrate que estos estilos estén presentes */
.status-badge.healthy { background: #2ecc71; color: white; }
.status-badge.warning { background: #f39c12; color: white; }
.status-badge.critical { background: #e74c3c; color: white; }

.dashboard-card {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* Estilos para Asignación de Recursos */
.resource-list {
    margin-top: 20px;
}

.resource-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.resource-item:last-child {
    border-bottom: none;
}

.resource-info h4 {
    margin: 0 0 8px 0;
    color: #2c3e50;
}

.resource-stats {
    display: flex;
    gap: 15px;
    font-size: 0.9em;
    color: #7f8c8d;
}

.resource-stats .stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.resource-efficiency {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 100px;
}

.efficiency-bar {
    width: 100px;
    height: 8px;
    background-color: #ecf0f1;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 5px;
}

.efficiency-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.efficiency-fill.efficiency-normal {
    background-color: #3498db;
}

.efficiency-fill.efficiency-high {
    background-color: #e74c3c;
}

.efficiency-fill.efficiency-low {
    background-color: #f39c12;
}

.efficiency-value {
    font-size: 0.85em;
    font-weight: bold;
}

.efficiency-value.efficiency-normal {
    color: #3498db;
}

.efficiency-value.efficiency-high {
    color: #e74c3c;
}

.efficiency-value.efficiency-low {
    color: #f39c12;
}

.empty-message {
    text-align: center;
    padding: 20px;
    color: #95a5a6;
    font-style: italic;
}
/* === ESTILOS PARA ASIGNACIÓN DE RECURSOS === */
.resource-list {
    margin-top: 15px;
    max-height: 300px;
    overflow-y: auto;
}

.resource-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #eee;
    background-color: #fafafa;
    margin-bottom: 8px;
    border-radius: 5px;
}

.resource-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.resource-info h4 {
    margin: 0 0 8px 0;
    color: #2c3e50;
    font-size: 1.1em;
}

.resource-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85em;
    color: #7f8c8d;
}

.resource-stats .stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.resource-efficiency {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 120px;
}

.efficiency-bar {
    width: 100px;
    height: 8px;
    background-color: #ecf0f1;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 5px;
}

.efficiency-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.efficiency-fill.efficiency-normal {
    background-color: #3498db;
}

.efficiency-fill.efficiency-high {
    background-color: #e74c3c;
}

.efficiency-fill.efficiency-low {
    background-color: #f39c12;
}

.efficiency-value {
    font-size: 0.85em;
    font-weight: bold;
}

.efficiency-value.efficiency-normal {
    color: #3498db;
}

.efficiency-value.efficiency-high {
    color: #e74c3c;
}

.efficiency-value.efficiency-low {
    color: #f39c12;
}

.empty-message {
    text-align: center;
    padding: 20px;
    color: #95a5a6;
    font-style: italic;
    background-color: #fafafa;
    border-radius: 5px;
    margin-top: 10px;
}

#resourceChart {
    max-height: 200px;
    width: 100%;
}

/* === BARRA DE PROGRESO INDEPENDIENTE PARA DASHBOARD === */
.dashboard-progress-section {
    margin: 20px 0;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.dashboard-progress-section h3 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 1.2em;
}

.project-progress-container {
    position: relative;
    margin-bottom: 10px;
}

.project-progress-bar {
    height: 12px;
    background: #ecf0f1;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.project-progress-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #2ecc71, #27ae60);
    transition: width 0.5s ease;
    width: 0%;
    position: relative;
}

.project-progress-text {
    text-align: center;
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-top: 8px;
}
/* === CONTENEDOR PRINCIPAL DEL DASHBOARD === */
.dashboard-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dividir en 2 columnas */
    gap: 20px; /* Espacio entre columnas */
    margin-top: 20px;
}

/* === SECCIÓN DE PROGRESO DEL PROYECTO === */
.project-progress-section {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    padding: 15px;
    border-radius: 8px;
}

.progress-bar-container {
    text-align: center;
    margin-top: 10px;
}

.progress-bar {
    height: 10px;
    background: #ecf0f1;
    border-radius: 5px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #2ecc71;
    border-radius: 5px;
    transition: width 0.5s ease;
    width: 0%;
}

#projectProgressLabel {
    font-weight: bold;
    color: #2c3e50;
    font-size: 14px;
    margin-top: 5px;
}

/* === SECCIÓN DE CONTROL DE TIEMPO === */
.time-control-section {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    padding: 15px;
    border-radius: 8px;
}

.metrics-grid {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 20px;
}

.metric-box {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    font-weight: bold;
}

.metric-box.total {
    background-color: #3498db;
    color: #fff;
}

.metric-box.pending {
    background-color: #f1c40f;
    color: #fff;
}

.metric-box.in-progress {
    background-color: #3498db;
    color: #fff;
}

.metric-box.completed {
    background-color: #2ecc71;
    color: #fff;
}

.metric-box.overdue {
    background-color: #e74c3c;
    color: #fff;
}

.metric-value {
    font-size: 1.5em;
}

.metric-label {
    text-transform: uppercase;
    font-size: 0.8em;
}

/* === OTRAS SECCIONES DEL DASHBOARD === */
.additional-sections {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Dividir en 3 columnas */
    gap: 20px;
    margin-top: 20px;
}

.task-distribution,
.risks-problems,
.resource-allocation {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    padding: 15px;
    border-radius: 8px;
}

/* === ESTILOS PARA DASHBOARD ORGANIZADO === */

/* Contenedor principal del Dashboard */
.dashboard-main {
    padding: 20px;
    background-color: #f5f7fa;
}

/* Filas del Dashboard (Grid) */
.dashboard-grid-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

/* Tarjetas del Dashboard */
.dashboard-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border: 1px solid #e1e8ed;
}

.dashboard-card.wide {
    grid-column: 1 / -1; /* Ocupa toda la fila */
}

.dashboard-card h3 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 1.3em;
    border-bottom: 2px solid #3498db;
    padding-bottom: 8px;
}

/* === PROGRESO DEL PROYECTO === */
.progress-container {
    margin: 15px 0;
}

.progress-percentage {
    text-align: right;
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 5px;
}

.progress-bar {
    height: 12px;
    background: #ecf0f1;
    border-radius: 6px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3498db, #2980b9);
    border-radius: 6px;
    transition: width 0.5s ease;
}

/* Métricas de progreso */
.progress-metrics {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.progress-metric {
    text-align: center;
    padding: 12px 8px;
    border-radius: 6px;
    background-color: #f8f9fa;
}

.progress-metric:nth-child(1) { background-color: #3498db; color: white; } /* Total */
.progress-metric:nth-child(2) { background-color: #f1c40f; color: white; } /* Pendientes */
.progress-metric:nth-child(3) { background-color: #008090; color: white; } /* En Progreso */
.progress-metric:nth-child(4) { background-color: #2ecc71; color: white; } /* Completadas */
.progress-metric:nth-child(5) { background-color: #e74c3c; color: white; } /* Rezagadas */

.metric-value {
    display: block;
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 5px;
}

.metric-label {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === CONTROL DE TIEMPO === */
.time-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.time-metric {
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
}

.time-value {
    display: block;
    font-size: 1.6em;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 5px;
}

.time-label {
    font-size: 0.9em;
    color: #7f8c8d;
    text-transform: uppercase;
}

/* === DISTRIBUCIÓN DE TAREAS === */
.chart-container-full {
    height: 200px;
    margin: 15px 0;
}

.chart-legend {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 6px;
}

.legend-item {
    font-size: 0.9em;
    color: #2c3e50;
}

.legend-item.pending { color: #f1c40f; }
.legend-item.inProgress { color: #3498db; }
.legend-item.completed { color: #2ecc71; }

/* === ASIGNACIÓN DE RECURSOS === */
.resource-allocation-content {
    margin-top: 15px;
}

#resourceChart {
    max-height: 150px;
    width: 100%;
    margin-bottom: 20px;
}

.resource-list {
    max-height: 200px;
    overflow-y: auto;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 1200px) {
    .dashboard-grid-row {
        grid-template-columns: 1fr;
    }
    
    .progress-metrics {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .time-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-main {
        padding: 10px;
    }
    
    .progress-metrics {
        grid-template-columns: 1fr 1fr;
    }
    
    .time-metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .chart-legend {
        flex-direction: column;
        gap: 8px;
    }
}
/* === BARRA DE PROGRESO INDEPENDIENTE PARA DASHBOARD (CENTRADA) === */
.dashboard-progress-section {
    margin: 20px 0;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    text-align: center; /* Centra todo el contenido */
}

.dashboard-progress-section h3 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 1.2em;
    text-align: center;
}

.project-progress-container {
    position: relative;
    display: inline-block; /* Hace que el contenedor se ajuste al contenido */
    width: 100%; /* O el ancho que desees, ej: 80% */
    max-width: 600px; /* Limita el ancho máximo */
    margin: 0 auto; /* Centra el contenedor */
    text-align: center; /* Centra el texto dentro */
}

.project-progress-bar {
    height: 12px;
    background: #ecf0f1;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    margin: 0 auto; /* Centra la barra */
}

.project-progress-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #2ecc71, #27ae60);
    transition: width 0.5s ease;
    width: 0%;
    position: relative;
}

.project-progress-text {
    text-align: center;
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 5px;
}
/* === SECCIÓN DE PROGRESO DEL PROYECTO === */
.progress-section {
    margin: 20px 0;
    text-align: center; /* Centra todo el contenido */
}

.progress-container {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Alinea verticalmente */
    margin: 15px 0;
}

.progress-bar {
    width: 80%; /* Ancho relativo al contenedor */
    max-width: 400px; /* Ancho máximo */
    height: 10px;
    background: #ecf0f1;
    border-radius: 5px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2ecc71, #27ae60);
    transition: width 0.5s ease;
    width: 0%;
}

.progress-percentage {
    font-size: 14px;
    color: #2c3e50;
    margin-top: 10px;
}

/* === CUADROS DE MÉTRICAS === */
.metrics-grid {
    display: flex;
    justify-content: space-around; /* Distribuye los cuadros uniformemente */
    gap: 15px;
    margin-top: 20px;
}

.metric-box {
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
}

.metric-box.total {
    background-color: #3498db;
    color: white;
}

.metric-box.pending {
    background-color: #f1c40f;
    color: white;
}

.metric-box.in-progress {
    background-color: #3498db;
    color: white;
}

.metric-box.completed {
    background-color: #2ecc71;
    color: white;
}

.metric-box.overdue {
    background-color: #e74c3c;
    color: white;
}
.time-feedback {
    margin-left: 100px; /* Empuja el mensaje a la derecha */
    margin-right: 80px; /* Ajusta este valor para dar espacio */
    background-color: #f8f9fa;
    color: #2c3e50;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 40px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* === ESTILOS PARA BOTONES DE AGREGAR (UNIFICADOS) === */

/* Estilo base para ambos botones */
.add-action-btn,
.add-milestone-btn {
    background-color: #3498db; /* Azul marino */
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 1em;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

/* Icono del botón */
.add-action-btn i.fas,
.add-milestone-btn i.fas {
    font-size: 1.1em;
}

/* Efecto al pasar el mouse */
.add-action-btn:hover,
.add-milestone-btn:hover {
    background-color: #2980b9; /* Azul más oscuro */
    transform: translateX(4px);
    box-shadow: inset 4px 0 0 #1abc9c;
}
/* === ESTILOS UNIFICADOS PARA BOTONES DE AGREGAR EN DASHBOARD === */
/* Aplica a: .add-action-btn, .add-milestone-btn, .add-risk-btn */

.add-action-btn,
.add-milestone-btn,
.add-risk-btn {
    /* Ancho completo */
    width: 100%;
    
    /* Espaciado */
    padding: 10px;
    
    /* Colores */
    background: #3498db; /* Azul */
    color: white;
    
    /* Bordes */
    border: none;
    border-radius: 4px;
    
    /* Cursor */
    cursor: pointer;
    
    /* Margen superior */
    margin-top: 10px;
    
    /* Transición suave */
    transition: background 0.2s;
    
    /* Asegurar que el texto no se seleccione al hacer clic rápidamente */
    user-select: none;
    
    /* Tamaño de fuente consistente */
    font-size: 14px; /* O el tamaño que uses en .add-risk-btn */
}

/* Efecto al pasar el mouse */
.add-action-btn:hover,
.add-milestone-btn:hover,
.add-risk-btn:hover {
    background: #2980b9; /* Azul más oscuro */
}

/* Opcional: Si deseas mantener el estilo flex para acciones/hitos (como en fragmentos anteriores) 
   pero aún así hacerlos consistentes con .add-risk-btn, puedes sobrescribir: */

/* 
.actions-panel .add-action-btn,
.upcoming-milestones .add-milestone-btn {
    width: 100%;
    padding: 10px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.2s;
    display: flex; (si es necesario)
    align-items: center; (si es necesario)
    justify-content: center; (si es necesario)
    gap: 5px; (si es necesario)
}
.actions-panel .add-action-btn:hover,
.upcoming-milestones .add-milestone-btn:hover {
    background: #2980b9;
}
*/

/* === ASEGURAR TEXTO CENTRADO EN BOTONES DE AGREGAR === */
/* Aplica a los botones de Acciones Requeridas y Próximos Hitos */
/* Asumiendo que ambos botones usan las clases .add-action-btn y .add-milestone-btn */
/* Y que ambos tienen un estilo similar a .add-risk-btn (ancho 100%, display:flex) */

.add-action-btn,
.add-milestone-btn {
  /* Asegurar que el contenido (ícono + texto) esté centrado horizontalmente */
  justify-content: center; /* Centra el ícono y el texto en el eje principal (horizontal si es row) */
  
  /* Asegurar que el contenido esté centrado verticalmente (aunque align-items ya lo hace) */
  align-items: center; /* Centra el ícono y el texto en el eje cruzado (vertical si es row) */

  /* Asegurar que el texto no se rompa en varias líneas innecesariamente */
  white-space: nowrap;
}

/* === HACER QUE LOS TÍTULOS OCUPEN TODO EL ANCHO === */
/* Aplica a los títulos de Acciones Requeridas y Próximos Hitos */
/* para que coincidan en ancho con sus botones (.add-action-btn, .add-milestone-btn) */

.actions-panel h3,
.upcoming-milestones h3 {
  /* Mantener los estilos visuales del fondo */
  color: white;
  background-color: #003366; /* Azul marino */
  padding: 8px 12px;
  border-radius: 4px;
  margin: 0 0 15px 0; /* Añade margen inferior para separar del contenido */
  
  /* Cambiar de inline-block a block para ocupar todo el ancho */
  display: block;
  
  /* Asegurar que el tamaño de fuente sea consistente */
  font-size: 16px;
  
  /* Opcional: si deseas centrar el texto dentro del bloque */
  text-align: center; /* O 'center' si prefieres el texto centrado */
}

/* === HACER QUE EL TÍTULO "ACCESOS RÁPIDOS" OCUPEN TODO EL ANCHO === */
/* Para que coincida con "Acciones Requeridas" y "Próximos Hitos" */

.quick-actions h3 {
  /* Mantener los estilos visuales del fondo */
  color: white;
  background-color: #003366; /* Azul marino */
  padding: 8px 12px;
  border-radius: 4px;
  margin: 0 0 15px 0; /* Añade margen inferior para separar del contenido */
  
  /* Cambiar de inline-block a block para ocupar todo el ancho */
  display: block;
  
  /* Asegurar que el tamaño de fuente sea consistente */
  font-size: 16px;
  
  /* Opcional: si deseas centrar el texto dentro del bloque */
  text-align: center; /* O 'center' si prefieres el texto centrado */
}

/* === ESTILOS PARA LOS TÍTULOS DE SECCIONES === */

/* Selector genérico para todos los títulos importantes */
.dashboard-card h3,
.upcoming-milestones h3,
.distribution-tasks h3,
.risks-problems h3 {
    color: white;
    background-color: #003366; /* Azul marino */
    padding: 8px 12px;
    border-radius: 4px;
    margin: 0;
    font-size: 16px;
    display: block;
    text-align: center;
    width: calc(100% - 20px);
    margin: 0 auto;
}

/* Ajustes específicos si es necesario */
.upcoming-milestones h3,
.distribution-tasks h3,
.risks-problems h3 {
    text-align: left;
}
.warning-symbol {
    color: red;
    margin-right: 5px;
}
/* === BARRA DE PROGRESO INDEPENDIENTE PARA VISTA STATUS/REPORTS === */
.reports-progress-section {
    margin: 25px auto;
    padding: 15px;
   
    border-radius: 8px;
  
    text-align: center;
    max-width: 500px; /* Ancho máximo, ajustable */
}

.reports-progress-section h3 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 1.2em;
}

.reports-progress-container {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.reports-progress-bar {
    width: 100%;
    height: 12px;
    background: #ecf0f1;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.reports-progress-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #2ecc71, #27ae60); /* Verde, puedes cambiarlo */
    transition: width 0.5s ease;
    width: 0%;
}

.reports-progress-text {
    text-align: center;
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-top: 5px;
}

.editable-textarea.description-text {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical; /* Permite ajustar verticalmente */
  min-height: 100px;
  font-family: inherit;
  background-color: #fff;
  transition: border-color 0.3s;
}

.editable-textarea.description-text:focus {
  border-color: #3498db;
  outline: none;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* Reemplaza esta sección en tu CSS */
.gantt-time-unit {
  flex: 1;
  min-width: 40px;
  text-align: center;
  padding: 10px 5px;
  border-right: 1px solid #e0e0e0;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #f8f9fa;
  color: #34495e; /* Texto más oscuro */
  font-weight: 500; /* Más negrita */
}

.gantt-time-unit:nth-child(7n+1) {
  background: #e3f2fd; /* Azul más claro */
  color: #1976d2; /* Azul más oscuro */
  font-weight: 600;
}

.gantt-time-unit.weekend {
  background: #f5f5f5;
  color: #78909c; /* Gris azulado más visible */
  font-weight: 500;
}

/* Nuevo estilo para resaltar el día actual */
.gantt-time-unit.today {
  background: #ffebee !important;
  color: #d32f2f !important;
  font-weight: 700;
  position: relative;
}

.gantt-time-unit.today::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #d32f2f;
}
/* Mejoras para el marcador de día actual */
.gantt-current-day {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e74c3c;
  z-index: 20;
  pointer-events: none;
}

.gantt-current-day::before {
  content: '';
  position: absolute;
  top: 0;
  left: -3px;
  width: 8px;
  height: 8px;
  background: #e74c3c;
  border-radius: 50%;
}

.gantt-current-day div {
  position: absolute;
  top: -20px;
  left: -10px;
  background: #e74c3c;
  color: white;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 10px;
  white-space: nowrap;
}

/* Agrega esto a tu sección de estilos */
.gantt-months-row {
  display: flex;
  background: #2c3e50;
  color: white;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
  height: 30px;
}

.gantt-month-label {
  padding: 5px 0;
  text-align: center;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

.gantt-month-label:not(:first-child) {
  border-left: 1px solid rgba(255,255,255,0.2);
}

/* Ajuste para el espacio del label de tareas */
.gantt-header-task-spacer {
  width: 250px;
 
  border-right: 1px solid rgba(255,255,255,0.2);
}
/* Reemplaza los estilos del tooltip con: */
/* GARANTÍA DE VISIBILIDAD TOTAL PARA TOOLTIPS */
body .gantt-tooltip {
  position: absolute;
  top: calc(100% + 8px); /* 8px debajo de la barra */
  left: 50%;
  transform: translateX(-50%);
  background-color: #2c3e50 !important;
  color: white !important;
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 13px;
  min-width: 260px;
  max-width: 360px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
  z-index: 2147483647; /* Máximo valor posible de z-index */
  display: none;
  opacity: 1 !important;
  border: 2px solid #3d5166 !important;
  text-align: left;
  line-height: 1.6;
  white-space: normal;
  word-wrap: break-word;
  
  /* Garantía absoluta de visibilidad */
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  visibility: visible !important;
  filter: none !important;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  will-change: transform, opacity;
  contain: layout paint style;
}

/* CONTENEDORES PRINCIPALES - SIN RESTRICCIONES */
.gantt-container,
.gantt-task-bars,
.gantt-bar,
.gantt-container-wrapper {
  overflow: visible !important;
  clip-path: none !important;
  z-index: auto !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ANIMACIÓN MEJORADA */
@keyframes solidTooltipAppear {
  from { 
    transform: translateX(-50%) translateY(15px);
  }
  to { 
    transform: translateX(-50%) translateY(0);
  }
}

.gantt-bar:hover .gantt-tooltip {
  display: block;
  animation: solidTooltipAppear 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

/* RESET DE ESTILOS HEREDADOS */
body .gantt-tooltip * {
  opacity: 1 !important;
  visibility: visible !important;
  color: inherit !important;
  background: transparent !important;
}








/* Estilos Ejecutivos para Vista Gantt - Tareas */
.gantt-task-info {
  font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  padding: 12px 15px;
  background-color: #ffffff;
  border-left: 4px solid #3498db;
  margin: 8px 0;
  transition: all 0.3s ease;
}

.gantt-task-name {
  color: #2c3e50;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}

.gantt-task-name::before {
  content: "•";
  color: #3498db;
  font-size: 20px;
  margin-right: 8px;
}

.gantt-bar {
  height: 24px;
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Estados de las tareas */
.gantt-bar.pending {
  background-color: #f1c40f;
  opacity: 0.9;
}

.gantt-bar.inProgress {
  background: linear-gradient(135deg, #3498db 0%, #2ecc71 100%);
}

.gantt-bar.completed {
  background-color: #2ecc71;
}

.gantt-bar.overdue {
  background-color: #e74c3c;
}

/* Tooltip ejecutivo */
.gantt-tooltip {
  background-color: #2c3e50 !important;
  color: #ecf0f1 !important;
  padding: 16px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
  border: none !important;
  max-width: 320px !important;
}

.gantt-tooltip strong {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  display: block !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  padding-bottom: 6px !important;
}

.gantt-tooltip span {
  color: #bdc3c7 !important;
  display: block !important;
  margin: 6px 0 !important;
  font-size: 12px !important;
}

/* Cabecera del Gantt */
.gantt-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.gantt-header-task, .gantt-header-time {
  color: #495057;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 15px;
}

/* Efectos hover */
.gantt-bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  opacity: 1 !important;
}

.gantt-task-info:hover {
  background-color: #f8f9fa;
  transform: translateX(4px);
}

/* Escala de tiempo */
.gantt-time-scale {
  background-color: #f8f9fa;
}

.gantt-time-unit {
  color: #6c757d;
  font-size: 11px;
  font-weight: 500;
  border-right: 1px solid #e9ecef;
  padding: 8px 5px;
}

/* Responsividad */
@media (max-width: 768px) {
  .gantt-task-info {
    padding: 10px 12px;
  }
  
  .gantt-task-name {
    font-size: 13px;
  }
}


/* Estilo Ejecutivo para Barra de Fechas en Gantt */
.gantt-time-scale {
  background: linear-gradient(to bottom, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  height: 40px;
  display: flex;
}

.gantt-time-unit {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.3px;
  position: relative;
  border-right: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

/* Estilo para días de semana */
.gantt-time-unit:not(.weekend) {
  background-color: rgba(255, 255, 255, 0.7);
}

/* Estilo para fines de semana */
.gantt-time-unit.weekend {
  background-color: #f1f5f9;
  color: #94a3b8;
}

/* Estilo para el día actual */
.gantt-time-unit.today {
  background-color: #3b82f6;
  color: white;
  font-weight: 700;
}

/* Marcador de mes */
.gantt-time-unit.month-start::before {
  content: attr(data-month);
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  background-color: #1e40af;
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Efecto hover */
.gantt-time-unit:hover {
  background-color: #e2e8f0;
  color: #1e293b;
}

/* Cabecera de la barra de fechas */
.gantt-header-time {
  background-color: #1e3a8a;
  color: white;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #1e3a8a;
}

/* Línea divisora entre meses */
.gantt-time-unit.month-start {
  border-left: 2px solid #1e40af;
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
  .gantt-time-unit {
    font-size: 10px;
    padding: 14px 0;
  }
  
  .gantt-time-unit.month-start::before {
    font-size: 9px;
    top: -20px;
  }
}


/* Estilo Profesional para Sección de Título "Tarea" */
.gantt-header-task {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  color: white !important;
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: 4px 0 0 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.gantt-header-task::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #3b82f6, #60a5fa);
}

.gantt-header-task::after {
  content: "≡";
  position: absolute;
  right: 15px;
  font-size: 16px;
  opacity: 0.3;
}

/* Estilo Ejecutivo para Barra de Fechas (destacando lunes) */
.gantt-time-scale {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  height: 42px;
  display: flex;
}

.gantt-time-unit {
  flex: 1;
  text-align: center;
  padding: 14px 0;
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #475569;
  position: relative;
  border-right: 1px solid #f1f5f9;
}

/* Estilo para lunes (inicio de semana) */
.gantt-time-unit.week-start {
  background-color: #f8fafc;
  font-weight: 600;
  color: #1e40af;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}

/* Indicador de inicio de semana (lunes) */
.gantt-time-unit.week-start::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #3b82f6;
}

/* Estilo para fines de semana */
.gantt-time-unit.weekend {
  background-color: #f8fafc;
  color: #94a3b8;
}

/* Estilo para el día actual */
.gantt-time-unit.today {
  background-color: #3b82f6;
  color: white;
  font-weight: 600;
}

/* Efecto hover */
.gantt-time-unit:hover {
  background-color: #f1f5f9;
}

/* Cabecera de la barra de fechas */
.gantt-header-time {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  color: white;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px;
  text-align: center;
  border-radius: 0 4px 0 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}


<style>
  /* Estilos para la sección de seguimiento de horas */
  .time-tracking-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
  }
  
  .time-tracking-filters .filter-group {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .time-tracking-filters label {
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
  }
  
  .time-tracking-filters select {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    min-width: 100px;
  }
  
  .time-tracking-chart-container {
    height: 250px;
    margin: 20px 0;
    position: relative;
  }
  
  .time-tracking-table-container {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 20px;
    border: 1px solid #eee;
    border-radius: 6px;
  }
  
  .time-tracking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  
  .time-tracking-table th {
    position: sticky;
    top: 0;
    background: #2c3e50;
    color: white;
    padding: 10px 12px;
    text-align: left;
  }
  
  .time-tracking-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
  }
  
  .time-tracking-table tr:nth-child(even) {
    background-color: #f8f9fa;
  }
  
  .time-tracking-table tr:hover {
    background-color: #e8f4fd;
  }
  
  .time-tracking-table .hours-cell {
    font-weight: bold;
    color: #2c3e50;
  }
  
  .time-tracking-table .avg-cell {
    color: #7f8c8d;
    font-size: 12px;
  }
  
  .time-tracking-table .last-register {
    font-size: 12px;
    color: #003366;
  }
</style>



/* === SEGUIMIENTO DE HORAS - Ajuste de Gráfica === */

/* Contenedor principal del módulo de seguimiento de horas */
.time-tracking-module {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Espacio entre filtros, gráfica y tabla */
  width: 100%;
  /* Asegurar que el padding/margin no cause desbordamiento */
  box-sizing: border-box;
  /* Opcional: si este módulo está dentro de un dashboard-card, heredará sus estilos */
}

/* Sección de filtros */
.time-tracking-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 15px;
  background-color: #f8f9fa; /* Fondo suave, similar a otros filtros */
  border-radius: 8px;
  align-items: end; /* Alinear elementos al final (abajo) */
}

.time-tracking-filters .filter-group {
  display: flex;
  flex-direction: column;
  min-width: 150px; /* Ancho mínimo para selectores */
}

.time-tracking-filters label {
  font-size: 0.85em;
  font-weight: 600;
  margin-bottom: 5px;
  color: #2c3e50;
}

.time-tracking-filters select,
.time-tracking-filters .filter-button {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.time-tracking-filters select:focus,
.time-tracking-filters .filter-button:focus {
  outline: none;
  border-color: #3498db; /* Azul para foco */
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.time-tracking-filters .filter-button {
  background-color: #e74c3c; /* Rojo, como en otros filtros */
  color: white;
  border: none;
  font-weight: bold;
  align-self: flex-end; /* Alinear botón al final del grupo */
  height: fit-content; /* Que no se estire verticalmente */
}

.time-tracking-filters .filter-button:hover {
  background-color: #c0392b; /* Rojo más oscuro al pasar el mouse */
}

/* Contenedor de la gráfica */
.time-tracking-chart-container {
  /* Ocupar todo el ancho disponible */
  width: 100%;
  /* Altura fija o relativa para la gráfica */
  height: 400px; /* Altura grande, puedes ajustar este valor */
  /* O usar min-height para que crezca pero tenga un mínimo */
  /* min-height: 350px; */
  
  /* Espaciado interno */
  padding: 15px;
  /* Fondo blanco como otras cards */
  background-color: white;
  /* Sombra suave */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  /* Bordes redondeados */
  border-radius: 8px;
  /* Caja de modelo de bordes estándar */
  box-sizing: border-box;
  /* Asegurar que el canvas se ajuste */
  position: relative;
}

/* El canvas de Chart.js */
.time-tracking-chart-container canvas {
  /* Ocupar todo el espacio del contenedor */
  width: 100% !important; /* Importante para Chart.js */
  height: 100% !important; /* Importante para Chart.js */
}

/* Sección de la tabla */
.time-tracking-table-section {
  width: 100%;
  overflow-x: auto; /* Scroll horizontal si la tabla es muy ancha */
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.time-tracking-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0; /* Eliminar margen por defecto */
}

.time-tracking-table th,
.time-tracking-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ecf0f1;
}

.time-tracking-table th {
  background-color: #003366; /* Azul marino */
  color: white;
  font-weight: 600;
  font-size: 0.9em;
}

.time-tracking-table tbody tr:hover {
  background-color: #f8f9fa; /* Fondo al pasar el mouse */
}

/* Estilos para celdas específicas */
.time-tracking-table .hours-cell {
  font-weight: bold;
  color: #2c3e50;
  text-align: center;
}

.time-tracking-table .avg-cell {
  text-align: center;
  color: #7f8c8d;
}

.time-tracking-table .last-register {
  text-align: center;
  color: #34495e;
  font-size: 0.9em;
}

/* Mensaje cuando no hay datos */
.time-tracking-table .no-data-message {
  text-align: center;
  padding: 30px;
  color: #7f8c8d;
  font-style: italic;
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
  .time-tracking-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .time-tracking-filters .filter-group {
    min-width: auto;
    width: 100%;
  }

  .time-tracking-chart-container {
    height: 300px; /* Altura menor en móviles */
  }

  .time-tracking-table th,
  .time-tracking-table td {
    padding: 8px 10px;
    font-size: 0.85em;
  }
}



.actions-panel h3 {
  color: white;
  background-color: #2c3e50; /* Azul marino oscuro */
  padding: 8px 12px;
  border-radius: 4px;
  margin: 0;
  font-size: 16px;
  display: inline-block;
}

.actions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  gap: 10px;
}

.add-action-btn {
  background: #3498db; /* Azul brillante */
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.2s;
}

.add-action-btn:hover {
  background: #2980b9; /* Azul más oscuro al pasar el mouse */
}


.actions-panel .add-action-btn,
.upcoming-milestones .add-milestone-btn {
    width: 100%;
    padding: 10px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.2s;
    display: flex; (si es necesario)
    align-items: center; (si es necesario)
    justify-content: center; (si es necesario)
    gap: 5px; (si es necesario)
}
.actions-panel .add-action-btn:hover,
.upcoming-milestones .add-milestone-btn:hover {
    background: #2980b9;
}
*/

/* === ASEGURAR TEXTO CENTRADO EN BOTONES DE AGREGAR === */
/* Aplica a los botones de Acciones Requeridas y Próximos Hitos */
/* Asumiendo que ambos botones usan las clases .add-action-btn y .add-milestone-btn */
/* Y que ambos tienen un estilo similar a .add-risk-btn (ancho 100%, display:flex) */

.add-action-btn,
.add-milestone-btn {
  /* Asegurar que el contenido (ícono + texto) esté centrado horizontalmente */
  justify-content: center; /* Centra el ícono y el texto en el eje principal (horizontal si es row) */
  
  /* Asegurar que el contenido esté centrado verticalmente (aunque align-items ya lo hace) */
  align-items: center; /* Centra el ícono y el texto en el eje cruzado (vertical si es row) */

  /* Asegurar que el texto no se rompa en varias líneas innecesariamente */
  white-space: nowrap;
}

/* === HACER QUE LOS TÍTULOS OCUPEN TODO EL ANCHO === */
/* Aplica a los títulos de Acciones Requeridas y Próximos Hitos */
/* para que coincidan en ancho con sus botones (.add-action-btn, .add-milestone-btn) */

.actions-panel h3,
.upcoming-milestones h3 {
  /* Mantener los estilos visuales del fondo */
  color: white;
  background-color: #003366; /* Azul marino */
  padding: 8px 12px;
  border-radius: 4px;
  margin: 0 0 15px 0; /* Añade margen inferior para separar del contenido */
  
  /* Cambiar de inline-block a block para ocupar todo el ancho */
  display: block;
  
  /* Asegurar que el tamaño de fuente sea consistente */
  font-size: 16px;
  
  /* Opcional: si deseas centrar el texto dentro del bloque */
  text-align: center; /* O 'center' si prefieres el texto centrado */
}



/* === Vista Reporte de Asignación de Horas === */
#timeAllocationView {
    padding: 20px;
}

.time-allocation-content {
    margin-top: 20px;
}

.time-allocation-table-container {
    overflow-x: auto;
    margin-bottom: 30px;
}

.time-allocation-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.time-allocation-table th,
.time-allocation-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.time-allocation-table th {
    background-color: #2c3e50;
    color: white;
}

.time-allocation-chart-container {
    max-width: 100%;
    /* Ajusta la altura según sea necesario */
    /* height: 400px; */
    margin: 0 auto;
}


/* === Estilos Mejorados para la Gráfica de Asignación de Horas === */

/* Contenedor principal de la gráfica */
.time-allocation-chart-container {
    /* Aumentar tamaño y mejorar apariencia */
    min-height: 500px; /* Altura mínima más grande */
    max-height: 700px; /* Altura máxima para evitar que sea demasiado grande */
    height: 60vh; /* Altura relativa al viewport para responsividad */
    
    background-color: #ffffff; /* Fondo blanco limpio */
    border-radius: 12px; /* Bordes más redondeados */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Sombra más pronunciada y suave */
    padding: 25px; /* Más espacio interno */
    margin-top: 25px; /* Espacio arriba del gráfico */
    margin-bottom: 30px; /* Espacio abajo del gráfico */

    /* Centrado del contenido (la gráfica) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* Asegurar que el contenedor se comporte bien */
    width: 100%;
    box-sizing: border-box;
}

/* Canvas de Chart.js dentro del contenedor */
.time-allocation-chart-container canvas {
    /* Hacer que el canvas ocupe todo el espacio disponible del contenedor */
    width: 100% !important; /* Importante para Chart.js */
    height: 100% !important; /* Importante para Chart.js */
    max-width: 100%; /* Asegurar que no se desborde */
    max-height: 100%; /* Asegurar que no se desborde */
}

/* Opcional: Título de la gráfica (si lo agregas desde JS) */
.time-allocation-chart-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c3e50; /* Color del texto del título */
    margin-bottom: 20px; /* Espacio entre el título y la gráfica */
    text-align: center;
    width: 100%;
}

/* Mejoras para la leyenda de Chart.js (si se muestra) */
.time-allocation-chart-container .chartjs-legend {
    /* Puedes personalizar la leyenda si Chart.js la renderiza dentro del canvas */
}

/* Mejoras para la tabla también, para mantener consistencia */
.time-allocation-table-container {
    overflow-x: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 15px;
}

.time-allocation-table {
    width: 100%;
    border-collapse: collapse;
}

.time-allocation-table th,
.time-allocation-table td {
    padding: 14px 18px; /* Más padding para celdas más grandes */
    text-align: left;
    border-bottom: 1px solid #eee;
}

.time-allocation-table th {
    background-color: #2c3e50; /* Color del encabezado */
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
}

.time-allocation-table tbody tr:hover {
    background-color: #f8f9fa; /* Efecto hover en filas */
    transition: background-color 0.2s ease;
}





/* === ESTILOS AVANZADOS PARA UN DISEÑO MÁS MODERNO Y ELEGANTE === */

/* 1. Aplicar una fuente moderna y suave a todo el cuerpo */
body {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
    color: #333;
}

/* 2. Mejorar las Cards (dashboard-card, time-allocation-chart-container, etc.) */
/* Este estilo se puede aplicar a cualquier contenedor tipo "card" */
.modern-card {
    background: linear-gradient(145deg, #ffffff, #f0f2f5);
    border-radius: 16px;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08),
        /* Sombra principal */
        inset 2px 2px 5px #d1d9e6,
        /* Sombra interna clara (efecto 3D) */
        inset -2px -2px 5px #ffffff;
    /* Sombra interna oscura (efecto 3D) */
    padding: 25px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* Borde sutil */
    backdrop-filter: blur(5px);
    /* Efecto de vidrio esmerilado (frosted glass) */
}

/* Efecto hover para las cards */
.modern-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.15),
        inset 2px 2px 5px #d1d9e6,
        inset -2px -2px 5px #ffffff;
}

/* 3. Mejorar los Botones */
button, .add-action-btn, .add-milestone-btn, .add-risk-btn, #applyTimeAllocationFiltersBtn, #generatePdfBtn {
    background: linear-gradient(145deg, #3498db, #2980b9);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 10px rgba(52, 152, 219, 0.3),
        inset 2px 2px 3px rgba(255, 255, 255, 0.2),
        inset -2px -2px 3px rgba(0, 0, 0, 0.1);
}

button:hover, .add-action-btn:hover, .add-milestone-btn:hover, .add-risk-btn:hover, #applyTimeAllocationFiltersBtn:hover, #generatePdfBtn:hover {
    background: linear-gradient(145deg, #2980b9, #3498db);
    transform: translateY(-2px);
    box-shadow:
        0 6px 15px rgba(52, 152, 219, 0.4),
        inset 2px 2px 3px rgba(255, 255, 255, 0.3),
        inset -2px -2px 3px rgba(0, 0, 0, 0.15);
}

button:active, .add-action-btn:active, .add-milestone-btn:active, .add-risk-btn:active, #applyTimeAllocationFiltersBtn:active, #generatePdfBtn:active {
    transform: translateY(0);
    box-shadow:
        0 2px 5px rgba(52, 152, 219, 0.2),
        inset 2px 2px 3px rgba(0, 0, 0, 0.1),
        inset -2px -2px 3px rgba(255, 255, 255, 0.1);
}

/* 4. Mejorar los Títulos de Sección (h2, h3) */
.project-info h2,
.dashboard-header h1,
.time-allocation-content h2 /* Asegúrate de que tu vista tenga este h2 */ {
    background: linear-gradient(90deg, #2c3e50, #3498db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.project-info h2::after,
.dashboard-header h1::after,
.time-allocation-content h2::after {
    content: '';
    display: block;
    width: 50%;
    height: 3px;
    background: linear-gradient(90deg, #3498db, #2c3e50);
    margin: 8px auto 0;
    border-radius: 2px;
}

/* 5. Mejorar las Tablas */
.time-allocation-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.time-allocation-table th {
    background: linear-gradient(145deg, #2c3e50, #1a2530);
    color: white;
    font-weight: 600;
    padding: 15px 20px;
    text-align: left;
}

.time-allocation-table td {
    padding: 14px 20px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.time-allocation-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* 6. Mejorar los Selectores (Filtros) */
.filter-bar select {
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #fff;
    box-shadow: inset 2px 2px 5px #d1d9e6, inset -2px -2px 5px #ffffff;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.2s ease;
    min-width: 150px;
}

.filter-bar select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: inset 2px 2px 5px #d1d9e6, inset -2px -2px 5px #ffffff, 0 0 0 3px rgba(52, 152, 219, 0.2);
}

/* 7. Mejorar el Menú Lateral */
aside {
    background: linear-gradient(145deg, #2c3e50, #1a2530);
    box-shadow: 3px 0 15px rgba(0, 0, 0, 0.1);
    border-right: none;
}

aside h3 {
    color: #ecf0f1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

aside li {
    background: rgba(255, 255, 255, 0.1);
    color: #ecf0f1;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

aside li:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 8. Aplicar el estilo de card moderno a elementos específicos */
/* Asegúrate de que estos elementos tengan la clase 'modern-card' o añádela. */
/* Si prefieres aplicarlo automáticamente a ciertos elementos existentes, puedes usar selectores de atributo o modificar el HTML. */
/* Por ejemplo, para aplicarlo a la tabla y al gráfico de asignación de horas: */

.time-allocation-table-container,
.time-allocation-chart-container {
    /* Reemplaza las propiedades anteriores con: */
    composes: modern-card; /* Si usas CSS Modules */
    /* O copia las propiedades de .modern-card aquí */
    background: linear-gradient(145deg, #ffffff, #f0f2f5);
    border-radius: 16px;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08),
        inset 2px 2px 5px #d1d9e6,
        inset -2px -2px 5px #ffffff;
    padding: 25px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
}

/* Para aplicarlo a otras cards del dashboard que quieras actualizar: */
.dashboard-card.wide.control-tiempos,
.dashboard-card.wide.avance-proyecto,
.chart-container,
.risks-container,
.actions-panel,
.upcoming-milestones,
.quick-actions {
    composes: modern-card;
    /* O copiar propiedades */
}

/* 9. Mejorar el encabezado del proyecto */
.dashboard-header {
    composes: modern-card;
    /* O copiar propiedades */
    padding: 25px;
    margin-bottom: 30px;
    text-align: center;
}


/* === ALINEACIÓN CENTRADA PARA EL TÍTULO DEL PROYECTO EN DASHBOARD === */
/* Asegura que el contenedor del título use flexbox para alineación */
.dashboard-header .project-title {
    display: flex;
    flex-direction: column; /* Coloca el h1 y el .project-status en columnas */
    align-items: center; /* Centra los elementos hijos horizontalmente */
    justify-content: center; /* Centra los elementos hijos verticalmente si hay espacio */
    text-align: center; /* Centra el texto dentro del h1 */
    flex: 1; /* Ocupa el espacio disponible */
    padding: 10px 0; /* Pequeño padding vertical opcional */
    box-sizing: border-box;
}

/* Centra específicamente el título h1 */
.dashboard-header .project-title h1 {
    margin: 0 0 10px 0; /* Elimina margen por defecto y añade un pequeño espacio abajo */
    width: 100%; /* Asegura que ocupe el ancho completo de su contenedor flex */
    /* El 'text-align: center' del padre ya lo centra, pero puedes reforzarlo */
    text-align: center;
}

/* Opcional: Ajusta ligeramente el contenedor de estado/fechas si es necesario */
.dashboard-header .project-status {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se muevan a la siguiente línea si no caben */
    justify-content: center; /* Centra los spans de estado y fechas */
    gap: 15px; /* Espacio entre el estado y las fechas */
    width: 100%; /* Asegura que ocupe el ancho */
    font-size: 0.95em; /* Ligeramente más pequeño que el título */
}

/* Asegura que los elementos de estado y fechas también estén centrados */
.dashboard-header .project-status > span {
    display: flex;
    align-items: center;
    gap: 5px; /* Espacio entre la etiqueta y el valor */
}

/* === Estilo Mejorado y más Compacto para la Gráfica de Asignación de Horas === */
.time-allocation-chart-container {
    /* Tamaño más compacto */
    min-height: 350px; /* Reducido de 500px */
    max-height: 500px; /* Reducido de 700px */
    height: 45vh; /* Un poco más pequeño */

    /* Efecto "3D" y profesional */
    background: linear-gradient(145deg, #ffffff, #f0f2f5);
    border-radius: 16px;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.12), /* Sombra principal más definida */
        inset 3px 3px 6px #d1d9e6, /* Luz superior izquierda (efecto 3D) */
        inset -3px -3px 6px #ffffff; /* Sombra inferior derecha (efecto 3D) */
    
    padding: 20px; /* Reducido ligeramente */
    margin: 20px auto; /* Centrado horizontal, espacio reducido */

    /* Centrado del contenido */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 95%; /* Un poco menos de ancho para mejor proporcion */
    max-width: 1200px; /* Ancho máximo para pantallas grandes */
    box-sizing: border-box;
    
    /* Efecto de vidrio esmerilado sutil */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px); /* Para compatibilidad con Safari */
    
    /* Transición suave para interacciones */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

/* Efecto hover sutil para interacción */
.time-allocation-chart-container:hover {
    transform: translateY(-3px); /* Elevación sutil */
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.15),
        inset 3px 3px 6px #d1d9e6,
        inset -3px -3px 6px #ffffff;
}

/* Asegurar que el canvas se ajuste bien */
.time-allocation-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
}


.chart-container {
  display: flex;
  justify-content: center; /* Centra el gráfico horizontalmente */
  align-items: center; /* Centra el gráfico verticalmente */
  padding: 0; /* No añadas espacio extra */
  margin: 0; /* Evita márgenes innecesarios */
  background-color: transparent; /* Asegura que no haya fondo */
  border: none; /* Elimina cualquier borde */
  box-shadow: none; /* Elimina cualquier sombra */
}





/* Estilos para la sección de acciones requeridas */
#requiredActions {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

#requiredActions .action-item {
    padding: 10px;
    margin-bottom: 5px;
    background-color: #f8f9fa;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

#requiredActions .action-item:hover {
    background-color: #e9ecef;
}

#requiredActions .action-text {
    flex-grow: 1;
    cursor: pointer;
    padding: 5px;
}

#requiredActions .action-text[contenteditable="true"] {
    background-color: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

#requiredActions .action-remove {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    margin-left: 10px;
}

#requiredActions .empty-message {
    color: #6c757d;
    font-style: italic;
    padding: 10px;
    text-align: center;
}



/* Estilos para la sección de hitos */
#milestonesList {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 15px;
}

.milestone-item {
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f8f9fa;
    border-left: 4px solid #6c757d;
}

.milestone-item.upcoming {
    border-left-color: #17a2b8; /* Azul para hitos futuros */
}

.milestone-item.current {
    border-left-color: #28a745; /* Verde para hitos actuales */
    background-color: #e8f5e9;
}

.milestone-item.overdue {
    border-left-color: #dc3545; /* Rojo para hitos vencidos */
    background-color: #fde8e8;
}

.milestone-date {
    font-weight: bold;
    color: #495057;
    min-width: 100px;
}

.milestone-name {
    flex-grow: 1;
    margin: 0 15px;
    color: #212529;
}

.milestone-remove {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    padding: 5px;
}

.empty-message {
    color: #6c757d;
    font-style: italic;
    padding: 10px;
    text-align: center;
}


.methodology-section {
    padding: 15px;
    border-top: 1px solid #eee;
}

#methodologySelector {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
}



/* ESTILOS TEMPORALES PARA VER DIFERENCIAS */
body[data-mode="agile"] {
  background-color: rgba(76, 175, 80, 0.05) !important;
}

body[data-mode="traditional"] {
  background-color: rgba(33, 150, 243, 0.05) !important;
}

body[data-mode="hybrid"] {
  background-color: rgba(156, 39, 176, 0.05) !important;
}

/* Borde de color según el modo */
.methodology-section {
  transition: all 0.3s ease;
}

body[data-mode="agile"] .methodology-section {
  border: 2px solid #4caf50 !important;
}

body[data-mode="traditional"] .methodology-section {
  border: 2px solid #2196f3 !important;
}

body[data-mode="hybrid"] .methodology-section {
  border: 2px solid #9c27b0 !important;
}


/* ESTILOS MÁS VISIBLES PARA VER DIFERENCIAS */
body[data-mode="agile"] {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(255, 255, 255, 1) 100%) !important;
}

body[data-mode="traditional"] {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(255, 255, 255, 1) 100%) !important;
}

body[data-mode="hybrid"] {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(255, 255, 255, 1) 100%) !important;
}

/* Bordes más visibles */
body[data-mode="agile"] .methodology-section {
  border: 3px solid #4caf50 !important;
  background-color: rgba(76, 175, 80, 0.1) !important;
}

body[data-mode="traditional"] .methodology-section {
  border: 3px solid #2196f3 !important;
  background-color: rgba(33, 150, 243, 0.1) !important;
}

body[data-mode="hybrid"] .methodology-section {
  border: 3px solid #9c27b0 !important;
  background-color: rgba(156, 39, 176, 0.1) !important;
}

/* Cambiar color del header también */
body[data-mode="agile"] header {
  background: linear-gradient(135deg, #4caf50, #2e7d32) !important;
}

body[data-mode="traditional"] header {
  background: linear-gradient(135deg, #2196f3, #1565c0) !important;
}

body[data-mode="hybrid"] header {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2) !important;
}

/* Cambiar color de los botones de vista */
body[data-mode="agile"] .view-toggle.active {
  background-color: #4caf50 !important;
}

body[data-mode="traditional"] .view-toggle.active {
  background-color: #2196f3 !important;
}

body[data-mode="hybrid"] .view-toggle.active {
  background-color: #9c27b0 !important;
}


/* === INDICADORES VISUALES POR MODO === */

/* MODO ÁGIL - Enfocado en Kanban */
body[data-mode="agile"] #boardView {
  border-left: 4px solid #4caf50;
}

body[data-mode="agile"] #calendarView {
  border-left: 4px solid #4caf50;
}

body[data-mode="agile"] #ganttView,
body[data-mode="agile"] #reportsView {
  opacity: 0.6;
  filter: grayscale(50%);
}

/* MODO TRADICIONAL - Enfocado en Gantt */
body[data-mode="traditional"] #ganttView {
  border-left: 4px solid #2196f3;
}

body[data-mode="traditional"] #listView {
  border-left: 4px solid #2196f3;
}

body[data-mode="traditional"] #boardView,
body[data-mode="traditional"] #calendarView {
  opacity: 0.6;
  filter: grayscale(50%);
}

/* MODO HÍBRIDO - Todo visible pero organizado */
body[data-mode="hybrid"] #dashboardView {
  border-left: 4px solid #9c27b0;
  font-weight: bold;
}

/* Botones de vista deshabilitados según el modo */
body[data-mode="agile"] #showGanttView,
body[data-mode="agile"] #showReportsView {
  opacity: 0.5;
  cursor: not-allowed;
}

body[data-mode="traditional"] #showBoardView,
body[data-mode="traditional"] #showCalendarView {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === ESTILOS DE ÉNFASIS POR MODO === */

/* MODO ÁGIL - Enfocado en ejecución */
.mode-agile .progress-container,
.mode-agile .time-metric:first-child,
.mode-agile .chart-container:first-child {
  border-left: 4px solid #4caf50 !important;
  background: linear-gradient(90deg, rgba(76, 175, 80, 0.1) 0%, rgba(255,255,255,0) 100%) !important;
}

.mode-agile .metric-value {
  color: #2e7d32 !important;
  font-size: 1.3em !important;
  font-weight: bold !important;
}

.mode-agile .progress-fill {
  background: linear-gradient(90deg, #4caf50, #2e7d32) !important;
}

/* MODO TRADICIONAL - Enfocado en planificación */
.mode-traditional .progress-container,
.mode-traditional .progress-metrics,
.mode-traditional .time-metric:nth-child(2) {
  border-left: 4px solid #2196f3 !important;
  background: linear-gradient(90deg, rgba(33, 150, 243, 0.1) 0%, rgba(255,255,255,0) 100%) !important;
}

.mode-traditional .metric-value {
  color: #1565c0 !important;
  font-size: 1.3em !important;
  font-weight: bold !important;
}

.mode-traditional .progress-fill {
  background: linear-gradient(90deg, #2196f3, #0d47a1) !important;
}

/* MODO HÍBRIDO - Balanceado */
.mode-hybrid .progress-container {
  border-left: 4px solid #9c27b0 !important;
}

.mode-hybrid .metric-value {
  color: #7b1fa2 !important;
}

/* Énfasis en números importantes */
.mode-agile #completedTasksMetric,
.mode-agile #totalLoggedDash {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.mode-traditional #overdueTasksMetric, 
.mode-traditional #remainingTimeDash {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Iconos indicadores */
.mode-agile .dashboard-card h3::before {
  content: "⚡ ";
}

.mode-traditional .dashboard-card h3::before {
  content: "📅 ";
}

.mode-hybrid .dashboard-card h3::before {
  content: "🔀 ";
}


/* Énfasis específicos por elemento */
.mode-agile-emphasis {
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.3) !important;
  border: 2px solid #4caf50 !important;
  border-radius: 10px !important;
}

.mode-traditional-emphasis {
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.3) !important;
  border: 2px solid #2196f3 !important;
  border-radius: 10px !important;
}

/* Animaciones de destaque */
@keyframes pulse-emphasis {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.mode-emphasis {
  animation: pulse-emphasis 2s ease-in-out infinite;
  transition: all 0.3s ease;
}


/* ==========================================================================
   ===  ESTILOS DE ÉNFASIS POR MODO - DASHBOARD
   ===  Aplica efectos visuales para modo Ágil y Tradicional
   ========================================================================== */

/* === CONTENEDOR DEL DASHBOARD - Transición suave === */
#dashboardView {
  transition: all 0.3s ease;
}

/* ==========================================================================
   === MODO ÁGIL - Énfasis en avance, productividad y cumplimiento
   === Elementos clave: Tareas completadas, Tiempo registrado, Gráfico
   ========================================================================== */

#dashboardView.mode-agile #completedTasksMetric,
#dashboardView.mode-agile #totalLoggedDash {
  border-left: 4px solid #4caf50;
  background-color: rgba(76, 175, 80, 0.08);
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.12);
  transform: scale(1.03);
  transition: all 0.3s ease;
}

/* Hover: efecto de profundidad */
#dashboardView.mode-agile #completedTasksMetric:hover,
#dashboardView.mode-agile #totalLoggedDash:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.18);
}

/* Énfasis en el gráfico de distribución */
#dashboardView.mode-agile #tasksDistributionChart {
  border: 2px solid #4caf50;
  border-radius: 8px;
  background-color: rgba(76, 175, 80, 0.05);
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.12);
  padding: 12px;
  transition: all 0.3s ease;
}

#dashboardView.mode-agile #tasksDistributionChart:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(76, 175, 80, 0.18);
}

/* Texto destacado en verde oscuro */
#dashboardView.mode-agile .metric-value,
#dashboardView.mode-agile .chart-title {
  color: #2e7d32 !important;
  font-weight: bold;
}

/* Icono visual en encabezados (opcional) */
#dashboardView.mode-agile .dashboard-card h3 {
  position: relative;
  padding-left: 28px;
}

#dashboardView.mode-agile .dashboard-card h3::before {
  content: "🟢";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
}


/* ==========================================================================
   === MODO TRADICIONAL - Énfasis en control, riesgo y planificación
   === Elementos clave: Tareas rezagadas, Tiempo restante, Métricas de progreso
   ========================================================================== */

#dashboardView.mode-traditional #overdueTasksMetric,
#dashboardView.mode-traditional #remainingTimeDash {
  border-left: 4px solid #2196f3;
  background-color: rgba(33, 150, 243, 0.08);
  box-shadow: 0 4px 16px rgba(33, 150, 243, 0.12);
  transform: scale(1.03);
  transition: all 0.3s ease;
}

/* Hover: efecto de profundidad */
#dashboardView.mode-traditional #overdueTasksMetric:hover,
#dashboardView.mode-traditional #remainingTimeDash:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(33, 150, 243, 0.18);
}

/* Énfasis en todas las métricas de progreso */
#dashboardView.mode-traditional .progress-metrics .progress-metric {
  border-left: 4px solid #2196f3;
  background-color: rgba(33, 150, 243, 0.08);
  box-shadow: 0 4px 16px rgba(33, 150, 243, 0.12);
  border-radius: 8px;
  padding: 12px;
  transition: all 0.3s ease;
}

#dashboardView.mode-traditional .progress-metrics .progress-metric:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 20px rgba(33, 150, 243, 0.18);
}

/* Texto destacado en azul oscuro */
#dashboardView.mode-traditional .metric-value,
#dashboardView.mode-traditional .chart-title {
  color: #1565c0 !important;
  font-weight: bold;
}

/* Icono visual en encabezados (opcional) */
#dashboardView.mode-traditional .dashboard-card h3 {
  position: relative;
  padding-left: 28px;
}

#dashboardView.mode-traditional .dashboard-card h3::before {
  content: "🔵";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
}


/* ==========================================================================
   === MODO HÍBRIDO - Sin énfasis fuerte, solo transición suave
   ========================================================================== */

#dashboardView.mode-hybrid .progress-metric,
#dashboardView.mode-hybrid #completedTasksMetric,
#dashboardView.mode-hybrid #overdueTasksMetric,
#dashboardView.mode-hybrid #tasksDistributionChart {
  transition: all 0.3s ease;
}

#dashboardView.mode-hybrid .progress-metric:hover,
#dashboardView.mode-hybrid #completedTasksMetric:hover,
#dashboardView.mode-hybrid #tasksDistributionChart:hover {
  border-left: 4px solid #9c27b0;
  background-color: rgba(156, 39, 176, 0.08);
  box-shadow: 0 4px 16px rgba(156, 39, 176, 0.12);
}

/* Icono para modo híbrido */
#dashboardView.mode-hybrid .dashboard-card h3 {
  position: relative;
  padding-left: 28px;
}

#dashboardView.mode-hybrid .dashboard-card h3::before {
  content: "🟣";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
}


/* ==========================================================================
   === ESTILOS GENERALES PARA MÉTRICAS (para que el énfasis funcione bien)
   === Asegúrate de que estos elementos tengan un diseño base claro
   ========================================================================== */

.progress-metric,
.metric-card {
  border-radius: 8px;
  padding: 10px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.metric-value {
  font-size: 1.4em;
  font-weight: bold;
  margin: 5px 0;
}

.metric-label {
  font-size: 0.9em;
  color: #555;
}

/* === ÉNFAIS POR MODO - SIN !IMPORTANT === */

/* === MODO ÁGIL === */
#dashboardView.mode-agile #completedTasksMetric,
#dashboardView.mode-agile #totalLoggedDash {
  border-left: 4px solid #4caf50;
  background-color: rgba(76, 175, 80, 0.08);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.15);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-agile #tasksDistributionChart {
  border: 2px solid #4caf50;
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.15);
  padding: 10px;
  border-radius: 8px;
}

/* === MODO TRADICIONAL === */
#dashboardView.mode-traditional #overdueTasksMetric,
#dashboardView.mode-traditional #remainingTimeDash {
  border-left: 4px solid #2196f3;
  background-color: rgba(33, 150, 243, 0.08);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.15);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-traditional .progress-metrics .progress-metric {
   border: 2px solid #4caf50;
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.15);
  padding: 10px;
  border-radius: 8px;
}



/* === MODO TRADICIONAL - ÉNFAIS EN GRÁFICO DE TAREAS === */
#dashboardView.mode-traditional #tasksDistributionChart {
  border: 2px solid #2196f3; /* Borde completo */
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.2); /* Sombra azul */
  padding: 10px;
  background-color: rgba(33, 150, 243, 0.05); /* Fondo claro azul */
  transition: all 0.3s ease;
}

#dashboardView.mode-traditional #tasksDistributionChart:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(33, 150, 243, 0.3);
}




/* ==========================================================================
   ===  FORZAR COLORES ORIGINALES EN CUADROS DE PROGRESO (TODOS LOS MODOS)
   ===  Asegura que los colores sean consistentes en Ágil, Tradicional e Híbrido
   ========================================================================== */

/* === RESETEO DE FONDOS POR MODO QUE SOBRESCRIBEN LOS COLORES === */
/* Elimina fondos, bordes y estilos que interfieren con los colores originales */
.mode-agile .progress-metrics,
.mode-traditional .progress-metrics,
.mode-hybrid .progress-metrics {
  background: none !important;
  box-shadow: none !important;
  border-left: none !important;
}

/* === COLORES FIJOS PARA CADA CUADRO DEL PROGRESO === */
/* Asegura que cada cuadro tenga su color independientemente del modo */

.progress-metric:nth-child(1) { /* Total */
  background-color: #3498db !important; /* Azul */
  border: 1px solid #2980b9 !important;
  color: white !important;
}

.progress-metric:nth-child(2) { /* Pendientes */
  background-color: #f1c40f !important; /* Amarillo */
  border: 1px solid #f39c12 !important;
  color: white !important;
}

.progress-metric:nth-child(3) { /* En Progreso */
  background-color: #008090 !important; /* Verde azulado */
  border: 1px solid #006070 !important;
  color: white !important;
}

.progress-metric:nth-child(4) { /* Completadas */
  background-color: #2ecc71 !important; /* Verde */
  border: 1px solid #27ae60 !important;
  color: white !important;
}

.progress-metric:nth-child(5) { /* Rezagadas */
  background-color: #e74c3c !important; /* Rojo */
  border: 1px solid #c0392b !important;
  color: white !important;
}

/* === ESTILO GENERAL PARA EL TEXTO Y LEGIBILIDAD === */
.progress-metric {
  font-weight: bold !important;
  text-align: center;
  padding: 12px 8px;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.progress-metric:hover {
  transform: scale(1.05);
}

/* === ASEGURA QUE EL TEXTO NO HEREDÉ COLORES NO DESEADOS === */
.progress-metric * {
  color: white !important;
  font-weight: bold !important;
}


/* === ÉNFAIS POR MODO - SIN !IMPORTANT === */

/* === MODO ÁGIL === */
#dashboardView.mode-agile #completedTasksMetric,
#dashboardView.mode-agile #totalLoggedDash {
  border-left: 4px solid #4caf50;
  background-color: rgba(76, 175, 80, 0.08);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.15);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-agile #tasksDistributionChart {
  border: 2px solid #4caf50;
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.15);
  padding: 10px;
  border-radius: 8px;
}

/* === MODO TRADICIONAL === */
#dashboardView.mode-traditional #overdueTasksMetric,
#dashboardView.mode-traditional #remainingTimeDash {
  border-left: 4px solid #2196f3;
  background-color: rgba(33, 150, 243, 0.08);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.15);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-traditional .progress-metrics .progress-metric {
  border-left: 4px solid #2196f3;
  background-color: rgba(33, 150, 243, 0.08);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.15);
  padding: 10px;
  border-radius: 8px;
}

/* === MODO TRADICIONAL - ÉNFAIS EN ELEMENTOS CLAVE === */
#dashboardView.mode-traditional #overdueTasksMetric,
#dashboardView.mode-traditional #remainingTimeDash {
  border-left: 4px solid #2196f3;
  background-color: rgba(33, 150, 243, 0.08);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.15);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-traditional .progress-metrics .progress-metric {
  border-left: 4px solid #2196f3;
  background-color: rgba(33, 150, 243, 0.08);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.15);
  padding: 10px;
  border-radius: 8px;
}






/* ==========================================================================
   ===  ESTILOS DE ÉNFASIS POR MODO - DASHBOARD
   ===  Aplica efectos visuales para Ágil, Tradicional e Híbrido
   ===  Respetando colores originales y mejorando UX
   ========================================================================== */

/* === TRANSICIÓN GENERAL PARA EFECTOS SUAVES === */
#dashboardView {
  transition: all 0.3s ease;
}

/* ==========================================================================
   === MODO ÁGIL - Énfasis en avance, productividad y cumplimiento
   === Elementos clave: Tareas completadas, Tiempo registrado, Gráfico
   ========================================================================== */

/* Enfasis en métricas clave */
#dashboardView.mode-agile #completedTasksMetric,
#dashboardView.mode-agile #totalLoggedDash {
  border-left: 4px solid #4caf50;
  background-color: rgba(76, 175, 80, 0.08);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.15);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-agile #completedTasksMetric:hover,
#dashboardView.mode-agile #totalLoggedDash:hover {
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(76, 175, 80, 0.2);
}

/* Enfasis en gráfico de distribución */
#dashboardView.mode-agile #tasksDistributionChart {
  border: 2px solid #4caf50;
  border-radius: 8px;
  background-color: rgba(76, 175, 80, 0.05);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.15);
  padding: 10px;
  transition: all 0.3s ease;
}

#dashboardView.mode-agile #tasksDistributionChart:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(76, 175, 80, 0.2);
}

/* Texto destacado en verde oscuro */
#dashboardView.mode-agile .metric-value,
#dashboardView.mode-agile .chart-title {
  color: #2e7d32;
  font-weight: bold;
}

/* Icono visual opcional en encabezados */
#dashboardView.mode-agile .dashboard-card h3 {
  position: relative;
  padding-left: 28px;
}

#dashboardView.mode-agile .dashboard-card h3::before {
  content: "🟢";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
}


/* ==========================================================================
   === MODO TRADICIONAL - Énfasis en control, riesgo y planificación
   === Elementos clave: Tareas rezagadas, Tiempo restante, Métricas de progreso
   ========================================================================== */

/* Enfasis en métricas clave */
#dashboardView.mode-traditional #overdueTasksMetric,
#dashboardView.mode-traditional #remainingTimeDash {
  border-left: 4px solid #2196f3;
  background-color: rgba(33, 150, 243, 0.08);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.15);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-traditional #overdueTasksMetric:hover,
#dashboardView.mode-traditional #remainingTimeDash:hover {
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(33, 150, 243, 0.2);
}

/* Enfasis en métricas de progreso */
#dashboardView.mode-traditional .progress-metrics .progress-metric {
  border-left: 4px solid #2196f3;
  background-color: rgba(33, 150, 243, 0.08);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.15);
  padding: 10px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

#dashboardView.mode-traditional .progress-metrics .progress-metric:hover {
  transform: scale(1.06);
  box-shadow: 0 0 20px rgba(33, 150, 243, 0.2);
}

/* Texto destacado en azul oscuro */
#dashboardView.mode-traditional .metric-value,
#dashboardView.mode-traditional .chart-title {
  color: #1565c0;
  font-weight: bold;
}

/* Icono visual opcional en encabezados */
#dashboardView.mode-traditional .dashboard-card h3 {
  position: relative;
  padding-left: 28px;
}

#dashboardView.mode-traditional .dashboard-card h3::before {
  content: "🔵";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
}


/* ==========================================================================
   === MODO HÍBRIDO - Sin énfasis fuerte, solo transición suave
   ========================================================================== */

#dashboardView.mode-hybrid .progress-metric,
#dashboardView.mode-hybrid #completedTasksMetric,
#dashboardView.mode-hybrid #overdueTasksMetric,
#dashboardView.mode-hybrid #tasksDistributionChart {
  transition: all 0.3s ease;
}

#dashboardView.mode-hybrid .progress-metric:hover,
#dashboardView.mode-hybrid #completedTasksMetric:hover,
#dashboardView.mode-hybrid #tasksDistributionChart:hover {
  border-left: 4px solid #9c27b0;
  background-color: rgba(156, 39, 176, 0.08);
  box-shadow: 0 0 15px rgba(156, 39, 176, 0.15);
}

/* Icono para modo híbrido */
#dashboardView.mode-hybrid .dashboard-card h3 {
  position: relative;
  padding-left: 28px;
}

#dashboardView.mode-hybrid .dashboard-card h3::before {
  content: "🟣";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
}


/* ==========================================================================
   === COLORES ORIGINALES DE LOS CUADROS DE PROGRESO (EN TODOS LOS MODOS)
   === Asegura que los colores no se sobrescriban por el modo
   ========================================================================== */

/* Resetear fondos que puedan interferir */
.mode-agile .progress-metrics,
.mode-traditional .progress-metrics,
.mode-hybrid .progress-metrics {
  background: none;
  box-shadow: none;
  border-left: none;
}

/* Colores fijos para cada cuadro (no cambian por modo) */
.progress-metric:nth-child(1) { /* Total */
  background-color: #3498db;
  border: 1px solid #2980b9;
  color: white;
}

.progress-metric:nth-child(2) { /* Pendientes */
  background-color: #f1c40f;
  border: 1px solid #f39c12;
  color: white;
}

.progress-metric:nth-child(3) { /* En Progreso */
  background-color: #008090;
  border: 1px solid #006070;
  color: white;
}

.progress-metric:nth-child(4) { /* Completadas */
  background-color: #2ecc71;
  border: 1px solid #27ae60;
  color: white;
}

.progress-metric:nth-child(5) { /* Rezagadas */
  background-color: #e74c3c;
  border: 1px solid #c0392b;
  color: white;
}

/* Estilo general para los cuadros */
.progress-metric {
  text-align: center;
  padding: 12px 8px;
  border-radius: 8px;
  font-weight: bold;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.progress-metric .metric-value {
  font-size: 1.3em;
  margin: 0;
}

.progress-metric .metric-label {
  font-size: 0.9em;
  margin: 0;
  opacity: 0.9;
}


/* ==========================================================================
   === ESTILOS AUXILIARES (para mejor legibilidad y consistencia)
   ========================================================================== */

/* Asegurar que el texto no herede colores no deseados */
.progress-metric * {
  color: white !important;
}

/* Evitar que otros estilos sobrescriban */
.dashboard-card .progress-metrics {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 15px;
}

/* === MODO TRADICIONAL - ÉNFAIS EN ELEMENTOS CLAVE === */
#dashboardView.mode-traditional #overdueTasksMetric,
#dashboardView.mode-traditional #remainingTimeDash {
  border-left: 4px solid #2196f3;
  background-color: rgba(33, 150, 243, 0.08);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.15);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-traditional .progress-metrics .progress-metric {
  border-left: 4px solid #2196f3;
  background-color: rgba(33, 150, 243, 0.08);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.15);
  padding: 10px;
  border-radius: 8px;
}


/* === MODO ÁGIL - ÉNFAIS FORZADO EN ELEMENTOS CLAVE === */

/* 1. Enfasis en tareas completadas */
#dashboardView.mode-agile #completedTasksMetric {
  border-left: 4px solid #4caf50;
  background-color: rgba(76, 175, 80, 0.08);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.2);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-agile #completedTasksMetric:hover {
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
}

/* 2. Enfasis en tiempo registrado */
#dashboardView.mode-agile #totalLoggedDash {
  border-left: 4px solid #4caf50;
  background-color: rgba(76, 175, 80, 0.08);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.2);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-agile #totalLoggedDash:hover {
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
}

/* 3. Enfasis en gráfico de distribución */
#dashboardView.mode-agile #tasksDistributionChart {
  border: 2px solid #4caf50;
  border-radius: 8px;
  background-color: rgba(76, 175, 80, 0.05);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.2);
  padding: 10px;
  transition: all 0.3s ease;
}

#dashboardView.mode-agile #tasksDistributionChart:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
}

/* 4. Texto destacado en verde oscuro */
#dashboardView.mode-agile .metric-value,
#dashboardView.mode-agile .chart-title {
  color: #2e7d32 !important;
  font-weight: bold;
  font-size: 1.2em;
}

/* 5. Icono visual opcional en encabezados */
#dashboardView.mode-agile .dashboard-card h3 {
  position: relative;
  padding-left: 28px;
}

#dashboardView.mode-agile .dashboard-card h3::before {
  content: "🟢";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
}




/* === MODO ÁGIL - ÉNFAIS FORZADO EN ELEMENTOS CLAVE === */

/* 1. Enfasis en tareas completadas */
#dashboardView.mode-agile #completedTasksMetric {
  border-left: 4px solid #4caf50;
  background-color: rgba(76, 175, 80, 0.08);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.2);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-agile #completedTasksMetric:hover {
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
}

/* 2. Enfasis en tiempo registrado */
#dashboardView.mode-agile #totalLoggedDash {
  border-left: 4px solid #4caf50;
  background-color: rgba(76, 175, 80, 0.08);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.2);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-agile #totalLoggedDash:hover {
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
}

/* 3. Enfasis en gráfico de distribución */
#dashboardView.mode-agile #tasksDistributionChart {
  border: 2px solid #4caf50;
  border-radius: 8px;
  background-color: rgba(76, 175, 80, 0.05);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.2);
  padding: 10px;
  transition: all 0.3s ease;
}

#dashboardView.mode-agile #tasksDistributionChart:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
}

/* 4. Texto destacado en verde oscuro */
#dashboardView.mode-agile .metric-value,
#dashboardView.mode-agile .chart-title {
  color: #2e7d32 !important;
  font-weight: bold;
  font-size: 1.2em;
}

/* 5. Icono visual opcional en encabezados */
#dashboardView.mode-agile .dashboard-card h3 {
  position: relative;
  padding-left: 28px;
}

#dashboardView.mode-agile .dashboard-card h3::before {
  content: "🟢";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
}







/* ==========================================================================
   ===  ESTILOS DE ÉNFASIS POR MODO - DASHBOARD (EQUILIBRADO)
   ===  Cada modo resalta sus métricas clave con estilo claro
   ========================================================================== */

/* === TRANSICIÓN GENERAL === */
#dashboardView {
  transition: all 0.3s ease;
}

/* ==========================================================================
   === MODO ÁGIL - Enfocado en AVANCE y PRODUCTIVIDAD
   === Destaca: Tareas completadas, Tiempo registrado, Gráfico
   ========================================================================== */
#dashboardView.mode-agile #completedTasksMetric,
#dashboardView.mode-agile #totalLoggedDash {
  border-left: 4px solid #4caf50;
  background-color: rgba(76, 175, 80, 0.08);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.15);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-agile #tasksDistributionChart {
  border: 2px solid #4caf50;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.15);
  padding: 10px;
}

#dashboardView.mode-agile .metric-value {
  color: #2e7d32 !important;
  font-weight: bold;
}

/* ==========================================================================
   === MODO TRADICIONAL - Enfocado en CONTROL y RIESGO
   === Destaca: Tareas rezagadas, Tiempo restante, Métricas de progreso
   ========================================================================== */
#dashboardView.mode-traditional #overdueTasksMetric,
#dashboardView.mode-traditional #remainingTimeDash {
  border-left: 4px solid #2196f3;
  background-color: rgba(33, 150, 243, 0.08);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.15);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-traditional .progress-metrics .progress-metric {
  border-left: 4px solid #2196f3;
  background-color: rgba(33, 150, 243, 0.08);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.15);
  padding: 10px;
  border-radius: 8px;
}

#dashboardView.mode-traditional .metric-value {
  color: #1565c0 !important;
  font-weight: bold;
}

/* ==========================================================================
   === MODO HÍBRIDO - Enfocado en VISIÓN COMPLETA
   === Destaca: Todos los elementos, sin enfoque único
   ========================================================================== */
#dashboardView.mode-hybrid .progress-metric,
#dashboardView.mode-hybrid #completedTasksMetric,
#dashboardView.mode-hybrid #overdueTasksMetric,
#dashboardView.mode-hybrid #totalLoggedDash,
#dashboardView.mode-hybrid #tasksDistributionChart {
  border-left: 4px solid #9c27b0;
  background-color: rgba(156, 39, 176, 0.08);
  box-shadow: 0 0 15px rgba(156, 39, 176, 0.15);
  transition: all 0.3s ease;
}

#dashboardView.mode-hybrid .metric-value {
  color: #7b1fa2 !important;
  font-weight: bold;
}

/* ==========================================================================
   === COLORES FIJOS DE CUADROS DE PROGRESO (EN TODOS LOS MODOS)
   === Evita que el modo sobrescriba los colores originales
   ========================================================================== */
.progress-metric:nth-child(1) { /* Total */ background-color: #3498db; border: 1px solid #2980b9; color: white; }
.progress-metric:nth-child(2) { /* Pendientes */ background-color: #f1c40f; border: 1px solid #f39c12; color: white; }
.progress-metric:nth-child(3) { /* En Progreso */ background-color: #008090; border: 1px solid #006070; color: white; }
.progress-metric:nth-child(4) { /* Completadas */ background-color: #2ecc71; border: 1px solid #27ae60; color: white; }
.progress-metric:nth-child(5) { /* Rezagadas */ background-color: #e74c3c; border: 1px solid #c0392b; color: white; }

.progress-metric * {
  color: white !important;
  font-weight: bold;
}



/* === MODO HÍBRIDO - BORDE COMPLETO ALREDEDOR DEL GRÁFICO === */
#dashboardView.mode-hybrid #tasksDistributionChart {
  border: 2px solid #9c27b0; /* Borde completo morado */
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(156, 39, 176, 0.2);
  padding: 10px;
  transition: all 0.3s ease;
}

/* === MODO ÁGIL - BORDE COMPLETO ALREDEDOR DEL GRÁFICO === */
#dashboardView.mode-agile #tasksDistributionChart {
  border: 2px solid #4caf50; /* Borde completo verde */
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.2);
  padding: 10px;
  transition: all 0.3s ease;
}

/* === MODO TRADICIONAL - BORDE COMPLETO ALREDEDOR DEL GRÁFICO === */
#dashboardView.mode-traditional #tasksDistributionChart {
  border: 2px solid #2196f3; /* Borde completo azul */
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.2);
  padding: 10px;
  transition: all 0.3s ease;
}




/* ==========================================================================
   ===  ESTILOS DE ÉNFASIS POR MODO - DASHBOARD (EQUILIBRADO Y COMPLETO)
   ===  Cada modo tiene borde completo, sombra y escala
   ========================================================================== */

/* === TRANSICIÓN GENERAL === */
#dashboardView {
  transition: all 0.3s ease;
}

/* === RESETEO DE ESTILOS PREVIOS QUE INTERFIEREN === */
.mode-agile .progress-container,
.mode-traditional .progress-container,
.mode-hybrid .progress-container {
  background: none !important;
  border-left: none !important;
}

/* ==========================================================================
   === MODO ÁGIL - Enfocado en AVANCE y PRODUCTIVIDAD
   ========================================================================== */
#dashboardView.mode-agile #completedTasksMetric,
#dashboardView.mode-agile #totalLoggedDash {
  border: 2px solid #4caf50;
  border-left: 4px solid #4caf50;
  border-radius: 8px;
  background-color: rgba(76, 175, 80, 0.08);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.15);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-agile #tasksDistributionChart {
  border: 2px solid #4caf50;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.15);
  padding: 10px;
  background-color: rgba(76, 175, 80, 0.05);
}

/* ==========================================================================
   === MODO TRADICIONAL - Enfocado en CONTROL y RIESGO
   ========================================================================== */
#dashboardView.mode-traditional #overdueTasksMetric,
#dashboardView.mode-traditional #remainingTimeDash {
  border: 2px solid #2196f3;
  border-left: 4px solid #2196f3;
  border-radius: 8px;
  background-color: rgba(33, 150, 243, 0.08);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.15);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-traditional #tasksDistributionChart {
  border: 2px solid #2196f3;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.15);
  padding: 10px;
  background-color: rgba(33, 150, 243, 0.05);
}

/* ==========================================================================
   === MODO HÍBRIDO - Enfocado en VISIÓN COMPLETA
   === ¡AHORA SÍ TIENE EL MISMO ÉNFASIS QUE LOS OTROS!
   ========================================================================== */
#dashboardView.mode-hybrid #completedTasksMetric,
#dashboardView.mode-hybrid #overdueTasksMetric,
#dashboardView.mode-hybrid #totalLoggedDash,
#dashboardView.mode-hybrid #remainingTimeDash {
  border: 2px solid #9c27b0;
  border-left: 4px solid #9c27b0;
  border-radius: 8px;
  background-color: rgba(156, 39, 176, 0.08);
  box-shadow: 0 0 15px rgba(156, 39, 176, 0.15);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-hybrid #tasksDistributionChart {
  border: 2px solid #9c27b0;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(156, 39, 176, 0.15);
  padding: 10px;
  background-color: rgba(156, 39, 176, 0.05);
}

/* === HOVER: Efecto interactivo en todos los modos === */
#dashboardView .progress-metric:hover,
#dashboardView .time-metric:hover,
#dashboardView #tasksDistributionChart:hover {
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   === COLORES FIJOS DE CUADROS DE PROGRESO (EN TODOS LOS MODOS)
   === Evita que el modo sobrescriba los colores originales
   ========================================================================== */
.progress-metric:nth-child(1) { /* Total */ background-color: #3498db; border: 1px solid #2980b9; color: white; }
.progress-metric:nth-child(2) { /* Pendientes */ background-color: #f1c40f; border: 1px solid #f39c12; color: white; }
.progress-metric:nth-child(3) { /* En Progreso */ background-color: #008090; border: 1px solid #006070; color: white; }
.progress-metric:nth-child(4) { /* Completadas */ background-color: #2ecc71; border: 1px solid #27ae60; color: white; }
.progress-metric:nth-child(5) { /* Rezagadas */ background-color: #e74c3c; border: 1px solid #c0392b; color: white; }

.progress-metric * {
  color: white !important;
  font-weight: bold;
}



/* === INDICADOR DE MODO === */
.mode-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.95em;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.mode-indicator-agile {
  background-color: #e8f5e8;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.mode-indicator-traditional {
  background-color: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
}

.mode-indicator-hybrid {
  background-color: #f3e5f5;
  color: #7b1fa2;
  border: 1px solid #ce93d8;
}

.mode-indicator i {
  font-size: 1.1em;
}




/* === MENSAJE DE AYUDA POR MODO === */
.mode-help-text {
  font-size: 0.85em;
  color: #555;
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 6px;
  margin: 10px 0;
  border-left: 3px solid #9c27b0; /* Morado por defecto */
  transition: all 0.3s ease;
}

/* === TÍTULO DINÁMICO DEL DASHBOARD === */
#dashboardTitle {
  margin: 10px 0 20px 0;
  font-size: 1.4em;
  color: #2c3e50;
  font-weight: normal;
}

#dashboardTitle strong {
  font-weight: bold;
}

#dashboardTitle small {
  font-size: 0.9em;
  color: #7f8c8d;
  font-weight: normal;
}


/* === TOOLTIP: Mensaje al pasar el mouse === */
.tooltip {
  position: absolute;
  background: #2c3e50;
  color: white;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.85em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 10000;
  max-width: 250px;
  text-align: center;
  pointer-events: none; /* Permite que el mouse pase a través */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tooltip::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #2c3e50;
}




/* === ÉNFASIS VISUAL COHERENTE PARA LOS 3 MODOS === */

/* === TRANSICIÓN GENERAL === */
#dashboardView {
  transition: all 0.3s ease;
}

/* === MODO ÁGIL - Énfasis en avance === */
#dashboardView.mode-agile #completedTasksMetric,
#dashboardView.mode-agile #totalLoggedDash {
  border: 2px solid #4caf50;
  border-left: 4px solid #4caf50;
  border-radius: 8px;
  background-color: rgba(76, 175, 80, 0.08);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.15);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-agile #tasksDistributionChart {
  border: 2px solid #4caf50;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.15);
  padding: 10px;
  background-color: rgba(76, 175, 80, 0.05);
}

/* === MODO TRADICIONAL - Énfasis en control === */
#dashboardView.mode-traditional #overdueTasksMetric,
#dashboardView.mode-traditional #remainingTimeDash {
  border: 2px solid #2196f3;
  border-left: 4px solid #2196f3;
  border-radius: 8px;
  background-color: rgba(33, 150, 243, 0.08);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.15);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

#dashboardView.mode-traditional .progress-metrics .progress-metric {
  border: 2px solid #2196f3;
  border-left: 4px solid #2196f3;
  border-radius: 8px;
  background-color: rgba(33, 150, 243, 0.08);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.15);
  padding: 10px;
}

/* === MODO HÍBRIDO - Énfasis en visión completa === */
#dashboardView.mode-hybrid #completedTasksMetric,
#dashboardView.mode-hybrid #overdueTasksMetric,
#dashboardView.mode-hybrid #totalLoggedDash,
#dashboardView.mode-hybrid #remainingTimeDash,
#dashboardView.mode-hybrid #tasksDistributionChart {
  border: 2px solid #9c27b0;
  border-left: 4px solid #9c27b0;
  border-radius: 8px;
  background-color: rgba(156, 39, 176, 0.08);
  box-shadow: 0 0 15px rgba(156, 39, 176, 0.15);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

/* === HOVER: Efecto interactivo en todos los modos === */
#dashboardView .progress-metric:hover,
#dashboardView .time-metric:hover,
#dashboardView #tasksDistributionChart:hover {
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}






/* === RESET BÁSICO PARA MÓVIL === */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f9f2ff; /* o el color de fondo que uses */
  line-height: 1.6;
  overflow-x: hidden; /* Evita scroll horizontal */
}

/* === SIDEBAR RESPONSIVO === */
.sidebar {
  width: 100%;
  max-width: 280px;
  background: #2c3e50;
  color: white;
  padding: 15px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 1000;
  transition: transform 0.3s ease;
}

.sidebar.collapsed {
  transform: translateX(-100%);
}

/* Botón para abrir/cerrar sidebar en móvil */
.mobile-menu-btn {
  display: none; /* Lo mostramos solo en móvil */
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1001;
  background: #3498db;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

/* === CONTENIDO PRINCIPAL === */
.main-content {
  margin-left: 0;
  padding: 20px;
  padding-top: 70px; /* Para que no se solape con el header */
  min-height: 100vh;
  background: #fff;
  transition: margin-left 0.3s ease;
}

/* Header fijo en móvil */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  background: #9b2cff; /* o el color que tengas */
  color: white;
  padding: 10px 20px;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .btn-group {
  display: flex;
  gap: 8px;
}

/* === FILTROS RESPONSIVOS === */
.filter-bar {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.filter-bar select,
.filter-bar button {
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.filter-bar button {
  background: #3498db;
  color: white;
  border: none;
  cursor: pointer;
}

/* === KANBAN / COLUMNAS RESPONSIVAS === */
.kanban-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
}

.kanban-column {
  flex: 1 1 280px; /* Mínimo 280px, pero se ajusta si hay menos espacio */
  min-width: 250px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.kanban-column h3 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
}

.ticket-card {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 14px;
}

.ticket-card .priority {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
  margin-right: 5px;
}

.ticket-card .status {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

/* === ESTADÍSTICAS RESPONSIVAS === */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.stat-box {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.stat-box h4 {
  font-size: 14px;
  margin-bottom: 5px;
  color: #555;
}

.stat-box .value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

/* === BOTÓN SINCRONIZAR FIJO EN MÓVIL === */
.sync-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 1002;
  cursor: pointer;
}

/* === MEDIA QUERIES PARA MÓVILES === */
@media (max-width: 768px) {
  .header {
    padding: 10px 15px;
  }

  .main-content {
    padding: 20px 15px;
    padding-top: 60px;
    margin-left: 0;
  }

  .sidebar {
    width: 100%;
    max-width: 100%;
    transform: translateX(0);
    height: auto;
    position: static;
    margin-bottom: 20px;
  }

  .mobile-menu-btn {
    display: block;
  }

  .kanban-columns {
    flex-direction: column;
  }

  .kanban-column {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-bar select,
  .filter-bar button {
    width: 100%;
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

  .stat-box {
    padding: 10px;
  }

  .stat-box .value {
    font-size: 20px;
  }

  .sync-button {
    bottom: 15px;
    right: 15px;
    padding: 8px 16px;
    font-size: 12px;
  }
}

/* === ADAPTACIÓN PARA PANTALLAS PEQUEÑAS (< 480px) === */
@media (max-width: 480px) {
  .header {
    padding: 8px 10px;
  }

  .main-content {
    padding: 15px 10px;
    padding-top: 50px;
  }

  .filter-bar {
    padding: 10px;
  }

  .filter-bar select,
  .filter-bar button {
    font-size: 12px;
    padding: 6px 10px;
  }

  .kanban-column h3 {
    font-size: 14px;
  }

  .ticket-card {
    padding: 8px;
    font-size: 12px;
  }

  .ticket-card .priority,
  .ticket-card .status {
    padding: 2px 4px;
    font-size: 10px;
  }

  .stat-box h4 {
    font-size: 12px;
  }

  .stat-box .value {
    font-size: 18px;
  }

  .sync-button {
    bottom: 10px;
    right: 10px;
    padding: 6px 12px;
    font-size: 10px;
  }
}


.gantt-container {
  position: relative;
}

.gantt-bar.critical {
  border: 2px solid #e74c3c;
  box-shadow: 0 0 4px rgba(231, 76, 60, 0.5);
}


/* CONTENEDOR PRINCIPAL - CLAVE PARA LA SOLUCIÓN */
.gantt-container {
    position: relative !important;
    overflow: visible !important;
}

/* CONTENEDOR DE LÍNEAS - POSICIÓN RELATIVA AL GANTT */
.dependency-lines-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 10 !important;
    transform: none !important; /* Previene transformaciones que afecten posición */
}

/* LÍNEAS INDIVIDUALES */
.dependency-line {
    position: absolute !important;
    background-color: #3498db !important;
    height: 2px !important;
    z-index: 11 !important;
    transform-origin: 0 0 !important;
}

/* FLECHAS */
.dependency-line .arrow {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 4px solid transparent !important;
    border-bottom: 4px solid transparent !important;
    border-left: 6px solid #3498db !important;
}

/* CONTENEDOR DE LÍNEAS */
.dependency-lines-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* LÍNEAS CON TRANSICIÓN SUAVE */
.dependency-line {
    position: absolute;
    background-color: #3498db;
    height: 2px;
    z-index: 11;
    transform-origin: 0 0;
    transition: all 0.3s ease;
}

.dependency-line:hover {
    background-color: #e74c3c;
    height: 3px;
}


.custom-select {
  position: relative;
  width: 100%;
  font-family: Arial, sans-serif;
}

.select-selected {
  background-color: #f8f9fa;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  min-height: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.select-selected::after {
  content: "▼";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  pointer-events: none;
}

.select-items {
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 99;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
}

.select-items div {
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
}

.select-items div:hover {
  background-color: #e9ecef;
}

.select-item-tag {
  background-color: #3498db;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}




/* === FLECHAS PROFESIONALES PARA DIAGRAMA DE GANTT === */
.dependency-lines-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.dependency-line {
  position: absolute !important;
  width: 100%;
  height: 2px;
  background-color: #3498db;
  z-index: 11;
  transition: all 0.3s ease;
  transform-origin: 0 0;
}

.dependency-line .arrow {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 4px solid transparent !important;
  border-bottom: 4px solid transparent !important;
  border-left: 6px solid #3498db !important;
  top: -4px !important;
  right: -6px !important;
}

.dependency-line:hover {
  background-color: #e74c3c !important;
  height: 3px !important;
}

.dependency-line:hover .arrow {
  border-left-color: #e74c3c !important;
}



/* === FLECHAS PROFESIONALES PARA DIAGRAMA DE GANTT === */
.dependency-lines-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

.dependency-line {
  position: absolute !important;
  height: 2px !important;
  background-color: #3498db !important;
  z-index: 11 !important;
  transition: all 0.3s ease !important;
  transform-origin: 0 0 !important;
}

.dependency-line .arrow {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 4px solid transparent !important;
  border-bottom: 4px solid transparent !important;
  border-left: 6px solid #3498db !important;
  top: -4px !important;
  right: -6px !important;
}

.dependency-line:hover {
  background-color: #e74c3c !important;
  height: 3px !important;
}

.dependency-line:hover .arrow {
  border-left-color: #e74c3c !important;
}



.dependency-svg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.dependency-path {
  fill: none;
  stroke: #3498db;
  stroke-width: 2;
  transition: stroke 0.3s ease;
}

.dependency-path:hover {
  stroke: #e74c3c;
}




/* === LÍNEAS DE DEPENDENCIA ESTILIZADAS (SVG) === */
.gantt-dependency-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.gantt-dependency-path {
  fill: none;
  stroke: #3498db;
  stroke-width: 2;
  stroke-dasharray: 5, 5; /* Línea punteada */
  transition: stroke 0.3s ease;
}

.gantt-dependency-path:hover {
  stroke: #e74c3c;
  stroke-dasharray: 3, 3;
}



.gantt-dependency-svg path[stroke*="enprogreso"] {
  animation: pulseFlow 1.8s ease-in-out infinite alternate;
}

@keyframes pulseFlow {
  0% { opacity: 0.6; filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.3)); }
  100% { opacity: 1; filter: drop-shadow(0px 0px 4px rgba(26, 188, 156, 0.6)); }
}



.gantt-bar.retrasada {
  box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
  animation: glowRed 1.2s ease-in-out infinite alternate;
}

@keyframes glowRed {
  0% { box-shadow: 0 0 4px rgba(231, 76, 60, 0.2); }
  100% { box-shadow: 0 0 10px rgba(231, 76, 60, 0.6); }
}



.gantt-dependency-svg path:hover {
  stroke-width: 4px;
  filter: drop-shadow(0px 0px 6px rgba(52, 152, 219, 0.6));
  transition: all 0.2s ease;
}



.gantt-row {
  opacity: 0;
  transform: translateY(10px);
  animation: appearRow 0.4s ease forwards;
}

.gantt-row:nth-child(n) {
  animation-delay: calc(var(--i, 1) * 0.04s);
}

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



.gantt-dependency-tooltip strong[style] {
  background: rgba(255,255,255,0.8);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}




/* Bolita de estado dentro del tooltip */
.state-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

/* Colores base */
.state-dot.completada  { background: #27ae60; }
.state-dot.enprogreso  { background: #16a085; }
.state-dot.pendiente   { background: #f1c40f; }
.state-dot.retrasada   { background: #e74c3c; }

/* Pulso animado para los estados activos/críticos */
.state-dot.enprogreso {
  animation: pulseEnProgreso 1.2s ease-in-out infinite alternate;
}

.state-dot.retrasada {
  animation: pulseRetrasada 1.5s ease-in-out infinite alternate;
}

@keyframes pulseEnProgreso {
  0% { transform: scale(1); box-shadow: 0 0 4px rgba(22,160,133,0.3); }
  100% { transform: scale(1.3); box-shadow: 0 0 10px rgba(22,160,133,0.6); }
}

@keyframes pulseRetrasada {
  0% { transform: scale(1); box-shadow: 0 0 4px rgba(231,76,60,0.3); }
  100% { transform: scale(1.4); box-shadow: 0 0 12px rgba(231,76,60,0.6); }
}



.state-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

.state-dot.completada  { background: #27ae60; }
.state-dot.enprogreso  { background: #16a085; }
.state-dot.pendiente   { background: #f1c40f; }
.state-dot.retrasada   { background: #e74c3c; }

.state-dot.enprogreso {
  animation: pulseEnProgreso 1.2s ease-in-out infinite alternate;
}

.state-dot.retrasada {
  animation: pulseRetrasada 1.5s ease-in-out infinite alternate;
}

@keyframes pulseEnProgreso {
  0% { transform: scale(1); box-shadow: 0 0 4px rgba(22,160,133,0.3); }
  100% { transform: scale(1.3); box-shadow: 0 0 10px rgba(22,160,133,0.6); }
}

@keyframes pulseRetrasada {
  0% { transform: scale(1); box-shadow: 0 0 4px rgba(231,76,60,0.3); }
  100% { transform: scale(1.4); box-shadow: 0 0 12px rgba(231,76,60,0.6); }
}



.state-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

.state-dot.completada  { background: #27ae60; }
.state-dot.enprogreso  { background: #16a085; }
.state-dot.pendiente   { background: #f1c40f; }
.state-dot.retrasada   { background: #e74c3c; }

.state-dot.enprogreso {
  animation: pulseEnProgreso 1.2s ease-in-out infinite alternate;
}

.state-dot.retrasada {
  animation: pulseRetrasada 1.5s ease-in-out infinite alternate;
}

@keyframes pulseEnProgreso {
  0% { transform: scale(1); box-shadow: 0 0 4px rgba(22,160,133,0.3); }
  100% { transform: scale(1.3); box-shadow: 0 0 10px rgba(22,160,133,0.6); }
}

@keyframes pulseRetrasada {
  0% { transform: scale(1); box-shadow: 0 0 4px rgba(231,76,60,0.3); }
  100% { transform: scale(1.4); box-shadow: 0 0 12px rgba(231,76,60,0.6); }
}



/* ==== Tarjetas Kanban Restauradas ==== */
.task-card {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  padding: 8px 10px;
  margin-bottom: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: grab;
}

.task-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.task-flag {
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 600;
  min-width: 80px;
  text-align: center;
}

.task-title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  color: #2c3e50;
  font-size: 13px;
  margin: 0 8px;
}

.task-body {
  font-size: 12px;
  color: #555;
}

.task-body p {
  margin: 2px 0;
}

.task-body .desc {
  font-style: italic;
  color: #777;
}


.task-title {
  flex: 1;
  text-align: center;
  font-weight: 700;
  color: #2c3e50 !important; /* asegúrate de que se vea */
  font-size: 13px;
  margin: 0 8px;
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}

.task-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 8px;
  margin-bottom: 10px;
  cursor: grab;
  transition: transform 0.1s;
}

.task-card:hover {
  transform: scale(1.02);
}

.task-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.flag {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
}

.task-title {
  flex: 1;
  font-weight: 600;
  color: #2c3e50;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.task-footer {
  margin-top: 4px;
  text-align: right;
  font-size: 11px;
  color: #555;
}


/* Estilos para tooltips de dependencias Gantt */
.gantt-dependency-tooltip {
  position: fixed;
  background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  pointer-events: none;
  transition: opacity 0.2s ease;
  opacity: 0;
  z-index: 10000;
  max-width: 300px;
  font-family: Arial, sans-serif;
  line-height: 1.4;
}

.gantt-dependency-tooltip strong {
  color: #ecf0f1;
}

.gantt-dependency-tooltip div {
  margin-bottom: 4px;
}

/* Estilos para las líneas de dependencia */
.gantt-dependency-svg path {
    transition: stroke-width 0.2s ease;
}

.gantt-dependency-svg path:hover {
    stroke-width: 4px !important;
}

/* Estilos para el tooltip */
.gantt-dependency-tooltip {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.gantt-dependency-tooltip::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 10px;
    width: 10px;
    height: 10px;
    background: #1a1a1a;
    transform: rotate(45deg);
    border-left: 1px solid #444;
    border-top: 1px solid #444;
}


/* Sistema de dependencias premium */
.gantt-dependency-svg path {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gantt-dependency-svg path:hover {
    stroke-width: 5.5 !important;
    filter: url(#line-glow) drop-shadow(0 8px 25px rgba(102, 126, 234, 0.5)) !important;
}

/* Tooltip con efectos premium */
.gantt-dependency-tooltip {
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.125) !important;
}

/* Animación de pulso sutil en hover */
@keyframes linePulse {
    0% { stroke-width: 4; }
    50% { stroke-width: 5; }
    100% { stroke-width: 4; }
}

.gantt-dependency-svg path:hover {
    animation: linePulse 2s ease-in-out infinite;
}


/* ESTILOS PARA EL SELECTOR DE DEPENDENCIAS */
.dependencies-selector {
  position: relative;
  width: 100%;
}

.select-header {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color 0.2s;
}

.select-header:hover {
  border-color: #4a90e2;
}

.select-header.active {
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.select-header .arrow {
  transition: transform 0.2s;
}

.select-header.active .arrow {
  transform: rotate(180deg);
}

.select-items {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  /* Los estilos de visibilidad se manejan con JS */
}

.select-items div[data-id] {
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.select-items div[data-id]:hover {
  background: #f5f5f5;
}

.select-items div[data-id].selected {
  background: #e8f4ff;
  color: #4a90e2;
  font-weight: 500;
}

.select-items div[data-id].selected:hover {
  background: #d9ebff;
}

.selected-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  min-height: 32px;
}

.dependency-badge {
  background: #e8f4ff;
  color: #4a90e2;
  padding: 4px 8px;
  border-radius: 16px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.remove-badge {
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}

.remove-badge:hover {
  color: #ff4444;
}



/* Estilos para el menú de tres puntos en tarjetas */
.task-controls {
    display: flex;
    gap: 5px;
    align-items: center;
}

.task-menu {
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    color: #666;
    padding: 2px 8px;
    border-radius: 3px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
}

.task-menu:hover {
    background: #f0f0f0;
    color: #333;
}

/* Menú contextual */
.task-context-menu {
    position: fixed;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    min-width: 150px;
    padding: 8px 0;
    font-family: Arial, sans-serif;
}

.task-context-menu-item {
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    transition: background 0.2s;
}

.task-context-menu-item:hover {
    background: #f5f5f5;
}

.task-context-menu-item.delete {
    color: #e74c3c;
}


/* Estilos para tarjetas de tareas - VERSIÓN MEJORADA */
.task-card {
    background: white;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-left: 4px solid #3498db;
    position: relative;
    transition: all 0.3s ease;
}

.task-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    position: relative;
}

.task-title {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    flex: 1;
    padding-right: 40px; /* Espacio para controles */
}

/* CONTROLES: FLECHAS (SOLO EN HOVER) Y MENÚ */
.task-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    position: absolute;
    right: 0;
    top: 0;
}

/* FLECHAS OCULTAS POR DEFECTO, VISIBLES SOLO EN HOVER */
.move-buttons {
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.task-card:hover .move-buttons {
    opacity: 1;
    visibility: visible;
}

.move-btn {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 10px;
    cursor: pointer;
    color: #555;
    min-width: 20px;
    text-align: center;
    transition: all 0.2s ease;
}

.move-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    transform: scale(1.1);
}

.task-menu {
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    font-weight: bold;
    color: #555;
    transition: background 0.2s;
}

.task-menu:hover {
    background: #f8f9fa;
    border-radius: 4px;
}

/* ASIGNADO A: SIEMPRE VISIBLE */
.task-assignee {
    font-size: 11px;
    color: #555;
    margin: 6px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.task-assignee i {
    color: #3498db;
    font-size: 10px;
}

/* BANDERAS CENTRADAS */
.badges-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
    margin: 10px 0;
    width: 100%;
}

.task-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    min-width: 70px;
    text-align: center;
    letter-spacing: 0.5px;
}

/* BARRA DE PROGRESO DE SUBTAREAS */
.subtask-progress {
    margin: 8px 0;
    font-size: 10px;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background-color: #ecf0f1;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2ecc71, #27ae60);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9px;
    color: #7f8c8d;
    font-weight: 500;
}

.progress-text strong {
    color: #2c3e50;
}

/* FECHA LÍMITE */
.task-deadline {
    font-size: 10px;
    color: #e74c3c;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    padding-top: 6px;
    border-top: 1px solid #f0f0f0;
}

.task-deadline i {
    color: #e74c3c;
    font-size: 9px;
}

/* MENÚ CONTEXTUAL */
.task-context-menu {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    right: 10px;
    top: 35px;
    min-width: 120px;
}

.task-context-menu.show {
    display: block;
}

.task-menu-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-menu-item:hover {
    background: #f8f9fa;
}

.task-menu-item.delete {
    color: #e74c3c;
}

.task-menu-item i {
    font-size: 11px;
}



/* Esta es probablemente la que necesitas */
.task-controls {
    display: flex;
    align-items: center;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* Contenedor de flechas separado del menú */
.move-buttons {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-right: 25px; /* ¡ESTO ES CLAVE! Separa flechas del menú */
    opacity: 0;
    transition: opacity 0.3s;
}

.task-card:hover .move-buttons {
    opacity: 1;
}

.task-menu {
    /* Menú queda a la derecha de las flechas */
    padding: 4px 8px;
}




/* Agrega esto en tu style.css o en el <style> del HTML */
.task-progress {
    position: relative;
    margin: 10px 0;
    width: 100%;
}

.task-progress-percentage {
    position: absolute;
    top: -18px;
    left: 0;
    font-size: 12px;
    font-weight: bold;
    color: #2c3e50;
    background: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    z-index: 1;
}

.task-item .progress-bar {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 5px;
}

.task-item .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    transition: width 0.3s ease;
}



/* ============================================= */
/* BARRA DE PROGRESO DE SUBTAREAS - KANBAN - CORREGIDO */
/* ============================================= */

.subtasks-progress-container {
    margin: 8px 0;
    padding: 6px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e9ecef;
    display: block;
    position: relative;
    overflow: visible;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-size: 10px;
    color: #6c757d;
    line-height: 1.2;
}

.progress-text {
    font-weight: 500;
    flex-shrink: 0;
}

.progress-percentage {
    font-weight: bold;
    color: #495057;
    flex-shrink: 0;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: #28a745;
    border-radius: 3px;
    transition: width 0.3s ease;
    position: absolute;
    left: 0;
    top: 0;
}

/* Colores para progreso */
.progress-fill[style*="width: 0%"] {
    background: #dc3545 !important;
}

.progress-fill[style*="width: 25%"] {
    background: #fd7e14 !important;
}

.progress-fill[style*="width: 50%"] {
    background: #ffc107 !important;
}

.progress-fill[style*="width: 75%"] {
    background: #28a745 !important;
}

.progress-fill[style*="width: 100%"] {
    background: #20c997 !important;
}

/* Asegurar que no haya desbordamiento */
.task-card-body {
    position: relative;
    overflow: visible;
}

.subtasks-progress-container * {
    box-sizing: border-box;
}



/* Estilos para la nueva estructura de tarjetas */
.task-card {
    background: white;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-left: 4px solid #3498db;
    transition: all 0.3s ease;
}

.task-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.task-title {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    flex: 1;
}

.task-menu {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.task-menu:hover {
    background: #f8f9fa;
}

.task-card-body {
    font-size: 12px;
}

.task-description {
    color: #666;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.task-assignee {
    font-size: 11px;
    color: #555;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

.task-assignee i {
    color: #3498db;
    font-size: 10px;
}

/* CONTENEDOR CENTRADO PARA BANDERAS */
.badges-container {
    display: flex;
    justify-content: center;
    gap: 6px;
    align-items: center;
    margin: 10px 0;
    width: 100%;
}

/* BANDERAS CON TEXTO MÁS PEQUEÑO Y ELEGANTE */
.task-badge {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 9px; /* TEXTO MÁS PEQUEÑO */
    font-weight: 600;
    text-transform: uppercase;
    min-width: 60px;
    text-align: center;
    display: inline-block;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Colores para bandera de PRIORIDAD */
.priority-badge.alta, .priority-badge.high {
    background-color: #e74c3c;
    color: white;
}

.priority-badge.media, .priority-badge.medium {
    background-color: #f39c12;
    color: white;
}

.priority-badge.baja, .priority-badge.low {
    background-color: #2ecc71;
    color: white;
}

/* Colores para bandera de STATUS */
.status-badge.status-pending {
    background-color: #f1c40f;
    color: black;
}

.status-badge.status-inProgress {
    background-color:#008090;
    color: white;
}

.status-badge.status-completed {
    background-color: #2ecc71;
    color: white;
}

.status-badge.status-overdue {
    background-color: #e74c3c;
    color: white;
}

/* FECHA LÍMITE - ASEGURAR QUE APAREZCA */
.task-deadline {
    font-size: 10px;
    color: #e74c3c;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    padding: 4px 0;
    border-top: 1px solid #f0f0f0;
}

.task-deadline i {
    color: #e74c3c;
    font-size: 9px;
}

.time-estimate {
    font-size: 10px;
    color: #7f8c8d;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-weight: 500;
}

.time-estimate i {
    font-size: 9px;
}

/* Menú contextual */
.task-context-menu {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
}

.task-context-menu.show {
    display: block;
}

.task-menu-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
}

.task-menu-item:hover {
    background: #f8f9fa;
}

.task-menu-item.delete {
    color: #e74c3c;
}





.task-details-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding-top: 15px !important;
  margin-top: 10px !important;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.task-details-footer button {
  padding: 8px 14px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
}

.task-details-container {
  max-height: 80vh;
  overflow-y: auto;
  padding-right: 10px;
}

.task-details-grid {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.details-column {
  flex: 1;
  min-width: 250px;
}

.detail-group {
  margin-bottom: 15px;
}

.full-width {
  width: 100%;
}


.premium-task {
    position: relative;
    z-index: 50 !important;
}

#dependencyLayer {
    position: absolute;
    top: 0;
    left: 320px; /* Para alinear con tu área de barras */
    right: 80px;
    z-index: 1 !important;  /* debajo de las barras */
    pointer-events: none;
    overflow: visible;
}




/* ===== MODERN TOOLTIP ===== */
.tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tooltip {
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(20, 25, 30, 0.95);
  color: white;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  z-index: 999;
}

/* flechita */
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(20,25,30,0.95) transparent transparent transparent;
}

/* hover */
.tooltip-wrapper:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ============================================================================
   🕒 PROJECT TIMELINE — Auditoría real de cambios (estilo premium)
   ============================================================================ */



.project-audit-wrapper {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 16px;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 🔒 TÍTULO FIJO */
.project-audit-title {
  margin: 0;
  font-size: 18px;
  color: #e5e7eb;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* 📜 SOLO AQUÍ HAY SCROLL */
.project-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;

  max-height: 300px;
  overflow-y: auto;
  padding-right: 6px;
}

/* 🧱 FILA DE AUDITORÍA */
.timeline-item {
  display: grid;
  grid-template-columns: 160px 1fr 180px;
  align-items: center;

  padding: 10px 12px;
  gap: 12px;

  background: rgba(2, 6, 23, 0.7);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;

  font-size: 13px;
}

/* 📅 FECHA */
.timeline-date {
  color: #94a3b8;
  font-size: 12px;
  white-space: nowrap;
}

/* 📝 TAREA */
.timeline-task {
  color: #e5e7eb;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 🔄 ESTADO */
.timeline-change {
  color: #fbbf24;
  text-align: right;
  font-size: 12px;
  white-space: nowrap;
}





/* ===== CONTENEDOR DE VISTAS ===== */
#appViews {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* ===== VISTAS ===== */
.view-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}





.view-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.view-content.active {
  display: block;
}




.view-content {
  display: none !important;
}

.view-content.active {
  display: block !important;
}



#appViews {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.view-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.view-content.active {
  display: block;
}




#timeAllocationView {
  padding: 16px;
  box-sizing: border-box;
}

#appViews {
  position: relative;
  height: calc(100vh - var(--header-height, 0px));
  overflow: hidden;
}





/* ===== CONTENEDOR DE VISTAS ===== */
#appViews {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-height, 0px));
  overflow: hidden;
}

/* ===== VISTAS ===== */
.view-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  display: none;

  overflow-y: auto;
  overflow-x: hidden;
}

.view-content.active {
  display: block;
}


.time-allocation-table-container {
  display: block;
  width: 100%;
  overflow-x: auto;
}


.time-allocation-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  flex: none;              /* 🔑 CLAVE */
  visibility: visible;
  opacity: 1;
}

.time-allocation-table th,
.time-allocation-table td {
  padding: 8px;
  border: 1px solid #ddd;
  color: #222;
  background: #fff;
}



#timeAllocationView {
  display: flex;
  flex-direction: column;
}


.time-allocation-content {
  flex: 1;
  min-height: 200px;   /* 👈 evita altura 0 */
}






.view-content,
.statistics,
.reportsView,
#timeAllocationView {
  background: #ffffff;
  min-height: 100vh;
}







:root {
  --theme-primary: #3498db; /* fallback */
  --theme-bg-soft: #f5f8fb;
}

[data-mode="agile"] {
  --theme-primary: #2ecc71;
  --theme-bg-soft: #eefaf3;
}

[data-mode="traditional"] {
  --theme-primary: #3498db;
  --theme-bg-soft: #eef5fb;
}

[data-mode="hybrid"] {
  --theme-primary: #9c27b0;
  --theme-bg-soft: #f6eff9;
}




.main-content,
#appViews {
  background: linear-gradient(
    135deg,
    var(--theme-bg-soft),
    #ffffff
  );
}



.view-content > section,
.statistics,
.board-container {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  margin: 24px;
  padding: 24px;
}


[data-mode="hybrid"] {
  --hybrid-bg: linear-gradient(135deg, #f1e8f6, #f6eff9);
  --hybrid-card: #ffffff;
  --hybrid-shadow: rgba(123, 31, 162, 0.18);
  --hybrid-text: #3d2c47;
}



#appViews,
.main-content {
  background: linear-gradient(
    135deg,
    var(--theme-bg-main),
    var(--theme-bg-card)
  );
}



/* Secciones grandes */
.statistics,
.board,
.board-columns,
.board-column,
.report-content,
section {
  background: transparent !important;
  box-shadow: none !important;
}



.task-card,
.stat-box,
.filter-bar,
.reports-filters,
.card,
.filters-container {
  background: var(--hybrid-card);
  box-shadow: 0 10px 25px var(--hybrid-shadow);
  border-radius: 12px;
}




.project-title-section,
.project-header,
.project-name-container {
  background: transparent !important;
  box-shadow: none !important;
}


.project-title,
.project-name {
  color: var(--hybrid-text);
}


/* En tu archivo de estilos o dentro de un <style> tag */
.hours-table,
.hours-table td,
.hours-table th {
  color: #333333 !important;
}

/* O si prefieres un color más oscuro */
.time-tracking-table td {
  color: #1a1a1a !important;
  font-weight: 500;
}


.board-column-title,
.column-title,
.column-header h3 {
  color: #4a2c5f;
  font-weight: 600;
}


.board-column-title i {
  color: #7b1fa2;
}







/* ===== LIMPIAR CONTENEDOR DE TAREAS (COLUMNAS VISUALES) ===== */
.tasks {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Si hay pseudo-elementos creando el marco */
.tasks::before,
.tasks::after {
  content: none !important;
  display: none !important;
}




/* Columnas sin marcos */
.tasks {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px;
}




/*************************************************
 * TÍTULOS DE COLUMNAS – SOLO EN VISTAS
 *************************************************/

/* Board / Kanban */
#boardView h2,
#boardView h3,
#boardView .column-title,
#boardView .kanban-column-title {
  color: #000 !important;
  text-align: center;
}

/* List */
#listView th {
  color: #000 !important;
}

/* Calendar */
#calendarView .day-header,
#calendarView .calendar-day-title {
  color: #000 !important;
}

.tasks,
.kanban-column,
.column {
  align-items: stretch !important;
}



.list-view h3,
.list-view h4 {
  text-align: left !important;
  padding-left: 8px !important;
}




/*************************************************
 * TÍTULOS DE COLUMNAS – LIST Y CALENDAR
 *************************************************/


/* 📅 CALENDAR VIEW */
#calendarView .day-header,
#calendarView .calendar-day-title,
#calendarView .day-title,
#calendarView span,
#calendarView div {
  visibility: visible !important;
  opacity: 1 !important;
  color: #000 !important;
}

/* 🎯 Afinado solo para títulos de días */
#calendarView .day-header,
#calendarView .calendar-day-title {
  text-align: center !important;
  font-weight: 600 !important;
  padding: 4px 0 !important;
}


/*************************************************
 * LIST VIEW – TÍTULOS DE COLUMNAS
 *************************************************/
#listView table th {
  display: table-cell !important;
  visibility: visible !important;
  opacity: 1 !important;

  color: #000 !important;
  font-weight: 600 !important;
  text-align: center !important;

  background: transparent !important;
  border: none !important;

  padding: 8px 6px !important;
}





/*************************************************
 * FIX DEFINITIVO – TÍTULOS DEL MENÚ LATERAL
 *************************************************/
aside {
  color: #ecf0f1;
}

/* Títulos principales del menú */
aside > div,
aside > section,
aside > nav,
aside li,
aside span,
aside h1,
aside h2,
aside h3 {
  color: #ecf0f1;
}


aside {
  color: rgba(236, 240, 241, 0.95);
}





.calendar-container {
    width: 100%;
    max-width: 100%;
}


.main-content {
    display: flex;
}

aside {
    flex-shrink: 0;
}


.calendar-container {
    flex: 1;
    min-width: 0;   /* 🔥 OBLIGATORIO */
    width: 100%;
}





/* Estilos para archivos adjuntos en detalles de tarea */
.file-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
}

.file-attachment i.fa-paperclip {
  color: #3498db;
  font-size: 18px;
}

.file-name {
  font-weight: 500;
  color: #2c3e50;
  flex: 1;
}

.file-size {
  color: #7f8c8d;
  font-size: 12px;
}

.download-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.2s;
}

.download-btn:hover {
  background: #2980b9;
}

.download-btn i {
  font-size: 11px;
}

/* Para tiempo */
.time-good {
  color: #27ae60;
  font-weight: 500;
}

.time-bad {
  color: #e74c3c;
  font-weight: 500;
}







/* === FORZAR COLOR NEGRO PARA NOMBRE DEL PROYECTO EN VISTAS LIST Y REPORTS === */

/* Vista Lista */
#listView .list-view-header h2,
#listView .list-view-header h2 span {
    color: #2c3e50 !important;
    text-shadow: none !important;
}

/* Vista Reports/Status */
#reportsView .project-info-reports h2,
#reportsView .project-info-reports h2 span {
    color: #2c3e50 !important;
    text-shadow: none !important;
}

/* Si también quieres aplicarlo a la vista Calendar (por consistencia) */
#calendarView .project-info h2,
#calendarView .project-info h2 span {
    color: #2c3e50 !important;
    text-shadow: none !important;
}




.legend-item.overdue:before { 
    background: #e74c3c; /* Rojo para rezagadas */
}



/* Texto "En Progreso" */
.legend-item.inProgress {
  color: #008090;
  font-weight: 600;
}



.dashboard-footer .risk-title,
.dashboard-footer .risk-description,
.dashboard-footer #requiredActions span {
  color: #1e293b !important; /* Gris oscuro legible */
}




/* === ESTILOS PARA EL BURNDOWN EN EL DASHBOARD === */
#burndownChartDashboard {
    width: 100% !important;
    height: 280px !important;
    max-height: 280px;
    display: block;
}




/* Forzar color de la leyenda de Chart.js en el dashboard */
#burndownChartDashboard + .chartjs-tooltip,
#burndownChartDashboard ~ *,
#dashboardView .chart-legend,
#dashboardView .legend-item {
    color: #1e40af !important;
}

/* Específico para la leyenda de Chart.js */
#dashboardView .chartjs-render-monitor + div,
#dashboardView .chartjs-legend-0,
#dashboardView .chartjs-legend-item {
    color: #1e40af !important;
}

/* Fallback universal */
#dashboardView canvas + div,
#dashboardView canvas ~ div {
    color: #1e40af !important;
}










/* === IGUALAR ALTURA TOTAL DE LAS TARJETAS === */
.dashboard-row .dashboard-card {
    height: 435px !important; /* ← Cambia por el valor que mediste */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Asegurar que el canvas ocupe el espacio disponible */
.dashboard-card canvas {
    flex: 1;
    min-height: 280px;
}













/* ================================================ */
/* FORMATO UNIFORME Y ALINEADO - VERSIÓN FINAL */
/* ================================================ */

/* 1. CONTENEDORES PADRES CON MISMA ESTRUCTURA */
.quick-actions,
.actions-panel,
.upcoming-milestones {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 300px !important;
    min-height: 320px !important;
    background: white !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e2e8f0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 2. TÍTULOS IDÉNTICOS */
.quick-actions h3,
.actions-header h3,
.milestones-header h3 {
    /* Fondo y color */
    background: #003366 !important;
    color: white !important;
    border-bottom: 3px solid #1e293b !important;
    
    /* Dimensiones fijas */
    margin: 0 !important;
    padding: 15px 20px 12px 20px !important;
    height: 50px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    
    /* Tipografía y alineación */
    font-size: 16px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
justify-content: center !important; /* ⬅️ AÑADE ESTA LÍNEA */
    text-align: center !important;      /* ⬅️ Y ESTA LÍNEA */
}

/* 3. HEADERS SIN ESPACIO EXTRA */
.actions-header,
.milestones-header {
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. CONTENEDORES DE CONTENIDO - IDÉNTICOS */
.risks-container,
#requiredActions,
#milestonesList {
    /* Layout */
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* Dimensiones */
    min-height: 150px !important;
    max-height: 200px !important;
    width: calc(100% - 30px) !important;
    
    /* Apariencia */
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    
    /* Espaciado UNIFORME */
    margin: 15px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    padding: 15px !important;
    
    /* Scroll */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* 5. MENSAJES DE "VACÍO" */
.risks-container:empty::before,
#requiredActions:empty::before,
#milestonesList:empty::before {
    content: "No hay elementos para mostrar";
    color: #64748b;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* 6. MENSAJE ESPECÍFICO DE HITOS */
#milestonesList > div {
    width: 100% !important;
    text-align: center !important;
    color: #64748b !important;
    padding: 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 7. BOTONES ALINEADOS */
.add-risk-btn,
#addActionBtn,
#addMilestoneBtn {
    /* Posición */
    margin: 15px !important;
    margin-top: auto !important;
    
    /* Dimensiones fijas */
    height: 44px !important;
    width: calc(100% - 30px) !important;
    
    /* Apariencia */
    background: #00ccff !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 12px !important;
    
    /* Tipografía */
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    
    /* Alineación */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* 8. DASHBOARD FOOTER */
.dashboard-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 25px !important;
    width: 100% !important;
    margin-top: 20px !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

/* 9. EFECTO HOVER BOTONES */
.add-risk-btn:hover,
#addActionBtn:hover,
#addMilestoneBtn:hover {
    background: #1e293b !important;
    transform: translateY(-1px);
    transition: all 0.2s;
}



/* FORZAR MISMA ALTURA EXACTA PARA LOS 3 */
.risks-container,
#requiredActions,
#milestonesList {
    /* ALTURA FIJA IGUAL - 187px como Acciones/Hitos */
    height: 187px !important;
    min-height: 187px !important;
    max-height: 187px !important;
    
    /* Mismo ancho */
    width: calc(100% - 30px) !important;
    
    /* El resto igual */
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 15px !important;
    margin: 10px 15px !important;
    
    /* Centrado del contenido */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
}

/* Agregar mensaje "No hay elementos" a Riesgos cuando esté vacío */
.risks-container:empty::before {
    content: "No hay riesgos reportados";
    color: #64748b;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* Agregar mensaje "No hay elementos" a Acciones cuando esté vacío */
#requiredActions:empty::before {
    content: "No hay acciones requeridas";
    color: #64748b;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* Mantener mensaje de Hitos */
#milestonesList:empty::before {
    content: "No hay hitos próximos";
    color: #64748b;
    font-style: italic;
    text-align: center;
    padding: 20px;
}




/* --- CORRECCIÓN DEL GRÁFICO DE DISTRIBUCIÓN DE TAREAS --- */
#tasksDistributionChart {
    /* Elimina cualquier borde o outline que pueda estar causando el marco morado */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    /* Asegura que no haya transformaciones (rotación, escala, etc.) */
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;

    /* Asegura que el canvas tenga un tamaño adecuado y no se desborde */
    width: 100% !important;
    height: auto !important;
    max-width: 300px; /* Ajusta según necesites */
    max-height: 300px; /* Ajusta según necesites */

    /* Centra el canvas dentro de su contenedor */
    margin: 0 auto !important;
    display: block !important;
}

/* Si el contenedor padre tiene padding o margen excesivo, ajusta también */
.dashboard-card .chart-container {
    padding: 15px !important;
    background: transparent !important;
    border: none !important;
}



/* --- ELIMINAR FONDO MORADO DEL GRÁFICO --- */
#tasksDistributionChart {
    background-color: transparent !important; /* ⬅️ Elimina cualquier fondo en el canvas */
}

.dashboard-card .chart-container {
    background-color: transparent !important; /* ⬅️ Elimina fondo en el contenedor */
    padding: 15px !important;
}




/* Posicionar botón de configuración junto al botón de Gantt */
#configButton {
  position: absolute !important;
  top: 5px !important;
  right: 150px !important; /* Ajusta este valor si necesitas más/menos espacio */
  z-index: 9999 !important;
}



:root {
    --primary: #667eea;
    --secondary: #764ba2;
    --success: #4ade80;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
    --dark: #1e293b;
    --light: #f8fafc;
    --gray: #64748b;
    --border-radius: 16px;
    --box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== NAVBAR SUPERIOR ===== */
.inicio-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo {
    font-size: 28px;
    font-weight: bold;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo span {
    color: #f1f5f9;
}

.search-bar {
    position: relative;
    flex: 1;
    max-width: 600px;
    margin: 0 30px;
}

.search-bar input {
    width: 100%;
    padding: 12px 20px 12px 45px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(30, 41, 59, 0.6);
    color: white;
    font-size: 14px;
    transition: var(--transition);
}

.search-bar input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(30, 41, 59, 0.8);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.search-bar i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray);
}

.user-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.notification-btn {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.notification-btn:hover {
    background: rgba(102, 126, 234, 0.2);
    transform: translateY(-2px);
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.ai-assistant-btn {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.ai-assistant-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: bold;
    font-size: 14px;
}

.user-role {
    font-size: 11px;
    color: var(--gray);
}


/* ===== RESTAURACIÓN DE ESTILOS ESENCIALES ===== */

/* 1. Layout principal */
.inicio-container {
    padding: 20px !important;
    margin: 0 !important;
    background: white !important;
    color: #1e293b !important;
}

/* 2. Contenedor de secciones */
.sections-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 25px !important;
}

/* 3. Secciones */
.section-card {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    color: #1e293b !important;
}

/* 4. Encabezados de sección */
.section-header {
    border-bottom: 2px solid #8b5cf6 !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.section-title {
    color: #6c39a9 !important;
    font-weight: bold !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* 5. Métricas */
.work-summary {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 15px !important;
    margin-bottom: 25px !important;
}

.work-metric {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    text-align: center !important;
}

.metric-value {
    font-size: 28px !important;
    font-weight: bold !important;
    color: #6c39a9 !important;
    margin: 5px 0 !important;
}

.metric-label {
    font-size: 11px !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* 6. Actividad e informes */
.recent-items, .report-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.recent-item, .report-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    color: #1e293b !important;
}

.recent-icon, .report-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #eef2ff !important;
    color: #6c39a9 !important;
}

.recent-title, .report-name {
    font-weight: 500 !important;
    color: #1e293b !important;
    font-size: 13px !important;
    margin-bottom: 3px !important;
}

.recent-meta, .report-date {
    color: #64748b !important;
    font-size: 11px !important;
}

/* 7. Botones */
.action-btn {
    background: #8b5cf6 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
    font-size: 12px !important;
}

.action-btn:hover {
    background: #6c39a9 !important;
}

/* 8. Para que los elementos sean visibles */
#activityList, #recentReportsList {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#activityList > *:not([style*="display: none"]),
#recentReportsList > *:not([style*="display: none"]) {
    display: block !important;
    visibility: visible !important;
}


/* ===== EFECTO HOVER MORADO EN BOTONES DE NAVEGACIÓN ===== */

/* 1. Botones de navegación */
.view-buttons {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    padding: 10px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.view-button {
    background: transparent !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 8px 15px !important;
    font-size: 14px !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.view-button i {
    font-size: 16px !important;
}

.view-button:hover {
    background: #f0f4ff !important;
    border-color: #8b5cf6 !important;
    color: #6c39a9 !important;
}

.view-button.active {
    background: #8b5cf6 !important;
    color: white !important;
    border-color: #8b5cf6 !important;
    font-weight: bold !important;
}

.view-button.active i {
    color: white !important;
}




/* ===== ESTILOS PARA NUEVAS VISTAS ===== */

.status-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin-top: 20px !important;
}

.status-metric {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    text-align: center !important;
}

.progress-bar {
    height: 10px !important;
    background: #e2e8f0 !important;
    border-radius: 5px !important;
    margin: 10px 0 !important;
    overflow: hidden !important;
}

.progress-fill {
    height: 100% !important;
    background: #8b5cf6 !important;
    border-radius: 5px !important;
}

.risk-count {
    font-size: 28px !important;
    font-weight: bold !important;
    color: #ef4444 !important;
    margin: 10px 0 !important;
}

.dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}

.dashboard-card {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    text-align: center !important;
}

.dashboard-value {
    font-size: 32px !important;
    font-weight: bold !important;
    color: #6c39a9 !important;
    margin: 10px 0 !important;
}



/* ===== EFECTO HOVER MORADO EN OPCIONES DE NAVEGACIÓN ===== */

.quick-actions {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
    margin-top: 25px !important;
}

.quick-action {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #64748b !important;
}

.quick-action i {
    font-size: 20px !important;
    color: #6c39a9 !important;
}

.quick-action span {
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Efecto hover morado */
.quick-action:hover {
    background: #8b5cf6 !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

.quick-action:hover i,
.quick-action:hover span {
    color: white !important;
}

/* Estilo para la vista activa */
.quick-action.active {
    background: #6c39a9 !important;
    color: white !important;
    border-color: #6c39a9 !important;
    font-weight: bold !important;
}

.quick-action.active i,
.quick-action.active span {
    color: white !important;
}







/* ===== SECCIÓN DE NAVEGACIÓN ESTILOS PERSONALIZADOS ===== */

.navigation-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1px !important;
    margin-top: 25px !important;
    border: 1px solid #8b5cf6 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.nav-option {
    background: white !important;
    border: none !important;
    padding: 15px !important;
    text-align: center !important;
    cursor: pointer !important;
    color: #1e293b !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    position: relative !important;
}

.nav-option:hover {
    background: #f0f4ff !important;
    color: #6c39a9 !important;
}



/* Efecto de borde para la opción activa */
.nav-option.active::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: #6c39a9 !important;
}

/* Para que el efecto de borde se vea bien en todos los navegadores */
.nav-option.active {
    z-index: 1 !important;
}

/* Efecto de borde superior para la primera opción */
.nav-option:first-child {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

/* Efecto de borde inferior para la última opción */
.nav-option:last-child {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}





/* Animaciones */
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* Estados de carga */
.btn-generando {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Notificaciones */
.notification {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Stats animadas */
.stat-value {
    transition: all 0.3s ease;
}

.stat-value:hover {
    transform: scale(1.1);
}




/* === FORZAR RIESGOS IGUAL A ACCIONES === */

/* 1. Forzar el contenedor a tener exactamente las mismas dimensiones */
#risksContainer {
    height: 187px !important;
    max-height: 187px !important;
    min-height: 187px !important;
    padding: 15px !important;
    margin: 10px 15px !important;
    width: calc(100% - 30px) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    list-style-type: none !important;
}

/* 2. Forzar el botón de riesgos al mismo color y posición */
#addRiskBtn {
    background: #00ccff !important;  /* Mismo azul que acciones */
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 12px !important;
    margin: 15px !important;
    margin-top: auto !important;
    width: calc(100% - 30px) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

#addRiskBtn:hover {
    background: #0099cc !important;  /* Versión más oscura del mismo azul */
}

/* 3. Asegurar que los items dentro se vean igual */
#risksContainer li,
#risksContainer .risk-item {
    padding: 10px !important;
    margin-bottom: 5px !important;
    background-color: #f8f9fa !important;
    border-radius: 4px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#risksContainer li:hover,
#risksContainer .risk-item:hover {
    background-color: #e9ecef !important;
}

#risksContainer button {
    background: none !important;
    border: none !important;
    color: #dc3545 !important;
    cursor: pointer !important;
    margin-left: 10px !important;
}







/* === HACER QUE LOS ITEMS OCUPEN TODO EL ANCHO DEL CONTENEDOR === */

/* Para acciones requeridas - items ocupan todo el ancho */
#requiredActions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 15px !important;
    margin: 10px 15px !important;
    box-sizing: border-box !important;
}

#requiredActions li,
#requiredActions .action-item {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 12px 15px !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: #f8f9fa !important;
    border-radius: 4px !important;
    margin-bottom: 5px !important;
}

/* Para riesgos - items ocupan todo el ancho */
#risksContainer {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 15px !important;
    margin: 10px 15px !important;
    box-sizing: border-box !important;
}

#risksContainer li,
#risksContainer .risk-item {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 12px 15px !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: #f8f9fa !important;
    border-radius: 4px !important;
    margin-bottom: 5px !important;
}

/* El texto dentro de los items */
#requiredActions li span,
#requiredActions .action-item span,
#risksContainer li span,
#risksContainer .risk-item span {
    flex: 1 !important;
    padding-right: 10px !important;
    word-break: break-word !important;
}

/* Los botones de eliminar se mantienen a la derecha */
#requiredActions li button,
#requiredActions .action-item button,
#risksContainer li button,
#risksContainer .risk-item button {
    flex-shrink: 0 !important;
    margin-left: auto !important;
}



/* ===== EFECTOS PARA LA VISTA LISTA ===== */

/* Animaciones */
@keyframes slideInRow {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

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

/* Filas de la tabla */
.task-data-row {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: slideInRow 0.4s ease-out forwards;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Delay escalonado para cada fila */
.task-data-row:nth-child(1) { animation-delay: 0.05s; }
.task-data-row:nth-child(2) { animation-delay: 0.10s; }
.task-data-row:nth-child(3) { animation-delay: 0.15s; }
.task-data-row:nth-child(4) { animation-delay: 0.20s; }
.task-data-row:nth-child(5) { animation-delay: 0.25s; }
.task-data-row:nth-child(6) { animation-delay: 0.30s; }
.task-data-row:nth-child(7) { animation-delay: 0.35s; }
.task-data-row:nth-child(8) { animation-delay: 0.40s; }
.task-data-row:nth-child(9) { animation-delay: 0.45s; }
.task-data-row:nth-child(10) { animation-delay: 0.50s; }

/* Efecto de brillo al pasar el mouse */
.task-data-row::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  transition: transform 0.6s;
  opacity: 0;
  pointer-events: none;
}

.task-data-row:hover::after {
  opacity: 1;
  transform: rotate(30deg) translate(50%, 50%);
}

/* Hover con elevación */
.task-data-row:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
  z-index: 10;
  position: relative;
}

/* Alternancia de colores */
.task-data-row.even-row {
  background: #f8f9fa;
}

.task-data-row.odd-row {
  background: #ffffff;
}

.task-data-row.even-row:hover {
  background: #e3f2fd !important;
}

.task-data-row.odd-row:hover {
  background: #e8f5e9 !important;
}

/* Badges de estado */
.status-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.status-pending {
  background: #f1c40f;
  color: #2c3e50;
}

.status-inProgress {
  background: #008090;
  color: white;
}

.status-completed {
  background: #2ecc71;
  color: white;
}

.status-overdue {
  background: #e74c3c;
  color: white;
  animation: pulse 2s infinite;
}

.status-pill:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Badges de prioridad */
.priority-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.priority-baja {
  background: #95a5a6;
  color: white;
}

.priority-media {
  background: #f39c12;
  color: white;
}

.priority-alta {
  background: #e74c3c;
  color: white;
  animation: pulse 3s infinite;
}

.priority-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  border-color: white;
}

/* Contador de resultados */
.results-counter {
  display: inline-block;
  margin-left: 15px;
  padding: 4px 15px;
  background: #3498db;
  color: white;
  border-radius: 20px;
  font-size: 13px;
  font-weight: bold;
  animation: fadeIn 0.5s;
}

/* Celdas */
.data-cell {
  transition: background 0.2s;
}

.data-cell:hover {
  background: rgba(52, 152, 219, 0.1);
}

.task-name-cell {
  font-weight: 500;
  position: relative;
  padding-left: 25px !important;
}

.task-name-cell::before {
  content: '📋';
  position: absolute;
  left: 5px;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  font-size: 14px;
}

.task-name-cell:hover::before {
  opacity: 1;
  transform: scale(1.2);
}

/* Tabla */
.task-list-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.task-list-table th {
  background: #34495e;
  color: white;
  padding: 12px;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 10;
}

.task-list-table td {
  padding: 12px;
  border-bottom: 1px solid #ecf0f1;
}




/* SOLUCIÓN DIRECTA PARA LOS SELECTS */
.calendar-filters select,
#filterAssigneeCalendar,
#filterPriorityCalendar,
#filterStatusCalendar {
  color: black !important;
  background-color: white !important;
}

.calendar-filters select option,
#filterAssigneeCalendar option,
#filterPriorityCalendar option,
#filterStatusCalendar option {
  color: black !important;
  background-color: white !important;
}

/* Cuando el select está enfocado/abierto */
.calendar-filters select:focus,
#filterAssigneeCalendar:focus,
#filterPriorityCalendar:focus,
#filterStatusCalendar:focus {
  color: black !important;
  background-color: white !important;
}






/* Días de la semana (Lun, Mar, Mié, etc) */
.fc .fc-col-header-cell {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    color: white !important;
    padding: 12px 0 !important;
    border-bottom: 2px solid #8b5cf6 !important;
}

/* Texto de los días */
.fc .fc-col-header-cell-cushion {
    color: #e2e8f0 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Efecto al pasar el mouse */
.fc .fc-col-header-cell:hover {
    background: linear-gradient(135deg, #2d3a4f, #1e2a3a) !important;
    cursor: pointer;
}

/* Borde inferior del header */
.fc .fc-scrollgrid-section-header {
    border-bottom: 2px solid #8b5cf6 !important;
}


/* Prioridades corregidas */
.priority-baja {
    background: #2ecc71 !important;
    color: white !important;
}
.priority-media {
    background: #f39c12 !important;
    color: white !important;
}
.priority-alta {
    background: #e74c3c !important;
    color: white !important;
}







@media print {
    .header h2 {
        background: none !important;
        -webkit-text-fill-color: black !important;
        color: black !important;
    }
}





















/* ===== FONDO GENERAL NEGRO ===== */
html, body {
  background: #000000 !important;
  background-color: #000000 !important;
  background-attachment: fixed !important;
  color: #e2e8f0 !important;
}

/* ===== HEADER NEGRO SÓLIDO ===== */
header {
  background: #000000 !important;
  background-image: none !important;
}

/* ===== CONTENEDORES PRINCIPALES CON FONDO #1a1a3a ===== */
.container, .report-container, .dashboard-card, .glass-card-4d,
.kanban-column, .task-card, .modal-content, .fc, .fc .fc-view,
.gantt-container, .gantt-header, .section, .kpi-card-4d,
.kpi-card, .stat-card, .evm-card, .card, .list-view,
.board-view, .calendar-view, .gantt-view, .reports-view,
.profitability-view, .dashboard-view, .time-allocation-view,
.inicio-view, #taskDetailsModal .task-details-container,
.executive-modal, .dependency-modal,
.modal-content, .fc .fc-daygrid-day, .fc .fc-timegrid-slot,
.tasks, .filter-bar,
.filter-bar select, .filter-bar label, .filter-bar button,
.time-allocation-table-container, .time-allocation-table,
.time-allocation-table thead, .time-allocation-table tbody,
.time-allocation-table tr, .time-allocation-table th,
.time-allocation-table td, #timeAllocationTableBody,
.time-allocation-chart-container,
.task-data-row, .task-name-cell, .date-cell, .status-cell,
.assignee-cell, .priority-cell, .task-name-content, .date-content,
.assignee-content,
.controls, .project-selector, .upload-section, .upload-btn,
.tab-container, .tabs, .tab, .tab-content,
.dashboard, .metric, .progress-bar, .progress-fill,
.details-section, .chart-container,
#activities-table, #delayed-activities-table, #high-risk-activities,
.risk-indicator,
#total-budget, #total-expense, #profitability, #profit-percentage,
#scheduled-hours, #used-hours, #time-efficiency,
#completed-activities, #total-activities, #progress-percentage,
#high-risks, #medium-risks, #low-risks, #total-overcost, #total-extra-hours,
#expected-profit, #current-profit, #risk-loss,
.view-content, .kanban-board, .board-container, .list-container,
.calendar-container, .reports-container, .profitability-container,
.dashboard-container, .time-allocation-container, .inicio-container,
.gantt-view-container, .executive-dashboard, .report-container,
aside, .sidebar, .side-menu, .left-menu, .nav-sidebar, .sidenav {
  background: #1a1a3a !important;
  background-color: #1a1a3a !important;
  border-color: #2d2d5f !important;
  color: #e2e8f0 !important;
}

/* ===== COLUMNAS DEL KANBAN CON FONDO NEGRO ===== */
.column,
.kanban-column,
#pendingTasks,
#inProgressTasks,
#completedTasks,
#overdueTasks {
  background: #000000 !important;
  background-color: #000000 !important;
}

/* ===== TÍTULOS DE COLUMNAS EN BLANCO CON FORMATO ===== */
.column h3,
.kanban-column h3,
#pendingTasks h3,
#inProgressTasks h3,
#completedTasks h3,
#overdueTasks h3 {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* ===== TEXTO EN BLANCO PARA TÍTULOS GENERALES ===== */
h1, h2, h3, h4, h5, h6,
.section-title, .card-title,
.task-title, h4.task-title,
.tab, .tab.active {
  color: #ffffff !important;
}

/* ===== BOTONES Y SELECTORES ===== */
.filter-bar button, .filter-bar select, .filter-bar option,
.upload-btn, .tab,
button:not(.btn-4d):not(.blue-btn):not(.premium-btn) {
  background: #2d2d5f !important;
  color: white !important;
  border: 1px solid #3b3b7a !important;
}

.tab.active {
  background: #3b3b7a !important;
  border-bottom: 2px solid #8b5cf6 !important;
}

/* ===== INPUTS Y TEXTAREAS ===== */
input, textarea, select {
  background: #0f0f1f !important;
  color: white !important;
  border-color: #2d2d5f !important;
}

/* ===== BADGES DE ESTADO Y PRIORIDAD ===== */
.status-pill, .priority-pill {
  display: inline-block !important;
}
.status-pending, .priority-baja {
  background: #f1c40f !important;
  color: #2c3e50 !important;
}
.status-inProgress, .priority-media {
  background: #008090 !important;
  color: white !important;
}
.status-completed {
  background: #2ecc71 !important;
  color: white !important;
}
.status-overdue, .priority-alta {
  background: #e74c3c !important;
  color: white !important;
}

/* ===== INDICADORES DE RIESGO ===== */
.risk-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 5px;
}
.risk-high { background-color: #e74c3c !important; }
.risk-medium { background-color: #f39c12 !important; }
.risk-low { background-color: #2ecc71 !important; }

/* ===== MODALES Y OVERLAYS ===== */
.modal-backdrop, .overlay, .executive-overlay, .modal, .modal-content,
.fc-overlay, .fc-popover, .fc-backdrop, .modal-dialog, .modal-container,
.popup, .dialog, .dialog-overlay {
  background: #000000 !important;
  background-color: #000000 !important;
}

/* ===== VISTA BOARD ACTIVA (fondo negro) ===== */
#boardView.view-content.active {
  background: #000000 !important;
  background-color: #000000 !important;
}





























/* ============================================
   MENÚ LATERAL PROFESIONAL - ESTILO UNIFICADO
   ============================================ */

/* Sidebar base */
aside {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  min-width: 280px;
  max-width: 280px;
  height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 20px 0;
  box-shadow: 4px 0 15px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

aside.hidden {
  margin-left: -280px;
}

/* Scrollbar personalizado */
aside::-webkit-scrollbar {
  width: 6px;
}

aside::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
}

aside::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.5);
  border-radius: 3px;
}

aside::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.8);
}

/* Títulos de sección */
aside h3 {
  color: #94a3b8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 20px 25px 10px;
  margin: 0;
  font-weight: 600;
  border-bottom: 2px solid rgba(139, 92, 246, 0.2);
  margin-bottom: 10px;
}

/* Lista de items */
aside ul {
  list-style: none;
  padding: 0;
  margin: 0 15px;
}

aside li {
  margin-bottom: 8px;
  position: relative;
}

/* Items del menú - ESTILO BASE UNIFICADO */
aside li,
.methodology-section select,
#backupToLocal,
#restoreFromLocal,
#centroReportesBtn,
#integracionesBtn,
#rhCenterBtn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  width: calc(100% - 30px);
  margin: 0 15px 8px;
  position: relative;
  overflow: hidden;
}

/* Iconos */
aside li i,
.methodology-section i {
  font-size: 18px;
  width: 24px;
  text-align: center;
  color: #8b5cf6;
  transition: all 0.3s ease;
}

/* Hover effects - UNIFICADO PARA TODOS */
aside li:hover,
.methodology-section select:hover,
#backupToLocal:hover,
#restoreFromLocal:hover,
#centroReportesBtn:hover,
#integracionesBtn:hover,
#rhCenterBtn:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(147, 51, 234, 0.1));
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

aside li:hover i {
  color: #a78bfa;
  transform: scale(1.1);
}

/* Active state */
aside li.active,
.methodology-section select:focus,
#backupToLocal:active,
#restoreFromLocal:active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(147, 51, 234, 0.2));
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

/* BOTONES ESPECIALES (CENTRO DE REPORTES, INTEGRACIONES, RH CENTER) */
#centroReportesBtn,
#integracionesBtn,
#rhCenterBtn {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border: 2px solid rgba(255,255,255,0.2);
  color: white;
  font-weight: 600;
  justify-content: center;
  text-align: center;
  padding: 16px 20px;
  margin: 10px 15px;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

#centroReportesBtn:hover,
#integracionesBtn:hover,
#rhCenterBtn:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5);
}

#centroReportesBtn i,
#integracionesBtn i,
#rhCenterBtn i {
  color: white;
  font-size: 20px;
}

/* Sección de Proyectos */
#projectList li {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(139, 92, 246, 0.2);
  margin-bottom: 6px;
  padding: 12px 15px;
  font-size: 13px;
}

#projectList li:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.6);
}

#projectList li.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(147, 51, 234, 0.2));
  border-color: #8b5cf6;
}

/* Botones de respaldo local */
#backupToLocal,
#restoreFromLocal {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  font-size: 13px;
  padding: 12px 15px;
  margin: 5px 15px;
  width: calc(100% - 30px);
}

#backupToLocal:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.5);
}

#restoreFromLocal {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
}

#restoreFromLocal:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.5);
}

/* Selector de metodología */
.methodology-section {
  margin: 20px 15px;
  padding: 15px;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
}

.methodology-section h4 {
  color: #94a3b8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 10px 0;
  padding: 0;
}

.methodology-section select {
  width: calc(100% - 30px);
  margin: 0 15px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #e2e8f0;
  padding: 12px 15px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b5cf6' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}

.methodology-section select:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

/* Animación de entrada */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

aside li {
  animation: slideIn 0.3s ease forwards;
}

aside li:nth-child(1) { animation-delay: 0.05s; }
aside li:nth-child(2) { animation-delay: 0.1s; }
aside li:nth-child(3) { animation-delay: 0.15s; }
aside li:nth-child(4) { animation-delay: 0.2s; }
aside li:nth-child(5) { animation-delay: 0.25s; }
aside li:nth-child(6) { animation-delay: 0.3s; }
aside li:nth-child(7) { animation-delay: 0.35s; }
aside li:nth-child(8) { animation-delay: 0.4s; }

/* Responsive */
@media (max-width: 768px) {
  aside {
    position: fixed;
    left: 0;
    top: 80px;
    z-index: 1000;
    margin-left: -280px;
  }
  
  aside.hidden {
    margin-left: 0;
  }
}






// Ejemplo para crear botones con el nuevo estilo
function crearBotonMenu(texto, icono, id, onClick) {
  const btn = document.createElement('div');
  btn.id = id;
  btn.innerHTML = `<i class="${icono}"></i><span>${texto}</span>`;
  btn.onclick = onClick;
  btn.className = 'menu-btn-special'; // Agrega esta clase
  return btn;
}

// Uso:
const centroReportesBtn = crearBotonMenu(
  'CENTRO DE REPORTES', 
  'fas fa-chart-pie', 
  'centroReportesBtn', 
  () => showView('reports')
);






/* Botones creados dinámicamente */
.menu-btn-special {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 10px 15px;
  width: calc(100% - 30px);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.menu-btn-special:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5);
}

.menu-btn-special i {
  font-size: 20px;
  color: white;
}









/* Colores específicos para botones del Gantt - Versión corregida */
.premium-btn {
    transition: all 0.3s ease !important;
}

/* Burndown - Naranja (CORREGIDO: nombre exacto de la función) */
button[onclick*="showBurnDownChartPremium"] {
    background: linear-gradient(45deg, #e67e22, #f39c12) !important;
}

/* Valor Ganado - Azul */
button[onclick*="openEVMDashboard"] {
    background: linear-gradient(45deg, #3b82f6, #1d4ed8) !important;
}

/* Costos - Verde */
button[onclick*="showCostConfigurationPanel"] {
    background: linear-gradient(45deg, #10b981, #059669) !important;
}

/* IA Predictor - Púrpura */
button[onclick*="showAIPredictorPremium"] {
    background: linear-gradient(45deg, #8b5cf6, #6d28d9) !important;
}

/* Cambiar Proyecto - Teal */
button[onclick*="switchProjectPremium"] {
    background: linear-gradient(45deg, #14b8a6, #0f766e) !important;
}

/* Reporte Ejecutivo - Rojo */
button[onclick*="exportGanttData"] {
    background: linear-gradient(45deg, #e74c3c, #c0392b) !important;
}

/* Volver al Tablero - Gris */
button[onclick*="goBackToDashboard"] {
    background: linear-gradient(45deg, #64748b, #475569) !important;
}

/* Vista Mobile - Morado */
button[onclick*="toggleMobileViewPremium"] {
    background: linear-gradient(45deg, #6c5ce7, #a29bfe) !important;
}







/* ============================================
   🎨 COLORES DEL MENÚ LATERAL (SIDEBAR)
   ============================================ */

/* ===== ESTILOS BASE ===== */
#sidebar li, aside li, .sidebar li {
    list-style: none;
    margin: 8px 12px;
}

#sidebar li div, aside li div, .sidebar li div,
#sidebar li button, aside li button, .sidebar li button {
    transition: all 0.3s ease !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* ===== BOTONES DEL MENÚ POR FUNCIÓN ===== */

/* 1. INICIO / Centro de Comando - Azul marino (principal) */
#showInicioView, button[onclick*="renderCentroComandoIA"] {
    background: linear-gradient(45deg, #1e3a8a, #3b82f6) !important;
    color: white !important;
    border: none !important;
}

/* 2. TABLERO / KANBAN - Azul cielo (gestión visual) */
#showBoardView {
    background: linear-gradient(45deg, #0284c7, #38bdf8) !important;
    color: white !important;
    border: none !important;
}

/* 3. LISTA - Verde azulado (organización) */
#showListView {
    background: linear-gradient(45deg, #0d9488, #2dd4bf) !important;
    color: white !important;
    border: none !important;
}

/* 4. CALENDARIO - Naranja (fechas/tiempo) */
#showCalendarView {
    background: linear-gradient(45deg, #ea580c, #f97316) !important;
    color: white !important;
    border: none !important;
}

/* 5. GANTT - Púrpura (planificación avanzada) */
#showGanttView, #showGanttProView {
    background: linear-gradient(45deg, #6d28d9, #a855f7) !important;
    color: white !important;
    border: none !important;
}

/* 6. REPORTES - Rojo (destacado/informes) */
#showReportsView {
    background: linear-gradient(45deg, #dc2626, #ef4444) !important;
    color: white !important;
    border: none !important;
}

/* 7. RENTABILIDAD - Verde esmeralda (finanzas) */
#showProfitabilityView {
    background: linear-gradient(45deg, #059669, #10b981) !important;
    color: white !important;
    border: none !important;
}

/* 8. DASHBOARD - Índigo (visión general) */
#showDashboardView {
    background: linear-gradient(45deg, #4338ca, #6366f1) !important;
    color: white !important;
    border: none !important;
}

/* 9. DASHBOARD 4D - Rosa/Magenta (experiencia premium) */
#showDashboard4DView {
    background: linear-gradient(45deg, #be185d, #ec4899) !important;
    color: white !important;
    border: none !important;
}

/* 10. ASIGNACIÓN DE HORAS - Amarillo/Ámbar (tiempo) */
#showTimeAllocationView {
    background: linear-gradient(45deg, #b45309, #f59e0b) !important;
    color: white !important;
    border: none !important;
}

/* 11. PLANTILLAS - Morado claro (creación) */
.btn-plantillas, #showPlantillasView {
    background: linear-gradient(45deg, #7e22ce, #c084fc) !important;
    color: white !important;
    border: none !important;
}

/* 12. INTEGRACIONES - Gris metálico (conexiones) */
#btn100Final, button[onclick*="mostrarPanel"] {
    background: linear-gradient(45deg, #475569, #94a3b8) !important;
    color: white !important;
    border: none !important;
}

/* 13. NUEVO PROYECTO - Verde brillante (acción principal) */
#newProjectBtn {
    background: linear-gradient(45deg, #16a34a, #22c55e) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
}

/* 14. CONFIGURACIÓN - Gris oscuro (ajustes) */
#configButton {
    background: linear-gradient(45deg, #334155, #64748b) !important;
    color: white !important;
    border: none !important;
}

/* 15. CERRAR SESIÓN - Rojo oscuro (acción de salida) */
#logoutBtn {
    background: linear-gradient(45deg, #991b1b, #ef4444) !important;
    color: white !important;
    border: none !important;
}

/* 16. PM Virtual (botón flotante del sidebar) */
#boardUltimateBtn, button[id*="boardUltimateBtn"] {
    background: linear-gradient(45deg, #6d28d9, #8b5cf6) !important;
    color: white !important;
    border: none !important;
}

/* ===== EFECTOS HOVER ===== */
#sidebar li div:hover, aside li div:hover, .sidebar li div:hover,
#sidebar li button:hover, aside li button:hover, .sidebar li button:hover {
    transform: translateX(5px) scale(1.02) !important;
    filter: brightness(1.1) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* ===== ESTADO ACTIVO (vista seleccionada) ===== */
#sidebar li.active div, aside li.active div {
    box-shadow: 0 0 0 2px white, 0 4px 12px rgba(0,0,0,0.3) !important;
    transform: translateX(5px) !important;
}





/* ============================================
   🎨 SIDEBAR DEL GANTT EJECUTIVO
   ============================================ */

/* Contenedor principal del sidebar del Gantt */
#premiumExecutiveGantt div[style*="width: 320px"] {
    background: linear-gradient(180deg, #0f172a, #1e293b) !important;
}

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

/* Dashboard Ejecutivo - Azul marino */
#premiumExecutiveGantt .kpi-card:first-child,
#premiumExecutiveGantt div[class*="kpi-card"]:first-child {
    border-top: 3px solid #3b82f6 !important;
}

/* Dependencias - Púrpura */
#premiumExecutiveGantt div[style*="background: rgba(155, 89, 182"] {
    border-left: 4px solid #8b5cf6 !important;
}
#premiumExecutiveGantt div[class*="dependencies"] h3,
#premiumExecutiveGantt div[style*="border-radius: 12px; padding: 18px;"]:has(> div:contains("Dependencias")) {
    border-left: 4px solid #a855f7 !important;
}

/* Ruta Crítica - Rojo */
#premiumExecutiveGantt div[style*="background: rgba(231, 76, 60"] {
    border-left: 4px solid #ef4444 !important;
}
#premiumExecutiveGantt div[class*="critical"] h3 {
    color: #ef4444 !important;
}

/* IA Predictor - Naranja */
#premiumExecutiveGantt div[style*="background: rgba(52, 152, 219"] {
    border-left: 4px solid #f59e0b !important;
}

/* Distribución de Equipo - Verde */
#premiumExecutiveGantt div[style*="background: rgba(46, 204, 113"] {
    border-left: 4px solid #10b981 !important;
}

/* ===== BOTONES DEL SIDEBAR ===== */

/* Botones de Filtros Ejecutivos - Todos con colores específicos */
#premiumExecutiveGantt button[onclick*="filterCriticalTasksPremium"] {
    background: linear-gradient(45deg, #dc2626, #ef4444) !important;
    border: none !important;
    color: white !important;
}

#premiumExecutiveGantt button[onclick*="filterDelayedTasksPremium"] {
    background: linear-gradient(45deg, #ea580c, #f97316) !important;
    border: none !important;
    color: white !important;
}

#premiumExecutiveGantt button[onclick*="filterByTeamPremium"] {
    background: linear-gradient(45deg, #7e22ce, #a855f7) !important;
    border: none !important;
    color: white !important;
}

#premiumExecutiveGantt button[onclick*="filterByBudgetPremium"] {
    background: linear-gradient(45deg, #059669, #10b981) !important;
    border: none !important;
    color: white !important;
}

#premiumExecutiveGantt button[onclick*="showAllTasksPremium"] {
    background: linear-gradient(45deg, #0284c7, #38bdf8) !important;
    border: none !important;
    color: white !important;
}

/* Botones de Gestión de Dependencias */
#premiumExecutiveGantt button[onclick*="openDependencyCreator"] {
    background: linear-gradient(45deg, #7e22ce, #a855f7) !important;
    border: none !important;
    color: white !important;
}

#premiumExecutiveGantt button[onclick*="markAsCriticalPath"] {
    background: linear-gradient(45deg, #dc2626, #ef4444) !important;
    border: none !important;
    color: white !important;
}

#premiumExecutiveGantt button[onclick*="clearAllDependencies"] {
    background: linear-gradient(45deg, #475569, #64748b) !important;
    border: none !important;
    color: white !important;
}

/* Botón Ejecutar Análisis Predictivo */
#premiumExecutiveGantt button[onclick*="runAIAnalysisPremium"] {
    background: linear-gradient(45deg, #ea580c, #f97316) !important;
    border: none !important;
    color: white !important;
}

/* ===== EFECTOS HOVER ===== */
#premiumExecutiveGantt button[class*="premium-btn"]:hover,
#premiumExecutiveGantt button[onclick*="filter"]:hover,
#premiumExecutiveGantt button[onclick*="openDependencyCreator"]:hover,
#premiumExecutiveGantt button[onclick*="markAsCriticalPath"]:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.1) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,0.3) !important;
}

/* ===== TÍTULOS DE SECCIONES ===== */
#premiumExecutiveGantt .kpi-card h3,
#premiumExecutiveGantt div[style*="font-weight: bold;"] {
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
}

/* Dashboard Ejecutivo - título */
#premiumExecutiveGantt .kpi-card:first-child h3 {
    color: #3b82f6 !important;
}

/* Dependencias - título */
#premiumExecutiveGantt div[style*="background: rgba(155, 89, 182"] h3 {
    color: #a855f7 !important;
}

/* Ruta Crítica - título */
#premiumExecutiveGantt div[style*="background: rgba(231, 76, 60"] h3 {
    color: #ef4444 !important;
}

/* IA Predictor - título */
#premiumExecutiveGantt div[style*="background: rgba(52, 152, 219"] h3 {
    color: #f59e0b !important;
}

/* Distribución de Equipo - título */
#premiumExecutiveGantt div[style*="background: rgba(46, 204, 113"] h3 {
    color: #10b981 !important;
}

/* Filtros Ejecutivos - título */
#premiumExecutiveGantt div[style*="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;"]:first-child h3 {
    color: #fbbf24 !important;
}

/* Gestión de Dependencias - título */
#premiumExecutiveGantt div[style*="display: flex; flex-direction: column; gap: 10px;"]:first-child h3 {
    color: #a855f7 !important;
}