/**
 * Styles.css - Estilos Globales y Compartidos
 * Solo contiene variables, estilos base y utilidades globales
 * Los estilos específicos de widgets están en css/widgets/
 */

/* ==================== DESIGN TOKENS ==================== */

:root {
    /* Colores Base */
    --primary-color: #dc2626;
    --secondary-color: #991b1b;
    --bg-color: #f3f4f6;
    --text-color: #111827;

    /* Text Hierarchy (Light Mode) */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --text-disabled: #d1d5db;

    /* Backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-overlay: rgba(243, 244, 246, 0.82);

    /* Cards */
    --card-bg: rgba(255, 255, 255, 0.9);
    --card-border: rgba(255, 255, 255, 0.8);
    --radius-card: 2.5rem;
    --radius-card-sm: 1.5rem;
    --shadow-card: 0 15px 40px -10px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 20px 50px -15px rgba(0, 0, 0, 0.08);

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;

    /* Component Sizes */
    --cta-size: 6.5rem;
    --logo-size: 14rem;
    --volume-height: 3.5rem;
    --social-icon: 2.5rem;

    /* Typography Scale */
    --text-hero: clamp(2rem, 5vw, 3.5rem);
    --text-title: clamp(1.25rem, 2.5vw, 1.75rem);
    --text-body: 1rem;
    --text-small: 0.875rem;
    --text-tiny: 0.75rem;
}

/* Dark Mode Tokens - SOLO MANUAL (no automático por OS) */
[data-theme="dark"] {
    /* Text Hierarchy (Dark Mode) */
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --text-disabled: #6b7280;

    /* Backgrounds */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;
    --bg-overlay: rgba(26, 26, 26, 0.88);

    /* Cards */
    --card-bg: rgba(40, 40, 40, 0.85);
    --card-border: rgba(80, 80, 80, 0.6);
    --shadow-card: 0 15px 40px -10px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 20px 50px -15px rgba(0, 0, 0, 0.5);
}

/* ==================== ESTILOS BASE ==================== */

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Touch improvements */
* {
    -webkit-tap-highlight-color: transparent;
}

button, a {
    touch-action: manipulation;
}

/* Todos los headings usan variables CSS */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

/* ==================== BACKGROUNDS ==================== */

#bgBlurContainer {
    position: fixed;
    inset: 0;
    z-index: -20;
    background-color: var(--bg-color);
    background-size: cover;
    background-position: center;
    filter: blur(80px) saturate(1.2);
    transform: scale(1.1);
    transition: background-image 0.5s ease;
}

#bgOverlay {
    position: fixed;
    inset: 0;
    z-index: -10;
    background: var(--bg-overlay);
}

/* ==================== CARDS ==================== */

.radio-card {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-card);
    transition: box-shadow 0.3s ease;
}

.radio-card:hover {
    box-shadow: var(--shadow-card-hover);
}

/* ==================== UTILIDADES GLOBALES ==================== */

.hidden {
    display: none !important;
}

.btn-primary {
    background-color: var(--primary-color);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.btn-primary:hover {
    opacity: 0.9;
}

.btn-primary:active {
    transform: scale(0.95);
}

.text-primary {
    color: var(--primary-color);
}

.bg-primary {
    background-color: var(--primary-color);
}

.border-primary {
    border-color: var(--primary-color);
}

/* Backgrounds slate */
.bg-slate-100 {
    background: rgba(241, 245, 249, 1);
}

.bg-slate-100\/50 {
    background: rgba(241, 245, 249, 0.5);
}

/* Mensajes de carga */
.loading {
    color: var(--text-tertiary);
}

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

/* Focus states - AAA Accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
    transition: outline 0.2s ease;
}

#themeToggle:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Touch targets - mínimo 44x44px */
button,
a,
input[type="range"] {
    min-width: 44px;
    min-height: 44px;
}

/* Skip link para navegación por teclado */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 9999;
}

.skip-link:focus {
    top: 0;
}

/* Reducir motion para usuarios que lo prefieran */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== FOOTER GLOBAL ==================== */

footer {
    margin-top: 2rem !important;
}

footer .radio-card {
    padding: 1.25rem !important;
}

footer .flex-col {
    gap: 1rem !important;
}

footer p {
    color: var(--text-secondary);
}

footer strong {
    color: var(--text-primary);
}

footer span {
    color: var(--text-tertiary);
}

.footer-btn {
    color: var(--text-primary);
}

.footer-text {
    color: var(--text-secondary);
}

.footer-text strong {
    color: var(--text-primary);
}

/* ==================== THEME TOGGLE ==================== */

#themeToggle {
    background: rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

