/**
 * ==============================================================================
 * ⚔️ PARAGON-WOW — MASTER DESIGN SYSTEM (FASE 3.1)
 * "El Crisol Convergente: Wrath of the Lich King (3.3.5a) ➔ Cataclysm (4.3.4)"
 * ==============================================================================
 * Arquitectura de tokens centralizados, tipografía oficial WoW, componentes
 * maestros reutilizables de forja y piedra, y optimizaciones de renderizado.
 * Cero glassmorphism excesivo. Cero plantillas genéricas. Cero IA Tropes.
 * ==============================================================================
 */

/* ------------------------------------------------------------------------------
   1. FUENTES TIPOGRÁFICAS (MORPHEUS LOCAL + CINZEL + MONTSERRAT + FIRA CODE)
   ------------------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800;900&family=Montserrat:wght@400;500;600;700&family=Fira+Code:wght@400;600&display=swap');

@font-face {
    font-family: 'Morpheus';
    src: url('../../fonts/Morpheus.woff2') format('woff2'),
         url('../../fonts/Morpheus.woff') format('woff'),
         url('../../fonts/MORPHEUS.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CormorantGaramond';
    src: url('../../fonts/CormorantGaramond-SemiBold.woff2') format('woff2'),
         url('../../fonts/CormorantGaramond-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------------------------
   2. DESIGN TOKENS MAESTROS (:root)
   ------------------------------------------------------------------------------ */
