/* ========================================
   FANOF.GH - SISTEMA DE DISEÑO GLOBAL
   ========================================
   
   Este archivo contiene estilos REUTILIZABLES en toda la aplicación.
   
   ¿Qué incluye?
   - Variables CSS (colores, espaciado, sombras)
   - Componentes reutilizables (.card, .btn, .chip, .fan, etc)
   - Layout base (.rail, .center)
   - Estilos de formularios
   - Utilidades (.mt-*, .mb-*, .p-*)
   
   ¿Cuándo usar app.css?
   - Si el componente se usa en 2+ páginas → aquí
   - Si es un estilo global (variables, reset) → aquí
   
   ¿Cuándo NO usar app.css?
   - Si el estilo es específico de un componente → [Component].razor.css
   
======================================== */

/* ========================================
   VARIABLES CSS (Design Tokens)
   ========================================
   Define los valores base del diseño que se usan en TODA la app.
   Cambiar una variable aquí afecta a todos los componentes automáticamente.
   
   Ventajas:
   - Consistencia visual en toda la app
   - Fácil de mantener (cambias un color en un solo lugar)
   - Temas dinámicos (light/dark mode en el futuro)
   
======================================== */
:root {
    /* ===== COLORES DEL BRAND ===== */
    
    /* Color principal (morado): Usado en botones primarios, links, badges */
    --color-primary: #667eea;
    
    /* Color principal oscuro: Usado en gradientes y hover states */
    --color-primary-dark: #764ba2;
    
    /* Color secundario (rojo): Usado para alertas, estados LIVE, urgente */
    --color-secondary: #f56565;
    
    /* Color de éxito (verde): Usado para estados exitosos, confirmaciones */
    --color-success: #48bb78;
    
    /* Color de advertencia (naranja): Usado para warnings, acciones intermedias */
    --color-warning: #ed8936;
    
    /* Color de error/peligro (rojo): Usado para errores, acciones destructivas */
    --color-danger: #f56565;
    
    
    /* ===== COLORES DE TEXTO ===== */
    
    /* Texto principal: Títulos, párrafos importantes */
    --color-text: #2d3748;
    
    /* Texto secundario: Subtítulos, metadatos, descripciones */
    --color-text-muted: #718096;
    
    /* Texto muy claro: Placeholders, texto deshabilitado */
    --color-text-light: #a0aec0;
    
    
    /* ===== COLORES DE FONDO ===== */
    
    /* Fondo blanco: Cards, modals, contenedores */
    --color-bg: #ffffff;
    
    /* Fondo gris claro: Fondo de la página principal */
    --color-bg-light: #f7fafc;
    
    /* Fondo gris medio: Inputs, chips, elementos desactivados */
    --color-bg-gray: #edf2f7;
    
    
    /* ===== BORDES ===== */
    
    /* Borde sutil: Cards, separadores, inputs */
    --color-border: #e2e8f0;
    
    /* Borde oscuro: Bordes más visibles cuando se necesita énfasis */
    --color-border-dark: #cbd5e0;
    
    
    /* ===== SOMBRAS (Elevación visual) ===== */
    
    /* Sombra pequeña: Hover ligero, elementos flotantes pequeños */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    
    /* Sombra media: Hover de cards, dropdowns */
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    
    /* Sombra grande: Modals, popovers */
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* Sombra extra grande: Hero cards en hover, elementos muy elevados */
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    
    
    /* ===== RADIOS DE BORDE (border-radius) ===== */
    
    /* Radio pequeño (6px): Badges, inputs pequeños, chips */
    --radius-sm: 6px;
    
    /* Radio medio (8px): Botones, cards pequeñas, inputs */
    --radius-md: 8px;
    
    /* Radio grande (12px): Cards principales, contenedores */
    --radius-lg: 12px;
    
    /* Radio extra grande (16px): Modals, hero cards */
    --radius-xl: 16px;
    
    
    /* ===== ESPACIADO CONSISTENTE ===== */
    /* Usar estas variables para margin, padding, gap asegura consistencia */
    
    --spacing-xs: 0.25rem;   /* 4px - Espacios muy pequeños */
    --spacing-sm: 0.5rem;    /* 8px - Espacios pequeños */
    --spacing-md: 1rem;      /* 16px - Espaciado base/estándar */
    --spacing-lg: 1.5rem;    /* 24px - Espacios grandes */
    --spacing-xl: 2rem;      /* 32px - Espacios extra grandes */
    --spacing-2xl: 3rem;     /* 48px - Espacios muy grandes */
    
    /* Animaciones */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-index layers */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;
}