#themeToggle:hover {
    background: rgba(0, 0, 0, 0.12) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

#themeIconSun {
    color: #f59e0b;
}

#themeIconMoon {
    color: #334155;
}

/* ==================== ELEMENTOS ESPECÍFICOS ==================== */

#trackTitle {
    color: var(--text-primary);
}

#trackArtist {
    color: var(--text-secondary);
}

#liveStatus {
    font-size: 10px;
}

/* ==================== DARK MODE ==================== */

[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] #bgOverlay {
    background: var(--bg-overlay);
}

[data-theme="dark"] .radio-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.3);
}

/* Headings */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary) !important;
}

/* Títulos específicos */
[data-theme="dark"] #trackTitle {
    color: var(--text-primary) !important;
}

[data-theme="dark"] #trackArtist {
    color: var(--text-secondary) !important;
}

/* Strong tags y párrafos */
[data-theme="dark"] strong {
    color: var(--text-primary) !important;
}

[data-theme="dark"] p {
    color: var(--text-secondary) !important;
}

/* Links */
[data-theme="dark"] a {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] a:hover {
    color: var(--text-primary) !important;
}

/* Clases Tailwind text-slate */
[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-slate-800 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-slate-600 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-slate-400 {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .text-slate-300 {
    color: var(--text-secondary) !important;
}

/* Backgrounds */
[data-theme="dark"] .bg-slate-100 {
    background: rgba(60, 60, 60, 0.5) !important;
}

[data-theme="dark"] .bg-slate-100\/50 {
    background: rgba(40, 40, 40, 0.3) !important;
}

/* Bordes */
[data-theme="dark"] .border-slate-200\/60 {
    border-color: rgba(80, 80, 80, 0.4) !important;
}

/* Loading */
[data-theme="dark"] .loading {
    color: var(--text-tertiary) !important;
}

/* Live status */
[data-theme="dark"] #liveStatus {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.3);
}

/* Footer */
[data-theme="dark"] .site-footer .radio-card {
    background: var(--card-bg);
    border-color: var(--card-border);
}

[data-theme="dark"] footer p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] footer strong {
    color: var(--text-primary) !important;
}

[data-theme="dark"] footer span {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] footer .text-sm {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .footer-btn {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .footer-text {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .footer-text strong {
    color: var(--text-primary) !important;
}

[data-theme="dark"] #hostingSeparator {
    color: rgba(100, 100, 100, 0.6) !important;
}

/* Theme toggle dark mode */
[data-theme="dark"] #themeToggle {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] #themeToggle:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="dark"] #themeIconSun {
    color: #fbbf24 !important;
}

[data-theme="dark"] #themeIconMoon {
    color: #93c5fd !important;
}

/* ==================== RESPONSIVE ==================== */

/* SMALL SCREENS */
@media (min-width: 640px) {
    footer {
        margin-top: 2.5rem !important;
    }

    footer .radio-card {
        padding: 1.5rem !important;
    }

    footer .flex-col {
        gap: 1.25rem !important;
    }
}

/* MOBILE */
@media (max-width: 768px) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .radio-card {
        border-radius: 2rem !important;
        padding: 1.5rem !important;
    }

    #trackTitle {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important;
    }

    #trackArtist {
        font-size: 1rem !important;
    }

    #stationLogo {
        height: 2.5rem !important;
    }

    .btn-primary {
        width: 5rem !important;
        height: 5rem !important;
        min-height: 44px;
        min-width: 44px;
    }

    #liveStatus {
        font-size: 9px !important;
    }

    /* Widgets compactos */
    .space-y-4, .space-y-6 {
        gap: 0.75rem !important;
    }

    #eventsContainer {
        border-radius: 1.25rem !important;
    }

    /* Footer mobile */
    footer {
        margin-top: 1.5rem !important;
    }

    footer .radio-card {
        padding: 1.25rem !important;
    }

    footer .flex-col > .flex-col:first-of-type,
    footer .flex-col > .flex-row {
        display: none !important;
    }

    footer .flex-col {
        gap: 0.75rem !important;
    }

    footer img {
        height: 2rem !important;
    }

    footer p {
        font-size: 0.6875rem !important;
        line-height: 1.4 !important;
        max-width: 100% !important;
    }

    footer strong {
        display: block;
        margin-bottom: 0.25rem;
    }
}

/* EXTRA SMALL */
@media (max-width: 480px) {
    #trackTitle {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }

    .radio-card {
        padding: 1.25rem !important;
    }

    footer {
        margin-top: 1rem !important;
    }

    footer .radio-card {
        padding: 1rem !important;
    }

    footer p {
        font-size: 0.625rem !important;
    }
}