:root {
    /* --- 2.1 BASALTO, CARBÓN Y PIEDRA CINCELADA (Superficies Base Sólidas) --- */
    --color-carbon-950:   #070303;      /* Vacío abisal de fondo */
    --color-carbon-900:   #0b0404;      /* Fondo base de página */
    --color-carbon-850:   #120707;      /* Contenedores principales */
    --color-stone-800:    #180c0c;      /* Paneles y cards */
    --color-stone-700:    #241212;      /* Paneles elevados */
    --color-stone-border: #381c1c;      /* Borde de piedra exterior */
    --color-inner-well:   #060202;      /* Pozos de entrada, celdas hundidas */

    --surface-card:       rgba(16, 6, 6, 0.94);
    --surface-elevated:   rgba(26, 9, 9, 0.96);
    --surface-hover:      rgba(38, 14, 14, 0.98);

    /* --- 2.2 METALES FORJADOS Y REMACHES (Estructuras y Biseles) --- */
    --metal-dark-iron:    #1f2429;      /* Hierro negro enano */
    --metal-forged-steel: #3a424a;      /* Acero templado */
    --metal-steel-light:  #5a6572;      /* Brillo de filo de acero */
    --metal-bronze-dark:  #4a3210;      /* Bronce de forja */
    --metal-bronze-mid:   #8a6324;      /* Bronce patinado */

    /* --- 2.3 DORADO & BRONCE NOBLE (Paragon, Épico, Progresión) --- */
    --gold-ancient:       #8c6800;      /* Oro viejo de runa */
    --gold-base:          #c69b33;      /* Oro estándar de interfaz WoW */
    --gold-bright:        #e2b714;      /* Oro activo Paragon */
    --gold-glow:          #ffd700;      /* Resplandor de sol / corona */
    --gold-highlight:     #fff3a8;      /* Bisel superior iluminado */

    /* Degradados de Oro */
    --gold-gradient:      linear-gradient(135deg, #ffe875 0%, #ffd700 35%, #e2b714 70%, #8c6800 100%);
    --gold-card-gradient: linear-gradient(145deg, rgba(28, 18, 4, 0.92) 0%, rgba(12, 7, 2, 0.96) 100%);

    /* --- 2.4 ACENTOS FUNCIONALES MMORPG --- */
    /* Rojo Fuego / Magma (Peligro, Cataclysm, Combate, Alertas, Horda) */
    --magma-dark:         #4d0707;
    --magma-base:         #b91c1c;
    --magma-bright:       #dc2626;
    --magma-ember:        #ff4500;
    --magma-glow:         rgba(220, 38, 38, 0.45);
    --fire-gradient:      linear-gradient(135deg, #dc2626 0%, #ff6a00 50%, #ff8c00 100%);

    /* Azul Escarcha (Información, Northrend/ICC, Defensivo, Alianza) */
    --frost-dark:         #03456b;
    --frost-base:         #0284c7;
    --frost-bright:       #38bdf8;
    --frost-ice:          #bae6fd;
    --frost-glow:         rgba(56, 189, 248, 0.45);
    --frost-gradient:     linear-gradient(135deg, #0284c7 0%, #38bdf8 50%, #7dd3fc 100%);

    /* Verde Naturaleza (Éxito, Vida, Buffs, Sistema Online) */
    --nature-dark:        #0b421d;
    --nature-base:        #15803d;
    --nature-bright:      #22c55e;
    --nature-glow:        rgba(34, 197, 94, 0.45);

    /* Púrpura Arcano (Místico, Magia, Sistemas Especiales, Epopeya) */
    --arcane-dark:        #431475;
    --arcane-base:        #7e22ce;
    --arcane-bright:      #9333ea;
    --arcane-glow:        rgba(147, 51, 234, 0.45);

    /* --- 2.5 COLORES OFICIALES DE CLASES WOW (WotLK 3.3.5a / Cata 4.3.4) --- */
    --class-warrior:      #C79C6E;
    --class-paladin:      #F58CBA;
    --class-hunter:       #ABD473;
    --class-rogue:        #FFF569;
    --class-priest:       #FFFFFF;
    --class-dk:           #C41F3B;
    --class-shaman:       #0070DE;
    --class-mage:         #69CCF0;
    --class-warlock:      #9482C9;
    --class-druid:        #FF7D0A;

    /* --- 2.6 PALETA OFICIAL DE CALIDAD DE OBJETOS WOW --- */
    --rarity-poor:        #9d9d9d;      /* Pobre / Gris */
    --rarity-common:      #ffffff;      /* Común / Blanco */
    --rarity-uncommon:    #1eff00;      /* Poco común / Verde */
    --rarity-rare:        #0070dd;      /* Raro / Azul */
    --rarity-epic:        #a335ee;      /* Épico / Morado */
    --rarity-legendary:   #ff8000;      /* Legendario / Naranja */
    --rarity-artifact:    #e6cc80;      /* Artefacto / Oro Claro */
    --rarity-heirloom:    #00ccff;      /* Reliquia / Celeste */

    /* --- 2.7 FACCIONES DE AZEROTH --- */
    --alliance-blue:      #0078ff;
    --alliance-gold:      #ffd700;
    --alliance-border:    rgba(0, 120, 255, 0.45);
    --horde-red:          #b30000;
    --horde-black:        #2b0000;
    --horde-border:       rgba(179, 0, 0, 0.50);

    /* --- 2.8 TIPOGRAFÍA Y ESCALA --- */
    --font-epic:          'Cinzel', 'CormorantGaramond', Georgia, serif;
    --font-quest:         'Morpheus', 'Cinzel', Georgia, serif;
    --font-body:          'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:          'Fira Code', 'Consolas', monospace;

    /* --- 2.9 BISELES, RELIEVES Y SOMBRAS METÁLICAS --- */
    --bevel-metal-outer:   inset 1px 1px 0 rgba(255, 235, 170, 0.25),
                           inset -1px -1px 0 rgba(0, 0, 0, 0.7);
    --bevel-metal-pressed: inset 2px 2px 4px rgba(0, 0, 0, 0.9),
                           inset -1px -1px 0 rgba(255, 235, 170, 0.15);
    --shadow-heavy-stone:  0 12px 35px rgba(0, 0, 0, 0.95), 0 0 0 1px #050202;
    --shadow-rivet:        inset 1px 1px 1px rgba(255, 255, 255, 0.4),
                           1px 1px 2px rgba(0, 0, 0, 0.9);

    /* Sombras optimizadas para 60 FPS */
    --shadow-sm:           0 2px 4px rgba(0,0,0,0.6);
    --shadow-md:           0 6px 16px rgba(0,0,0,0.8);
    --shadow-lg:           0 12px 28px rgba(0,0,0,0.9);

    /* Transición táctil */
    --transition-tactile:  all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-smooth:   all 0.25s ease;
}

/* ------------------------------------------------------------------------------
   3. ESTILOS BASE Y SCROLLBAR DE HIERRO FORJADO
   ------------------------------------------------------------------------------ */
body {
    background-color: var(--color-carbon-900);
    color: #d1d5db;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.2px;
}

/* Custom Scrollbar de Forja */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: var(--color-inner-well);
    border-left: 1px solid var(--color-stone-border);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--metal-forged-steel) 0%, var(--metal-bronze-dark) 100%);
    border: 2px solid var(--color-inner-well);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--gold-base) 0%, var(--metal-bronze-mid) 100%);
}

/* Accesibilidad: Indicador de Foco Visible */
:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------------------
   4. COMPONENTES: PANELES CON REMACHES (.paragon-panel)
   ------------------------------------------------------------------------------ */
.paragon-panel {
    position: relative;
    background: linear-gradient(180deg, rgba(24, 12, 12, 0.90) 0%, rgba(18, 7, 7, 0.95) 100%), url('../wow-ui/textures/stone-rock-dark.png') repeat;
    background-repeat: repeat;
    background-size: auto;
    border: 2px solid var(--metal-bronze-mid);
    box-shadow: var(--shadow-heavy-stone), inset 0 0 25px rgba(0, 0, 0, 0.85);
    border-radius: 4px;
    padding: 24px;
    margin-bottom: 24px;
}