/* ========================================
   RESET Y ESTILOS BASE
   ========================================
   Normaliza el comportamiento de los navegadores.
   Todos los elementos empiezan con un estilo consistente.
   
======================================== */

/* Box-sizing: border-box hace que padding y border 
   se incluyan en el width total del elemento.
   Sin esto, padding aumenta el tamaño total. */
* {
    box-sizing: border-box;
}

/* Estilos base del documento */
html, body {
    margin: 0;
    padding: 0;
    
    /* Fuente del sistema: Usa la fuente nativa del SO para mejor rendimiento */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    color: var(--color-text);
    background-color: var(--color-bg-light);
    
    /* Line-height 1.6 mejora la legibilidad del texto */
    line-height: 1.6;
}

/* Evita scroll horizontal no deseado */
body {
    overflow-x: hidden;
}

/* ========================================
   LAYOUT GLOBAL
   ========================================
   Rails laterales SOLO en desktop
======================================== */

.rail {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
}

/* Ocultar rails por defecto */
.rail-left,
.rail-right {
    display: none;
}

/* Mostrar SOLO en desktop ≥992px */
@media (min-width: 992px) {
    .rail-left,
    .rail-right {
        display: flex;
    }
    
    /* Rail izquierda: ads pegadas al lado izquierdo */
    .rail-left {
        align-items: flex-start;
    }
    
    /* Rail derecha: ads pegadas al lado derecho */
    .rail-right {
        align-items: flex-end;
    }
}

.center {
    padding: var(--spacing-md);
    max-width: 100%;
}

/* ========================================
   AD SLOTS - LATERALES (Desktop)
   ========================================
   Ads sticky en los laterales (formato 300x600)
======================================== */

/* Contenedor sticky de la ad lateral */
.ad-slot-sticky {
    position: static;
    width: 100%;
    max-width: 300px;  /* Ancho máximo del slot */
}

/* Sticky SOLO en desktop ≥992px */
@media (min-width: 992px) {
    .ad-slot-sticky {
        position: sticky;
        top: 20px;
        z-index: 10;
    }
}

/* Placeholder skyscraper (300x600) */
.ad-placeholder-skyscraper {
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    min-height: 600px;
    width: 100%;
    max-width: 300px;
    
    /* SIN margin auto - se alinea según el rail parent */
    margin: 0;
    
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ad-placeholder-skyscraper:hover {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%);
}

/* ========================================
   AD BANNERS - MÓVILES (Mobile/Tablet)
   ========================================
   Banners horizontales discretos (320x50 o 728x90)
======================================== */

/* Contenedor de banner móvil */
.ad-banner-mobile {
    display: block;
    width: 100%;
    margin: var(--spacing-md) 0;
}

/* Ocultar en desktop ≥992px */
@media (min-width: 992px) {
    .ad-banner-mobile {
        display: none;
    }
}

/* Banner superior (sticky top) */
.ad-banner-top {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg-light);
    padding: var(--spacing-sm) 0;
    box-shadow: var(--shadow-sm);
}

/* Banner intermedio (entre contenido) */
.ad-banner-mid {
    margin: var(--spacing-lg) 0;
}

/* Banner inferior */
.ad-banner-bottom {
    margin-top: var(--spacing-lg);
}

/* Placeholder de banner horizontal */
.ad-placeholder-banner {
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    min-height: 50px;
    max-width: 100%;
    margin: 0 auto;  /* Banners sí se centran horizontalmente */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* En tablet usar banner más grande (728x90) */
@media (min-width: 768px) and (max-width: 991px) {
    .ad-placeholder-banner {
        min-height: 90px;
        max-width: 728px;
    }
}

.ad-placeholder-banner:hover {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%);
}

/* ========================================
   AD PLACEHOLDER - CONTENIDO
======================================== */

