/**
 * Sistema de Escalado Visual - Remeex VISA
 * Estilos CSS para 3 niveles de visualización:
 * - Compacto (70%): Vista actual, más contenido visible
 * - Normal (100%): Vista estándar, balance entre contenido y legibilidad
 * - Grande (115%): Vista ampliada, máxima legibilidad
 *
 * @version 2.0.0
 * @author Remeex Development Team
 */

/* ========================================
   VARIABLES CSS BASE
   ======================================== */

:root {
  /* Multiplicador de escala (controlado por JavaScript) */
  --display-scale-multiplier: 1;
  --font-scale-multiplier: 1;
}

/* ========================================
   MODO COMPACTO (70%) - Vista actual/default
   Mantiene el comportamiento original
   ======================================== */

html.display-scale-compact,
html[data-display-scale="compact"] {
  font-size: 60% !important;
}

/* ========================================
   MODO NORMAL (100%) - Vista estándar
   Balance entre contenido y legibilidad
   ======================================== */

html.display-scale-normal,
html[data-display-scale="normal"] {
  font-size: 85% !important;
}

/* ========================================
   MODO GRANDE (115%) - Vista ampliada
   Máxima legibilidad
   ======================================== */

html.display-scale-large,
html[data-display-scale="large"] {
  font-size: 98% !important;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS - Modo Normal
   ======================================== */

@media (max-width: 768px) {
  html.display-scale-normal,
  html[data-display-scale="normal"] {
    font-size: 80% !important;
  }
}

@media (max-width: 480px) {
  html.display-scale-normal,
  html[data-display-scale="normal"] {
    font-size: 75% !important;
  }
}

@media (max-width: 360px) {
  html.display-scale-normal,
  html[data-display-scale="normal"] {
    font-size: 72% !important;
  }
}

/* ========================================
   RESPONSIVE ADJUSTMENTS - Modo Grande
   ======================================== */

@media (max-width: 768px) {
  html.display-scale-large,
  html[data-display-scale="large"] {
    font-size: 92% !important;
  }
}

@media (max-width: 480px) {
  html.display-scale-large,
  html[data-display-scale="large"] {
    font-size: 85% !important;
  }
}

@media (max-width: 360px) {
  html.display-scale-large,
  html[data-display-scale="large"] {
    font-size: 80% !important;
  }
}

/* ========================================
   SMOOTH TRANSITIONS - Cambios suaves
   ======================================== */

html {
  transition: font-size 0.25s ease;
}

/* ========================================
   ACCESIBILIDAD
   ======================================== */

/* Respetar preferencias de usuario de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  html {
    transition: none !important;
  }
}

/* Alto contraste - Aumentar un poco más */
@media (prefers-contrast: high) {
  html.display-scale-normal,
  html[data-display-scale="normal"] {
    font-size: 90% !important;
  }

  html.display-scale-large,
  html[data-display-scale="large"] {
    font-size: 105% !important;
  }
}

/* ========================================
   PRINT - Mantener escala en impresión
   ======================================== */

@media print {
  html.display-scale-compact,
  html.display-scale-normal,
  html.display-scale-large {
    font-size: 100% !important;
  }
}

/* ========================================
   COMPATIBILIDAD CON CLASES ANTIGUAS
   (para páginas que aún usen font-scale-*)
   ======================================== */

html.font-scale-normal {
  font-size: 60% !important;
}

html.font-scale-large {
  font-size: 85% !important;
}

@media (max-width: 768px) {
  html.font-scale-large {
    font-size: 80% !important;
  }
}

@media (max-width: 480px) {
  html.font-scale-large {
    font-size: 75% !important;
  }
}

/* ========================================
   DEBUG MODE (opcional, puede ser removido)
   ======================================== */

html[data-display-scale-debug="true"]::before {
  content: "Display Scale: " attr(data-display-scale);
  position: fixed;
  top: 0;
  right: 0;
  background: rgba(26, 31, 113, 0.9);
  color: white;
  padding: 0.5rem 1rem;
  font-size: 12px;
  z-index: 999999;
  pointer-events: none;
  border-radius: 0 0 0 8px;
}