/**
 * ==============================================================================
 * CENTRO DIGITAL CONTINENTAL — FUNCIONAL COMPONENTS & FOCUS ACCESSIBILITY
 * File: css/components.css
 * Standard: Public Component Styles & Accessible Focus Contexts
 * ==============================================================================
 */

/* ==============================================================================
   1. SISTEMA DE FOCO ACCESIBLE (FOCUS-VISIBLE 3:1 MINIMUM CONTRAST)
   ============================================================================== */
/* Indicador Predeterminado / Contexto Oscuro */
:focus-visible {
  outline: 2px solid var(--color-focus-dark);
  outline-offset: 3px;
}

/* Contexto Claro */
.focus-context-light :focus-visible,
.focus-light:focus-visible {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 3px;
}

/* Contexto Oscuro Explícito */
.focus-context-dark :focus-visible,
.focus-dark:focus-visible {
  outline: 2px solid var(--color-focus-dark);
  outline-offset: 3px;
}

/* ==============================================================================
   2. RECURSOS DE MARCA — FRANJAS UC (ADAPTACIÓN SIMPLIFICADA)
   ============================================================================== */
.uc-stripe-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.uc-stripe-bar .stripe-1,
.uc-stripe-bar .stripe-2,
.uc-stripe-bar .stripe-3 {
  height: 10px;
  background-color: var(--uc-purple);
  border-radius: 0px;
  transition: background-color 300ms ease;
}

/* En slides o secciones con fondo morado/oscuro, las 3 líneas inferiores son de color blanco */
#inicio.hero-theme-dark .uc-stripe-bar .stripe-1,
#inicio.hero-theme-dark .uc-stripe-bar .stripe-2,
#inicio.hero-theme-dark .uc-stripe-bar .stripe-3,
.stripe-bar-white .stripe-1,
.stripe-bar-white .stripe-2,
.stripe-bar-white .stripe-3 {
  background-color: #FFFFFF !important;
}

/* Énfasis de botón en slides de color morado/oscuro: Relleno Negro nítido */
#inicio.hero-theme-dark .hero-tab.active {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.8) !important;
}

#inicio.hero-theme-dark .hero-tab.active .tab-badge {
  background-color: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

#inicio.hero-theme-dark .hero-tab.active .tab-text {
  color: #FFFFFF !important;
}

/* ==============================================================================
   3. COMPONENTES DE BOTÓN E INTERFAZ NORMALIZADOS
   ============================================================================== */
.btn-uc-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--uc-purple);
  color: var(--uc-white);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(90, 0, 170, 0.5);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 25px rgba(90, 0, 170, 0.45);
  cursor: pointer;
  text-decoration: none;
}

.btn-uc-primary:hover {
  background-color: var(--uc-lilac);
  border-color: var(--uc-lilac);
  transform: translateY(-2px);
  color: var(--uc-white);
}

.btn-uc-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: transparent;
  color: var(--uc-white);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.8);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-decoration: none;
}

.btn-uc-outline:hover {
  background-color: var(--uc-white);
  color: #111827;
  border-color: var(--uc-white);
}

/* ==============================================================================
   4. ADAPTACIÓN DIGITAL — GLASSMORPHISM & SUPERFICIES TRASLÚCIDAS
   ============================================================================== */
.glass-surface {
  background-color: rgba(11, 11, 16, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

@supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)) {
  .glass-surface {
    background-color: rgba(11, 11, 16, 0.65);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}

.glass-card {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.5rem;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border-color 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  border-color: rgba(145, 105, 255, 0.4);
  box-shadow: 0 10px 30px -10px rgba(90, 0, 170, 0.3);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card {
    background-color: #120826;
  }
}