/* ==========================================================================
   STYLES.CSS - Archivo principal que importa todos los módulos CSS
   Fecha: 06/10/2025
   Objetivo: Punto de entrada único para todos los estilos modularizados
   ========================================================================== */

/* Importar todos los módulos CSS en orden de cascada */
@import url('base.css');
@import url('layout.css');
@import url('components.DTzN3rz5.css');
@import url('utilities.css');
@import url('themes.css');

/* ==========================================================================
   ESTILOS ESPECÍFICOS DE LA APLICACIÓN
   ========================================================================== */

/* Estados específicos de la aplicación */
.routine-completed {
  background-color: var(--color-success);
  color: var(--color-text-inverse);
  animation: pulse 2s infinite;
}

/* Estados de audio */
.audio-enabled {
  border-color: var(--color-success);
  background-color: rgba(40, 167, 69, 0.1);
}

.audio-disabled {
  border-color: var(--color-danger);
  background-color: rgba(220, 53, 69, 0.1);
}

/* Estados de ejercicio activo */
.exercise-active {
  border-left: var(--border-width-thick) solid var(--color-exercise);
  background-color: rgba(220, 53, 69, 0.05);
}

/* Estados de preparación activa */
.preparation-active {
  border-left: var(--border-width-thick) solid var(--color-preparation);
  background-color: rgba(23, 162, 184, 0.05);
}

/* Estados de descanso activo */
.rest-active {
  border-left: var(--border-width-thick) solid var(--color-rest);
  background-color: rgba(40, 167, 69, 0.05);
}

/* ==========================================================================
   ANIMACIONES ESPECÍFICAS DE LA APLICACIÓN
   ========================================================================== */

@keyframes countdown {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.countdown-animation {
  animation: countdown 1s ease-in-out infinite;
}

@keyframes exercise-progress {
  0% { width: 0%; }
  100% { width: 100%; }
}

.progress-bar {
  height: 4px;
  background-color: var(--color-gray-200);
  border-radius: var(--border-radius-full);
  overflow: hidden;
  margin-top: var(--space-sm);
}

.progress-bar__fill {
  height: 100%;
  border-radius: var(--border-radius-full);
  animation: exercise-progress linear;
}

.progress-bar__fill--preparation {
  background-color: var(--color-preparation);
}

.progress-bar__fill--exercise {
  background-color: var(--color-exercise);
}

.progress-bar__fill--rest {
  background-color: var(--color-rest);
}

/* ==========================================================================
   MEJORAS DE ACCESIBILIDAD ESPECÍFICAS
   ========================================================================== */

/* Mejorar contraste para usuarios con baja visión */
.high-contrast-mode {
  --color-text-primary: #000000;
  --color-text-secondary: #000000;
  --color-border: #000000;
  --border-width-thin: 2px;
  --border-width-medium: 3px;
  --border-width-thick: 4px;
}

/* Soporte para lectores de pantalla */
.screen-reader-announcement {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   RESPONSIVE ADAPTACIONES ESPECÍFICAS
   ========================================================================== */

@media (max-width: 320px) {
  /* Optimizaciones para pantallas muy pequeñas */
  .container {
    padding: var(--space-sm);
    margin: var(--space-xs);
  }

  .btn {
    font-size: var(--font-size-xs);
    padding: var(--space-xs) var(--space-sm);
  }

  .timer {
    font-size: var(--font-size-lg);
    min-height: 50px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Optimizaciones para tablets en modo paisaje */
  .container {
    max-width: 600px;
  }

  .button-group {
    flex-wrap: nowrap;
  }

  .btn {
    flex: 1;
  }
}

/* ==========================================================================
   ESTADOS DE CARGA Y TRANSICIONES
   ========================================================================== */

.loading-state {
  opacity: 0.7;
  pointer-events: none;
}

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-gray-300);
  border-radius: 50%;
  border-top-color: var(--color-primary);
  animation: spin 1s ease-in-out infinite;
}

/* Transiciones suaves para cambios de estado */
.state-transition {
  transition: all var(--transition-normal);
}

/* ==========================================================================
   ESTILOS DE DEBUG (solo para desarrollo)
   ========================================================================== */

.debug-outline * {
  outline: 1px solid red !important;
}

.debug-grid {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}