/* Ribete Interior de Filigrana */
.paragon-panel::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(226, 183, 20, 0.2);
    pointer-events: none;
}

/* Remaches en las 4 Esquinas (.paragon-rivet) */
.paragon-rivet {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 35% 35%, var(--metal-steel-light) 0%, var(--metal-dark-iron) 80%);
    border-radius: 50%;
    box-shadow: var(--shadow-rivet);
    z-index: 2;
}
.paragon-rivet.top-left     { top: 8px; left: 8px; }
.paragon-rivet.top-right    { top: 8px; right: 8px; }
.paragon-rivet.bottom-left  { bottom: 8px; left: 8px; }
.paragon-rivet.bottom-right { bottom: 8px; right: 8px; }

/* Cabecera del Panel (.paragon-panel-header) */
.paragon-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--metal-bronze-mid);
    position: relative;
}

.paragon-panel-header::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    height: 10px;
    background: url('../wow-ui/ornaments/ring-border.png') no-repeat center;
    background-size: contain;
    max-width: 320px;
    margin: 0 auto;
    opacity: 0.85;
    pointer-events: none;
}

.paragon-panel-title {
    font-family: var(--font-epic);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--gold-bright);
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(226, 183, 20, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.paragon-panel-title i {
    color: var(--gold-bright);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}

/* ------------------------------------------------------------------------------
   5. COMPONENTES: BOTONES METÁLICOS TÁCTILES (.paragon-btn)
   ------------------------------------------------------------------------------ */
.paragon-btn {
    font-family: var(--font-epic);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    position: relative;
    border: 1.5px solid var(--metal-bronze-mid);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8), var(--bevel-metal-outer);
    transition: var(--transition-tactile);
}

.paragon-btn i {
    font-size: 0.95rem;
    transition: transform 0.15s ease;
}

