/* ============================================================================
   SISCREDI - GLASSMORPHISM EFFECTS
   Bootstrap 5.3.8 Compatible
   ============================================================================

   Sistema de efectos glassmorphism para SisCredi, diseñado para integrarse
   perfectamente con Bootstrap 5.3.8 y las variables CSS del sistema.

   FILOSOFÍA:
   - Usa variables CSS de Bootstrap (--bs-*) definidas en tokens.css
   - Efectos glassmorphism mediante backdrop-filter
   - Compatible con tema claro y oscuro (data-bs-theme)
   - Mínimo código, máxima reutilización

   ============================================================================ */

/* ----------------------------------------------------------------------------
   ESTILOS INLINE DOCUMENTADOS
   ----------------------------------------------------------------------------

   Los siguientes estilos se aplican inline en base.html para máxima flexibilidad:

   1. GRADIENTE RADIAL DE FONDO:
   ──────────────────────────────
   Aplicado en: <div> con position: fixed y z-index: -1

   background: radial-gradient(circle at top right, rgba(245, 169, 65, 0.15), transparent 50%),
               radial-gradient(circle at bottom left, rgba(67, 80, 59, 0.15), transparent 50%),
               var(--bs-body-bg);

   Colores:
   - rgba(245, 169, 65, 0.15) → --bs-primary con 15% opacidad (golden yellow)
   - rgba(67, 80, 59, 0.15) → --bs-secondary con 15% opacidad (verde oliva)
   - var(--bs-body-bg) → #f7f2e4 (beige) de tokens.css


   2. CARD CON GLASSMORPHISM:
   ──────────────────────────
   Aplicado en: .card con border-0 y shadow-sm

   background-color: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);

   Efecto: Card semi-transparente con desenfoque del fondo

   ---------------------------------------------------------------------------- */


/* ============================================================================
   CLASES HELPER REUTILIZABLES (OPCIONALES)
   ============================================================================ */

/**
 * .glass-effect
 * ─────────────
 * Aplica efecto glassmorphism estándar con fondo blanco semi-transparente
 *
 * USO:
 * <div class="card glass-effect">...</div>
 *
 * COMPATIBILIDAD:
 * - Funciona con cualquier elemento Bootstrap (.card, .modal-content, etc.)
 * - Se adapta automáticamente al tema (light/dark)
 */
.glass-effect {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari support */
}

/**
 * .glass-effect-dark
 * ──────────────────
 * Versión oscura del efecto glassmorphism para tema dark
 *
 * USO:
 * <div class="card glass-effect-dark" data-bs-theme="dark">...</div>
 *
 * COMPATIBILIDAD:
 * - Usa color de fondo oscuro con 90% opacidad
 * - Mismo nivel de blur que la versión light
 */
.glass-effect-dark {
  background-color: rgba(31, 41, 55, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari support */
}

/**
 * .glass-effect-strong
 * ────────────────────
 * Efecto glassmorphism más intenso con mayor desenfoque
 *
 * USO:
 * <div class="modal-content glass-effect-strong">...</div>
 *
 * APLICACIÓN:
 * - Modales que requieren mayor separación del fondo
 * - Elementos flotantes importantes
 */
.glass-effect-strong {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/**
 * .glass-effect-subtle
 * ────────────────────
 * Efecto glassmorphism sutil con menor desenfoque
 *
 * USO:
 * <div class="card glass-effect-subtle">...</div>
 *
 * APLICACIÓN:
 * - Cards secundarios
 * - Elementos que no requieren tanto énfasis
 */
.glass-effect-subtle {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}


/* ============================================================================
   EFECTO GLASSMORPHISM DE DOBLE CAPA (BASE.HTML)
   ============================================================================

   Sistema de doble capa usado en base.html para crear un efecto de "marco"
   con glassmorphism:

   - Capa exterior: Fondo semi-transparente con blur intenso (10% opacidad)
   - Capa interior: Fondo opaco con bordes redondeados (95% opacidad)

   El margen entre capas crea un efecto visual de marco glassmorphism alrededor
   del contenido principal.
   ============================================================================ */

/**
 * .glass-main-container
 * ─────────────────────
 * Capa exterior del efecto de doble capa
 *
 * USO:
 * <div class="card border-0 shadow-lg glass-main-container">
 *   <div class="glass-inner-layer"></div>
 *   <div class="card-body position-relative z-2">...</div>
 * </div>
 *
 * CARACTERÍSTICAS:
 * - Fondo 10% transparente con blur de 20px
 * - Crea la capa glassmorphism exterior
 * - Debe tener position: relative para el posicionamiento absoluto de .glass-inner-layer
 */
.glass-main-container {
  background-color: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  position: relative;
}

/**
 * .glass-inner-layer
 * ──────────────────
 * Capa interior del efecto de doble capa
 *
 * USO:
 * Se coloca dentro de .glass-main-container como primer hijo
 *
 * CARACTERÍSTICAS:
 * - Fondo opaco (95% opacidad) usando --bs-body-bg
 * - Position absolute para cubrir el contenedor dejando margen
 * - El margen crea el efecto de "marco" glassmorphism
 * - z-index: 1 para estar detrás del contenido pero sobre el fondo
 */
.glass-inner-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bs-body-bg);
  opacity: 0.95;
  border-radius: var(--bs-border-radius);
  z-index: 1;
  margin: 0.5rem; /* Mobile: 0.5rem (8px) */
}