.ad-placeholder-content {
    text-align: center;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.ad-placeholder-icon {
    font-size: 3rem;
    opacity: 0.3;
    line-height: 1;
}

.ad-placeholder-text {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.5;
}

.ad-placeholder-size {
    font-size: 0.65rem;
    font-weight: 500;
    opacity: 0.4;
    background: var(--color-bg-gray);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

/* Banner móvil: contenido inline */
.ad-placeholder-banner .ad-placeholder-content {
    flex-direction: row;
    gap: var(--spacing-sm);
}

.ad-placeholder-banner .ad-placeholder-icon {
    font-size: 1.5rem;
}

/* Ocultar rails completamente en móvil (<992px) */
@media (max-width: 991px) {
    .rail {
        display: none !important;
    }
}

/* ========================================
   CARDS (Componente reutilizable)
   ========================================
   Las cards son contenedores con borde, padding y sombra.
   Se usan en TODA la app para agrupar contenido relacionado.
   
   Ejemplos de uso: Rankings, noticias, votaciones, perfiles
   
======================================== */

.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Efecto hover: Eleva la card y añade sombra 
   translateY(-2px) sube la card 2 pixeles */
.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    border-color: var(--color-primary);
}

.card:last-child {
    margin-bottom: 0;
}

/* Card Hero: Variante especial con gradiente morado y texto blanco
   Usada para destacar el contenido más importante (gala en vivo) */
.card.hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    padding: clamp(1.5rem, 3vw, 2rem);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
    border: none;
}

/* Hero card tiene un efecto hover más pronunciado */
.card.hero:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
}

/* ========================================
   TYPOGRAPHY (Tipografía reutilizable)
   ========================================
   Estilos de texto que se usan en múltiples componentes.
   
======================================== */

/* Kicker: Texto pequeño en mayúsculas que va antes de títulos
   Ejemplo: "GALA" antes de "Noche de nominaciones" */
.kicker {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    font-size: clamp(0.65rem, 1.5vw, 0.6875rem);
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
    display: block;
    position: relative;
}

.card.hero .kicker {
    color: rgba(255, 255, 255, 0.9);
}

/* Muted: Texto secundario con color gris 
   Usado para descripciones, metadatos, timestamps */
.muted {
    color: var(--color-text-muted);
}

/* Headline: Título de artículos/noticias 
   Line-height reducido para títulos largos */
.headline {
    margin: var(--spacing-sm) 0;
    font-weight: 700;
    line-height: 1.3;
}

/* ========================================
   BUTTONS (Botones reutilizables)
   ========================================
   Estilos base para botones.
   Radzen puede sobrescribir algunos de estos estilos.
   
======================================== */

.btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

/* Hover: Eleva el botón ligeramente */
.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Active: Vuelve a posición normal al hacer clic */
.btn:active {
    transform: translateY(0);
}

/* Botón light: Transparente con fondo blanco semi-opaco
   Usado en hero cards para contraste sobre gradiente */
.btn-light {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.btn-light:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* ========================================
   PILLS & CHIPS (Insignias y etiquetas)
   ========================================
   Elementos pequeños para etiquetar contenido.
   
======================================== */

/* Pill Live: Indicador de transmisión en vivo con animación pulsante */
.pill-live {
    display: inline-block;
    background: var(--color-secondary);
    color: white;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;  /* Totalmente redondeado (píldora) */
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    
    /* Animación continua de pulso */
    animation: pulse-live 2s ease-in-out infinite;
}

/* Keyframe de animación: Pulsa cada 2 segundos
   La sombra se expande y desvanece creando efecto de pulso */
@keyframes pulse-live {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(245, 101, 101, 0.7);
    }
    50% {
        opacity: 0.9;
        box-shadow: 0 0 0 8px rgba(245, 101, 101, 0);
    }
}

/* Chips: Etiquetas de categorías/temas 
   Se usan para categorizar noticias, logros, temas */
