/* ========================================
  ARCHIVO: estilos.css
  DESCRIPCIÓN: Estilos específicos para FullCalendar, formularios y componentes especiales
  OBJETIVO: Personalizar la librería FullCalendar y otros elementos únicos del proyecto
   ======================================== */

/* ======================================
  SECTION 1: FULLCALENDAR BASE
  Estilos generales para el calendario
   ====================================== */

/* Contenedor principal del calendario */
.fc {
  /* Fondo con efecto glassmorphism */
  background-color: var(--surface-color);
  
  /* Efecto de desenfoque para vidrio */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  
  /* Borde sutil glassmorphism */
  border: var(--glass-border);
  
  /* Bordes redondeados */
  border-radius: var(--border-radius-lg);
  
  /* Relleno interno */
  padding: 1.5rem;
  
  /* Sombra elegante */
  box-shadow: var(--glass-shadow);
  
  /* Color del texto */
  color: var(--text-main);
  
  /* Usar la fuente del proyecto */
  font-family: var(--font-family);
}

/* ======================================
  SECTION 2: BORDERS DE FULLCALENDAR
  Personalizar bordes de tabla y celdas
   ====================================== */

/* Bordes de tabla, celdas y grilla */
.fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid {
  /* Color de borde muy sutil (glass effect) */
  border-color: rgba(255, 255, 255, 0.05);
}

/* ======================================
  SECTION 3: TITULO DEL CALENDARIO
  Personalizar el título del mes/semana
   ====================================== */

/* Título que muestra el mes/semana actual */
.fc .fc-toolbar-title {
  /* Color principal del texto */
  color: var(--text-main);
  
  /* Peso de fuente muy bold */
  font-weight: 700;
}

/* ======================================
  SECTION 4: BOTONES DEL CALENDARIO
  Personalizar botones (prev, next, today, vistas)
   ====================================== */

/* Todos los botones primarios de FullCalendar */
.fc .fc-button-primary {
  /* Fondo semitransparente blanco */
  background-color: rgba(255, 255, 255, 0.05) !important;
  
  /* Borde sutil */
  border: 1px solid var(--border-color) !important;
  
  /* Texto principal */
  color: var(--text-main) !important;
  
  /* Efecto glassmorphism en botones */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  
  /* Bordes redondeados */
  border-radius: var(--border-radius) !important;
  
  /* Transición suave */
  transition: all var(--transition-normal);
  
  /* Sin sombra por defecto */
  box-shadow: none !important;
  
  /* Convertir botón a minúsculas */
  text-transform: capitalize;
}

/* Estado hover en botones del calendario */
.fc .fc-button-primary:hover {
  /* Fondo más opaco */
  background-color: rgba(255, 255, 255, 0.1) !important;
  
  /* Borde sin cambios */
  border-color: var(--border-color) !important;
  
  /* Texto sin cambios */
  color: var(--text-main) !important;
  
  /* Levantamiento visual */
  transform: translateY(-1px);
}

/* Botones activos o clickeados */
.fc .fc-button-primary:not(:disabled):active, 
.fc .fc-button-primary:not(:disabled).fc-button-active {
  /* Fondo azul con transparencia */
  background-color: rgba(59, 130, 246, 0.15) !important;
  
  /* Borde azul */
  border-color: var(--primary-color) !important;
  
  /* Texto azul */
  color: var(--primary-color) !important;
  
  /* Sombra azul alrededor */
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.2) !important;
}

/* ======================================
  SECTION 5: CELDAS DEL CALENDARIO
  Personalizar números de día y encabezados
   ====================================== */

/* Número del día y encabezado de columna */
.fc .fc-daygrid-day-number, .fc .fc-col-header-cell-cushion {
  /* Color del texto */
  color: var(--text-main);
  
  /* Sin decoración de enlace */
  text-decoration: none;
}