/* 5.1 Botón Primario: Oro Forjado Paragon */
.paragon-btn-primary {
    background: linear-gradient(180deg, #d4a028 0%, #a47514 60%, #76510a 100%);
    color: #120600;
    text-shadow: 0 1px 0 rgba(255, 235, 170, 0.6);
    border-color: #ffd700;
    position: relative;
}
.paragon-btn-primary:hover {
    background: linear-gradient(180deg, #f0b938 0%, #c48e1e 60%, #90640f 100%);
    color: #070200;
    box-shadow: 0 0 22px var(--gold-glow, rgba(255, 215, 0, 0.55)), 0 5px 14px rgba(0, 0, 0, 0.9), var(--bevel-metal-outer);
    transform: translateY(-2px);
}
.paragon-btn-primary:active {
    background: linear-gradient(180deg, #76510a 0%, #a47514 60%, #d4a028 100%);
    box-shadow: var(--bevel-metal-pressed);
    transform: translateY(1px);
}

/* 5.1.1 Botón CTA Épico (Hero / Downloads / Acceso) */
.paragon-btn-cta {
    padding: 14px 34px;
    font-size: 1.05rem;
    letter-spacing: 1.2px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 18px rgba(226, 183, 20, 0.4), 0 5px 15px rgba(0, 0, 0, 0.9), var(--bevel-metal-outer);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
    will-change: transform, box-shadow;
}
.paragon-btn-cta::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -70%;
    width: 45%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: rotate(25deg);
    transition: left 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.paragon-btn-cta:hover {
    box-shadow: 0 0 32px rgba(255, 215, 0, 0.85), 0 8px 24px rgba(0, 0, 0, 0.95), var(--bevel-metal-outer);
    transform: translateY(-2px) scale(1.025);
}
.paragon-btn-cta:hover::after {
    left: 140%;
}
.paragon-btn-cta:active {
    transform: translateY(1px) scale(0.99);
    box-shadow: 0 0 12px rgba(226, 183, 20, 0.45), var(--bevel-metal-pressed);
}

/* 5.2 Botón Secundario: Hierro Oscuro & Acero */
.paragon-btn-secondary {
    background: linear-gradient(180deg, #2e353c 0%, #1c2126 60%, #101417 100%);
    color: #e5e7eb;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    border-color: #4a545e;
}
.paragon-btn-secondary:hover {
    background: linear-gradient(180deg, #3d464f 0%, #262c33 60%, #171b1f 100%);
    color: #ffffff;
    border-color: var(--gold-base);
    box-shadow: 0 0 10px rgba(226, 183, 20, 0.25), 0 5px 12px rgba(0, 0, 0, 0.9), var(--bevel-metal-outer);
    transform: translateY(-1px);
}
.paragon-btn-secondary:active {
    background: linear-gradient(180deg, #101417 0%, #1c2126 60%, #2e353c 100%);
    box-shadow: var(--bevel-metal-pressed);
    transform: translateY(1px);
}

/* 5.3 Botón de Peligro / Combate: Magma & Fuego Carmesí */
.paragon-btn-danger {
    background: linear-gradient(180deg, #a81919 0%, #7d1212 60%, #4f0808 100%);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    border-color: #ef4444;
}
.paragon-btn-danger:hover {
    background: linear-gradient(180deg, #c52424 0%, #941717 60%, #630c0c 100%);
    box-shadow: 0 0 14px var(--magma-glow), 0 5px 12px rgba(0, 0, 0, 0.9), var(--bevel-metal-outer);
    transform: translateY(-1px);
}
.paragon-btn-danger:active {
    background: linear-gradient(180deg, #4f0808 0%, #7d1212 60%, #a81919 100%);
    box-shadow: var(--bevel-metal-pressed);
    transform: translateY(1px);
}

/* 5.4 Botón de Escarcha (Northrend / Defensivo) */
.paragon-btn-frost {
    background: linear-gradient(180deg, #0284c7 0%, #0369a1 60%, #075985 100%);
    color: #ffffff;
    border-color: var(--frost-bright);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.paragon-btn-frost:hover {
    background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 60%, #0369a1 100%);
    box-shadow: 0 0 14px var(--frost-glow), var(--bevel-metal-outer);
}

/* Estados Deshabilitados */
.paragon-btn:disabled, .paragon-btn.disabled {
    opacity: 0.45;
    filter: grayscale(80%);
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* ------------------------------------------------------------------------------
   6. COMPONENTES: FORMULARIOS EMPOTRADOS EN PIEDRA (.paragon-input, .paragon-select)
   ------------------------------------------------------------------------------ */
.paragon-form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.paragon-label {
    font-family: var(--font-epic);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--gold-base);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 7px;
}

.paragon-input,
.paragon-select,
.paragon-textarea {
    width: 100%;
    background-color: var(--color-inner-well);
    color: #f3f4f6;
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 12px 14px;
    border: 1.5px solid var(--metal-bronze-dark);
    border-radius: 3px;
    outline: none;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 235, 170, 0.08);
    transition: var(--transition-tactile);
    box-sizing: border-box;
}

.paragon-input:focus,
.paragon-select:focus,
.paragon-textarea:focus {
    border-color: var(--gold-bright);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.9), 0 0 8px rgba(226, 183, 20, 0.4);
    background-color: #0b0505;
}

.paragon-input::placeholder,
.paragon-textarea::placeholder {
    color: #6b7280;
    font-size: 0.88rem;
}

.paragon-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23c69b33' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    padding-right: 34px;
    appearance: none;
}

/* ------------------------------------------------------------------------------
   7. COMPONENTES: PESTAÑAS (.paragon-tab / .paragon-tabs-nav)
   ------------------------------------------------------------------------------ */
.paragon-tabs-nav {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--metal-bronze-mid);
    padding-left: 10px;
    margin-bottom: 20px;
    overflow-x: auto;
}

.paragon-tab {
    font-family: var(--font-epic);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #9ca3af;
    background: linear-gradient(180deg, #180d0d 0%, #0d0606 100%);
    border: 1.5px solid var(--metal-bronze-dark);
    border-bottom: none;
    padding: 10px 18px;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-tactile);
    position: relative;
    top: 2px;
    white-space: nowrap;
}

.paragon-tab:hover {
    color: #ffffff;
    background: linear-gradient(180deg, #241313 0%, #140b0b 100%);
    border-color: var(--gold-base);
}

.paragon-tab.active {
    color: var(--gold-bright);
    background: linear-gradient(180deg, #2a1616 0%, var(--color-stone-800) 100%);
    border-color: var(--metal-bronze-mid);
    border-bottom: 2px solid var(--color-stone-800);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 215, 0, 0.3);
    z-index: 2;
}

/* ------------------------------------------------------------------------------
   8. COMPONENTES: BADGES & INSIGNIAS (.paragon-badge)
   ------------------------------------------------------------------------------ */
.paragon-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-epic);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 2px;
    border: 1px solid transparent;
}

.paragon-badge-gold {
    background: rgba(198, 155, 51, 0.15);
    color: var(--gold-bright);
    border-color: var(--gold-base);
    box-shadow: 0 0 6px rgba(226, 183, 20, 0.2);
}

.paragon-badge-fire {
    background: rgba(185, 28, 28, 0.18);
    color: #fca5a5;
    border-color: var(--magma-base);
    box-shadow: 0 0 6px var(--magma-glow);
}

.paragon-badge-frost {
    background: rgba(2, 132, 199, 0.18);
    color: var(--frost-ice);
    border-color: var(--frost-base);
    box-shadow: 0 0 6px var(--frost-glow);
}

.paragon-badge-nature {
    background: rgba(21, 128, 61, 0.18);
    color: #86efac;
    border-color: var(--nature-base);
    box-shadow: 0 0 6px var(--nature-glow);
}

.paragon-badge-arcane {
    background: rgba(126, 34, 206, 0.18);
    color: #d8b4fe;
    border-color: var(--arcane-base);
    box-shadow: 0 0 6px var(--arcane-glow);
}

/* ------------------------------------------------------------------------------
   9. COMPONENTES: TOOLTIP DE OBJETO AUTÉNTICO WOW (.paragon-tooltip)
   ------------------------------------------------------------------------------ */
.paragon-tooltip {
    background-color: rgba(6, 2, 2, 0.98);
    border: 1.5px solid #d4a028;
    border-radius: 4px;
    padding: 14px 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.95), inset 0 0 10px rgba(0, 0, 0, 0.9);
    max-width: 320px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.45;
}

.paragon-tooltip-title {
    font-family: var(--font-epic);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.paragon-tooltip-title.epic      { color: var(--rarity-epic); }
.paragon-tooltip-title.legendary { color: var(--rarity-legendary); }
.paragon-tooltip-title.rare      { color: var(--rarity-rare); }

.paragon-tooltip-ilvl {
    color: #eab308;
    font-size: 0.82rem;
    margin-bottom: 8px;
}

.paragon-tooltip-stat {
    color: #ffffff;
}

.paragon-tooltip-stat.green {
    color: #22c55e;
}

.paragon-tooltip-flavor {
    color: #ffd100;
    font-style: italic;
    margin-top: 10px;
    font-size: 0.82rem;
}

/* ------------------------------------------------------------------------------
   10. COMPONENTES: TABLA DE MAZMORRAS Y RANKINGS (.paragon-table)
   ------------------------------------------------------------------------------ */
.paragon-table-wrapper {
    overflow-x: auto;
    border: 1.5px solid var(--metal-bronze-mid);
    border-radius: 4px;
    box-shadow: var(--shadow-heavy-stone);
}

.paragon-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    background-color: var(--color-inner-well);
    font-size: 0.92rem;
}

.paragon-table th {
    background: linear-gradient(180deg, #241414 0%, #150a0a 100%);
    font-family: var(--font-epic);
    color: var(--gold-bright);
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 12px 16px;
    border-bottom: 2px solid var(--metal-bronze-mid);
    white-space: nowrap;
}

.paragon-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(56, 28, 28, 0.4);
    color: #e5e7eb;
}

.paragon-table tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.015);
}

.paragon-table tr:hover td {
    background-color: rgba(198, 155, 51, 0.08);
}

/* ------------------------------------------------------------------------------
   11. COMPONENTES: CAJA DE MÉTRICAS Y ATRIBUTOS (.paragon-stat)
   ------------------------------------------------------------------------------ */
.paragon-stat {
    background: linear-gradient(180deg, var(--color-stone-800) 0%, var(--color-carbon-850) 100%);
    border: 1.5px solid var(--metal-bronze-dark);
    border-radius: 4px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.7);
    transition: var(--transition-tactile);
}

.paragon-stat:hover {
    border-color: var(--gold-base);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.8), 0 0 10px rgba(198, 155, 51, 0.2);
}

.paragon-stat-icon-frame {
    width: 48px;
    height: 48px;
    border: 1.5px solid var(--gold-base);
    border-radius: 3px;
    background-color: var(--color-inner-well);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--gold-bright);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.9);
    flex-shrink: 0;
}

