/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/
Description: Hello Elementor Child Theme para el rediseño de Beat Latin (Estética de panel flotante - Magnific App Style)
Author: Wilson Hernandez
Version: 2.0.0
Template: hello-elementor
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* ==========================================================================
   1. VARIABLES MAESTRAS (Tokens de Diseño SaaS)
   ========================================================================== */
:root {
    --app-font: 'Inter', sans-serif;
    --app-bg-main: #000000;              /* Negro absoluto de fondo trasero */
    --app-bg-panel: #0d0d0e;            /* El gris casi negro del panel de Magnific */
    --app-bg-surface: #161617;          /* Componentes internos */
    --app-accent: #FF2A54;              /* Rojo Neón Beat Latin */
    --app-text-primary: #FFFFFF;
    --app-text-secondary: #8E8E93;
    --app-border: rgba(255, 255, 255, 0.05); /* Borde milimétrico sutil */
}

/* ==========================================================================
   2. ESTRUCTURA MAESTRA DE LA WEB APP (Fija sin scroll general)
   ========================================================================== */
html, body, #page {
    background-color: var(--app-bg-main) !important;
    background: var(--app-bg-main) !important;
    color: var(--app-text-primary) !important;
    font-family: var(--app-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0; padding: 0;
    height: 100vh !important;
    height: 100svh !important; /* Altura inteligente para evitar bugs en móviles */
    overflow: hidden !important; /* Congela la pantalla externa para que no baile */
}

/* El panel central flotante (Lienzo que cambia con el PJAX) */
#content {
    position: fixed !important;
    top: 16px !important;       /* Despejado del techo */
    bottom: 96px !important;    /* Deja espacio libre para que el reproductor flote abajo */
    right: 16px !important;     /* Aire en el borde derecho */
    left: 272px !important;     /* Ancho del menú (240px) + margen de aire izquierdo */
    
    /* Estética de caja flotante traslúcida */
    background-color: var(--app-bg-panel) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 14px !important; /* Bordes redondeados finos estilo SaaS */
    
    /* Scroll interno único */
    overflow-y: auto !important;
    box-sizing: border-box !important;
    padding: 30px !important;
    
    /* Animación de transición PJAX */
    transition: opacity 0.25s ease-in-out, background 0.3s ease;
    opacity: 1;
}

/* Estilizar la barra de scroll interno del panel central */
#content::-webkit-scrollbar {
    width: 6px;
}
#content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}
#content::-webkit-scrollbar-track {
    background: transparent;
}

/* Desvanecido del contenedor cuando PJAX está trayendo otro remix */
html.page-animating #content {
    opacity: 0;
}
html.page-loading #content {
    cursor: wait;
}

/* ==========================================================================
   3. TIPOGRAFÍAS, ENLACES Y COMPONENTES
   ========================================================================== */
h1, h2, h3, h4, h5, h6 { 
    font-family: var(--app-font) !important; 
    color: var(--app-text-primary) !important; 
    font-weight: 700; 
    letter-spacing: -0.02em; /* Tracking negativo estilo Magnific */
}

a { 
    color: var(--app-text-primary) !important; 
    text-decoration: none !important; 
    transition: color 0.2s ease; 
}
a:hover { 
    color: var(--app-accent) !important; 
}

.text-muted, .app-metadata { 
    color: var(--app-text-secondary) !important; 
    font-size: 0.85rem; 
}

/* Botones Premium */
.btn-apple {
    background-color: var(--app-accent) !important;
    color: #FFFFFF !important;
    font-family: var(--app-font) !important;
    font-weight: 600;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    border: none !important;
    transition: all 0.2s ease-in-out;
    display: inline-block;
}
.btn-apple:hover {
    background-color: #FA243C !important;
    transform: scale(1.02);
}

/* Carátulas de Álbumes / Remixes */
.album-cover {
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease;
}
.album-cover:hover {
    transform: scale(1.03);
}

/* Efecto Glassmorphism opcional */
.apple-glass {
    background: rgba(22, 22, 23, 0.45) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--app-border) !important;
}

/* ==========================================================================
   4. CAPA DE DISEÑO INTEGRADA PARA EASY DIGITAL DOWNLOADS (EDD)
   ========================================================================== */
#edd_checkout_form_wrap, .edd_download, .edd-submit, #edd_profile_editor_form {
    font-family: var(--app-font) !important;
}

/* Campos de Texto y Formularios */
.edd-input, .edd-select, #edd-checkout-form-wrap input[type="text"], #edd-checkout-form-wrap input[type="email"], #edd-checkout-form-wrap select {
    background-color: var(--app-bg-surface) !important;
    color: var(--app-text-primary) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-family: var(--app-font) !important;
    font-size: 0.9rem !important;
    transition: border-color 0.2s ease;
}
.edd-input:focus, #edd-checkout-form-wrap input:focus {
    border-color: var(--app-accent) !important;
    outline: none !important;
}

.edd-label {
    color: var(--app-text-secondary) !important;
    font-family: var(--app-font) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    margin-bottom: 6px !important;
}

/* Botón de Compra / Descarga de EDD convertido a estilo SaaS */
.edd-submit.button, .edd-submit.button.blue, .edd-submit.button.gray, input[type="submit"].edd-submit, a.edd-submit {
    background-color: var(--app-accent) !important;
    color: #FFFFFF !important;
    font-family: var(--app-font) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-block !important;
    text-align: center !important;
}
.edd-submit.button:hover, input[type="submit"].edd-submit:hover {
    background-color: #FA243C !important;
    transform: scale(1.02) !important;
}

/* Tablas de Carrito y Checkout */
.edd_cart_actions, #edd_checkout_cart, .edd-table {
    background-color: var(--app-bg-panel) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 8px !important;
    overflow: hidden;
    color: var(--app-text-primary) !important;
}
.edd-table th {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: var(--app-text-primary) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--app-border) !important;
    padding: 12px !important;
}
.edd-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    padding: 12px !important;
    color: var(--app-text-secondary) !important;
}

/* Alertas de Error y Éxito de EDD */
.edd_errors, .edd_success {
    background-color: rgba(255, 42, 84, 0.08) !important;
    border: 1px solid var(--app-accent) !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    padding: 15px !important;
    font-family: var(--app-font) !important;
}