.chips {
    display: flex;
    flex-wrap: wrap;  /* Se ajustan en múltiples líneas si no caben */
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.chip {
    display: inline-block;
    background: var(--color-bg-gray);
    color: var(--color-text);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Chip strong: Variante destacada con color primario 
   Usado para logros importantes, categorías principales */
.chip-strong {
    background: var(--color-primary);
    color: white;
    font-weight: 600;
}

/* ========================================
   FAN COMPONENT (Perfil de fan/usuario)
   ========================================
   Muestra avatar circular + nombre + metadata.
   Reutilizable en rankings, perfiles, comentarios, etc.
   
======================================== */

.fan {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;
}

/* Avatar circular con iniciales y gradiente de fondo */
.fan-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;  /* Círculo perfecto */
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    
    /* Centrar las iniciales dentro del círculo */
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-weight: 700;
    font-size: 1.25rem;
    
    /* No se encoge si falta espacio */
    flex-shrink: 0;
}

/* Metadata del fan: nombre, estadísticas, etc */
.fan-meta {
    flex: 1;
    
    /* min-width: 0 permite que text-overflow: ellipsis funcione en flex items */
    min-width: 0;
}

.fan-name {
    margin: 0;
    font-weight: 700;
    
    /* Truncar nombre largo con ... */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   LISTS (Listas genéricas)
   ========================================
   Listas sin bullets con separadores horizontales.
   Usadas en rankings, galas pasadas, foros, etc.
   
======================================== */

.list {
    list-style: none;  /* Sin bullets */
    padding: 0;
    margin: var(--spacing-md) 0 0;
}

.list li {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
    transition: background 0.2s ease;
}

/* Sin borde en el último elemento */
.list li:last-child {
    border-bottom: none;
}

/* Hover: Fondo gris claro + indent a la izquierda */
.list li:hover {
    background: var(--color-bg-light);
    padding-left: var(--spacing-sm);
}

/* Listas ordenadas con números destacados (rankings) */
ol.list {
    counter-reset: list-counter;
}

ol.list li {
    counter-increment: list-counter;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Rank: Número circular para rankings */
.rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-bg-gray);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* Top 3 rankings con colores especiales (podio olímpico) */

/* 🥇 Primer lugar: Oro */
ol.list li:nth-child(1) .rank {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #8b6914;
}

/* 🥈 Segundo lugar: Plata */
ol.list li:nth-child(2) .rank {
    background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
    color: #666;
}

/* 🥉 Tercer lugar: Bronce */
ol.list li:nth-child(3) .rank {
    background: linear-gradient(135deg, #cd7f32 0%, #e8a87c 100%);
    color: #654321;
}

/* ========================================
   DOTS (Indicadores de estado)
   ========================================
   Puntos de colores para indicar tipo de noticia/evento.
   Se usan en listas de noticias para categorización visual rápida.
   
======================================== */

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-muted);
    flex-shrink: 0;
}

/* 🔴 Dot hot (rojo): Noticias urgentes, controversia */
.dot-hot {
    background: var(--color-danger);
    box-shadow: 0 0 8px rgba(245, 101, 101, 0.5);  /* Glow rojo */
}

/* 🟢 Dot up (verde): Probabilidades subiendo, tendencia positiva */
.dot-up {
    background: var(--color-success);
}

/* 🟣 Dot vid (morado): Clips de video, contenido multimedia */
.dot-vid {
    background: var(--color-primary);
}

/* 🟠 Dot vote (naranja): Votaciones, encuestas */
.dot-vote {
    background: var(--color-warning);
}

/* ⚪ Dot info (gris): Información general, sin categoría específica */
.dot-info {
    background: var(--color-text-muted);
}

/* ========================================
   FORMS (Formularios globales)
   ========================================
   Estilos consistentes para inputs, selects, textareas.
   Se aplican a TODOS los formularios de la app.
   
======================================== */

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    
    /* Heredar la fuente del body */
    font-family: inherit;
}

/* Focus state: Borde morado y ring effect 
   El "ring" es la sombra semi-transparente alrededor del input */
input:focus,
textarea:focus,
select:focus {
    outline: none;  /* Quita el outline azul/naranja del navegador */
    border-color: var(--color-primary);
    
    /* Ring effect: Sombra morada semi-transparente */
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* ========================================
   UTILITIES (Clases utilitarias)
   ========================================
   Clases de ayuda para márgenes, padding y alineación.
   Úsalas directamente en el HTML para ajustes rápidos sin crear CSS custom.
   
   Ejemplo: <div class="mt-3 mb-2">Contenido</div>
   
======================================== */

.text-center {
    text-align: center;
}

/* Márgenes superiores (margin-top) */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }   /* 4px */
.mt-2 { margin-top: var(--spacing-sm); }   /* 8px */
.mt-3 { margin-top: var(--spacing-md); }   /* 16px */
.mt-4 { margin-top: var(--spacing-lg); }   /* 24px */
.mt-5 { margin-top: var(--spacing-xl); }   /* 32px */

/* Márgenes inferiores (margin-bottom) */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var("--spacing-xl"); }

/* ========================================
   RESPONSIVE (Media queries globales)
   ========================================
   Ajustes que se aplican en diferentes tamaños de pantalla.
   
   Breakpoints:
   - Móvil: < 768px
   - Tablet: 768px - 991px
   - Desktop: ≥ 992px
   
======================================== */

/* 📱 Móvil: <768px */
@media (max-width: 767px) {
    /* Menos padding en móvil para aprovechar espacio */
    .center {
        padding: var(--spacing-sm);
    }
    
    /* Cards más compactas en móvil */
    .card {
        padding: var(--spacing-md);
    }
}