/* ==========================================================================
   LIVENKI DESIGN SYSTEM - TOKENS & FOUNDATIONS
   Version: 1.0 (Web Architecture Modernization - Phase W1)
   Parity: 1:1 with Android (LivenkiFoundations.kt) & iOS (Color+Theme.swift)
   ========================================================================== */

/* ── 1. PALETA MAESTRA DE COLORES ATÓMICOS ────────────────────────────── */
:root {
    /* Brand Neons Livenki */
    --livenki-purple: #BA49FF;
    --livenki-purple-deep: #9333EA;
    --livenki-purple-neon: #A855F7;
    --livenki-purple-glow: rgba(186, 73, 255, 0.35);

    --livenki-cyan: #00F2FE;
    --livenki-cyan-deep: #0284C7;
    --livenki-cyan-electric: #06B6D4;
    --livenki-cyan-glow: rgba(0, 242, 254, 0.28);

    --livenki-green: #10B981;
    --livenki-green-neon: #00FFAA;
    --livenki-green-glow: rgba(16, 185, 129, 0.25);

    --livenki-gold: #FFE200;
    --livenki-gold-amber: #F59E0B;
    --livenki-gold-dark: #D97706;
    --livenki-gold-glow: rgba(245, 158, 11, 0.28);

    --livenki-live-red: #FF2D55;
    --livenki-red-danger: #EF4444;
    --livenki-pink: #EC4899;
    --livenki-pink-pastel: #F472B6;

    /* Gradientes Semánticos Oficiales */
    --livenki-gradient-primary: linear-gradient(135deg, var(--livenki-purple) 0%, var(--livenki-cyan) 100%);
    --livenki-gradient-brand: linear-gradient(135deg, var(--livenki-purple-neon) 0%, var(--livenki-cyan-electric) 100%);
    --livenki-gradient-gold: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    --livenki-gradient-ambassador: linear-gradient(135deg, #10B981 0%, #00F2FE 100%);
    --livenki-gradient-live: linear-gradient(135deg, #FF2D55 0%, #BA49FF 100%);
    --livenki-gradient-pink: linear-gradient(135deg, #EC4899 0%, #BA49FF 100%);

    /* Tipografía Global */
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Outfit', var(--font-primary);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Escala Tipográfica Semántica */
    --type-2xs: 0.6875rem; /* 11px */
    --type-xs: 0.75rem;    /* 12px */
    --type-sm: 0.8125rem;  /* 13px */
    --type-base: 0.875rem; /* 14px */
    --type-md: 0.9375rem;  /* 15px */
    --type-lg: 1rem;       /* 16px */
    --type-xl: 1.125rem;   /* 18px */
    --type-2xl: 1.25rem;   /* 20px */
    --type-3xl: 1.5rem;    /* 24px */
    --type-4xl: 1.75rem;   /* 28px */
    --type-5xl: 2.25rem;   /* 36px */

    /* Radios Orgánicos */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-pill: 9999px;

    /* Escala Z-Index Centralizada */
    --z-base: 1;
    --z-elevated: 10;
    --z-dropdown: 50;
    --z-sticky-header: 100;
    --z-drawer-backdrop: 400;
    --z-drawer: 450;
    --z-modal-backdrop: 500;
    --z-modal: 510;
    --z-floating-player: 600;
    --z-popover: 700;
    --z-toast: 1000;
    --z-tooltip: 1100;

    /* Transiciones Fluídas */
    --ease-out-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.15s var(--ease-out-spring);
    --transition-normal: 0.25s var(--ease-out-spring);
    --transition-slow: 0.35s var(--ease-out-spring);
}

/* ── 2. TEMA LIGHT (PEARL SURFACE - ACTIVO POR DEFECTO) ────────────────── */
:root,
[data-theme="light"] {
    --theme-name: "light";

    /* Superficies y Fondos */
    --bg-app: #F8FAFC;
    --bg-cosmos: #F8FAFC;
    --bg-deep: #F1F5F9;
    --bg-surface: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F8FAFC;
    --bg-card-glass: rgba(255, 255, 255, 0.94);
    --bg-modal: #FFFFFF;
    --bg-sidebar: #FFFFFF;
    --bg-glass: rgba(15, 23, 42, 0.03);
    --bg-glass-strong: rgba(15, 23, 42, 0.06);

    /* Textos y Contrastes */
    --text-main: #0F172A;
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #64748B;
    --text-dim: #94A3B8;
    --text-inverse: #FFFFFF;

    /* Bordes y Separadores */
    --border-subtle: rgba(226, 232, 240, 0.95);
    --border-medium: rgba(203, 213, 225, 0.85);
    --border-hover: rgba(148, 163, 184, 0.6);
    --border-accent: rgba(186, 73, 255, 0.35);
    --border-glow: rgba(0, 242, 254, 0.25);

    /* Sombras y Glassmorphism */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
    --shadow-bento: 0 10px 30px -10px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.03);
    --shadow-elevated: 0 20px 40px -15px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 30px rgba(186, 73, 255, 0.12);
    --shadow-purple: 0 8px 25px rgba(186, 73, 255, 0.15);
    --shadow-pink: 0 8px 25px rgba(236, 72, 153, 0.15);

    --backdrop-blur: blur(20px);
}

/* ── 3. TEMA DARK (CINEMATIC TITANIUM - PARIDAD 1:1 CON STREAMING) ─────── */
[data-theme="dark"],
body.theme-dark {
    --theme-name: "dark";

    /* Superficies y Fondos Cinemáticos */
    --bg-app: #0A0C16;
    --bg-cosmos: #0A0C16;
    --bg-deep: #06070D;
    --bg-surface: #121626;
    --bg-card: #14192B;
    --bg-card-hover: #1A2038;
    --bg-card-glass: rgba(18, 22, 38, 0.85);
    --bg-modal: #121626;
    --bg-sidebar: #0E1220;
    --bg-glass: rgba(255, 255, 255, 0.04);
    --bg-glass-strong: rgba(255, 255, 255, 0.08);

    /* Textos y Contrastes */
    --text-main: #F8FAFC;
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    --text-dim: #475569;
    --text-inverse: #0F172A;

    /* Bordes y Separadores */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.14);
    --border-hover: rgba(255, 255, 255, 0.25);
    --border-accent: rgba(186, 73, 255, 0.45);
    --border-glow: rgba(0, 242, 254, 0.35);

    /* Sombras Cinemáticas Oscuras */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow-bento: 0 12px 36px -10px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.1);
    --shadow-elevated: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 35px rgba(186, 73, 255, 0.25);
    --shadow-purple: 0 10px 30px rgba(186, 73, 255, 0.25);
    --shadow-pink: 0 10px 30px rgba(236, 72, 153, 0.25);

    --backdrop-blur: blur(24px);
}

