/* ============================================================
   FANOF GH - Extensión de variables de Radzen Material Theme
   ============================================================
   
   ⚠️ NO DUPLICAR estilos que Radzen ya provee.
   
   Radzen expone variables CSS como:
     --rz-primary, --rz-secondary, --rz-base-100 a --rz-base-900
     --rz-shadow-1 a --rz-shadow-10
     --rz-spacing-* para gaps/padding
   
   Usa clases utilitarias de Radzen:
     rz-p-*, rz-m-*, rz-background-color-*, rz-border-radius-*
     rz-shadow-*, rz-display-flex, rz-align-items-center, etc.
   
   Solo define aquí:
     - Extensiones de variables (overrides de tema)
     - Animaciones personalizadas
     - Layouts complejos que Radzen no cubre
   ============================================================ */

:root {
    /* Override de colores primarios (si necesitas marca custom) */
    /* --rz-primary: #5a67d8; */
    /* --rz-secondary: #ed8936; */
    
    /* Variables custom adicionales */
    --app-header-height: 64px;
    --app-sidebar-width: 280px;
    --app-rail-width: 240px;
    --app-footer-height: auto;
}

/* ============================================================
   HEADER - Altura fija + z-index para overlay
   ============================================================ */
.app-header {
    height: var(--app-header-height);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Logo clicable */
.app-logo {
    height: 40px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.app-logo:hover {
    opacity: 0.8;
}

/* ============================================================
   SIDEBAR MOBILE - Overlay con backdrop
   ============================================================ */
.mobile-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--app-sidebar-width);
    z-index: 1100;
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    cursor: pointer;
}

/* ============================================================
   LAYOUT - Rails sticky laterales (LG+)
   ============================================================ */
.rail-sticky {
    position: sticky;
    top: calc(var(--app-header-height) + 1rem);
    max-height: 80vh;      /* 80% altura ventana - ajustable */
    overflow: hidden;      /* Sin scroll interno */
}

/* Si prefieres normal (sin sticky), comenta las líneas de arriba y descomenta esto:
.rail-sticky {
    position: relative;
}
*/

/* Si prefieres sticky con scroll (actual), comenta todo y descomenta esto:
.rail-sticky {
    position: sticky;
    top: calc(var(--app-header-height) + 1rem);
    max-height: calc(100vh - var(--app-header-height) - 2rem);
    overflow-y: auto;
}
*/

/* Placeholder de publicidad (mientras no tengas ads reales) */
.ad-box {
    min-height: 250px;
    background: var(--rz-base-100);
    border: 1px dashed var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   FOOTER - Grid responsivo para columnas
   ============================================================ */
.app-footer {
    margin-top: 4rem;
    border-top: 1px solid var(--rz-base-700);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Botones sociales circulares */
.social-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.social-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
}

/* ============================================================
   HOME - Hero card con gradiente + animación LIVE
   ============================================================ */
.hero-card {
    background: linear-gradient(135deg, var(--rz-primary) 0%, var(--rz-primary-dark) 100%);
    box-shadow: var(--rz-shadow-6);
}

/* Animación de pulso para badge LIVE */
.live-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* ============================================================
   UTILIDADES - Solo si Radzen no las provee
   ============================================================ */
.center-col {
    /* Por ahora vacío, Radzen maneja todo con clases rz-* */
}

.home-grid {
    /* Grid ya manejado por RadzenRow/RadzenColumn */
}