.paragon-stat-info {
    display: flex;
    flex-direction: column;
}

.paragon-stat-label {
    font-family: var(--font-epic);
    font-size: 0.78rem;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.paragon-stat-value {
    font-family: var(--font-epic);
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    margin-top: 2px;
}

/* ------------------------------------------------------------------------------
   12. COMPONENTES: TARJETA DE PERSONAJE DE TABERNA (.paragon-character-card)
   ------------------------------------------------------------------------------ */
.paragon-character-card {
    background: linear-gradient(180deg, var(--color-stone-800) 0%, var(--color-carbon-850) 100%);
    border: 1.5px solid var(--metal-bronze-mid);
    border-radius: 4px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    box-shadow: var(--shadow-heavy-stone);
    transition: var(--transition-tactile);
}

.paragon-character-card:hover {
    border-color: var(--gold-bright);
    box-shadow: 0 8px 25px rgba(0,0,0,0.9), 0 0 14px rgba(226, 183, 20, 0.35);
}

.paragon-char-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.paragon-char-avatar {
    width: 52px;
    height: 52px;
    border: 2px solid var(--gold-base);
    border-radius: 4px;
    background-color: var(--color-inner-well);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--gold-bright);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.9);
}

.paragon-char-details h4 {
    font-family: var(--font-epic);
    font-size: 1.15rem;
    margin: 0;
    color: #ffffff;
}