/* ── 4. RETROCOMPATIBILIDAD CON VARIABLES LEGACY DE app.css ─────────────── */
:root {
    --accent-purple: var(--livenki-purple-deep);
    --accent-purple-glow: var(--livenki-purple-glow);
    --accent-cyan: var(--livenki-cyan-deep);
    --accent-cyan-glow: var(--livenki-cyan-glow);
    --accent-teal: var(--livenki-green);
    --accent-pink: var(--livenki-pink);
    --accent-gold: var(--livenki-gold-dark);
    --accent-gold-light: var(--livenki-gold-amber);
    --accent-live: var(--livenki-live-red);

    --primary-gradient: var(--livenki-gradient-brand);
    --gold-gradient: var(--livenki-gradient-gold);
    --pink-gradient: var(--livenki-gradient-pink);
    --cyan-gradient: linear-gradient(135deg, var(--livenki-cyan-deep) 0%, #2563EB 100%);
}

/* ── 5. CLASES DE UTILIDAD SEMÁNTICAS (LIVENKI FOUNDATIONS) ─────────────── */

/* Superficie de Cristal Cinemático */
.livenki-glass {
    background: var(--bg-card-glass);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--border-subtle);
}

/* Píldora Ergonómica */
.livenki-pill {
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

/* Text Clamps Elípticos */
.livenki-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.livenki-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Shimmer Skeleton Animado Unificado */
.livenki-shimmer {
    background: linear-gradient(
        90deg,
        rgba(148, 163, 184, 0.10) 0%,
        rgba(148, 163, 184, 0.22) 50%,
        rgba(148, 163, 184, 0.10) 100%
    );
    background-size: 200% 100%;
    animation: livenkiShimmerPulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes livenkiShimmerPulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Transición Suave de Temas */
body {
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* ── 6. REPRODUCTOR WEB DE STREAMING (FASE W3 - TWITCH / TIKTOK PARITY) ─── */

/* Modo Teatro: el stream se expande al 100% de la ventana sin bordes */
#stream-modal.theater-mode {
    padding: 0 !important;
    background: #000 !important;
}

#stream-modal.theater-mode .stream-modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

#stream-modal.theater-mode .stream-video-area {
    background: #000;
}

#stream-modal.theater-mode .stream-chat-area {
    width: 380px;
    height: 100%;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

#btn-toggle-theater.active {
    background: rgba(186, 73, 255, 0.35) !important;
    border-color: #BA49FF !important;
    color: #BA49FF !important;
    box-shadow: 0 0 14px rgba(186, 73, 255, 0.4);
}

/* Chat en Vivo con Desvanecimiento Superior Cinemático (Fade Mask) */
.chat-messages-container {
    mask-image: linear-gradient(180deg, transparent 0px, black 32px, black 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0px, black 32px, black 100%);
    scroll-behavior: smooth;
}

/* Burbujas de Chat Fluidas y Animadas */
.chat-msg {
    animation: livenkiChatMsgPop 0.22s var(--ease-out-spring);
    transition: background var(--transition-fast), transform var(--transition-fast);
    border-radius: var(--radius-sm);
}

.chat-msg:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(2px);
}

@keyframes livenkiChatMsgPop {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── 7. JERARQUÍA DE CABECERA Y NAVEGACIÓN (FASE W4) ─────────────────────── */

/* Cabecera translúcida con Glassmorphism suave */
.app-header {
    background: var(--bg-card-glass) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    -webkit-backdrop-filter: var(--backdrop-blur) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: background var(--transition-normal), border-color var(--transition-normal) !important;
}

/* Adaptación del input de búsqueda según el tema */
[data-theme="dark"] .search-input,
body.theme-dark .search-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

[data-theme="dark"] .search-input:focus,
body.theme-dark .search-input:focus {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(186, 73, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(186, 73, 255, 0.18);
}

/* Truncamiento elíptico en tarjetas de streaming para evitar alturas desiguales */
.stream-card-title,
.stream-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.stream-card-user,
.stream-user {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Skeleton Shimmer para filas de chats y listas */
.chat-row-skeleton {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    margin-bottom: 8px;
}

.chat-row-skeleton .skeleton-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chat-row-skeleton .skeleton-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-row-skeleton .skeleton-title {
    width: 40%;
    height: 13px;
    border-radius: 5px;
}

.chat-row-skeleton .skeleton-subtitle {
    width: 70%;
    height: 11px;
    border-radius: 4px;
}

/* Botón sutil de icono estándar reutilizable */
.btn-icon-subtle {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-icon-subtle:hover {
    background: var(--bg-glass-strong);
    border-color: var(--border-hover);
    transform: scale(1.05);
}