/* Día actual (hoy) */
.fc .fc-day-today {
  /* Fondo ligeramente resaltado */
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ======================================
  SECTION 6: EVENTOS EN CALENDARIO
  Personalizar apariencia de eventos (actividades)
   ====================================== */

/* Evento general en el calendario */
.fc-event {
  /* Sin borde */
  border: none;
  
  /* Bordes redondeados */
  border-radius: 4px;
  
  /* Padding interno pequeño */
  padding: 0.1rem 0.3rem;
  
  /* Texto semibold */
  font-weight: 500;
  
  /* Sombra sutil bajo evento */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  
  /* Transición para transform */
  transition: transform 0.2s;
}

/* Evento al pasar el ratón */
.fc-event:hover {
  /* Ligeramente más grande */
  transform: scale(1.02);
  
  /* Cursor de puntero */
  cursor: pointer;
}

/* ======================================
  SECTION 7: VISTA LIST (LISTA) DEL CALENDARIO
  Personalizar tabla de eventos listados
   ====================================== */

/* Prevenir que eventos en lista cambien tamaño al hover */
.fc .fc-list-event:hover {
  transform: none !important;
}

/* Fondo de la lista */
.fc-theme-standard .fc-list {
  background: transparent !important;
}

/* Encabezado de lista (ejemplo: "Tuesday, January 14") */
.fc .fc-list-day th {
  /* Fondo oscuro sin el blanco nativo */
  background-color: var(--bg-color) !important;
}

/* Texto del día en la lista */
.fc .fc-list-day-cushion {
  /* Fondo color superficie hover */
  background-color: var(--surface-hover) !important;
  
  /* Texto azul primario */
  color: var(--primary-color) !important;
  
  /* Muy bold */
  font-weight: 600;
  
  /* Padding generoso */
  padding: 0.8rem 1rem !important;
}

/* Bordes de tabla en vista lista */
.fc .fc-list-table td {
  border-color: var(--border-color) !important;
}

/* Títulos de evento en vista lista */
.fc .fc-list-event-title {
  color: var(--text-muted) !important;
}

/* Tiempo del evento en vista lista */
.fc .fc-list-event-time {
  color: var(--primary-color) !important;
}

/* Fila de evento al pasar el ratón */
.fc .fc-list-event:hover td {
  background-color: var(--surface-hover) !important;
}

/* Mensaje de "no events" en lista vacía */
.fc .fc-list-empty {
  background-color: transparent !important;
  color: var(--text-muted) !important;
}

/* ======================================
  SECTION 8: LISTA DE CHECKBOXES
  Para seleccionar múltiples actividades en hitos
   ====================================== */

/* Contenedor de checkboxes */
.checkbox-list {
  /* Altura máxima antes de scroll */
  max-height: 200px;
  
  /* Permitir scroll vertical */
  overflow-y: auto;
  
  /* Fondo oscuro */
  background-color: var(--bg-color);
  
  /* Borde sutil */
  border: 1px solid var(--border-color);
  
  /* Bordes redondeados */
  border-radius: var(--border-radius);
  
  /* Relleno interno */
  padding: 0.5rem;
}

/* Cada item del checkbox */
.checkbox-item {
  /* Alineación: checkbox y texto en línea */
  display: flex;
  align-items: center;
  
  /* Espacio entre checkbox y texto */
  gap: 0.5rem;
  
  /* Padding interno */
  padding: 0.4rem;
}

/* ======================================
  SECTION 9: ESTADÍSTICAS DEL DASHBOARD
  Estilos para números grandes de estadísticas
   ====================================== */

/* Encabezado de estadística (ej: "Proyectos Activos") */
.grid-fluid h3 {
  /* Color de texto muted */
  color: var(--text-muted);
  
  /* Tamaño pequeño */
  font-size: 0.9rem;
  
  /* Mayúsculas */
  text-transform: uppercase;
  
  /* Sin margen arriba */
  margin: 0 0 0.5rem;
}

/* Estadística de PROYECTOS */
#stat-projects {
  /* Tamaño muy grande */
  font-size: 2.5rem;
  
  /* Muy bold */
  font-weight: 700;
  
  /* Color azul primario */
  color: var(--primary-color);
  
  /* Sin margen */
  margin: 0;
}

/* Estadística de ACTIVIDADES */
#stat-activities {
  /* Tamaño muy grande */
  font-size: 2.5rem;
  
  /* Muy bold */
  font-weight: 700;
  
  /* Color naranja acento */
  color: var(--accent-color);
  
  /* Sin margen */
  margin: 0;
}

/* Estadística de RECURSOS HUMANOS */
#stat-hr {
  /* Tamaño muy grande */
  font-size: 2.5rem;
  
  /* Muy bold */
  font-weight: 700;
  
  /* Color verde éxito */
  color: var(--success-color);
  
  /* Sin margen */
  margin: 0;
}

/* ======================================
  SECTION 10: UTILIDADES VARIAS
  Estilos adicionales para elementos específicos
   ====================================== */

/* Contenedor de página (para overflow) */
.page_content {
  max-width: 100%;
}

/* Contenedor del calendario */
.calendar {
  /* Ancho completo */
  width: 100%;
  
  /* Alto mínimo para que se vea bien */
  min-height: 700px;
}

/* Grupo de formulario en algunos contextos */
.form-group {
  /* Que cada grupo ocupe espacio flexible */
  flex: 1;
}

/* NOTA: Hay un error de sintaxis aquí en el CSS original:
  .btn btn btn-primary { ... }
  Debería ser .btn.btn-primary { ... }
   Este selector nunca funcionaría */

/* ========================================
  NOTAS DE IMPLEMENTACIÓN:
  
  1. FULLCALENDAR: Es una librería externa, por lo que
      necesitamos sobrescribir sus estilos con !important
  
  2. VISTA LISTA: FullCalendar ofrece múltiples vistas
      (mes, semana, día, lista) que necesitan personalizarse
  
  3. EVENTOS: Los eventos son elementos coloreados según
      su estado (pendiente, en progreso, terminado)
  
  4. CHECKBOXES: La lista de checkboxes es custom-hecha
      para seleccionar actividades en hitos
  
  5. ESTADÍSTICAS: Los números grandes usan colores
      diferentes para diferenciar tipos de datos
   ======================================== */