.paragon-char-sub {
    font-size: 0.82rem;
    color: #9ca3af;
    display: flex;
    gap: 8px;
    margin-top: 3px;
}

.paragon-char-actions {
    display: flex;
    gap: 8px;
    border-top: 1px solid rgba(56, 28, 28, 0.5);
    padding-top: 12px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------------------
   13. COMPONENTES: ESTADO VACÍO TEMÁTICO (.paragon-empty-state)
   ------------------------------------------------------------------------------ */
.paragon-empty-state {
    text-align: center;
    padding: 45px 20px;
    border: 1.5px dashed var(--metal-bronze-dark);
    border-radius: 4px;
    background: rgba(6, 2, 2, 0.6);
}

.paragon-empty-icon {
    font-size: 3rem;
    color: var(--metal-steel-light);
    margin-bottom: 14px;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.8));
}

.paragon-empty-title {
    font-family: var(--font-epic);
    font-size: 1.2rem;
    color: var(--gold-base);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.paragon-empty-desc {
    color: #9ca3af;
    font-size: 0.9rem;
    max-width: 440px;
    margin: 0 auto 18px;
}

/* ------------------------------------------------------------------------------
   14. NAVEGACIÓN Y CABECERA MAESTRA (.paragon-navbar)
   ------------------------------------------------------------------------------ */
.paragon-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 28px;
    background: linear-gradient(180deg, #180909 0%, #0d0404 100%);
    border-bottom: 2px solid var(--metal-bronze-mid);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.paragon-nav-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.paragon-nav-link {
    font-family: var(--font-epic);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #d1d5db;
    text-decoration: none;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 3px;
    transition: var(--transition-tactile);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.paragon-nav-link:hover {
    color: var(--gold-bright);
    border-color: var(--metal-bronze-dark);
    background-color: rgba(198, 155, 51, 0.08);
}

.paragon-nav-link.active {
    color: var(--gold-bright);
    border-color: var(--metal-bronze-mid);
    background: linear-gradient(180deg, rgba(198, 155, 51, 0.2) 0%, rgba(138, 99, 36, 0.1) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 235, 170, 0.2);
}

/* Widget de Realmlist Copiable en Barra */
.paragon-realmlist-pill {
    background-color: var(--color-inner-well);
    border: 1px solid var(--metal-bronze-dark);
    border-radius: 3px;
    padding: 5px 12px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--gold-bright);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: all;
    transition: var(--transition-tactile);
}
.paragon-realmlist-pill:hover {
    border-color: var(--gold-bright);
    box-shadow: 0 0 8px rgba(226, 183, 20, 0.3);
}

/* ------------------------------------------------------------------------------
   15. RESPONSIVE BREAKPOINTS (1920, 1366, 1024, 768, 480)
   ------------------------------------------------------------------------------ */
@media (max-width: 1024px) {
    .paragon-panel {
        padding: 18px;
    }
    .paragon-stat-value {
        font-size: 1.35rem;
    }
}

@media (max-width: 768px) {
    .paragon-navbar {
        padding: 10px 16px;
    }
    .paragon-tabs-nav {
        padding-left: 0;
    }
    .paragon-btn {
        padding: 9px 16px;
        font-size: 0.85rem;
    }
}

/* ------------------------------------------------------------------------------
   16. COMPONENTES Y TEXTURAS OFICIALES WOW (EXTRACCIÓN 3.3.5a / BUILD 12340)
   ------------------------------------------------------------------------------ */

/* 16.1 Botón Oficial de WoW (Texturas Up / Down / Highlight) */
.paragon-btn-wow,
.btn-wow {
    background: url('../wow-ui/buttons/button-normal.png?v=2') no-repeat center center !important;
    background-size: 100% 100% !important;
    min-height: 48px !important;
    min-width: 210px !important;
    padding: 12px 36px !important;
    box-sizing: border-box !important;
    color: #f7ce65 !important;
    font-family: var(--font-epic) !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    text-shadow: 0 1px 3px #000, 0 0 10px rgba(0, 0, 0, 0.95) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.85) !important;
    transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease !important;
    outline: none !important;
    position: relative;
    user-select: none;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.paragon-btn-wow:hover,
.btn-wow:hover {
    background-image: url('../wow-ui/buttons/button-normal.png?v=2'), url('../wow-ui/buttons/button-highlight.png?v=2') !important;
    background-size: 100% 100%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, center !important;
    min-height: 48px !important;
    min-width: 210px !important;
    padding: 12px 36px !important;
    box-sizing: border-box !important;
    filter: brightness(1.22) contrast(1.1) !important;
    box-shadow: 0 0 24px rgba(247, 206, 101, 0.75), 0 6px 18px rgba(0, 0, 0, 0.9) !important;
    transform: translateY(-2px) !important;
    color: #fff2b2 !important;
}

.paragon-btn-wow:active,
.btn-wow:active {
    background-image: url('../wow-ui/buttons/button-pushed.png?v=2') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    min-height: 48px !important;
    min-width: 210px !important;
    padding: 13px 36px 11px !important;
    box-sizing: border-box !important;
    filter: brightness(0.95) !important;
    transform: translateY(1px) !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.95), 0 3px 6px rgba(0, 0, 0, 0.8) !important;
    color: #e5b342 !important;
}

/* 16.2 Ventana / Diálogo Oficial WoW 9-Slice */
.paragon-window,
.wow-dialog {
    border: 16px solid transparent !important;
    border-image-source: url('../wow-ui/frames/dialog-border.png?v=2') !important;
    border-image-slice: 16 fill !important;
    border-image-width: 16px !important;
    border-image-repeat: stretch !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.92) !important;
    background: #090a0f !important;
    box-sizing: border-box !important;
}

/* 16.3 Cabecera Ornamental de Diálogo */
.paragon-header-gold,
.wow-header-gold {
    background: url('../wow-ui/frames/dialog-header-gold.png?v=2') no-repeat center center !important;
    background-size: 100% 100% !important;
    width: auto !important;
    min-width: 260px !important;
    max-width: 360px !important;
    height: 64px !important;
    min-height: 56px !important;
    text-align: center !important;
    color: #ffe680 !important;
    font-family: var(--font-epic) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 32px 14px !important;
    box-sizing: border-box !important;
    text-shadow: 0 2px 4px #000, 0 0 8px rgba(0, 0, 0, 0.95) !important;
    margin: 0 auto 16px !important;
}

/* 16.4 Pergamino Antiguo Oficial (Quest / Lore) */
.paragon-quest-panel,
.wow-parchment {
    background: #f4e4c1 url('../wow-ui/parchment/quest-parchment-bg.png') repeat !important;
    background-repeat: repeat !important;
    background-size: auto !important;
    color: #2b1808 !important;
    padding: 26px 32px !important;
    border-radius: 4px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65) !important;
    border: 1px solid #d4b886 !important;
    font-family: 'Georgia', serif !important;
    line-height: 1.65 !important;
}

