/* app/static/css/styles.css - Versión Mejorada */

/* ==========================================================================
   1. Variables de Diseño (Paleta de Colores y Estilos Base)
   ========================================================================== */
:root {
  --color-background: #111827; /* Un azul muy oscuro */
  --color-surface: #1F2937;    /* Un gris azulado para tarjetas */
  --color-primary: #36d572;    /* #10B981 Verde Esmeralda: vibrante pero elegante */
  --color-secondary: #8B5CF6;  /* Violeta: para acentos secundarios */
  --color-danger: #EF4444;     /* Rojo para alertas */
  
  --color-text-primary: #F9FAFB;   /* Blanco hueso para texto principal */
  --color-text-secondary: #9CA3AF; /* Gris claro para texto secundario */
  
  --color-border: rgba(255, 255, 255, 0.1); /* Borde sutil */

  --border-radius-base: 0.75rem; /* 12px */
  --shadow-base: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   2. Estilos Generales y Utilidades
   ========================================================================== */
body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }


.animate-float { animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.neon-glow {
  text-shadow: 0 0 5px #39ff14, 0 0 10px #39ff14, 0 0 20px #39ff14;
  box-shadow: 0 0 5px #39ff14, 0 0 20px #39ff14 inset;
}
.neon-gogo {
  text-shadow: 1px 0 1px #39ff14, 0 0 1px #39ff14, 0 0 50px #39ff14;
}
/* ==========================================================================
   3. Estilos del Calendario (FullCalendar) - MEJORADO
   ========================================================================== */

/* Contenedor principal del calendario */
#calendar {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-base);
  padding: 1rem;
  box-shadow: var(--shadow-base);
  color: var(--color-text-primary);
}

/* Título (Mes y Año) */
.fc-toolbar-title {
  color: var(--color-text-primary);
  font-size: 1.5rem;
}

/* Botones (Prev, Next, Mes, Semana) */
.fc-button {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-secondary) !important;
  font-weight: 600;
  text-transform: none;
  transition: background-color 0.2s, color 0.2s;
}

.fc-button:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--color-text-primary) !important;
}

/* Botón activo (la vista actual) */
.fc-button-primary:not(:disabled):active, 
.fc-button-primary:not(:disabled).fc-button-active {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-background) !important;
}

/* Celdas de los días */
.fc-daygrid-day {
  border: 1px solid var(--color-border);
  transition: background-color 0.2s;
}

.fc-daygrid-day:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Número del día */
.fc-daygrid-day-number {
    color: var(--color-text-secondary);
}

/* Día de hoy */
.fc-day-today {
  background-color: rgba(16, 185, 129, 0.1) !important;
  border-bottom: 2px solid var(--color-primary) !important;
}
/* Cambia el color de los días de la semana (Lun, Mar, Mié...) */
.fc-col-header-cell-cushion {
  color: var(--color-background);
  font-weight: 600;
}

/* --- Estilos base para las tarjetas de evento --- */
.fc-event-main-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 1px 2px; /* Reducimos aún más el padding */
  width: 100%;
  overflow: hidden;
}

.fc-event-title-container {
  flex-grow: 1;
  flex-shrink: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 2px; /* Pequeño espacio entre título e íconos */
  font-size: 0.7rem; /* CAMBIO: Título un poco más pequeño en general */
}

.fc-event-icons {
  display: flex;
  gap: 2px; /* Reducimos el gap entre iconos */
  flex-shrink: 0;
}

.fc-event-icon {
  width: 20px; /* CAMBIO: Iconos más pequeños */
  height: 20px;
  object-fit: contain;
}

/* Oculta los íconos en la vista de "lista" (listWeek) */
.fc-list-event .fc-event-icons {
  display: none;
}

/* --- ADAPTACIÓN ESPECÍFICA PARA MÓVILES (PANTALLAS PEQUEÑAS) --- */
@media (max-width: 767px) { /* Esto se aplica en pantallas de hasta 767px de ancho (móvil) */
    .fc-event-main-content {
        flex-direction: row; /* Aseguramos que siempre estén en fila */
        justify-content: center; /* Centramos el contenido */
        padding: 0 1px;
    }

    .fc-event-title-container {
        display: none; /* CAMBIO CLAVE: Ocultamos el título en vista de día móvil */
    }

    .fc-event-icons {
        gap: 0; /* Sin espacio entre iconos si solo hay uno */
        justify-content: center; /* Centra el icono único */
        width: 100%; /* El contenedor de iconos ocupa todo el ancho */
    }
    
    .fc-event-icon {
        width: 20px; /* Hacemos el icono individual un poco más grande para que se vea */
        height: 20px;
    }
}

/* ======================================================
   == ¡AQUÍ ESTÁ LA MAGIA! - Colores de Eventos Corregidos ==
   ====================================================== */

/* Eventos en las vistas de MES y SEMANA (verdes) */
.fc-daygrid-event, .fc-timegrid-event {
  background-color: var(--color-primary) !important; /* Verde Esmeralda */
  border: none !important;
  border-radius: 4px;
  font-weight: 600;
  padding: 4px 6px;
  transition: transform 0.2s, filter 0.2s;
}

.fc-daygrid-event:hover, .fc-timegrid-event:hover {
  transform: translateY(-2px);
  filter: brightness(1.2);
}

/* Puntos de los eventos en la vista de LISTA (violetas) */
.fc-list-event-dot {
  border-color: var(--color-secondary) !important; /* Violeta */
}

/* Título del evento en la vista de LISTA */
.fc-list-event-title a {
  color: var(--color-text-primary) !important;
}

.fc-list-event:hover td {
  background-color: rgba(139, 92, 246, 0.1) !important; /* Hover violeta sutil */
}

/* ==========================================================================
   4. Media Queries para Responsividad (Sin cambios)
   ========================================================================== */
@media (max-width: 640px) {
  #calendar {
    font-size: 0.8rem;
    padding: 0.5rem;
  }
  .fc-toolbar {
    flex-direction: column;
    gap: 0.75rem;
  }
  .fc-toolbar-chunk {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
  }
  .fc-button {
    font-size: 0.75rem !important;
    padding: 6px 8px !important;
  }
}

/* ==========================================================================
   5. Animaciones Personalizadas
   ========================================================================== */

.animate-spin-slow {
  animation: spin 3s linear infinite reverse;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}