/* ==========================================================================
   RADIO FUNDELT - PALETA ROYAL NAVY & ANTIQUE GOLD (LUXE ROYAL THEME)
   Inspirado exactamente en los colores del sello oficial de FUNDELT:
   Azul Marino Real Noche (#161b3d / #0b0e21) + Oro Antiguo (#d4af37 / #f3d37a).
   ========================================================================== */

:root {
  --color-primary: #161b3d;
  --color-primary-dark: #0c0f24;
  --color-secondary: #d4af37;
  --color-accent: #f3d37a;
  --color-dark: #070914;
  --color-light: #ffffff;
  --color-background: #0b0e21;
  --color-surface: #141938;
  --color-surface-hover: #1c234b;
  --color-text: #f8fafc;
  --color-muted: #94a3b8;
  --color-live: #dc2626;
  --color-gold-border: rgba(212, 175, 55, 0.3);
}

/* Base Body Styles - Royal Midnight Navy */
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: var(--color-background);
  background-image: 
    radial-gradient(ellipse 80% 60% at 15% 10%, rgba(212, 175, 55, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 85% 65% at 50% 25%, rgba(22, 27, 61, 0.50) 0%, transparent 80%),
    radial-gradient(ellipse 80% 60% at 85% 45%, rgba(206, 17, 38, 0.08) 0%, transparent 70%);
  background-attachment: fixed;
  color: var(--color-text);
  overflow-x: hidden;
}

/* Texto Gradiente de Oro Antiguo */
.text-gold-gradient {
  background: linear-gradient(135deg, #fce89e 0%, #d4af37 50%, #b38f2a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tarjetas de Alto Lujo y Vidrio Esmerilado (Glassmorphism Luxe) */
.card-luxe {
  background: rgba(20, 25, 56, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.2);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -5px rgba(7, 9, 20, 0.5);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-luxe:hover {
  border-color: rgba(212, 175, 55, 0.6);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -10px rgba(212, 175, 55, 0.15);
}

/* Línea de la Bandera de Colombia en la parte superior */
.colombia-flag-topbar {
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, 
    #fcd116 0%, #fcd116 50%, 
    #003893 50%, #003893 75%, 
    #ce1126 75%, #ce1126 100%
  );
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
}

/* Focus States Accessibility WCAG 2.2 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-secondary) !important;
  outline-offset: 3px !important;
}

/* Animaciones del Ecualizador Dorado */
@keyframes barBounce {
  0%, 100% { height: 4px; }
  50% { height: 24px; }
}

.equalizer-bar {
  display: inline-block;
  width: 3px;
  height: 6px;
  background-color: var(--color-secondary);
  border-radius: 2px;
  transition: height 0.2s ease;
}

.animate-equalizer .bar-1 {
  animation: barBounce 0.8s infinite ease-in-out;
}
.animate-equalizer .bar-2 {
  animation: barBounce 1.1s infinite ease-in-out 0.2s;
}
.animate-equalizer .bar-3 {
  animation: barBounce 0.7s infinite ease-in-out 0.4s;
}
.animate-equalizer .bar-4 {
  animation: barBounce 1.0s infinite ease-in-out 0.1s;
}

/* ==========================================================================
   DISCO DE ACETATO DE 33 RPM Y BRAZO DE TOCADISCOS (TONEARM)
   ========================================================================== */

@keyframes spinVinyl {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.vinyl-record {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at center, 
      #070914 0%, 
      #070914 13%, 
      #d4af37 13.5%, 
      #161b3d 14%, 
      #000000 32%, 
      #111111 33%, 
      #060606 42%, 
      #181818 43%, 
      #080808 55%, 
      #1a1a1a 56%, 
      #000000 68%, 
      #141414 69%, 
      #080808 100%
    );
  box-shadow: 
    0 0 0 2px rgba(212, 175, 55, 0.4),
    0 12px 28px rgba(0, 0, 0, 0.85),
    inset 0 0 20px rgba(255, 255, 255, 0.12);
  position: relative;
  transition: transform 0.3s ease;
}

.vinyl-record::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0%,
    transparent 38%,
    transparent 62%,
    rgba(255, 255, 255, 0.12) 100%
  );
  pointer-events: none;
}

.vinyl-record.spinning {
  animation: spinVinyl 1.818s linear infinite;
}

.vinyl-record.paused {
  animation-play-state: paused;
}

/* Disco de Acetato 33 RPM Miniatura para el Sticky Player */
.vinyl-record-mini {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at center, 
      #070914 0%, 
      #070914 13%, 
      #d4af37 14%, 
      #161b3d 15%, 
      #000000 32%, 
      #111111 33%, 
      #060606 45%, 
      #181818 46%, 
      #000000 70%, 
      #141414 71%, 
      #080808 100%
    );
  box-shadow: 
    0 0 0 1.5px rgba(212, 175, 55, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.8);
  position: relative;
  transition: transform 0.3s ease;
}

.vinyl-record-mini::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22) 0%,
    transparent 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.15) 100%
  );
  pointer-events: none;
}

.vinyl-record-mini.spinning {
  animation: spinVinyl 1.818s linear infinite;
}

.vinyl-record-mini.paused {
  animation-play-state: paused;
}

/* Ensamble del Brazo de Tocadiscos */
.tonearm-assembly {
  position: absolute;
  top: 10px;
  right: 15px;
  width: 100px;
  height: 150px;
  pointer-events: none;
  z-index: 20;
}

.tonearm-pivot {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff5d1 0%, #d4af37 60%, #4a380c 100%);
  border: 1px solid rgba(212, 175, 55, 0.8);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7), inset 0 2px 3px rgba(255, 255, 255, 0.9);
  z-index: 25;
}

.tonearm-stick {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 90px;
  height: 120px;
  transform-origin: 76px 6px;
  transform: rotate(-24deg); /* Estado levantado/pausado */
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 22;
}

.tonearm-stick.on-air {
  transform: rotate(22deg); /* Estado reproduciendo sobre los surcos */
}

/* Custom Scrollbar Royal */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0b0e21;
}
::-webkit-scrollbar-thumb {
  background: #1c234b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #d4af37;
}

/* Responsive Line Clamping */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Prefers Reduced Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}