.paragon-quest-panel h1, .paragon-quest-panel h2, .paragon-quest-panel h3,
.wow-parchment h1, .wow-parchment h2, .wow-parchment h3 {
    color: #432207 !important;
    font-family: var(--font-epic) !important;
}

/* 16.5 Separador Ornamental de Anillo Dorado */
.paragon-divider,
.wow-divider {
    height: 14px !important;
    background: url('../wow-ui/ornaments/ring-border.png') no-repeat center !important;
    background-size: contain !important;
    border: none !important;
    margin: 28px auto !important;
    width: 100% !important;
    max-width: 340px !important;
    opacity: 0.9 !important;
}

/* 16.6 Barra de Progreso Oficial de WoW */
.paragon-progress-bar,
.wow-progress {
    background: url('../wow-ui/bars/xp-bar-empty.png') repeat-x !important;
    background-size: auto 100% !important;
    height: 18px !important;
    border-radius: 2px !important;
    border: 1px solid #222 !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8) !important;
}

.paragon-progress-fill,
.wow-progress-fill {
    background: url('../wow-ui/bars/xp-bar-fill.png') repeat-x !important;
    background-size: auto 100% !important;
    height: 100% !important;
    transition: width 0.3s ease !important;
}

/* 16.7 Ranuras de Equipamiento PaperDoll WoW (38x38px o 42x42px centrado) */
.paperdoll-slot-box {
    width: 48px;
    height: 48px;
    background-color: #0c0e14;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 38px 38px !important;
    border: 1.5px solid #2a2e3d;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.paperdoll-slot-box:hover {
    border-color: var(--gold-bright);
    box-shadow: 0 0 10px rgba(226, 183, 20, 0.4);
}

/* Ocultar iconos genéricos de FontAwesome en ranuras para dejar limpia la textura oficial */
.paperdoll-slot-box i,
.paperdoll-slot-box.empty i,
.item-slot.empty .item-icon-box i {
    display: none !important;
}