/* Margen responsivo para la capa interior */
@media (min-width: 768px) {
  .glass-inner-layer {
    margin: 0.75rem; /* Tablet: 0.75rem (12px) */
  }
}

@media (min-width: 992px) {
  .glass-inner-layer {
    margin: 1rem; /* Desktop: 1rem (16px) */
  }
}


/* ============================================================================
   SOPORTE PARA NAVEGADORES SIN BACKDROP-FILTER
   ============================================================================ */

/**
 * Fallback para navegadores que no soportan backdrop-filter
 * Se aplica automáticamente cuando backdrop-filter no está disponible
 */
@supports not (backdrop-filter: blur(10px)) {
  .glass-effect,
  .glass-effect-dark,
  .glass-effect-strong,
  .glass-effect-subtle,
  .glass-main-container {
    background-color: rgba(255, 255, 255, 1); /* Fondo opaco en fallback */
  }

  .glass-effect-dark {
    background-color: rgba(31, 41, 55, 1);
  }
}


/* ============================================================================
   TEMA OSCURO (data-bs-theme="dark")
   ============================================================================ */

/**
 * Adaptación automática de .glass-effect al tema oscuro
 * Usa las variables CSS de Bootstrap definidas en tokens.css
 */
[data-bs-theme="dark"] .glass-effect {
  background-color: rgba(31, 41, 55, 0.9);
}

[data-bs-theme="dark"] .glass-effect-strong {
  background-color: rgba(31, 41, 55, 0.95);
}

[data-bs-theme="dark"] .glass-effect-subtle {
  background-color: rgba(31, 41, 55, 0.8);
}

/**
 * Adaptación del efecto de doble capa para tema oscuro
 */
[data-bs-theme="dark"] .glass-main-container {
  background-color: rgba(31, 41, 55, 0.1) !important;
}


/* ============================================================================
   PRINT STYLES
   ============================================================================ */

/**
 * Desactivar efectos glassmorphism en impresión
 * Los efectos de desenfoque no se reproducen bien en papel
 */
@media print {
  .glass-effect,
  .glass-effect-dark,
  .glass-effect-strong,
  .glass-effect-subtle,
  .glass-main-container {
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .glass-inner-layer {
    opacity: 1 !important;
  }
}


/* ============================================================================
   NOTAS TÉCNICAS
   ============================================================================

   COMPATIBILIDAD NAVEGADORES:
   - Chrome/Edge: ✅ Soporte completo
   - Firefox: ✅ Soporte completo desde v70
   - Safari: ✅ Soporte completo con prefijo -webkit-
   - Opera: ✅ Soporte completo
   - IE11: ❌ No soportado (fallback a fondo opaco)

   PERFORMANCE:
   - backdrop-filter es costoso en rendimiento
   - Limitar uso a elementos principales (cards, modals)
   - Evitar aplicar a elementos con scroll rápido

   ACCESIBILIDAD:
   - Asegurar contraste suficiente en textos sobre fondos glassmorphism
   - Usar colores de Bootstrap que ya cumplen WCAG (var(--bs-body-color))

   MANTENIMIENTO:
   - Este archivo debe permanecer mínimo
   - Para nuevos efectos, considerar inline styles primero
   - Solo agregar clases si se reutilizan 3+ veces

   ============================================================================ */


/* ============================================================================
   GRADIENTE DE FONDO (LIGHT/DARK MODE)
   ============================================================================ */

/**
 * .sc-background-gradient
 * ────────────────────────
 * Fondo con gradiente radial que se adapta automáticamente al tema
 *
 * LIGHT MODE:
 * - Centro: verde oscuro (--bs-primary-text-emphasis: #313f28)
 * - Borde: beige (--bs-body-bg: #f7f2e4)
 * - Efecto: Gradiente suave del centro hacia los bordes
 *
 * DARK MODE:
 * - Fondo uniforme: gris oscuro (--bs-body-bg: #1f2937)
 * - Efecto: Color plano sin gradiente para mantener consistencia visual
 *
 * USO:
 * <div class="position-fixed top-0 end-0 bottom-0 start-0 z-n1 sc-background-gradient"></div>
 */
.sc-background-gradient {
  background: radial-gradient(125% 125% at 50% 10%, var(--bs-primary-text-emphasis) 35%, var(--bs-body-bg) 100%);
}

/**
 * En dark mode, usamos el mismo color para ambos puntos del gradiente
 * creando así un fondo plano uniforme
 */
[data-bs-theme="dark"] .sc-background-gradient {
  background: var(--bs-body-bg);
}

/* ============================================================================
   CLICK GUARD - Estado de protección contra doble-clic
   ============================================================================ */

.sc-click-guarded {
  opacity: 0.75;
  cursor: wait !important;
  pointer-events: none;
}

.sc-click-guarded .sc-spinner {
  vertical-align: middle;
}