/* Mapeo estricto a .paperdoll-slot-box y .item-slot.empty para evitar superposiciones con items equipados */
.paperdoll-slot-box.slot-head,
.item-slot.empty.slot-head .item-icon-box,
.item-slot.empty .slot-head .item-icon-box            { background-image: url('../wow-ui/paperdoll/slot-head.png') !important; }

.paperdoll-slot-box.slot-shoulders,
.paperdoll-slot-box.slot-shoulder,
.item-slot.empty.slot-shoulders .item-icon-box,
.item-slot.empty.slot-shoulder .item-icon-box,
.item-slot.empty .slot-shoulders .item-icon-box      { background-image: url('../wow-ui/paperdoll/slot-shoulder.png') !important; }

.paperdoll-slot-box.slot-chest,
.item-slot.empty.slot-chest .item-icon-box,
.item-slot.empty .slot-chest .item-icon-box          { background-image: url('../wow-ui/paperdoll/slot-chest.png') !important; }

.paperdoll-slot-box.slot-wrists,
.item-slot.empty.slot-wrists .item-icon-box,
.item-slot.empty .slot-wrists .item-icon-box         { background-image: url('../wow-ui/paperdoll/slot-wrists.png') !important; }

.paperdoll-slot-box.slot-hands,
.item-slot.empty.slot-hands .item-icon-box,
.item-slot.empty .slot-hands .item-icon-box          { background-image: url('../wow-ui/paperdoll/slot-hands.png') !important; }

.paperdoll-slot-box.slot-waist,
.item-slot.empty.slot-waist .item-icon-box,
.item-slot.empty .slot-waist .item-icon-box          { background-image: url('../wow-ui/paperdoll/slot-waist.png') !important; }

.paperdoll-slot-box.slot-legs,
.item-slot.empty.slot-legs .item-icon-box,
.item-slot.empty .slot-legs .item-icon-box           { background-image: url('../wow-ui/paperdoll/slot-legs.png') !important; }

.paperdoll-slot-box.slot-feet,
.item-slot.empty.slot-feet .item-icon-box,
.item-slot.empty .slot-feet .item-icon-box           { background-image: url('../wow-ui/paperdoll/slot-feet.png') !important; }

.paperdoll-slot-box.slot-mainhand,
.item-slot.empty.slot-mainhand .item-icon-box,
.item-slot.empty .slot-mainhand .item-icon-box       { background-image: url('../wow-ui/paperdoll/slot-mainhand.png') !important; }

.paperdoll-slot-box.slot-secondaryhand,
.paperdoll-slot-box.slot-offhand,
.item-slot.empty.slot-secondaryhand .item-icon-box,
.item-slot.empty.slot-offhand .item-icon-box,
.item-slot.empty .slot-offhand .item-icon-box        { background-image: url('../wow-ui/paperdoll/slot-secondaryhand.png') !important; }

.paperdoll-slot-box.slot-ranged,
.item-slot.empty.slot-ranged .item-icon-box,
.item-slot.empty .slot-ranged .item-icon-box         { background-image: url('../wow-ui/paperdoll/slot-ranged.png') !important; }

.paperdoll-slot-box.slot-empty,
.paperdoll-slot-box.slot-neck,
.paperdoll-slot-box.slot-back,
.paperdoll-slot-box.slot-finger1,
.paperdoll-slot-box.slot-finger2,
.paperdoll-slot-box.slot-trinket1,
.paperdoll-slot-box.slot-trinket2,
.item-slot.empty.slot-empty .item-icon-box,
.item-slot.empty.slot-neck .item-icon-box,
.item-slot.empty.slot-back .item-icon-box,
.item-slot.empty.slot-finger1 .item-icon-box,
.item-slot.empty.slot-finger2 .item-icon-box,
.item-slot.empty.slot-trinket1 .item-icon-box,
.item-slot.empty.slot-trinket2 .item-icon-box,
.item-slot.empty .item-icon-box                      { background-image: url('../wow-ui/paperdoll/slot-empty.png') !important; }

/* 16.8 Marco Ornamental de Logro */
.achievement-gold-frame {
    border: 2px solid var(--gold-base);
    background: linear-gradient(180deg, rgba(20, 15, 8, 0.95) 0%, rgba(10, 8, 5, 0.98) 100%), url('../wow-ui/textures/stone-rock-dark.png') repeat;
    background-repeat: repeat;
    background-size: auto;
    box-shadow: 0 8px 20px rgba(0,0,0,0.85), inset 0 0 12px rgba(226, 183, 20, 0.15);
    border-radius: 4px;
    padding: 16px;
}