/* === TEMA NOCHE (Harbour Flame) — Default para nuevos usuarios ===
           También definido en :root como fallback por seguridad. */
        :root,
        [data-theme="noche"] {
            /* === PALETA EXACTA DE LA IMAGEN 1000003714.jpg "Harbour Flame" (Modo Noche) === */
            --bg-body: #0E171C;          /* El tono más oscuro de la paleta */
            --bg-body-glow: #2b2415;
            --bg-card: #1F303A;          /* Segundo bloque de la paleta */
            --bg-input: #1f303a;         /* Tercer bloque de la paleta */
            --bg-input-hover: hsl(202, 30%, 20%);
            --bg-input-field: #0c1920;     /* Fondo de input más oscuro y distinguible de la card */
            --bg-input-field-hover: #081215;  /* Fondo de input al enfocar aún más oscuro */
            
            --text-main: #ffbc05;
            --text-muted: #70b2d6;
            --text-result: #e0dfdf;
            
            --accent-gold: #fbbf24;
            --accent-gold-deep: #d97706;
            --accent-gold-soft: rgba(9, 243, 48, 0.1);
            --accent-primary: #d84f29;   /* El Naranja Flama de la paleta */
            --accent-primary-deep: #c44e2f;
            --accent-primary-soft: rgba(224, 106, 74, 0.15);
            --accent-blue: #3b82f6;
            --accent-purple: #a78bfa;
            --accent-purple-soft: rgba(167, 139, 250, 0.1);
            
            --success: #a0b910;
            --danger: #fa3b3b;
            
            --border-color: #476e86;     /* Cuarto bloque de la paleta */
            --border-focus: var(--accent-primary);
            
            --modal-overlay: rgba(28, 28, 14, 0.93);
            
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            
            --font-title: 'Outfit', 'Sora', 'DM Sans', sans-serif;
            --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
            --font-mono: 'JetBrains Mono', monospace;

            /* Albion específicos */
            --albion-bg: #0E171C;
            --albion-bg-subtle: #0c1920;
            --albion-surface: #1F303A;
            --albion-border: #476e86;
            --albion-border-strong: #70b2d6;
            --albion-text: #fafafa;
            --albion-text-muted: #9ca8b5;
            --albion-text-dim: #6b7a87;
            --albion-gold: #fbbf24;
            --albion-gold-bright: #ffbc05;
            --albion-profit: #a0b910;
            --albion-loss: #fa3b3b;
            --albion-cyan: #70b2d6;
            --albion-emerald: #a0b910;

            /* Velocidad 0.5x (Multiplicador de tiempo al doble) */
            --speed-multiplier: 2;
        }

        /* === TEMA DÍA - Paleta cálida terracota con profundidad === */
        [data-theme="dia"] {
            --bg-body: #DDD0C8;          /* Crema oscuro - NADA de blanco */
            --bg-body-glow: #E8DDD6;
            --bg-card: #F0E6DF;          /* Card crema - se distingue del body */
            --bg-input: #E8DDD6;         /* Fondo de filas dinámicas */
            --bg-input-hover: #DED1C8;   /* Hover de filas */
            --bg-input-field: #CBBBAB;   /* Input BIEN oscuro - se nota mucho */
            --bg-input-field-hover: #C0AE9E;  /* Input al enfocar */
            
            --text-main: #2E1F15;        /* Marrón muy oscuro - máximo contraste */
            --text-muted: #6B5C50;       /* Marrón medio - bien legible */
            --text-result: #2E1F15;
            
            --accent-gold: #9E7508;      /* Dorado oscuro fuerte */
            --accent-gold-deep: #7A5A06;
            --accent-gold-soft: rgba(158, 117, 8, 0.15);
            --accent-primary: #B84A30;   /* Terracota vibrante fuerte */
            --accent-primary-deep: #963A24;
            --accent-primary-soft: rgba(184, 74, 48, 0.14);
            --accent-blue: #3A6A8B;
            --accent-purple: #6B4E96;
            --accent-purple-soft: rgba(107, 78, 150, 0.14);
            
            --success: #71c161;
            --danger: #fa1919;
            
            --border-color: #B8A496;     /* Borde visible y con cuerpo */
            --border-focus: var(--accent-primary);
            
            --modal-overlay: rgba(46, 31, 21, 0.55);

            /* Albion específicos */
            --albion-bg: #DDD0C8;
            --albion-bg-subtle: #CBBBAB;
            --albion-surface: #F0E6DF;
            --albion-border: #B8A496;
            --albion-border-strong: #6B5C50;
            --albion-text: #2E1F15;
            --albion-text-muted: #5a4d42;
            --albion-text-dim: #8a7d70;
            --albion-gold: #9E7508;
            --albion-gold-bright: #7A5A06;
            --albion-profit: #2d8a3c;
            --albion-loss: #fa1919;
            --albion-cyan: #3A6A8B;
            --albion-emerald: #2d8a3c;
        }

        /* === TEMA DARK - Cyberpunk Neon (paleta de diseño.html) ===
           Versión equilibrada: negro con profundidad, NO plano.
           Tintes púrpura/azul sutiles levantan el negro puro. */
        [data-theme="dark"] {
            --bg-body: #0d0d14;            /* Negro con tinte púrpura sutil (no #0a0a0f plano) */
            --bg-body-glow: #1a1a2e;
            --bg-card: #14141f;            /* Card más clara que el body (profundidad) */
            --bg-input: #1a1a28;           /* Filas dinámicas aún más claras */
            --bg-input-hover: #20202f;
            --bg-input-field: #0a0a12;     /* Input más oscuro que el card (efecto hundido) */
            --bg-input-field-hover: #060610;

            --text-main: #e0e7ff;          /* Periwinkle claro */
            --text-muted: #cbd5e1;         /* Gris claro aclarado (antes #8b8ba0, ahora legible en fondo oscuro) */
            --text-result: #e0e0e0;

            --accent-gold: #f59e0b;
            --accent-gold-deep: #d97706;
            --accent-gold-soft: rgba(245, 158, 11, 0.1);
            --accent-primary: #8b5cf6;     /* Púrpura cyberpunk */
            --accent-primary-deep: #7c3aed;
            --accent-primary-soft: rgba(139, 92, 246, 0.12);
            --accent-blue: #06b6d4;        /* Cyan neón */
            --accent-purple: #a78bfa;
            --accent-purple-soft: rgba(167, 139, 250, 0.12);

            --success: #22c55e;
            --danger: #ef4444;

            --border-color: rgba(139, 92, 246, 0.18);  /* Borde más sutil */
            --border-focus: var(--accent-primary);

            --modal-overlay: rgba(10, 10, 15, 0.85);   /* Overlay menos opaco */

            --radius-sm: 4px;
            --radius-md: 4px;
            --radius-lg: 4px;

            --font-title: 'Outfit', 'Inter', 'Sora', sans-serif;
            --font-body: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
            --font-mono: 'JetBrains Mono', monospace;

            /* Albion específicos */
            --albion-bg: #0d0d14;
            --albion-bg-subtle: #0a0a12;
            --albion-surface: #14141f;
            --albion-border: rgba(139, 92, 246, 0.18);
            --albion-border-strong: #8b5cf6;
            --albion-text: #fafafa;
            --albion-text-muted: #94a3b8;
            --albion-text-dim: #64748b;
            --albion-gold: #f59e0b;
            --albion-gold-bright: #fbbf24;
            --albion-profit: #22c55e;
            --albion-loss: #ef4444;
            --albion-cyan: #06b6d4;
            --albion-emerald: #22c55e;

            --speed-multiplier: 2;
        }

        /* === TEMA ORO - Oro & Negro (paleta de diseño10.html) === */
        [data-theme="oro"] {
            --bg-body: #0a0a0f;
            --bg-body-glow: #1a1a24;
            --bg-card: #14141e;
            --bg-input: #1a1a24;
            --bg-input-hover: #22222e;
            --bg-input-field: #0f0f17;
            --bg-input-field-hover: #08080d;

            --text-main: #fafafa;
            --text-muted: #d4d4d8;         /* Gris claro legible */
            --text-result: #e5e7eb;

            --accent-gold: #f59e0b;
            --accent-gold-deep: #d97706;
            --accent-gold-soft: rgba(245, 158, 11, 0.12);
            --accent-primary: #f59e0b;        /* Dorado principal */
            --accent-primary-deep: #d97706;
            --accent-primary-soft: rgba(245, 158, 11, 0.12);
            --accent-blue: #06b6d4;
            --accent-purple: #a78bfa;
            --accent-purple-soft: rgba(167, 139, 250, 0.1);

            --success: #22c55e;
            --danger: #ef4444;

            --border-color: rgba(245, 158, 11, 0.2);
            --border-focus: var(--accent-primary);

            --modal-overlay: rgba(10, 10, 15, 0.93);

            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 12px;

            --font-title: 'Outfit', 'Inter', 'Sora', sans-serif;
            --font-body: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
            --font-mono: 'JetBrains Mono', monospace;

            /* Albion específicos */
            --albion-bg: #0a0a0f;
            --albion-bg-subtle: #0f0f17;
            --albion-surface: #14141e;
            --albion-border: rgba(245, 158, 11, 0.2);
            --albion-border-strong: #f59e0b;
            --albion-text: #fafafa;
            --albion-text-muted: #d4d4d8;
            --albion-text-dim: #a1a1aa;
            --albion-gold: #f59e0b;
            --albion-gold-bright: #d97706;
            --albion-profit: #22c55e;
            --albion-loss: #ef4444;
            --albion-cyan: #06b6d4;
            --albion-emerald: #22c55e;

            --speed-multiplier: 2;
        }

        /* === TEMA AZUL - Azul Celeste (paleta de diseño11.html diseño 2) === */
        [data-theme="azul"] {
            --bg-body: #e8e8ec;
            --bg-body-glow: #f1f5f9;
            --bg-card: #ffffff;
            --bg-input: #f8fafc;
            --bg-input-hover: #f1f5f9;
            --bg-input-field: #eef2ff;
            --bg-input-field-hover: #e0e7ff;

            --text-main: #1e1b4b;
            --text-muted: #6b7280;         /* Oscurecido de #94a3b8 para mejor legibilidad */
            --text-result: #1a1a2e;

            --accent-gold: #d97706;
            --accent-gold-deep: #b45309;
            --accent-gold-soft: rgba(217, 119, 6, 0.1);
            --accent-primary: #6366f1;        /* Indigo principal */
            --accent-primary-deep: #4f46e5;
            --accent-primary-soft: rgba(99, 102, 241, 0.1);
            --accent-blue: #06b6d4;           /* Cyan del gradiente */
            --accent-purple: #8b5cf6;
            --accent-purple-soft: rgba(139, 92, 246, 0.1);

            --success: #16a34a;
            --danger: #dc2626;

            --border-color: #e0e7ff;
            --border-focus: var(--accent-primary);

            --modal-overlay: rgba(30, 27, 75, 0.55);

            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 12px;

            --font-title: 'Outfit', 'Inter', 'Sora', sans-serif;
            --font-body: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
            --font-mono: 'JetBrains Mono', monospace;

            /* Albion específicos */
            --albion-bg: #e8e8ec;
            --albion-bg-subtle: #eef2ff;
            --albion-surface: #ffffff;
            --albion-border: #e0e7ff;
            --albion-border-strong: #6366f1;
            --albion-text: #1e1b4b;
            --albion-text-muted: #4b5563;
            --albion-text-dim: #9ca3af;
            --albion-gold: #d97706;
            --albion-gold-bright: #b45309;
            --albion-profit: #15803d;
            --albion-loss: #dc2626;
            --albion-cyan: #06b6d4;
            --albion-emerald: #15803d;

            --speed-multiplier: 2;
        }

        /* === TEMA ROSA - Rosa Dulce (paleta basada en diseño11.html diseño 4) ===
           Fondo rosa saturado #FFB0B7 con cards blancas para contraste y armonía.
           Texto vino oscuro para legibilidad máxima sobre el fondo rosa. */
        [data-theme="rosa"] {
            --bg-body: #FFB0B7;            /* Rosa saturado (fondo dominante) */
            --bg-body-glow: #ffc5cd;
            --bg-card: #ffffff;            /* Card blanca pura para contrastar con el fondo rosa */
            --bg-input: #fff5f7;           /* Filas dinámicas rosa muy tenue */
            --bg-input-hover: #ffe4e6;
            --bg-input-field: #ffffff;     /* Input field blanco */
            --bg-input-field-hover: #fef2f4;

            --text-main: #881337;          /* Vino oscuro (sobre fondo rosa: máximo contraste) */
            --text-muted: #4b5563;         /* Gris oscuro moderado (oscurecido para legibilidad) */
            --text-result: #1f2937;

            --accent-gold: #d97706;
            --accent-gold-deep: #b45309;
            --accent-gold-soft: rgba(217, 119, 6, 0.1);
            --accent-primary: #e11d48;     /* Rosa profundo (acento) */
            --accent-primary-deep: #be123c;
            --accent-primary-soft: rgba(225, 29, 72, 0.1);
            --accent-blue: #0891b2;
            --accent-purple: #a855f7;
            --accent-purple-soft: rgba(168, 85, 247, 0.1);

            --success: #16a34a;
            --danger: #dc2626;

            /* Albion específicos */
            --albion-bg: #FFB0B7;
            --albion-bg-subtle: #fff5f7;
            --albion-surface: #ffffff;
            --albion-border: #fecdd3;
            --albion-border-strong: #e11d48;
            --albion-text: #881337;
            --albion-text-muted: #58182c;
            --albion-text-dim: #9d2949;
            --albion-gold: #d97706;
            --albion-gold-bright: #b45309;
            --albion-profit: #15803d;
            --albion-loss: #dc2626;
            --albion-cyan: #0891b2;
            --albion-emerald: #15803d;

            --border-color: #fecdd3;       /* Borde rosa sutil */
            --border-focus: var(--accent-primary);

            --modal-overlay: rgba(136, 19, 55, 0.55);

            --radius-sm: 10px;
            --radius-md: 16px;
            --radius-lg: 16px;

            --font-title: 'Inter', 'Sora', sans-serif;
            --font-body: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
            --font-mono: 'JetBrains Mono', monospace;

            --speed-multiplier: 2;
        }

        [data-theme="dia"] .container,
        [data-theme="dia"] .config-card,
        [data-theme="dia"] .stat-card,
        [data-theme="dia"] .summary-card,
        [data-theme="dia"] .chart-card,
        [data-theme="dia"] .history-list-item,
        [data-theme="dia"] .history-modal-card,
        [data-theme="dia"] .login-card,
        [data-theme="dia"] .tabs-container {
            box-shadow: 0 4px 8px -2px rgba(46, 31, 21, 0.18), 0 2px 4px -2px rgba(46, 31, 21, 0.10);
            border: 1px solid var(--border-color);
        }

        [data-theme="dia"] h1 {
            text-shadow: 0 2px 12px rgba(184, 74, 48, 0.15);
        }

        [data-theme="dia"] input,
        [data-theme="dia"] select {
            background: var(--bg-input-field);
            border: 1px solid var(--border-color);
            color: #000000;
            box-shadow: inset 0 1px 4px rgba(46, 31, 21, 0.12);
        }

        [data-theme="dia"] input:focus,
        [data-theme="dia"] select:focus {
            background: var(--bg-input-field-hover);
            box-shadow: 0 0 0 4px rgba(184, 74, 48, 0.18);
        }

        [data-theme="dia"] input::placeholder,
        [data-theme="dia"] select::placeholder { color: #8A7A6E; }

        [data-theme="dia"] .dynamic-row {
            background: #E0D5CC;
            border-color: var(--border-color);
        }

        [data-theme="dia"] .dynamic-row:hover {
            background: #F0E6DF;
            border-color: var(--accent-primary);
        }

        [data-theme="dia"] .btn-toggle-descuento {
            background: rgba(168, 50, 50, 0.12);
            border-color: rgba(168, 50, 50, 0.28);
        }

        [data-theme="dia"] .btn-toggle-descuento.bono {
            background: rgba(46, 125, 78, 0.12);
            border-color: rgba(46, 125, 78, 0.28);
        }

        [data-theme="dia"] .btn-remove {
            background: rgba(168, 50, 50, 0.10);
        }

        [data-theme="dia"] .cofre-label {
            background: rgba(184, 74, 48, 0.15);
            border-color: rgba(184, 74, 48, 0.30);
            color: #963A24;
        }

        [data-theme="dia"] .autocomplete-list {
            background: #F0E6DF;
            box-shadow: 0 12px 30px rgba(46, 31, 21, 0.22);
        }

        [data-theme="dia"] .autocomplete-list li:hover,
        [data-theme="dia"] .autocomplete-list li.highlighted {
            background: #E0D5CC;
        }

        [data-theme="dia"] #resultado,
        [data-theme="dia"] .history-modal-content {
            background: #D6C8BC;
            color: #2E1F15;
            border-color: var(--border-color);
            box-shadow: none;
        }

        [data-theme="dia"] .distribution-chart,
        [data-theme="dia"] #resultado {
            background: #D6C8BC;
        }

        [data-theme="dia"] .dist-bar-bg,
        [data-theme="dia"] .penalty-row {
            background: #C8B8AB;
        }

        [data-theme="dia"] .kbd-hint kbd {
            background: #E0D5CC;
            color: var(--text-muted);
        }

        [data-theme="dia"] .history-empty {
            border-color: var(--border-color);
            background: #F0E6DF;
        }

        [data-theme="dia"] .split-toggle.on {
            background: #dcfce7;
            border-color: #86efac;
            color: #15803d;
        }
        [data-theme="dia"] .split-toggle.on .dot {
            background: #15803d;
            box-shadow: 0 0 6px rgba(21, 128, 61, 0.3);
        }


        * {
            box-sizing: border-box;
            scrollbar-width: thin;
            scrollbar-color: var(--bg-input-hover) var(--bg-card);
        }

        /* --- BLOQUE CORREGIDO PARA FLUIDEZ --- */
body {
    font-family: var(--font-body);
    background:
        radial-gradient(ellipse at top, var(--bg-body-glow) 0%, var(--bg-body) 75%),
        var(--bg-body);
    background-attachment: fixed;
    color: var(--text-main);
    margin: 0;
    padding: 20px 12px;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    /* Se remueve la transición por defecto para evitar el lag de repintado masivo */
    transition: none !important; 
}

*, *::before, *::after {
    box-sizing: border-box;
}
/* Ocultar flechas de control de número (spinners) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* Evitamos que los elementos individuales calculen transiciones pesadas durante el uso normal */
.card, input, select, .dynamic-row, #resultado, .container, .config-card {
    transition: none !important;
}

/* ¡El truco de la clase temporal! Solo se aplicará una transición ultra fluida durante el cuarto de segundo del cambio de tema */
.theme-switching,
.theme-switching body,
.theme-switching .container,
.theme-switching .config-card,
.theme-switching .dynamic-row,
.theme-switching input,
.theme-switching select,
.theme-switching #resultado {
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; 
                background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important 
                color 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important,
                border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* ------------------------------------ */
        .main-wrapper {
            width: 100%;
            max-width: 1140px;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        /* === TABS RESPONSIVE (6 pestañas) === */
        .tabs-container {
            display: flex;
            background: var(--bg-card);
            padding: 6px;
            border-radius: 99px;
            border: 1px solid var(--border-color);
            gap: 6px;
            position: relative;
            overflow-x: auto;
            scrollbar-width: thin;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x proximity;
        }
        .tabs-container::-webkit-scrollbar { height: 4px; }
        .tabs-container::-webkit-scrollbar-thumb { background: var(--bg-input-hover); border-radius: 99px; }

        .tab-btn {
            flex: 1 0 auto;
            min-width: 0;
            padding: 12px 10px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-weight: 600;
            font-family: var(--font-body);
            font-size: 0.9rem;
            border-radius: 99px;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            position: relative;
            scroll-snap-align: start;
            white-space: nowrap;
        }

        .tab-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

        .tab-btn:hover { color: var(--text-main); background: var(--bg-input); }
        .tab-btn.active {
            background: var(--accent-primary);
            color: var(--text-main);
            font-weight: 700;
            box-shadow: 0 4px 14px rgba(224, 106, 74, 0.4);
        }
        [data-theme="dark"] .tab-btn.active {
            box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
        }
        
        [data-theme="dia"] .tab-btn.active {
            color: #FFF8F5;
            background: var(--accent-primary);
            box-shadow: 0 4px 14px rgba(192, 86, 58, 0.30);
        }

        .tab-badge {
            position: absolute;
            top: 4px;
            right: calc(50% - 45px);
            background: var(--danger);
            color: var(--text-main);
            font-size: 0.7rem;
            font-weight: 700;
            min-width: 18px;
            height: 18px;
            border-radius: 99px;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 0 5px;
            border: 2px solid var(--bg-card);
        }
        .tab-badge.visible { display: flex; }

        /* === Contenedor Principal === */
        .container {
            background: var(--bg-card);
            padding: 28px;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            position: relative;
            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
        }

        .view-panel { display: none; }
        .view-panel.active { display: block; }

        /* === HEADER AREA === */
        .panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 28px;
            position: relative;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border-color);
        }

        .panel-header-center {
            flex: 1;
            text-align: center;
        }

        .header-actions {
            display: flex;
            gap: 12px;
            align-items: center;
            z-index: 10;
            position: relative;
        }

        h1 {
            color: var(--accent-primary);
            font-family: var(--font-title);
            font-size: 2rem;
            font-weight: 800;
            margin: 0 0 4px 0;
            text-align: center;
            letter-spacing: 0.5px;
        }

        .subtitle {
            text-align: center;
            color: var(--text-muted);
            font-size: 0.9rem;
            margin-bottom: 0;
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        h2 {
            font-family: var(--font-title);
            color: var(--accent-primary);
            letter-spacing: 0.3px;
        }

        h3 {
            padding-bottom: 0;
            font-size: 0.8rem;
            color: var(--text-main);
            margin: 0 0 12px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        label {
            display: block;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text-muted);
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }

        /* === TWO-COLUMN LAYOUT === */
        .panel-grid {
            display: grid;
            grid-template-columns: 55fr 45fr;
            gap: 28px;
            align-items: start;
        }

        .panel-left,
        .panel-right {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .panel-right {
            position: sticky;
            top: 20px;
        }

        /* === CONFIG CARDS === */
        .config-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 22px;
            overflow: hidden;
            box-sizing: border-box;
        }

        .config-card .section-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 18px;
            padding-left: 12px;
            border-left: 4px solid var(--accent-primary);
        }

        .config-card .section-header h3 {
            margin: 0;
        }

        .config-card.card-gastos .section-header {
            border-left-color: var(--danger);
        }

        .config-card.card-jugadores .section-header {
            border-left-color: var(--accent-gold);
        }

        .top-form-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1.5fr;
            gap: 16px;
        }

        /* === RONDA 14: select "Cofre" con el MISMO estilo que los inputs
           "ID Raid" y "Loot Total" (mismo cajón). Antes el select se quedaba
           con el estilo genérico (padding 12px, radio 4px, fuente 15.2px)
           mientras los inputs tenían el estilo albion (padding 10px, radio
           8px, fuente 14px) → se veía DISTINTO. Ahora los tres cajones de
           "Datos del Raid" son idénticos (el select conserva su flecha).
           height fija: los <select> nativos miden ~2px más que los <input>
           con el mismo padding; 39px es la altura exacta de ID Raid y
           Loot Total. === */
        .top-form-row select#cofreType {
            background-color: var(--albion-bg);
            border: 1px solid var(--albion-border);
            color: var(--albion-text);
            /* padding-left 11px: el <select> nativo suma ~3px de inset interno
               al texto; así el texto arranca a la misma altura que en los inputs */
            padding: 10px 14px 10px 11px;
            border-radius: 8px;
            font-family: var(--font-body);
            font-size: 14px;
            height: 39px;
            box-sizing: border-box;
            cursor: pointer;
        }

        /* === INPUTS === */
        input, select {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            padding: 12px 14px;
            background: var(--bg-input-field);  /* Fondo de input más oscuro que el card */
            border: 1px solid var(--border-color);
            color: #e1e1e1;  /* Texto gris claro suave (no blanco puro) para modo noche - más legible */
            border-radius: var(--radius-md);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18);  /* Sombra interior para efecto hundido */
            font-family: var(--font-body);
            font-size: 0.95rem;
            font-weight: 500;
            transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;  /* Optimizado: solo propiedades que cambian */
            outline: none;
        }
        [data-theme="dark"] input,
        [data-theme="dark"] select {
            color: #e0e7ff;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
        }

        @keyframes pulseAura {
            0% {
                box-shadow: 0 0 5px 1px color-mix(in srgb, var(--accent-primary, #6366f1) 26%, transparent),
                            0 0 10px 1px color-mix(in srgb, var(--albion-cyan, #06b6d4) 21%, transparent) !important;
            }
            100% {
                box-shadow: 0 0 14px 3px color-mix(in srgb, var(--accent-primary, #6366f1) 64%, transparent),
                            0 0 22px 4px color-mix(in srgb, var(--albion-cyan, #06b6d4) 42%, transparent) !important;
            }
        }

        input:focus, select:focus, textarea:focus,
        [data-theme] input:focus, [data-theme] select:focus, [data-theme] textarea:focus {
            outline: none !important;
            border-color: var(--accent-primary) !important;
            background: var(--bg-input-field-hover) !important;
            box-shadow: 0 0 5px 1px color-mix(in srgb, var(--accent-primary, #6366f1) 26%, transparent) !important;
            animation: pulseAura 1.55s ease-in-out infinite alternate !important;
        }

        input::placeholder, select::placeholder { color: #6b7e8a; }
        [data-theme="dark"] input::placeholder,
        [data-theme="dark"] select::placeholder { color: #4b5563; }

        /* Custom styling for native dropdown option lists */
        select option {
            background-color: var(--bg-input-field) !important;
            color: #e1e1e1 !important;
        }
        [data-theme="dark"] select option {
            color: #e0e7ff !important;
        }
        [data-theme="dia"] select option {
            background-color: var(--bg-input-field) !important;
            color: #000000 !important;
        }

        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type=number] { -moz-appearance: textfield; }

        /* === DYNAMIC ROWS === */
        .dynamic-row {
            display: grid;
            gap: 12px;
            align-items: center;
            background: var(--bg-input);
            padding: 12px;
            border-radius: var(--radius-md);
            border: 1px solid transparent;
            margin-bottom: 10px;
            transition: background 0.2s ease, border-color 0.2s ease;  /* Optimizado: solo propiedades que cambian */
        }

        .dynamic-row:hover {
            background: var(--bg-input-hover);
            border-color: var(--border-color);
        }

        /* ORDEN PC JUGADORES */
        #listaJugadores .dynamic-row {
            grid-template-columns: 38px 1fr 52px 110px 38px 38px 38px;
        }

        #listaJugadores .user-pct {
            text-align: center;
            padding-left: 4px;
            padding-right: 4px;
            font-size: 0.9rem;
        }

        #listaGastos .dynamic-row {
            grid-template-columns: 1fr 130px 38px;
        }

        .cofre-label {
            width: 100%;
            padding: 0;
            justify-content: center;
            background: var(--accent-primary-soft);
            color: var(--accent-primary);
            border-radius: var(--radius-sm);
            font-size: 0.9rem;
            font-weight: 700;
            height: 38px;
            display: flex;
            align-items: center;
            cursor: grab;
            border: 1px solid rgba(224, 106, 74, 0.25);
            transition: background 0.15s ease, color 0.15s ease;
        }
        [data-theme="dark"] .cofre-label {
            border-color: rgba(139, 92, 246, 0.25);
        }
        
        .cofre-label:hover {
            background: var(--accent-primary);
            color: var(--bg-body);
        }

        .autocomplete-container { position: relative; width: 100%; }

        /* === BUTTONS === */
        .btn {
            padding: 11px 18px;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            font-weight: 600;
            font-family: var(--font-body);
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
            gap: 8px;
        }

        .btn:active { transform: scale(0.96); }

        .btn-add {
            background: transparent;
            color: var(--text-muted);
            border: 2px dashed var(--border-color);
            width: 100%;
            margin-top: 6px;
            font-size: 0.9rem;
            padding: 12px;
        }
        .btn-add:hover { border-color: var(--accent-primary); color: var(--accent-primary); background: var(--accent-primary-soft); }

        .btn-sq {
            width: 38px; height: 38px; padding: 0;
            border-radius: var(--radius-sm); font-size: 1rem;
        }

        .btn-copy-name { background: var(--accent-primary-soft); color: var(--accent-primary); }
        .btn-copy-name:hover { background: var(--accent-primary); color: var(--text-main); }
        [data-theme="dia"] .btn-copy-name:hover { color: #FFF8F5; background: var(--accent-primary-deep); }

        .btn-check { background: var(--bg-input-hover); border: 1px solid var(--border-color); color: var(--text-muted); }
        .btn-check.is-checked { background: var(--accent-primary); color: var(--text-main); border-color: var(--accent-primary); }
        [data-theme="dia"] .btn-check.is-checked { color: #FFF8F5; background: var(--success); border-color: var(--success); }

        .btn-remove { background: rgba(244, 63, 94, 0.1); color: var(--danger); }
        .btn-remove:hover { background: var(--danger); color: var(--text-main); }

        /* === STATS GRID === */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
            gap: 12px;
        }


        .stat-card {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 16px 14px;
            background: var(--bg-card);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
            border-left: 4px solid var(--border-color);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
            transition: background 0.15s ease, border-color 0.15s ease;
        }

        .stat-card.gold { border-left-color: var(--accent-gold); }
        .stat-card.danger { border-left-color: var(--danger); }
        .stat-card.success { border-left-color: var(--accent-primary); }
        .stat-card.blue { border-left-color: var(--text-main); }
        .stat-card.purple { border-left-color: var(--accent-purple); }

        .stat-card-label {
            font-size: 0.72rem;
            color: var(--text-muted);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .stat-card-label svg { width: 14px; height: 14px; }

        .stat-card-value {
            font-size: 1.25rem;
            font-weight: 700;
            font-family: var(--font-mono);
            color: var(--text-main);
        }

        .stat-card.gold .stat-card-value { color: var(--accent-gold); }
        .stat-card.success .stat-card-value { color: var(--accent-primary); }
        .stat-card.danger .stat-card-value { color: var(--danger); }
        .stat-card.purple .stat-card-value { color: var(--accent-purple); }
        .stat-card.blue .stat-card-value { color: var(--text-main); }

        /* === SPLIT TOGGLE === */
        .split-toggle {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 6px 14px; border-radius: 99px;
            background: var(--bg-input); border: 1px solid var(--border-color);
            color: var(--text-muted); font-size: 0.85rem; cursor: pointer;
            font-weight: 700; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; font-family: var(--font-body);
        }
        .split-toggle .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); transition: background 0.15s ease, box-shadow 0.15s ease; }
        .split-toggle.on { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.25); color: #10b981; }
        .split-toggle.on .dot { background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); }


        /* === DESCUENTO WRAPPER === */
        .descuento-wrapper {
            display: grid;
            grid-template-columns: 32px 1fr;
            gap: 6px;
        }

        .btn-toggle-descuento {
            width: 32px; height: 38px; padding: 0;
            border-radius: var(--radius-sm);
            font-size: 1.1rem; font-weight: 700;
            background: rgba(244, 63, 94, 0.15);
            color: var(--danger);
            border: 1px solid rgba(244, 63, 94, 0.25);
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }
        .btn-toggle-descuento.bono {
            background: rgba(2, 156, 113, 0.15);
            color: var(--accent-primary);
            border-color: rgba(2, 156, 113, 0.25);
        }

        .user-descuento-monto {
            text-align: center;
            padding: 12px 6px !important;
            font-size: 0.85rem !important;
            font-family: var(--font-mono) !important;
        }

        /* === RESULTADO WRAPPER + MANUAL BADGE === */
        .resultado-wrapper { position: relative; }

        .manual-badge {
            position: absolute;
            top: 12px; right: 12px;
            background: var(--accent-purple-soft);
            color: var(--accent-purple);
            border: 1px solid rgba(167, 139, 250, 0.3);
            padding: 4px 12px;
            border-radius: 99px;
            font-size: 0.75rem;
            font-weight: 700;
            display: none;
            align-items: center;
            gap: 6px;
            z-index: 5;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .manual-badge.visible { display: flex; }
        .manual-badge svg { width: 12px; height: 12px; }

        #resultado {
            background: #15222b;
            padding: 20px;
            border-radius: var(--radius-md);
            white-space: pre-wrap;
            font-family: var(--font-mono);
            font-size: 0.88rem;
            border: 1px solid var(--border-color);
            color: var(--text-result);
            line-height: 1.75;
            min-height: 140px;
            word-wrap: break-word;
            overflow-wrap: break-word;
            box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
        }
        [data-theme="dark"] #resultado {
            background: var(--bg-input-field);
            box-shadow: inset 0 0 30px rgba(139, 92, 246, 0.04);
        }

        /* === DISTRIBUTION CHART === */
        .distribution-chart {
            margin-top: 16px;
            background: #15222b;
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
            display: none;
            overflow: hidden;
        }
        [data-theme="dark"] .distribution-chart {
            background: var(--bg-input-field);
        }
        .distribution-chart.visible { display: block; }

        .distribution-chart-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            cursor: pointer;
            user-select: none;
            transition: background 0.2s;
            border-bottom: 1px solid transparent;
        }
        .distribution-chart-header:hover { background: var(--bg-input); }
        .distribution-chart.expanded .distribution-chart-header { border-bottom-color: var(--border-color); }
        
        .distribution-chart-title {
            font-size: 0.8rem;
            color: var(--text-muted);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .distribution-chart-toggle { color: var(--accent-gold); font-size: 0.8rem; transition: transform 0.2s ease; }
        .distribution-chart.expanded .distribution-chart-toggle { transform: rotate(180deg); }
        .distribution-chart-body { padding: 16px; display: none; }
        .distribution-chart.expanded .distribution-chart-body { display: block; }

        .dist-row {
            display: grid;
            grid-template-columns: minmax(120px, 200px) 1fr 95px;
            gap: 12px;
            align-items: center;
            margin-bottom: 8px;
            font-size: 0.88rem;
        }
        .dist-name { color: var(--text-main); font-weight: 500; line-height: 1.3; }
        .dist-bar-bg {
            background: var(--bg-input-hover);
            border-radius: var(--radius-sm);
            height: 16px;
            overflow: hidden;
            border: 1px solid var(--border-color);
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
            box-sizing: border-box;
            display: flex;
            align-items: center;
        }

        .dist-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent-primary-deep) 0%, var(--accent-primary) 100%);
            border-radius: 4px;
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .dist-value { color: var(--accent-primary); font-weight: 700; text-align: right; font-family: var(--font-mono); font-size: 0.85rem; }

        /* === ACTION GRID === */
        .action-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-top: 16px;
        }

        .action-grid .btn {
            padding: 8px 10px;
            font-size: 0.8rem;
            font-weight: 700;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.15s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            height: 34px;
            border: none;
            box-sizing: border-box;
            font-family: var(--font-body);
        }

        .btn-discord {
            background: #5865F2;
            color: #ffffff !important;
        }
        .btn-discord:hover {
            background: #4752c4;
            box-shadow: 0 4px 10px rgba(88, 101, 242, 0.3);
        }
        
        .btn-save {
            background: var(--success);
            color: #ffffff !important;
        }
        .btn-save:hover {
            filter: brightness(0.92);
            box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3);
        }
        [data-theme="dia"] .btn-save {
            color: #FFF8F5 !important;
        }
        
        .btn-outline {
            background: var(--bg-input);
            border: 1px solid var(--border-color);
            color: var(--text-main);
        }
        .btn-outline:hover {
            background: var(--bg-input-hover);
            border-color: var(--text-muted);
        }
        
        .btn-danger-outline {
            background: rgba(244, 63, 94, 0.05);
            border: 1px solid rgba(244, 63, 94, 0.3);
            color: var(--danger);
        }
        .btn-danger-outline:hover {
            background: var(--danger);
            color: #ffffff !important;
            border-color: var(--danger);
            box-shadow: 0 4px 10px rgba(244, 63, 94, 0.3);
        }


        .action-grid .btn-span-2 { grid-column: span 2; }
        .action-grid .btn-span-3 { grid-column: span 3; }

        /* === ROLE BADGE & LOGIN === */
        .role-badge {
            padding: 6px 14px; border-radius: 99px; font-size: 0.85rem; font-weight: 700;
            background: var(--bg-input); border: 1px solid var(--border-color);
            color: var(--text-muted);
        }
        .role-badge.admin { color: var(--accent-gold); border-color: rgba(251, 191, 36, 0.3); background: var(--accent-gold-soft); }

        #btnLoginToggle {
            padding: 6px 14px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600;
            background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); cursor: pointer;
            font-family: var(--font-body); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }
        #btnLoginToggle:hover { border-color: var(--text-main); color: var(--text-main); }

        /* === THEME TOGGLE === */
        #btnThemeToggle {
            padding: 6px 12px; border-radius: var(--radius-sm); font-size: 1.1rem;
            background: transparent; border: 1px solid var(--border-color); color: var(--text-muted);
            cursor: pointer; line-height: 1; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }
        #btnThemeToggle:hover { background: var(--bg-input); color: var(--accent-gold); border-color: var(--accent-gold); }

        /* === COLLAPSE TOGGLE === */
        .collapse-toggle {
            margin-left: auto; background: transparent; border: 1px solid var(--border-color); color: var(--text-muted);
            cursor: pointer; font-size: 0.75rem; padding: 6px 10px; border-radius: var(--radius-sm); transition: background 0.15s ease, color 0.15s ease;
        }
        .collapse-toggle:hover { background: var(--bg-input); color: var(--text-main); }
        #discordSection.collapsed .resultado-wrapper,
        #discordSection.collapsed #saveStatus,
        #discordSection.collapsed #distributionChart { display: none; }
        #discordSection.collapsed .collapse-toggle { transform: rotate(-90deg); }

        /* === WEBHOOK SETTINGS === */
        .webhook-trigger {
            padding: 6px 12px; border-radius: var(--radius-sm); font-size: 1.1rem;
            background: transparent; border: 1px solid var(--border-color); color: var(--text-muted);
            cursor: pointer; line-height: 1; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .webhook-trigger:hover { background: var(--bg-input); color: var(--accent-gold); border-color: var(--accent-gold); }

        .webhook-popover {
            position: absolute !important; top: calc(100% + 6px); right: 0;
            background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md);
            padding: 14px; width: 310px; max-width: calc(100vw - 24px); z-index: 9999;
            box-shadow: 0 12px 32px rgba(0,0,0,0.55); display: none; font-size: 0.85rem;
            backdrop-filter: blur(8px);
            max-height: 550px; overflow-y: auto;
        }
        .webhook-popover.visible { display: block; }
        .webhook-popover-title {
            font-family: var(--font-title); color: var(--accent-gold); font-size: 1rem; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
        }
        .webhook-popover-label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; }
        .webhook-popover input[type="url"] { width: 100%; padding: 10px 12px; font-size: 0.88rem; margin-bottom: 14px; }
        .webhook-popover-actions {
            display: flex;
            gap: 6px;
            justify-content: flex-end;
            flex-wrap: nowrap;
            align-items: center;
        }
        .webhook-popover-actions button {
            flex: 0 0 auto;
            padding: 6px 12px;
            border-radius: var(--radius-sm);
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            border: 1px solid var(--border-color);
            background: var(--bg-input);
            color: var(--text-main);
            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
            text-align: center;
            white-space: nowrap;
        }
        .webhook-popover-actions button:hover { background: var(--bg-input-hover); }
        .webhook-popover-actions button.btn-save-webhook { background: var(--accent-primary); color: var(--text-main); border-color: var(--accent-primary); font-weight: 700; }
        [data-theme="dia"] .webhook-popover-actions button.btn-save-webhook { color: #FFF8F5; }

        .webhook-popover-status { font-size: 0.8rem; margin-top: 10px; min-height: 16px; font-weight: 500; }
        .webhook-popover-status.ok { color: var(--accent-primary); }
        .webhook-popover-status.error { color: var(--danger); }

        /* === FIX v10h: opciones gris+disabled en el dropdown de servidores Discord === */
        /* Caso: el servidor Discord tiene premium, el usuario es miembro, PERO no tiene
           permisos de bot (SendMessages + ReadMessageHistory). El backend marca
           `bot_access: false` y el frontend agrega `disabled` + class `option-no-bot-access`
           al <option>. Así el usuario VE que la guild existe (no está oculta) pero no puede
           cliquearla. Esto le da feedback visual claro de "sí conecta, pero no tengo permisos". */
        #apiGuildSelect option.option-no-bot-access,
        #apiGuildSelect option:disabled {
            color: var(--text-muted);
            background-color: var(--bg-input);
            font-style: italic;
            opacity: 0.55;
            cursor: not-allowed;
        }
        /* En modo día, ajustar para que el gris se vea bien sobre fondo claro */
        [data-theme="dia"] #apiGuildSelect option.option-no-bot-access,
        [data-theme="dia"] #apiGuildSelect option:disabled {
            color: #888;
            background-color: #f0f0f0;
            opacity: 0.65;
        }

        /* === REDISTRIBUCION ROW === */
        .redistribucion-row { margin-top: 4px; display: flex; justify-content: center; }
        .redistribucion-row > div { display: flex; align-items: center; gap: 12px; }
        .redistribucion-row > div > span { color: var(--text-main); font-size: 0.9rem; font-weight: 600; }

        /* === AUTOCOMPLETE === */
        .autocomplete-list {
            position: absolute; top: 100%; left: 0; right: 0;
            background: var(--bg-card); border: 1px solid var(--border-color);
            border-radius: var(--radius-md); max-height: 220px; overflow-y: auto;
            list-style: none; margin: 6px 0 0; padding: 6px; z-index: 50; display: none;
            box-shadow: 0 12px 30px rgba(0,0,0,0.5);
        }
        .autocomplete-list.active { display: block; }
        .autocomplete-list li { padding: 10px 12px; cursor: pointer; border-radius: var(--radius-sm); font-size: 0.9rem; transition: background 0.15s ease; }
        .autocomplete-list li:hover,
        .autocomplete-list li.highlighted { background: var(--bg-input); color: var(--accent-primary); }

        /* === AUTH STATES === */
        .disabled-field { pointer-events: none !important; opacity: 1; user-select: none; -webkit-user-select: none; }
        /* Asegurar que inputs/selects/textareas con disabled-field NO sean editables */
        .disabled-field input, .disabled-field select, .disabled-field textarea,
        input.disabled-field, select.disabled-field, textarea.disabled-field {
            pointer-events: none !important;
            user-select: none !important;
            -webkit-user-select: none !important;
        }
        .hidden { display: none !important; }

        /* === LOGIN MODAL === */
        #loginModal {
            position: fixed; inset: 0; background: var(--modal-overlay);
            display: flex; justify-content: center; align-items: center; z-index: 999;
            backdrop-filter: blur(6px);
        }
        #loginModal.hidden { display: none; }
        .login-card { background: var(--bg-card); padding: 32px; border-radius: var(--radius-lg); width: 90%; max-width: 360px; border: 1px solid var(--border-color); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }
        .login-card input { margin-bottom: 16px; }

        /* === HISTORY MODAL === */
        #historyModal {
            position: fixed; inset: 0; background: var(--modal-overlay);
            display: flex; justify-content: center; align-items: center; z-index: 998;
            padding: 20px; backdrop-filter: blur(6px);
        }
        #historyModal.hidden { display: none; }
        .history-modal-card {
            background: var(--bg-card); padding: 28px; border-radius: var(--radius-lg); width: 100%; max-width: 640px; max-height: 85vh; overflow-y: auto; border: 1px solid var(--border-color); box-shadow: 0 30px 70px rgba(0,0,0,0.6);
        }
        .history-modal-header {
            display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border-color); gap: 14px;
        }
        .history-modal-title { font-family: var(--font-title); color: var(--accent-primary); font-size: 1.3rem; font-weight: 700; }
        .history-modal-close {
            background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-muted); width: 34px; height: 34px; border-radius: var(--radius-sm); cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }
        .history-modal-close:hover { background: var(--danger); color: var(--text-main); border-color: var(--danger); }
        .history-modal-content {
            background: var(--bg-input-field); padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--border-color); white-space: pre-wrap; font-family: var(--font-mono); font-size: 0.88rem; color: var(--text-main); line-height: 1.7; margin-bottom: 20px; max-height: 380px; overflow-y: auto;
        }
        .history-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .history-modal-meta { font-size: 0.9rem; color: var(--text-muted); margin-top: 6px; }

        /* === ADMIN USERS MODAL === */
        #adminUsersModal, #noteModal, #sorteoModal {
            position: fixed; inset: 0; background: var(--modal-overlay);
            display: flex; justify-content: center; align-items: center; z-index: 998;
            padding: 20px; backdrop-filter: blur(6px);
        }
        #adminUsersModal.hidden, #noteModal.hidden, #sorteoModal.hidden { display: none; }

        .admin-modal-card {
            background: var(--bg-card); padding: 28px; border-radius: var(--radius-lg); width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; border: 1px solid var(--border-color); box-shadow: 0 30px 70px rgba(0,0,0,0.6);
        }
        .admin-modal-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        @media (min-width: 600px) {
            .admin-modal-grid {
                grid-template-columns: 1.2fr 1fr;
            }
        }
        .admin-form-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .admin-users-list-section {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .admin-checkbox-list {
            max-height: 180px;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            background: var(--bg-input-field);
            padding: 6px;
            border-radius: var(--radius-sm);
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .admin-checkbox-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 0.85rem;
            color: var(--text-main);
            transition: all 0.2s ease;
            user-select: none;
        }
        .admin-checkbox-item:hover {
            background: var(--bg-input-hover);
            border-color: var(--accent-gold);
            transform: translateX(2px);
        }
        .admin-checkbox-item:has(input[type="checkbox"]:checked) {
            background: var(--accent-gold-soft);
            border-color: var(--accent-gold);
            box-shadow: 0 0 8px rgba(251, 191, 36, 0.15);
        }
        .admin-checkbox-item input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border: 2px solid var(--border-color);
            border-radius: 4px;
            background: var(--bg-input-field);
            cursor: pointer;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            margin: 0;
            flex-shrink: 0;
        }
        .admin-checkbox-item input[type="checkbox"]:hover {
            border-color: var(--accent-gold);
        }
        .admin-checkbox-item input[type="checkbox"]:checked {
            background: var(--accent-gold);
            border-color: var(--accent-gold);
        }
        .admin-checkbox-item input[type="checkbox"]::after {
            content: "✓";
            font-size: 0.75rem;
            color: #1a1d27;
            font-weight: 800;
            display: none;
        }
        .admin-checkbox-item input[type="checkbox"]:checked::after {
            display: block;
        }
        [data-theme="dia"] .admin-checkbox-item input[type="checkbox"]::after {
            color: #ffffff;
        }
        .admin-user-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--bg-input);
            border: 1px solid var(--border-color);
            padding: 12px;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .admin-user-row:hover {
            background: var(--bg-input-hover);
            border-color: var(--accent-gold);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .admin-user-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .admin-user-email {
            font-weight: 600;
            color: var(--text-main);
            font-size: 0.85rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .admin-user-role-badge {
            display: inline-block;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 99px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-left: 8px;
            flex-shrink: 0;
        }
        .admin-user-role-badge.role-admin {
            background: rgba(251, 191, 36, 0.15);
            color: var(--accent-gold);
            border: 1px solid rgba(251, 191, 36, 0.3);
        }
        .admin-user-role-badge.role-user {
            background: rgba(59, 130, 246, 0.15);
            color: #60a5fa;
            border: 1px solid rgba(59, 130, 246, 0.3);
        }
        [data-theme="dia"] .admin-user-role-badge.role-admin {
            background: rgba(158, 117, 8, 0.15);
            color: #9E7508;
            border: 1px solid rgba(158, 117, 8, 0.3);
        }
        [data-theme="dia"] .admin-user-role-badge.role-user {
            background: rgba(58, 106, 139, 0.15);
            color: #3A6A8B;
            border: 1px solid rgba(58, 106, 139, 0.3);
        }
        .admin-user-guild-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 6px;
        }
        .admin-user-guild-tag {
            font-size: 0.65rem;
            font-weight: 600;
            padding: 2px 6px;
            background: var(--bg-input-field);
            color: var(--text-muted);
            border-radius: 4px;
            border: 1px solid var(--border-color);
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .admin-user-guild-tag.all-guilds {
            background: var(--accent-primary-soft);
            color: var(--accent-primary);
            border-color: rgba(224, 106, 74, 0.3);
        }
        [data-theme="dark"] .admin-user-guild-tag.all-guilds {
            border-color: rgba(139, 92, 246, 0.3);
        }

        /* === BUSCADOR HISTORIAL === */
        .history-filters { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 20px; }
        .history-filters input, .history-filters select { padding: 11px 14px; font-size: 0.92rem; }
        .history-list-item { background: var(--bg-input); padding: 16px 20px; border-radius: var(--radius-md); border: 1px solid var(--border-color); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
        .history-list-item:hover { border-color: var(--accent-primary); background: var(--bg-input-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
        .history-list-item-title { color: var(--accent-primary); font-weight: 700; margin-bottom: 6px; font-family: var(--font-title); font-size: 1rem; letter-spacing: 0.3px; }
        .history-list-item-meta { color: var(--text-muted); font-size: 0.85rem; font-weight: 400; }
        .history-list-item-loot { color: var(--accent-primary); font-weight: 700; font-family: var(--font-mono); font-size: 0.95rem; }
        .history-empty { text-align: center; padding: 40px; color: var(--text-muted); border: 2px dashed var(--border-color); border-radius: var(--radius-md); font-size: 0.95rem; }

        /* === PANEL ESTADÍSTICAS === */
        .stats-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
        .summary-card { background: var(--bg-card); padding: 18px; border-radius: var(--radius-md); border: 1px solid var(--border-color); border-top: 4px solid var(--accent-primary); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
        .summary-card.blue { border-top-color: var(--text-main); }
        .summary-card.purple { border-top-color: var(--accent-purple); }
        .summary-card.success { border-top-color: var(--accent-primary); }
        .summary-card-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; margin-bottom: 8px; }
        .summary-card-value { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--text-main); letter-spacing: -0.5px; }
        .summary-card-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; font-weight: 500; }

        .chart-card { background: var(--bg-card); padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); margin-bottom: 20px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
        .chart-title { font-family: var(--font-title); color: var(--text-main); font-size: 1rem; margin-bottom: 20px; font-weight: 700; letter-spacing: 0.3px; }
        .chart-svg { width: 100%; height: auto; }

        .top-players-list { list-style: none; padding: 0; margin: 0; }
        .top-players-list li { display: grid; grid-template-columns: 36px 1fr 120px; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--border-color); font-size: 0.95rem; }
        .top-players-list li:last-child { border-bottom: none; }
        .top-players-rank { font-family: var(--font-title); font-weight: 800; color: var(--accent-primary); text-align: center; font-size: 1rem; }
        .top-players-value { color: var(--accent-primary); font-weight: 700; text-align: right; font-family: var(--font-mono); font-size: 0.9rem; }

        /* === KEYBOARD HINTS === */
        .kbd-hint { font-size: 0.72rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; margin-top: 14px; padding: 10px 14px; background: var(--bg-input); border-radius: var(--radius-sm); border: 1px solid var(--border-color); }
        .kbd-group { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
        .kbd-group span { font-weight: 500; opacity: 0.8; }
        .kbd-hint kbd { background: var(--bg-card); border: 1px solid var(--border-color); padding: 3px 7px; border-radius: 4px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-main); box-shadow: 0 1px 2px rgba(0,0,0,0.2); }

        /* === PENALTY ROW === */
        .penalty-row { display: flex; align-items: center; justify-content: center; padding: 10px; background: var(--bg-card); border-radius: var(--radius-md); border: 1px solid var(--border-color); }

        /* === RESULT CARD SECTION LABEL === */
        .result-section-label { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 0.8rem; color: var(--text-main); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

        /* === RESPONSIVE === */
        @media (max-width: 1150px) {
            .panel-grid { grid-template-columns: 1fr; gap: 24px; }
            .panel-right { position: static; }
        }

        @media (max-width: 768px) {
            body { padding: 12px 6px; }

            .dashboard-content {
                padding: 12px !important;
            }
            .dashboard-content > .container,
            .dashboard-content > .container.view-panel {
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 auto !important;
                box-sizing: border-box !important;
                padding: 14px !important;
            }
            .panel-grid, .panel-left, .panel-right {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
            .config-card {
                padding: 14px !important;
                box-sizing: border-box !important;
                width: 100% !important;
            }
            .redistribucion-row > div {
                flex-wrap: nowrap !important;
                justify-content: center !important;
                gap: 6px !important;
            }
            /* Móvil: penalizaciones en UNA SOLA FILA (label + toggle + nota) */
            .redistribucion-row > div > span {
                white-space: nowrap !important;
                flex-shrink: 0 !important;
                font-size: 0.82rem !important;
            }
            .redistribucion-row > div .split-toggle {
                padding: 5px 10px !important;
                font-size: 0.78rem !important;
                white-space: nowrap !important;
                flex-shrink: 0 !important;
            }

            .panel-grid { grid-template-columns: 1fr; gap: 20px; }
            .panel-right { position: static; }

            .container:not(.dashboard-content .container) { padding: 18px 14px; }
            .panel-header { flex-direction: column-reverse; gap: 14px; align-items: center; text-align: center; }
            .header-actions { justify-content: center; width: 100%; }
            .top-form-row { grid-template-columns: 1fr; gap: 12px; }

            #listaGastos .dynamic-row {
                grid-template-columns: 1fr auto;
                grid-template-areas: "name name" "val remove";
                padding: 12px; background: var(--bg-input); border: 1px solid var(--border-color);
            }
            #listaGastos .exp-name { grid-area: name; }
            #listaGastos .exp-val { grid-area: val; }
            #listaGastos .btn-remove { grid-area: remove; width: 38px; height: 38px; }

            #listaJugadores .dynamic-row {
                grid-template-columns: 38px 1fr 38px 38px 38px;
                grid-template-areas: none; padding: 12px; background: var(--bg-input); border: 1px solid var(--border-color); gap: 12px 8px;
            }

            .cofre-label { grid-column: 1; grid-row: 1; width: 100%; height: 38px; }
            .autocomplete-container { grid-column: 2 / 5; grid-row: 1; }
            .btn-remove { grid-column: 5; grid-row: 1; justify-self: end; }
            .user-pct { grid-column: 1; grid-row: 2; width: 100%; text-align: center; height: 38px; }
            .descuento-wrapper { grid-column: 2 / 4; grid-row: 2; width: 100%; }
            .btn-copy-name { grid-column: 4; grid-row: 2; }
            .btn-check { grid-column: 5; grid-row: 2; }

            #listaJugadores .btn-sq { width: 38px; height: 38px; justify-self: center; }
            #listaJugadores input { height: 38px; padding: 6px 10px !important; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .action-grid { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
            .action-grid .btn { flex: 1 1 120px !important; }

            /* Ajuste responsivo de la cabecera de jugadores en party */
            .card-jugadores .section-header {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 10px !important;
            }
            #voiceImportWrapper {
                width: 100% !important;
                justify-content: space-between !important;
            }
            #voiceChannelSelect {
                flex: 1 !important;
                width: auto !important;
            }

            /* Ajustes responsivos para los atajos del teclado en móvil */
            .kbd-hint {
                background: transparent !important;
                border: none !important;
                padding: 0 !important;
                margin-top: 10px !important;
                justify-content: center !important;
            }
            .kbd-hint .kbd-group:not(.channel-select-group) {
                display: none !important;
            }
            .kbd-hint .channel-select-group {
                border-left: none !important;
                margin-left: 0 !important;
                padding-left: 0 !important;
                width: 100% !important;
                justify-content: center !important;
            }

            /* Popover de configuración del bot responsivo tipo modal en móvil */
            .dashboard-header .webhook-popover {
                position: fixed !important;
                top: 70px !important;
                left: 12px !important;
                right: 12px !important;
                width: auto !important;
                max-width: calc(100vw - 24px) !important;
            }
            .tab-btn span.tab-label { display: none; }
            .tab-btn { padding: 12px 10px; flex: 0 0 auto; min-width: 48px; }
            .tab-btn svg { width: 20px; height: 20px; }
            .tabs-container { padding: 5px; gap: 4px; }
            .dist-row { grid-template-columns: 90px 1fr 85px; font-size: 0.8rem; gap: 8px; }
            .stats-summary { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
            .chart-card { padding: 14px; }
            .chart-title { font-size: 0.88rem; margin-bottom: 14px; }
            .chart-period-toggle { flex-wrap: wrap; }
            .top-players-list li { grid-template-columns: 30px 1fr 90px; font-size: 0.85rem; gap: 8px; }
            .top-players-rank { font-size: 0.85rem; }
            .top-players-value { font-size: 0.8rem; }
            .summary-card { padding: 14px; }
            .summary-card-value { font-size: 1.1rem; }
            .history-filters { grid-template-columns: 1fr !important; gap: 10px; }
            .history-modal-actions { grid-template-columns: 1fr !important; }
        }

        /* ==========================================================================
           ANIMACIONES EXTRAÍDAS (Twin Comets y Slow Pulse a 0.5x velocidad)
           ========================================================================== */
        @property --angle {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }

        @keyframes auroraClassicBG {
            0% { background-position: 0% 0%, 0% 50%; }
            100% { background-position: 0% 0%, 100% 50%; }
        }

        @keyframes pulseAuraLoop {
            0% {
                border-color: color-mix(in srgb, var(--accent-primary) 50%, var(--bg-input-field)) !important;
                box-shadow: 0 0 3px 0px color-mix(in srgb, var(--accent-primary) 16%, transparent) !important;
            }
            100% {
                border-color: var(--accent-primary) !important;
                box-shadow: 0 0 13.5px 1px color-mix(in srgb, var(--accent-primary) 54%, transparent) !important;
            }
        }

        .loop-twin, .loop-slow, [data-theme="dark"] .loop-slow {
            border: 1px solid var(--accent-primary) !important;
            background: var(--bg-input-field) !important;
            animation: pulseAuraLoop 1.95s ease-in-out infinite alternate !important;
        }
    
        /* === raid-creator integration helpers === */
        .raid-creator-scope {
            /* Wrapper for all raid-creator panels. Variables are remapped
               inside this block to match the Harbour Flame palette. */
            font-family: 'Inter', var(--font-body);
        }
        .global-toolbar { display: none; } /* deprecated, kept for backward compat */
        .api-data-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
            gap: 10px;
            margin-top: 12px;
        }
        .api-data-card {
            background: var(--bg-input-field);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 12px 8px;
            text-align: center;
        }
        .api-data-num {
            font-family: var(--font-mono);
            font-size: 1.5rem;
            color: var(--accent-gold);
            font-weight: 700;
        }
        .api-data-label {
            font-size: 0.7rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 4px;
        }
        .api-data-empty {
            padding: 14px;
            border-radius: var(--radius-md);
            background: var(--accent-primary-soft);
            color: var(--text-muted);
            font-size: 0.9rem;
            margin-top: 12px;
            border: 1px dashed var(--accent-primary);
        }
        .data-source-selector {
            display: flex;
            gap: 16px;
            padding: 14px;
            background: var(--bg-input);
            border-radius: var(--radius-md);
            margin: 12px 0;
            align-items: center;
            border: 1px solid var(--border-color);
            flex-wrap: wrap;
        }
        .data-source-selector label {
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            color: var(--text-result);
            font-size: 0.9rem;
            text-transform: none;
            letter-spacing: 0;
            font-weight: 500;
            margin: 0;
        }
        .data-source-selector input[type="radio"] {
            accent-color: var(--accent-primary);
            cursor: pointer;
        }
        .config-section-title {
            font-family: var(--font-title);
            font-size: 1.05rem;
            color: var(--text-main);
            margin: 18px 0 8px;
            padding-bottom: 6px;
            border-bottom: 1px solid var(--border-color);
            font-weight: 600;
        }
        .config-data-toolbar button:hover { transform: translateY(-1px); }

        /* === raid-creation CSS (scoped under .raid-creator-scope, variables remapped to Harbour Flame) === */

        .raid-creator-scope {
    /* === raid-creator variable remap (Harbour Flame palette) === */
    --bg-color: var(--bg-body);
    --panel-color: var(--bg-card);
    --text-color: var(--text-result);
    --accent-color: var(--text-main);
    --accent-hover: color-mix(in srgb, var(--accent-blue) 82%, black);
    --warning: var(--accent-gold);
    --neumorphic-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    --neumorphic-inset: inset 0 1px 4px rgba(0, 0, 0, 0.5);
    --color-border: var(--border-color);
    --color-bg-input: var(--bg-input-field);
    --color-text-muted: var(--text-muted);
    --color-text-strong: var(--text-result);
    --color-bg-card: var(--bg-card);
    --color-danger-hover: color-mix(in srgb, var(--danger) 82%, black);
    --primary: var(--accent-blue);
    --accent: var(--accent-purple);
    --border-radius: 12px;
    --transition: all 0.3s ease;
    /* NOTE: --success and --danger intentionally NOT redefined here.
       They cascade from index.html's :root so raid-creator uses the
       Harbour Flame success/danger colors. */
        }

        /* === REFACTOR: clases responsivas y fixes móviles === */
        .raid-creator-scope .raid-form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 15px;
        }
        .raid-creator-scope .raid-form-col {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        @media (max-width: 768px) {
            .raid-creator-scope .raid-form-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }
        }

        /* Inputs en raid-creator: usar bg-input-field para que coincida con .loop-twin/.loop-slow */
        .raid-creator-scope input[type="text"],
        .raid-creator-scope input[type="number"],
        .raid-creator-scope input[type="url"],
        .raid-creator-scope input[type="datetime-local"],
        .raid-creator-scope textarea,
        .raid-creator-scope select {
            background: var(--bg-input-field) !important;
            color: var(--text-result) !important;
            border: 1px solid var(--border-color) !important;
            box-shadow: none !important;
            font-size: 16px; /* prevenir zoom en iOS */
            font-family: var(--font-body);
        }
        .raid-creator-scope input:focus,
        .raid-creator-scope textarea:focus,
        .raid-creator-scope select:focus {
            border-color: var(--accent-primary) !important;
            box-shadow: 0 0 0 3px var(--accent-primary-soft) !important;
            outline: none;
        }
        .raid-creator-scope input::placeholder,
        .raid-creator-scope textarea::placeholder {
            color: var(--text-muted);
            opacity: 0.7;
        }

        /* Labels en raid-creator: igualar a reparto (uppercase, muted, 0.75rem) */
        .raid-creator-scope label {
            color: var(--text-muted) !important;
            font-size: 0.75rem !important;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-shadow: none !important;
        }
        .raid-creator-scope label span:first-child,
        .raid-creator-scope label > span[style*="font-weight"] {
            color: var(--text-main) !important;
            text-shadow: none !important;
        }

        /* Cards: igualar a .config-card de reparto */
        .raid-creator-scope .card {
            background: var(--bg-card) !important;
            border: 1px solid var(--border-color) !important;
            border-radius: var(--radius-lg) !important;
            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5) !important;
            padding: 24px !important;
            animation: none !important;
            background-image: none !important;
        }
        .raid-creator-scope .card-title {
            color: var(--accent-primary) !important;
            font-family: var(--font-title);
            font-size: 1.15rem !important;
            font-weight: 700;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 12px;
            margin-bottom: 18px;
        }

        /* Texto muted de párrafos */
        .raid-creator-scope p {
            color: var(--text-muted);
        }

        /* Botones: heredar estilos de .btn de reparto */
        .raid-creator-scope .btn,
        .raid-creator-scope .btn-primary,
        .raid-creator-scope .btn-success,
        .raid-creator-scope .btn-danger,
        .raid-creator-scope .btn-secondary,
        .raid-creator-scope .btn-info {
            background: var(--accent-primary) !important;
            color: var(--text-main) !important;
            border: none !important;
            padding: 11px 18px !important;
            border-radius: var(--radius-md) !important;
            font-family: var(--font-body) !important;
            font-weight: 600 !important;
            font-size: 0.9rem !important;
            cursor: pointer;
            min-height: 44px;
            touch-action: manipulation;
            box-shadow: none !important;
            transition: background 0.2s ease, transform 0.1s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        .raid-creator-scope .btn:hover,
        .raid-creator-scope .btn-primary:hover,
        .raid-creator-scope .btn-success:hover {
            background: var(--accent-primary-deep) !important;
            transform: translateY(-1px);
        }
        .raid-creator-scope .btn-success {
            background: var(--success) !important;
        }
        .raid-creator-scope .btn-danger {
            background: var(--danger) !important;
        }
        .raid-creator-scope .btn-secondary,
        .raid-creator-scope .btn-info {
            background: var(--bg-input-hover) !important;
            color: var(--text-main) !important;
            border: 1px solid var(--border-color) !important;
        }

        /* Help "?" buttons: naranja Flama */
        .raid-creator-scope label span[style*="border-radius: 50%"],
        .raid-creator-scope .input-group label span:last-child {
            background: var(--accent-primary) !important;
            color: var(--text-main) !important;
            border: none !important;
        }

        /* Display selectors (channel, role, etc.) */
        .raid-creator-scope [id$="-display"] {
            background: var(--bg-input-field) !important;
            border: 2px solid var(--border-color) !important;
            color: var(--text-result) !important;
            transition: border-color 0.2s, background 0.2s;
        }
        .raid-creator-scope [id$="-display"]:hover {
            border-color: var(--accent-primary) !important;
            background: var(--bg-input-field-hover) !important;
        }
        .raid-creator-scope [id$="-display"] span {
            color: var(--text-result) !important;
        }
        .raid-creator-scope [id$="-count"] {
            color: var(--text-muted) !important;
        }

        /* Tooltips: fondo dark coherente */
        .raid-creator-scope [id^="tooltip-"] {
            background: var(--bg-input-field) !important;
            color: var(--text-result) !important;
            border: 1px solid var(--accent-primary) !important;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
            max-width: 280px;
        }
        .raid-creator-scope [id^="tooltip-"] strong {
            color: var(--accent-gold) !important;
        }
        .raid-creator-scope [id^="tooltip-"] p,
        .raid-creator-scope [id^="tooltip-"] div {
            color: var(--text-result) !important;
        }

        /* Required asterisks */
        .raid-creator-scope label span[style*="color: #f00"],
        .raid-creator-scope label span[style*="color:#f00"] {
            color: var(--danger) !important;
        }

        /* Category cards, mini cards, role items */
        .raid-creator-scope .category-card,
        .raid-creator-scope .mini-category-card {
            background: var(--bg-input) !important;
            border: 1px solid var(--border-color) !important;
            border-radius: var(--radius-md) !important;
            box-shadow: none !important;
        }
        .raid-creator-scope .category-header {
            background: var(--bg-input-hover) !important;
            border: 1px solid var(--border-color) !important;
            border-radius: var(--radius-sm);
        }
        .raid-creator-scope .role-item {
            background: var(--bg-input-field) !important;
            border: 1px solid var(--border-color) !important;
            border-radius: var(--radius-sm);
        }

        /* Alerts */
        .raid-creator-scope .alert,
        .raid-creator-scope .alert-success,
        .raid-creator-scope .alert-error {
            border-radius: var(--radius-md);
            padding: 12px 16px;
            border: 1px solid var(--border-color);
        }
        .raid-creator-scope .alert-success {
            background: rgba(160, 185, 16, 0.12);
            border-color: var(--success);
            color: var(--success);
        }
        .raid-creator-scope .alert-error {
            background: var(--accent-primary-soft);
            border-color: var(--danger);
            color: var(--danger);
        }

        /* === MOBILE RESPONSIVE === */
        @media (max-width: 768px) {
            .raid-creator-scope .raid-form-grid,
            .raid-creator-scope .raid-form-col {
                grid-template-columns: 1fr !important;
                flex-direction: column;
            }
            .raid-creator-scope .category-header {
                grid-template-columns: 1fr !important;
                gap: 8px;
            }
            .raid-creator-scope .role-item {
                grid-template-columns: 1fr !important;
                gap: 8px;
            }
            .raid-creator-scope .mini-category-card {
                flex-direction: column !important;
                padding: 10px;
            }
            .raid-creator-scope .button-row {
                flex-direction: column !important;
                gap: 8px;
            }
            .raid-creator-scope .button-row button,
            .raid-creator-scope .button-row .btn {
                width: 100%;
                min-height: 44px;
            }
            .raid-creator-scope .grid-2 {
                grid-template-columns: 1fr !important;
            }
            .raid-creator-scope [id^="tooltip-"] {
                position: fixed !important;
                max-width: 90vw !important;
                left: 5vw !important;
                top: 15vh !important;
                margin: 0 !important;
                z-index: 9999;
            }
            .raid-creator-scope .card {
                padding: 16px !important;
            }
            .raid-creator-scope .tab-container {
                flex-direction: row;
                flex-wrap: wrap;
                gap: 6px;
            }
            .raid-creator-scope .input-group {
                margin-bottom: 12px;
            }
        }

        @media (max-width: 480px) {
            .raid-creator-scope .card {
                padding: 12px !important;
            }
            .raid-creator-scope .btn {
                padding: 10px 14px !important;
                font-size: 0.85rem !important;
            }
        }


        
        .raid-creator-scope * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .raid-creator-scope {
            font-family: "Inter", sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            transition: var(--transition);
            /* === FIX: quitar min-height: 100vh para que el panel no tenga ===
               espacio vacío cuando el contenido es poco (ej: Config Raid). */
            min-height: auto;
            padding: 20px;
            margin: 0;
        }

        .raid-creator-scope .dashboard {
            /* === FIX: quitar min-height: 100vh === */
            min-height: auto;
            background: transparent;
        }

        .raid-creator-scope .dashboard-container {
            max-width: 900px;
            margin: 0 auto;
        }

        
        .raid-creator-scope .navbar {
            background: linear-gradient(to right, var(--accent-primary), var(--accent-primary-deep));
            color: var(--text-main);
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 12px var(--accent-primary-soft);
        }

        .raid-creator-scope .navbar h1 {
            font-size: 1.8rem;
            font-weight: 600;
            margin: 0;
        }

        .raid-creator-scope .navbar-buttons {
            display: flex;
            gap: 15px;
        }

        
        .raid-creator-scope .dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding: 20px;
            background: var(--panel-color);
            border-radius: var(--border-radius);
            box-shadow: var(--neumorphic-shadow);
        }

        .raid-creator-scope .dashboard-header h1 {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--text-color);
            margin: 0;
        }

        
        .raid-creator-scope .tab-container {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
            padding: 15px;
            background: var(--panel-color);
            border-radius: var(--border-radius);
            box-shadow: var(--neumorphic-shadow);
            overflow-x: auto;
        }

        .raid-creator-scope .tab-btn {
            padding: 12px 24px;
            border-radius: var(--border-radius);
            background: var(--panel-color);
            color: var(--text-color);
            cursor: pointer;
            transition: var(--transition);
            box-shadow: var(--neumorphic-shadow);
            white-space: nowrap;
            font-weight: 500;
            border: none;
            font-size: 1rem;
            font-family: "Inter", sans-serif;
        }

        .raid-creator-scope .tab-btn:hover {
            box-shadow: var(--neumorphic-inset);
        }

        .raid-creator-scope .tab-btn.active {
            background: var(--accent-color);
            color: var(--text-main);
            box-shadow: none;
        }

        
        .raid-creator-scope .tab-content {
            display: none;
            padding: 25px;
            background: var(--panel-color);
            border-radius: var(--border-radius);
            box-shadow: var(--neumorphic-shadow);
            animation: fadeIn 0.5s ease;
        }

        .raid-creator-scope .tab-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        
        .raid-creator-scope .card {
            background: var(--bg-color);
            border-radius: var(--border-radius);
            padding: 15px;
            box-shadow: var(--neumorphic-shadow);
            margin-bottom: 20px;
            transition: var(--transition);
            position: relative;
            border: 2px solid transparent;
            background-image: linear-gradient(var(--bg-color), var(--bg-color)), linear-gradient(135deg, var(--accent-primary), var(--accent-gold), var(--accent-primary));
            background-origin: border-box;
            background-clip: padding-box, border-box;
            animation: borderGradient 6s linear infinite;
        }

        @keyframes borderGradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .raid-creator-scope .card:hover {
            box-shadow: var(--neumorphic-shadow);
        }

        .raid-creator-scope .card-title {
            font-size: 1.3rem;
            color: var(--accent-color);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
        }

        
        .raid-creator-scope .animated-card {
            border: 2px solid transparent;
            background-image: linear-gradient(var(--bg-color), var(--bg-color)), radial-gradient(circle at top left, var(--accent-primary-soft), transparent 40%), radial-gradient(circle at bottom right, var(--accent-purple-soft), transparent 45%);
            background-origin: border-box;
            background-clip: padding-box, border-box;
            background-size: 100% 100%, 200% 200%;
            animation: rotateBorder 6s linear infinite;
        }

        @keyframes rotateBorder {
            0% {
                background-position: 0% 50%;
            }
            100% {
                background-position: 100% 50%;
            }
        }

        
        .raid-creator-scope .form-group {
            margin-bottom: 12px;
        }

        .raid-creator-scope label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--text-color);
            font-size: 14px;
            letter-spacing: 0.3px;
        }

        .raid-creator-scope input[type="text"], .raid-creator-scope input[type="number"], .raid-creator-scope input[type="url"], .raid-creator-scope input[type="datetime-local"], .raid-creator-scope textarea, .raid-creator-scope select {
            width: 100%;
            padding: 12px 15px;
            border: none;
            border-radius: var(--border-radius);
            background: var(--bg-color);
            color: var(--text-color);
            box-shadow: var(--neumorphic-inset);
            transition: var(--transition);
            font-family: "Inter", sans-serif;
            box-sizing: border-box;
        }

        .raid-creator-scope input:focus, .raid-creator-scope textarea:focus, .raid-creator-scope select:focus {
            outline: none;
            box-shadow: var(--neumorphic-shadow);
        }

        .raid-creator-scope textarea {
            resize: vertical;
            min-height: 120px;
        }

        
        .raid-creator-scope .input-group {
            position: relative;
            margin-bottom: 15px;
        }

        .raid-creator-scope .input-group input, .raid-creator-scope .input-group select, .raid-creator-scope .input-group textarea {
            border: 2px solid var(--border-color);
            border-radius: 8px;
            background: var(--bg-input-field);
            padding: 10px 12px;
            font-size: 15px;
            color: var(--text-color);
            transition: all 0.3s ease;
            font-family: inherit;
        }

        .raid-creator-scope .input-group input:hover, .raid-creator-scope .input-group select:hover, .raid-creator-scope .input-group textarea:hover {
            border-color: var(--border-color);
            background: var(--bg-input-field);
        }

        .raid-creator-scope .input-group input::placeholder, .raid-creator-scope .input-group textarea::placeholder {
            color: var(--text-muted);
        }

        .raid-creator-scope .input-group input:focus, .raid-creator-scope .input-group select:focus, .raid-creator-scope .input-group textarea:focus {
            outline: none;
            background: var(--bg-card);
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--accent-primary-soft);
        }

        .raid-creator-scope .input-highlight {
            display: none !important;
        }

        .raid-creator-scope .input-group input:focus~.input-highlight, .raid-creator-scope .input-group select:focus~.input-highlight, .raid-creator-scope .input-group textarea:focus~.input-highlight {
            width: 0;
        }

        
        .raid-creator-scope .category-card {
            background: var(--bg-card);
            border: 2px solid var(--accent-blue);
            border-radius: 12px;
            margin-bottom: 15px;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px var(--accent-primary-soft);
        }

        .raid-creator-scope .category-card:hover {
            box-shadow: 0 8px 24px var(--accent-primary-soft);
            border-color: var(--accent-primary-deep);
            background: var(--bg-input-field-hover);
        }

        .raid-creator-scope .category-header {
            padding: 18px;
            background: linear-gradient(to right, var(--accent-primary-soft), transparent);
            border-left: 6px solid var(--accent-blue);
            display: grid;
            grid-template-columns: auto 1fr auto auto;
            gap: 15px;
            align-items: center;
            cursor: pointer;
            user-select: none;
            border-bottom: 2px solid var(--accent-primary-soft);
            transition: all 0.2s ease;
        }

        .raid-creator-scope .category-header:hover {
            background: linear-gradient(to right, var(--accent-primary-soft), transparent);
        }

        .raid-creator-scope .category-emoji {
            font-size: 2.5rem;
            display: flex;
            align-items: center;
        }

        .raid-creator-scope .category-info {
            display: flex;
            flex-direction: row;
            gap: 15px;
            align-items: center;
            flex: 1;
        }

        .raid-creator-scope .category-name {
            font-weight: bold;
            font-size: 1.1rem;
            color: var(--text-main);
        }

        .raid-creator-scope .category-content {
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 0 !important;
            height: 0;
        }

        .raid-creator-scope .category-content.open {
            max-height: 10000px;
            padding: 20px !important;
            height: auto;
            border-top: 2px solid var(--accent-primary-soft);
            background: linear-gradient(135deg, rgba(224, 242, 254, 0.7) 0%, rgba(240, 249, 252, 0.5) 100%);
        }

        
        .raid-creator-scope .role-item {
            display: grid;
            grid-template-columns: auto 1fr auto auto auto;
            gap: 10px;
            align-items: center;
            background: var(--bg-input-field-hover);
            border: 2px solid var(--accent-blue);
            border-left: 6px solid var(--accent-blue);
            border-radius: 8px;
            padding: 12px 15px;
            margin-bottom: 12px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 6px var(--accent-primary-soft);
        }

        .raid-creator-scope .role-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px var(--accent-primary-soft);
            border-color: var(--accent-primary-deep);
            background: var(--bg-input-field-hover);
        }

        .raid-creator-scope .role-emoji {
            font-size: 1.4rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        .raid-creator-scope .role-name-input {
            padding: 8px 10px;
            border: 1px solid var(--accent-blue);
            border-radius: 6px;
            background: var(--bg-input-field);
            font-family: "Inter", sans-serif;
            font-size: 0.95rem;
        }

        .raid-creator-scope .role-limit-input {
            width: 60px;
            padding: 8px;
            text-align: center;
            border: 1px solid var(--accent-blue);
            border-radius: 4px;
            background: var(--bg-input-field);
            font-family: "Inter", sans-serif;
            flex-shrink: 0;
        }

        .raid-creator-scope .btn-delete-role {
            padding: 8px 10px;
            background: var(--danger);
            color: var(--text-main);
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 600;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .raid-creator-scope .btn-delete-role:hover {
            background: var(--danger);
        }

        
        .raid-creator-scope .btn {
            padding: 10px 20px;
            border: none;
            border-radius: var(--border-radius);
            background: var(--panel-color);
            color: var(--text-color);
            cursor: pointer;
            font-weight: 500;
            transition: var(--transition);
            box-shadow: var(--neumorphic-shadow);
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: "Inter", sans-serif;
            font-size: 1rem;
        }

        .raid-creator-scope .btn:hover {
            box-shadow: var(--neumorphic-inset);
            transform: translateY(2px);
        }

        .raid-creator-scope .btn-primary {
            background: var(--accent-color);
            color: var(--text-main);
        }

        .raid-creator-scope .btn-primary:hover {
            background: var(--accent-hover);
        }

        .raid-creator-scope .btn-success {
            background: var(--success);
            color: var(--text-main);
        }

        .raid-creator-scope .btn-success:hover {
            background: var(--success);
        }

        .raid-creator-scope .btn-danger {
            background: var(--danger);
            color: var(--text-main);
        }

        .raid-creator-scope .btn-danger:hover {
            background: var(--color-danger-hover);
        }

        .raid-creator-scope .btn-secondary {
            background: var(--bg-input-hover);
            color: var(--accent-color);
            border: 1px solid var(--color-border);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        .raid-creator-scope .btn-secondary:hover {
            background: var(--bg-input-hover);
        }

        .raid-creator-scope .btn-sm {
            padding: 10px 16px;
            font-size: 0.9rem;
        }

        .raid-creator-scope .button-row {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 15px;
            justify-content: center;
        }

        .raid-creator-scope .button-row.center {
            justify-content: center;
        }

        
        .raid-creator-scope .alert {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            display: block;
            animation: slideIn 0.3s ease;
        }

        .raid-creator-scope .alert-success {
            background: var(--accent-gold-soft);
            border: 1px solid var(--success);
            color: var(--success);
        }

        .raid-creator-scope .alert-error {
            background: var(--accent-primary-soft);
            border: 1px solid var(--danger);
            color: var(--danger);
        }

        @keyframes slideIn {
            from {
                transform: translateX(-20px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        
        .raid-creator-scope .divider {
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--color-border), transparent);
            margin: 20px 0;
        }

        
        .raid-creator-scope .grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        
        @media (max-width: 1024px) {
            .raid-creator-scope .grid-2 {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .raid-creator-scope {
                padding: 10px;
            }

            .raid-creator-scope .dashboard-container {
                max-width: 100%;
            }

            .raid-creator-scope .navbar {
                flex-direction: column;
                gap: 12px;
                padding: 15px;
                margin-bottom: 20px;
            }

            .raid-creator-scope .navbar h1 {
                font-size: 1.4rem;
                width: 100%;
                margin-bottom: 0;
            }

            .raid-creator-scope .navbar-buttons {
                width: 100%;
                flex-direction: column;
                gap: 10px;
            }

            .raid-creator-scope .navbar-buttons > div {
                width: 100%;
                display: flex !important;
                gap: 8px;
                padding-right: 0 !important;
                border-right: none !important;
                flex-wrap: wrap;
            }

            .raid-creator-scope .navbar-buttons button {
                flex: 1;
                min-width: 100px;
            }

            .raid-creator-scope #btn-version-free, .raid-creator-scope #btn-version-premium {
                padding: 9px 14px !important;
                font-size: 0.8rem !important;
            }

            .raid-creator-scope .tab-container {
                flex-direction: row;
                gap: 8px;
                flex-wrap: wrap;
            }

            .raid-creator-scope .tab-btn {
                width: auto;
                flex: 1;
                min-width: 80px;
                padding: 10px;
                font-size: 0.9rem;
            }

            .raid-creator-scope .tab-content {
                width: 100%;
                padding: 15px;
            }

            .raid-creator-scope .card {
                padding: 15px;
            }

            .raid-creator-scope .card-title {
                font-size: 1.1rem;
            }

            .raid-creator-scope .category-header {
                grid-template-columns: auto 1fr;
                gap: 8px;
            }

            .raid-creator-scope .role-item {
                grid-template-columns: auto auto 1fr;
                gap: 8px;
            }

            .raid-creator-scope .btn {
                width: 100%;
                justify-content: center;
                padding: 10px;
                font-size: 0.9rem;
            }

            .raid-creator-scope .grid-2 {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .raid-creator-scope input, .raid-creator-scope select, .raid-creator-scope textarea {
                font-size: 16px !important;
            }

            .raid-creator-scope .mini-category-card {
                flex-direction: column;
                padding: 10px;
            }

            .raid-creator-scope .category-emoji {
                font-size: 1.8rem;
                min-height: 40px;
                min-width: 40px;
            }

            .raid-creator-scope ul li {
                padding: 12px;
                margin-bottom: 12px;
            }

            .raid-creator-scope .custom-scroll {
                max-height: 250px !important;
            }
        }

        
        @media (max-width: 480px) {
            .raid-creator-scope {
                padding: 8px;
            }

            .raid-creator-scope .navbar {
                padding: 10px;
                gap: 8px;
                flex-wrap: wrap;
            }

            .raid-creator-scope .navbar h1 {
                font-size: 1.1rem;
                width: 100%;
            }

            .raid-creator-scope .navbar-buttons {
                width: 100%;
                gap: 6px;
                flex-wrap: wrap;
            }

            .raid-creator-scope .navbar-buttons > div {
                width: 100%;
                display: flex !important;
                gap: 6px !important;
                padding-right: 0 !important;
                border-right: none !important;
                flex-wrap: wrap;
            }

            .raid-creator-scope .navbar-buttons button {
                padding: 8px 12px !important;
                font-size: 0.75rem !important;
                flex: 1;
                min-width: 100px;
            }

            .raid-creator-scope #btn-version-free, .raid-creator-scope #btn-version-premium {
                padding: 8px 10px !important;
                font-size: 0.7rem !important;
            }

            .raid-creator-scope .tab-btn {
                padding: 8px;
                font-size: 0.8rem;
            }

            .raid-creator-scope .tab-content {
                padding: 10px;
            }

            .raid-creator-scope .card {
                padding: 12px;
                border-radius: 8px;
            }

            .raid-creator-scope .card-title {
                font-size: 1rem;
                margin-bottom: 12px;
            }

            .raid-creator-scope .btn {
                padding: 8px;
                font-size: 0.85rem;
            }

            .raid-creator-scope h3 {
                font-size: 0.95rem !important;
            }

            .raid-creator-scope h4 {
                font-size: 0.9rem !important;
            }

            .raid-creator-scope label {
                font-size: 0.85rem !important;
            }

            .raid-creator-scope .category-card {
                padding: 10px !important;
                gap: 8px !important;
            }

            .raid-creator-scope .category-emoji {
                font-size: 1.5rem;
                min-height: 35px;
                min-width: 35px;
            }

            .raid-creator-scope .mini-category-card {
                padding: 8px;
                gap: 6px;
            }

            .raid-creator-scope .custom-scroll {
                max-height: 200px !important;
            }

            .raid-creator-scope ul {
                padding: 0 !important;
            }

            .raid-creator-scope ul li {
                padding: 10px;
                margin-bottom: 10px;
                border-radius: 6px;
            }

            .raid-creator-scope input, .raid-creator-scope select, .raid-creator-scope textarea {
                padding: 8px !important;
                border-radius: 4px !important;
                font-size: 14px !important;
            }
        }

        
        @media (min-width: 769px) and (max-width: 1024px) {
            .raid-creator-scope .dashboard-container {
                max-width: 100%;
            }

            .raid-creator-scope .navbar {
                padding: 15px;
            }

            .raid-creator-scope .tab-btn {
                flex: 1;
            }

            .raid-creator-scope .grid-2 {
                grid-template-columns: 1fr;
            }
        }

        
        @media (max-width: 768px) {
            
            .raid-creator-scope div[style*="display: flex; gap: 15px"] {
                flex-direction: column !important;
                gap: 12px !important;
            }

            .raid-creator-scope div[style*="flex: 1; display: flex; flex-direction: column"] {
                flex-basis: 100% !important;
            }

            
            .raid-creator-scope div[style*="position: fixed"] {
                width: 95% !important;
                max-width: 95% !important;
            }

            
            .raid-creator-scope div[style*="position: fixed"] input, .raid-creator-scope div[style*="position: fixed"] select, .raid-creator-scope div[style*="position: fixed"] textarea {
                width: 100% !important;
                padding: 10px !important;
                font-size: 16px !important;
            }

            
            .raid-creator-scope div[style*="position: fixed"] button {
                padding: 10px 16px !important;
                font-size: 0.9rem !important;
            }

            
            .raid-creator-scope div[style*="position: absolute"] {
                max-width: 90vw !important;
                left: 5vw !important;
            }

            
            .raid-creator-scope #custom-datetime {
                flex-direction: column !important;
            }

            .raid-creator-scope #custom-datetime input {
                width: 100% !important;
            }
        }

        .raid-creator-scope .custom-scroll::-webkit-scrollbar {
            width: 8px;
        }

        .raid-creator-scope .custom-scroll::-webkit-scrollbar-track {
            background: #f0f5fa;
            border-radius: 10px;
        }

        .raid-creator-scope .custom-scroll::-webkit-scrollbar-thumb {
            background: var(--accent-blue);
            border-radius: 10px;
            border: 2px solid #f0f5fa;
        }

        .raid-creator-scope .custom-scroll::-webkit-scrollbar-thumb:hover {
            background: var(--accent-primary-deep);
            border: 2px solid #e8ecf1;
        }

        
        @keyframes jump {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        .raid-creator-scope .emoji-jump {
            animation: jump 0.6s ease-in-out;
        }

        
        .raid-creator-scope .mini-category-card {
            border: 2px solid var(--accent-blue);
            border-radius: 20px;
            padding: 12px;
            background: linear-gradient(135deg, #ecfdf5 0%, #cffafe 50%, #ecfdf5 100%);
            box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25);
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            transition: all 0.3s ease;
            cursor: grab;
            user-select: none;
        }

        .raid-creator-scope .mini-category-card:hover {
            box-shadow: 0 8px 20px rgba(6, 182, 212, 0.35);
            transform: translateY(-4px);
        }

        .raid-creator-scope .mini-emoji {
            font-size: 1.8rem;
            margin-bottom: 8px;
        }

        .raid-creator-scope .mini-name {
            font-weight: 600;
            color: #0891b2;
            font-size: 0.85rem;
            word-break: break-word;
            margin-bottom: 8px;
        }

        .raid-creator-scope .mini-limit {
            font-size: 0.75rem;
            color: var(--text-main);
            background: rgba(255, 255, 255, 0.7);
            padding: 2px 8px;
            border-radius: 12px;
        }

        
        .raid-creator-scope .mini-actions {
            display: flex;
            gap: 6px;
            margin-top: 8px;
        }

        .raid-creator-scope .mini-action-btn {
            background: white;
            border: 1px solid rgba(0,0,0,0.06);
            padding: 4px 6px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 700;
            font-size: 0.9rem;
            box-shadow: 0 2px 6px rgba(0,0,0,0.06);
            transition: all 0.15s ease;
            min-width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .raid-creator-scope .mini-action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.08);
        }

        
        .raid-creator-scope .mini-action-edit {
            background: #e6f8fb; 
            color: #025f73; 
            border: 1px solid rgba(3,102,161,0.12);
        }
        .raid-creator-scope .mini-action-edit:hover {
            background: var(--accent-blue); 
            color: var(--text-main);
            border-color: var(--text-main);
            transform: translateY(-2px);
        }

        
        .raid-creator-scope .mini-action-delete {
            background: #fff1f2; 
            color: #7f1d1d; 
            border: 1px solid rgba(220,38,38,0.12);
        }
        .raid-creator-scope .mini-action-delete:hover {
            background: var(--danger); 
            color: var(--text-main);
            border-color: var(--danger);
            transform: translateY(-2px);
        }

        
        .raid-creator-scope .mini-limit-btn {
            background: #f3f9fb; 
            color: #0b2540; 
            border: 1px solid rgba(11,37,64,0.06);
            padding: 6px 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.12s ease-in-out;
            font-weight: 700;
            font-size: 0.85rem;
        }
        .raid-creator-scope .mini-limit-btn:hover {
            transform: translateY(-2px);
            background: linear-gradient(135deg, #0891b2 0%, var(--accent-blue) 100%); 
            color: var(--text-main);
            border-color: var(--text-main);
        }

        
        .raid-creator-scope .mini-action-count {
            background: linear-gradient(135deg, #93c5fd 0%, #38bdf8 100%); 
            color: #17497a;
            border: 1.5px solid #60a5fa;
            padding: 6px 8px;
            border-radius: 8px;
            min-width: 36px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            box-shadow: 0 2px 8px rgba(37,99,235,0.10);
        }
        .raid-creator-scope .mini-action-count:hover {
            background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
            color: var(--text-main);
            border-color: #2563eb;
            transform: translateY(-2px);
        }

        .raid-creator-scope .mini-action-edit {
            background: linear-gradient(135deg, #fde68a 0%, var(--accent-gold) 100%); 
            color: #a16207;
            border: 1.5px solid var(--accent-gold);
        }
        .raid-creator-scope .mini-action-edit:hover {
            background: linear-gradient(135deg, #f59e42 0%, var(--accent-gold) 100%);
            color: var(--text-main);
            border-color: #f59e42;
            transform: translateY(-2px);
        }

        .raid-creator-scope .mini-action-delete {
            background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%); 
            color: #b91c1c;
            border: 1.5px solid #f87171;
        }
        .raid-creator-scope .mini-action-delete:hover {
            background: linear-gradient(135deg, var(--danger) 0%, #991b1b 100%);
            color: var(--text-main);
            border-color: var(--danger);
            transform: translateY(-2px);
        }

        
        .raid-creator-scope .mini-actions .mini-limit-btn {
            padding: 6px 8px;
            font-size: 0.85rem;
            border-radius: 8px;
            min-width: 36px;
            height: 28px;
        }

        .raid-creator-scope select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230066cc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            padding-right: 32px;
            cursor: pointer;
        }

        
        
        .raid-creator-scope input[type="number"]::-webkit-inner-spin-button, .raid-creator-scope input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        
        .raid-creator-scope input[type="number"] {
            appearance: textfield;
            -moz-appearance: textfield;
        }

        
        @media (max-width: 768px) {
            .raid-creator-scope {
                padding: 10px;
            }

            .raid-creator-scope .dashboard-container {
                max-width: 100%;
            }

            .raid-creator-scope .navbar {
                flex-direction: column;
                gap: 15px;
                padding: 15px;
                margin-bottom: 20px;
            }

            .raid-creator-scope .navbar h1 {
                font-size: 1.4rem;
            }

            .raid-creator-scope .navbar-buttons {
                width: 100%;
                justify-content: center;
            }

            .raid-creator-scope .tab-container {
                overflow-x: auto;
                flex-wrap: nowrap;
                padding: 10px;
                margin-bottom: 20px;
            }

            .raid-creator-scope .tab-btn {
                padding: 10px 16px;
                font-size: 0.9rem;
                white-space: nowrap;
            }

            .raid-creator-scope .tab-content {
                padding: 15px;
                margin-bottom: 15px;
            }

            .raid-creator-scope .card {
                padding: 15px;
            }

            .raid-creator-scope .card-title {
                font-size: 1.3rem;
                margin-bottom: 15px;
            }

            
            .raid-creator-scope div[style*="display: flex; gap: 20px"] {
                flex-direction: column !important;
                gap: 15px !important;
            }

            
            .raid-creator-scope div[style*="display: grid; grid-template-columns: repeat(5, 1fr)"] {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
            }

            .raid-creator-scope div[style*="grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)"] {
                grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important;
            }

            .raid-creator-scope .form-group {
                margin-bottom: 15px;
            }

            .raid-creator-scope .form-group label {
                font-size: 0.9rem;
            }

            .raid-creator-scope .form-group input, .raid-creator-scope .form-group textarea, .raid-creator-scope .form-group select {
                font-size: 1rem;
                padding: 10px;
            }

            .raid-creator-scope .button-row {
                flex-direction: column;
                gap: 10px;
            }

            .raid-creator-scope .button-row button {
                width: 100%;
                padding: 12px;
                font-size: 1rem;
            }

            .raid-creator-scope .btn {
                padding: 12px 16px;
                font-size: 0.95rem;
            }

            .raid-creator-scope h3 {
                font-size: 1rem !important;
            }

            
            .raid-creator-scope .navbar-buttons {
                flex-direction: column;
                width: 100%;
            }

            .raid-creator-scope .navbar-buttons button {
                width: 100%;
            }

            
            .raid-creator-scope div[id="category-emoji-selector"] {
                left: -30px !important;
            }

            
            .raid-creator-scope .mini-action-btn {
                padding: 4px 6px !important;
                font-size: 0.8rem !important;
            }

            
            .raid-creator-scope .input-group {
                flex-direction: column;
                gap: 10px;
            }

            .raid-creator-scope .input-group input, .raid-creator-scope .input-group select {
                width: 100%;
            }
        }

        @media (max-width: 480px) {
            .raid-creator-scope {
                padding: 8px;
            }

            .raid-creator-scope .navbar {
                padding: 12px;
                gap: 10px;
            }

            .raid-creator-scope .navbar h1 {
                font-size: 1.2rem;
            }

            .raid-creator-scope .dashboard-header {
                flex-direction: column;
                gap: 10px;
            }

            .raid-creator-scope .tab-container {
                padding: 8px;
                gap: 5px;
            }

            .raid-creator-scope .tab-btn {
                padding: 8px 12px;
                font-size: 0.8rem;
            }

            .raid-creator-scope .tab-content {
                padding: 12px;
            }

            .raid-creator-scope .card-title {
                font-size: 1.1rem;
            }

            .raid-creator-scope .form-group label {
                font-size: 0.85rem;
            }

            .raid-creator-scope .form-group input, .raid-creator-scope .form-group textarea, .raid-creator-scope .form-group select {
                font-size: 0.95rem;
                padding: 8px;
            }

            .raid-creator-scope .btn {
                padding: 10px 12px;
                font-size: 0.85rem;
            }

            .raid-creator-scope h3 {
                font-size: 0.9rem !important;
            }

            
            .raid-creator-scope div[style*="grid-template-columns: repeat(5, 1fr)"] {
                grid-template-columns: repeat(2, 1fr) !important;
            }

            .raid-creator-scope .mini-action-btn {
                padding: 3px 5px !important;
                font-size: 0.7rem !important;
            }

            .raid-creator-scope .divider {
                margin: 15px 0 !important;
            }

            
            .raid-creator-scope #btn-version-premium {
                opacity: 1 !important;
                border-color: var(--accent-primary) !important;
                box-shadow: 0 0 30px rgba(0, 217, 255, 1), inset 0 1px 0 rgba(255,255,255,0.5), 0 0 60px rgba(0, 217, 255, 0.5) !important;
                filter: brightness(1.3) !important;
            }

            
            .raid-creator-scope #section-notifications, .raid-creator-scope #section-especiales, .raid-creator-scope #section-subroles {
                display: flex !important;
            }

            
            html[data-version="free"] #section-notifications, html[data-version="free"] #section-especiales, html[data-version="free"] #section-subroles {
                opacity: 0.5 !important;
                pointer-events: none !important;
                background-color: rgba(200, 200, 200, 0.1) !important;
            }

            html[data-version="free"] #section-notifications *, html[data-version="free"] #section-especiales *, html[data-version="free"] #section-subroles * {
                cursor: not-allowed !important;
                color: var(--text-muted) !important;
            }

            html[data-version="free"] #section-notifications input, html[data-version="free"] #section-especiales input, html[data-version="free"] #section-subroles input {
                opacity: 0.5 !important;
                cursor: not-allowed !important;
            }

            html[data-version="premium"] #section-notifications, html[data-version="premium"] #section-especiales {
                display: flex !important;
            }

            html[data-version="premium"] #section-subroles {
                display: flex !important;
            }

            
            html[data-version="free"] #category-emoji-selector {
                opacity: 0.5 !important;
                cursor: not-allowed !important;
                pointer-events: none !important;
            }

            .raid-creator-scope .custom-scroll {
                max-height: 300px !important;
            }
            
            /* Custom styles for specials, search, and custom role dropdowns */
            .raid-creator-scope .especial-item {
                transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .raid-creator-scope .especial-item:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
                border-color: var(--accent-primary-deep) !important;
            }
            .raid-creator-scope .especial-item input[type="number"]:focus {
                border-color: var(--accent-primary) !important;
                box-shadow: 0 0 0 2px var(--accent-primary-soft) !important;
            }
            .raid-creator-scope #raid-user-search {
                transition: all 0.2s ease-in-out;
            }
            .raid-creator-scope #raid-user-search:focus {
                border-color: var(--accent-primary) !important;
                box-shadow: 0 0 0 3px var(--accent-primary-soft) !important;
                background: var(--bg-input-field) !important;
            }
            
            .custom-role-dropdown {
                user-select: none;
            }
            .custom-dropdown-trigger {
                transition: all 0.2s ease;
            }
            .custom-dropdown-trigger:hover {
                border-color: var(--border-focus) !important;
            }
            .custom-dropdown-options::-webkit-scrollbar {
                width: 6px;
            }
            .custom-dropdown-options::-webkit-scrollbar-track {
                background: rgba(0, 0, 0, 0.1);
                border-radius: 4px;
            }
            .custom-dropdown-options::-webkit-scrollbar-thumb {
                background: var(--border-color);
                border-radius: 4px;
            }
            .custom-dropdown-options::-webkit-scrollbar-thumb:hover {
                background: var(--accent-primary);
            }
        }
    

        /* ==========================================================================
           TEMA DARK — CYBERPUNK NEON (Solo [data-theme="dark"])
           Paleta y estética tomadas de diseño.html.
           Aplica a TODOS los paneles (Principal, Historial, Estadísticas, Crear Raid,
           Estructura de Roles, Plantillas, Config Raid) y todos los modales/componentes.
           El modo dia y noche NO se ven afectados.
           ========================================================================== */

        /* Background del body con glows púrpura/cyan sutiles */
        [data-theme="dark"] body {
            background:
                radial-gradient(ellipse at top, rgba(139, 92, 246, 0.06) 0%, transparent 55%),
                radial-gradient(ellipse at bottom, rgba(6, 182, 212, 0.04) 0%, transparent 55%),
                var(--bg-body);
            background-attachment: fixed;
        }

        /* Carátula cyberpunk: Título h1 con gradiente amber→red→purple (igual a diseño.html) */
        [data-theme="dark"] h1 {
            background: linear-gradient(135deg, #f59e0b, #ef4444, #a855f7);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            letter-spacing: -0.5px;
            text-shadow: none;
        }

        /* Subtítulo aclarado para contraste sobre fondo oscuro */
        [data-theme="dark"] .subtitle {
            color: #cbd5e1;
            letter-spacing: 1px;
        }

        /* h2 con gradiente púrpura→cyan */
        [data-theme="dark"] h2 {
            background: linear-gradient(135deg, #8b5cf6, #06b6d4);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        /* Línea de acento superior (signature cyberpunk de diseño.html) + glow sutil.
           Aplica a TODAS las cards y modales (cubre los 6 paneles). */
        [data-theme="dark"] .container,
        [data-theme="dark"] .config-card,
        [data-theme="dark"] .stat-card,
        [data-theme="dark"] .summary-card,
        [data-theme="dark"] .chart-card,
        [data-theme="dark"] .webhook-popover,
        [data-theme="dark"] .login-card,
        [data-theme="dark"] .history-modal-card,
        [data-theme="dark"] .admin-modal-card,
        [data-theme="dark"] .history-list-item,
        [data-theme="dark"] .raid-creator-scope .card,
        [data-theme="dark"] .api-data-card,
        [data-theme="dark"] .category-card,
        [data-theme="dark"] .mini-category-card,
        [data-theme="dark"] .role-item,
        [data-theme="dark"] .data-source-selector {
            position: relative;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 20px rgba(139, 92, 246, 0.03);
        }

        [data-theme="dark"] .container::before,
        [data-theme="dark"] .config-card::before,
        [data-theme="dark"] .stat-card::before,
        [data-theme="dark"] .summary-card::before,
        [data-theme="dark"] .chart-card::before,
        [data-theme="dark"] .webhook-popover::before,
        [data-theme="dark"] .login-card::before,
        [data-theme="dark"] .history-modal-card::before,
        [data-theme="dark"] .admin-modal-card::before,
        [data-theme="dark"] .history-list-item::before,
        [data-theme="dark"] .raid-creator-scope .card::before,
        [data-theme="dark"] .api-data-card::before,
        [data-theme="dark"] .category-card::before,
        [data-theme="dark"] .mini-category-card::before,
        [data-theme="dark"] .role-item::before,
        [data-theme="dark"] .data-source-selector::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, #8b5cf6, #06b6d4, #8b5cf6, transparent);
            pointer-events: none;
            border-radius: inherit;
            z-index: 1;
        }

        /* Tabs container con borde y glow cyberpunk */
        [data-theme="dark"] .tabs-container {
            position: relative;
            box-shadow: 0 0 20px rgba(139, 92, 246, 0.06);
        }

        [data-theme="dark"] .tabs-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, #8b5cf6, #06b6d4, #8b5cf6, transparent);
            pointer-events: none;
            border-radius: 99px;
            z-index: 1;
        }

        /* Tab activa con gradiente cyberpunk */
        [data-theme="dark"] .tab-btn.active {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(6, 182, 212, 0.12));
            color: #c4b5fd;
            border: 1px solid rgba(139, 92, 246, 0.3);
            box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
        }

        /* Botón primary con gradiente cyberpunk púrpura→cyan */
        [data-theme="dark"] .btn-primary {
            background: linear-gradient(135deg, #8b5cf6, #06b6d4);
            color: #ffffff;
            border: 1px solid rgba(139, 92, 246, 0.4);
        }

        [data-theme="dark"] .btn-primary:hover {
            background: linear-gradient(135deg, #7c3aed, #0891b2);
            box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
        }

        /* Botón Discord con gradiente cyberpunk */
        [data-theme="dark"] .btn-discord {
            background: linear-gradient(135deg, #5865F2, #8b5cf6);
            border: 1px solid rgba(139, 92, 246, 0.3);
        }

        /* Stat-card values con gradientes neón */
        [data-theme="dark"] .stat-card.gold .stat-card-value,
        [data-theme="dark"] .summary-card .summary-card-value {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        [data-theme="dark"] .stat-card.blue .stat-card-value {
            background: linear-gradient(135deg, #06b6d4, #67e8f9);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        [data-theme="dark"] .stat-card.success .stat-card-value {
            color: #22c55e;
        }

        [data-theme="dark"] .stat-card.danger .stat-card-value {
            color: #ef4444;
        }

        [data-theme="dark"] .stat-card.purple .stat-card-value {
            background: linear-gradient(135deg, #8b5cf6, #c4b5fd);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        /* Panel-header border con tinte púrpura */
        [data-theme="dark"] .panel-header {
            border-bottom-color: rgba(139, 92, 246, 0.2);
        }

        /* Section-header accent border cyberpunk */
        [data-theme="dark"] .config-card .section-header {
            border-left-color: var(--accent-primary);
        }

        [data-theme="dark"] .config-card.card-gastos .section-header {
            border-left-color: #ef4444;
        }

        [data-theme="dark"] .config-card.card-jugadores .section-header {
            border-left-color: #f59e0b;
        }

        /* Result section label color cyberpunk cyan */
        [data-theme="dark"] .result-section-label {
            color: #06b6d4;
        }

        /* Distribution chart bar con gradiente cyberpunk signature */
        [data-theme="dark"] .dist-bar-fill {
            background: linear-gradient(90deg, #8b5cf6 0%, #06b6d4 100%);
        }

        [data-theme="dark"] .dist-value {
            background: linear-gradient(135deg, #8b5cf6, #06b6d4);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        /* Penalty row con estilo warning cyberpunk */
        [data-theme="dark"] .penalty-row {
            background: rgba(239, 68, 68, 0.05);
            border-color: rgba(239, 68, 68, 0.2);
        }

        /* Role badge admin cyberpunk amber */
        [data-theme="dark"] .role-badge.admin {
            background: rgba(245, 158, 11, 0.12);
            border-color: rgba(245, 158, 11, 0.3);
            color: #f59e0b;
        }

        /* Webhook popover title con gradiente cyberpunk */
        [data-theme="dark"] .webhook-popover-title {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        /* History list item title cyberpunk */
        [data-theme="dark"] .history-list-item-title {
            color: #c4b5fd;
        }

        [data-theme="dark"] .history-list-item-loot {
            background: linear-gradient(135deg, #8b5cf6, #06b6d4);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        [data-theme="dark"] .top-players-rank {
            background: linear-gradient(135deg, #8b5cf6, #06b6d4);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        [data-theme="dark"] .top-players-value {
            color: #06b6d4;
        }

        [data-theme="dark"] .chart-title {
            color: #e0e7ff;
        }

        [data-theme="dark"] .api-data-num {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        /* raid-creator-scope: card-title y config-section-title con gradiente */
        [data-theme="dark"] .raid-creator-scope .card-title,
        [data-theme="dark"] .config-section-title {
            background: linear-gradient(135deg, #8b5cf6, #06b6d4);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            border-bottom-color: rgba(139, 92, 246, 0.2);
        }

        /* Help "?" buttons en raid-creator cyberpunk */
        [data-theme="dark"] .raid-creator-scope label span[style*="border-radius: 50%"],
        [data-theme="dark"] .raid-creator-scope .input-group label span:last-child {
            background: var(--accent-primary) !important;
            color: #ffffff !important;
        }

        /* raid-creator botones con gradiente cyberpunk */
        [data-theme="dark"] .raid-creator-scope .btn-primary {
            background: linear-gradient(135deg, #8b5cf6, #06b6d4) !important;
            color: #ffffff !important;
            border: 1px solid rgba(139, 92, 246, 0.4) !important;
        }

        [data-theme="dark"] .raid-creator-scope .btn-success {
            background: linear-gradient(135deg, #22c55e, #16a34a) !important;
        }

        [data-theme="dark"] .raid-creator-scope .btn-danger {
            background: linear-gradient(135deg, #ef4444, #dc2626) !important;
        }

        [data-theme="dark"] .raid-creator-scope .btn-secondary,
        [data-theme="dark"] .raid-creator-scope .btn-info {
            background: var(--bg-input-hover) !important;
            border: 1px solid var(--border-color) !important;
        }

        /* Display selectors cyberpunk */
        [data-theme="dark"] .raid-creator-scope [id$="-display"] {
            background: var(--bg-input-field) !important;
            border: 2px solid var(--border-color) !important;
            color: var(--text-result) !important;
        }

        [data-theme="dark"] .raid-creator-scope [id$="-display"]:hover {
            border-color: var(--accent-primary) !important;
            background: var(--bg-input-field-hover) !important;
        }

        /* Tooltips cyberpunk */
        [data-theme="dark"] .raid-creator-scope [id^="tooltip-"] {
            background: var(--bg-input-field) !important;
            color: var(--text-result) !important;
            border: 1px solid var(--accent-primary) !important;
            box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3) !important;
        }

        [data-theme="dark"] .raid-creator-scope [id^="tooltip-"] strong {
            color: #f59e0b !important;
        }

        /* Alerts cyberpunk */
        [data-theme="dark"] .raid-creator-scope .alert-success {
            background: rgba(34, 197, 94, 0.1) !important;
            border-color: #22c55e !important;
            color: #22c55e !important;
        }

        [data-theme="dark"] .raid-creator-scope .alert-error {
            background: rgba(239, 68, 68, 0.1) !important;
            border-color: #ef4444 !important;
            color: #ef4444 !important;
        }

        /* Admin role badges cyberpunk */
        [data-theme="dark"] .admin-user-role-badge.role-admin {
            background: rgba(245, 158, 11, 0.15);
            color: #f59e0b;
            border: 1px solid rgba(245, 158, 11, 0.3);
        }

        [data-theme="dark"] .admin-user-role-badge.role-user {
            background: rgba(6, 182, 212, 0.15);
            color: #06b6d4;
            border: 1px solid rgba(6, 182, 212, 0.3);
        }

        /* Admin checkbox checked cyberpunk */
        [data-theme="dark"] .admin-checkbox-item:has(input[type="checkbox"]:checked) {
            background: rgba(139, 92, 246, 0.12);
            border-color: #8b5cf6;
            box-shadow: 0 0 8px rgba(139, 92, 246, 0.2);
        }

        [data-theme="dark"] .admin-checkbox-item input[type="checkbox"]:checked {
            background: #8b5cf6;
            border-color: #8b5cf6;
        }

        [data-theme="dark"] .admin-checkbox-item input[type="checkbox"]::after {
            color: #ffffff;
        }

        /* Scrollbar con estilo cyberpunk */
        /* === OPTIMIZACIÓN: scrollbar-color es HEREDADA en CSS ===
           ANTES: [data-theme="dark"] * forzaba recalcular estilo en TODOS los elementos
           al cambiar tema (universal selector *= costoso).
           AHORA: se setea solo en :root y hereda a todos los hijos. Mismo resultado,
           ~80% menos costo de style recalc en theme switch. */
        [data-theme="dark"] {
            scrollbar-color: rgba(139, 92, 246, 0.4) var(--bg-card);
        }

        [data-theme="dark"] ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        [data-theme="dark"] ::-webkit-scrollbar-track {
            background: var(--bg-card);
        }

        [data-theme="dark"] ::-webkit-scrollbar-thumb {
            background: rgba(139, 92, 246, 0.4);
            border-radius: 4px;
        }

        [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
            background: rgba(139, 92, 246, 0.6);
        }

        /* Kbd hints cyberpunk */
        [data-theme="dark"] .kbd-hint kbd {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            color: #c4b5fd;
        }

        /* Botón Theme toggle hover cyberpunk */
        [data-theme="dark"] #btnThemeToggle:hover {
            background: var(--bg-input);
            color: #8b5cf6;
            border-color: #8b5cf6;
        }

        /* Botones copy-name y check cyberpunk */
        [data-theme="dark"] .btn-copy-name {
            background: rgba(139, 92, 246, 0.12);
            color: #a78bfa;
        }

        [data-theme="dark"] .btn-copy-name:hover {
            background: #8b5cf6;
            color: #ffffff;
        }

        [data-theme="dark"] .btn-check.is-checked {
            background: #8b5cf6;
            color: #ffffff;
            border-color: #8b5cf6;
        }

        /* Botones btn-add (dashed border) cyberpunk */
        [data-theme="dark"] .btn-add {
            border-color: rgba(139, 92, 246, 0.4);
            color: #a78bfa;
        }

        [data-theme="dark"] .btn-add:hover {
            border-color: #8b5cf6;
            color: #c4b5fd;
            background: rgba(139, 92, 246, 0.08);
        }

        /* Split toggle (penalizaciones) cyberpunk */
        [data-theme="dark"] .split-toggle.on {
            background: rgba(139, 92, 246, 0.08);
            border-color: rgba(139, 92, 246, 0.25);
            color: #c4b5fd;
        }

        [data-theme="dark"] .split-toggle.on .dot {
            background: #a78bfa;
            box-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
        }

        /* Cofre-label hover cyberpunk */
        [data-theme="dark"] .cofre-label:hover {
            background: #8b5cf6;
            color: #ffffff;
        }

        /* Manual badge cyberpunk */
        [data-theme="dark"] .manual-badge {
            background: rgba(139, 92, 246, 0.15);
            color: #a78bfa;
            border: 1px solid rgba(139, 92, 246, 0.3);
        }

        /* Distribution chart header cyberpunk */
        [data-theme="dark"] .distribution-chart-header:hover {
            background: var(--bg-input);
        }

        [data-theme="dark"] .distribution-chart-toggle {
            color: #f59e0b;
        }

        /* Webhook popover status cyberpunk */
        [data-theme="dark"] .webhook-popover-status.ok {
            color: #22c55e;
        }

        [data-theme="dark"] .webhook-popover-status.error {
            color: #ef4444;
        }

        /* Webhook save button cyberpunk */
        [data-theme="dark"] .webhook-popover-actions button.btn-save-webhook {
            background: linear-gradient(135deg, #8b5cf6, #06b6d4);
            color: #ffffff;
            border-color: #8b5cf6;
        }

        /* History empty cyberpunk */
        [data-theme="dark"] .history-empty {
            border-color: rgba(139, 92, 246, 0.3);
            background: var(--bg-card);
        }

        /* Autocomplete list cyberpunk */
        [data-theme="dark"] .autocomplete-list {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            box-shadow: 0 12px 30px rgba(139, 92, 246, 0.2);
        }

        [data-theme="dark"] .autocomplete-list li:hover,
        [data-theme="dark"] .autocomplete-list li.highlighted {
            background: var(--bg-input);
            color: #c4b5fd;
        }

        /* Login modal cyberpunk */
        [data-theme="dark"] .login-card {
            box-shadow: 0 25px 50px -12px rgba(139, 92, 246, 0.3);
        }

        /* History modal cyberpunk */
        [data-theme="dark"] .history-modal-card,
        [data-theme="dark"] .admin-modal-card {
            box-shadow: 0 30px 70px rgba(139, 92, 246, 0.3);
        }

        [data-theme="dark"] .history-modal-title {
            background: linear-gradient(135deg, #8b5cf6, #06b6d4);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        /* History list item hover cyberpunk */
        [data-theme="dark"] .history-list-item:hover {
            border-color: #8b5cf6;
            background: var(--bg-input-hover);
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
        }

        /* API data empty cyberpunk */
        [data-theme="dark"] .api-data-empty {
            background: rgba(139, 92, 246, 0.08);
            color: #a78bfa;
            border-color: rgba(139, 92, 246, 0.3);
        }

        /* Custom dropdown scrollbar cyberpunk */
        [data-theme="dark"] .custom-dropdown-options::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.2);
        }

        [data-theme="dark"] .custom-dropdown-options::-webkit-scrollbar-thumb {
            background: rgba(139, 92, 246, 0.4);
        }

        [data-theme="dark"] .custom-dropdown-options::-webkit-scrollbar-thumb:hover {
            background: rgba(139, 92, 246, 0.6);
        }

        /* Botón Login toggle cyberpunk */
        [data-theme="dark"] #btnLoginToggle:hover {
            border-color: #c4b5fd;
            color: #c4b5fd;
        }

        /* Webhook trigger (⚙️) cyberpunk */
        [data-theme="dark"] .webhook-trigger:hover {
            background: var(--bg-input);
            color: #f59e0b;
            border-color: #f59e0b;
        }

        /* Botón remove cyberpunk */
        [data-theme="dark"] .btn-remove {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }

        [data-theme="dark"] .btn-remove:hover {
            background: #ef4444;
            color: #ffffff;
        }

        /* Botón toggle descuento cyberpunk */
        [data-theme="dark"] .btn-toggle-descuento {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.25);
        }

        [data-theme="dark"] .btn-toggle-descuento.bono {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
            border-color: rgba(34, 197, 94, 0.25);
        }

        /* ==========================================================================
           TEMA ORO — ORO & NEGRO (Solo [data-theme="oro"])
           Estética de lujo: dorado + negro con gradientes amber→red.
           ========================================================================== */
        [data-theme="oro"] body {
            background:
                radial-gradient(ellipse at top, rgba(245, 158, 11, 0.06) 0%, transparent 55%),
                radial-gradient(ellipse at bottom, rgba(239, 68, 68, 0.04) 0%, transparent 55%),
                var(--bg-body);
            background-attachment: fixed;
        }

        /* h1 con gradiente amber→red (signature de diseño10) */
        [data-theme="oro"] h1 {
            background: linear-gradient(135deg, #f59e0b, #ef4444);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            letter-spacing: -0.5px;
            text-shadow: none;
        }

        [data-theme="oro"] h2 {
            color: #f59e0b;
            text-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
        }

        [data-theme="oro"] .subtitle {
            color: #d1d5db;
            letter-spacing: 1px;
        }

        /* Cards con gradiente "Oro & Negro" signature */
        [data-theme="oro"] .container,
        [data-theme="oro"] .config-card,
        [data-theme="oro"] .stat-card,
        [data-theme="oro"] .summary-card,
        [data-theme="oro"] .chart-card,
        [data-theme="oro"] .webhook-popover,
        [data-theme="oro"] .login-card,
        [data-theme="oro"] .history-modal-card,
        [data-theme="oro"] .admin-modal-card,
        [data-theme="oro"] .history-list-item,
        [data-theme="oro"] .raid-creator-scope .card,
        [data-theme="oro"] .api-data-card,
        [data-theme="oro"] .category-card,
        [data-theme="oro"] .mini-category-card,
        [data-theme="oro"] .role-item,
        [data-theme="oro"] .data-source-selector {
            background: linear-gradient(145deg, #1a1a24, #0f0f17);
            position: relative;
            box-shadow: 0 0 40px rgba(245, 158, 11, 0.05), 0 20px 60px rgba(0,0,0,0.5);
        }

        /* Top accent line dorada */
        [data-theme="oro"] .container::before,
        [data-theme="oro"] .config-card::before,
        [data-theme="oro"] .stat-card::before,
        [data-theme="oro"] .summary-card::before,
        [data-theme="oro"] .chart-card::before,
        [data-theme="oro"] .webhook-popover::before,
        [data-theme="oro"] .login-card::before,
        [data-theme="oro"] .history-modal-card::before,
        [data-theme="oro"] .admin-modal-card::before,
        [data-theme="oro"] .history-list-item::before,
        [data-theme="oro"] .raid-creator-scope .card::before,
        [data-theme="oro"] .api-data-card::before,
        [data-theme="oro"] .category-card::before,
        [data-theme="oro"] .mini-category-card::before,
        [data-theme="oro"] .role-item::before,
        [data-theme="oro"] .data-source-selector::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, #f59e0b, #d97706, #f59e0b, transparent);
            pointer-events: none;
            border-radius: inherit;
            z-index: 1;
        }

        [data-theme="oro"] .tabs-container {
            position: relative;
            box-shadow: 0 0 20px rgba(245, 158, 11, 0.06);
        }
        [data-theme="oro"] .tabs-container::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, #f59e0b, #d97706, #f59e0b, transparent);
            pointer-events: none;
            border-radius: 99px;
            z-index: 1;
        }

        /* Tab activa dorada */
        [data-theme="oro"] .tab-btn.active {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.12));
            color: #fbbf24;
            border: 1px solid rgba(245, 158, 11, 0.3);
            box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
        }

        /* Botón primary con gradiente dorado */
        [data-theme="oro"] .btn-primary {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #1a1a24;
            border: 1px solid rgba(245, 158, 11, 0.4);
            font-weight: 700;
        }
        [data-theme="oro"] .btn-primary:hover {
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
        }

        /* Botón Discord con tinte dorado */
        [data-theme="oro"] .btn-discord {
            background: linear-gradient(135deg, #5865F2, #8b5cf6);
            border: 1px solid rgba(139, 92, 246, 0.3);
        }

        /* Stat values dorados */
        [data-theme="oro"] .stat-card.gold .stat-card-value,
        [data-theme="oro"] .summary-card .summary-card-value {
            color: #f59e0b;
            text-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
        }
        [data-theme="oro"] .stat-card.blue .stat-card-value { color: #06b6d4; }
        [data-theme="oro"] .stat-card.success .stat-card-value { color: #22c55e; }
        [data-theme="oro"] .stat-card.danger .stat-card-value { color: #ef4444; }
        [data-theme="oro"] .stat-card.purple .stat-card-value { color: #a78bfa; }

        /* Section header accent dorado */
        [data-theme="oro"] .config-card .section-header { border-left-color: #f59e0b; }
        [data-theme="oro"] .config-card.card-gastos .section-header { border-left-color: #ef4444; }
        [data-theme="oro"] .config-card.card-jugadores .section-header { border-left-color: #f59e0b; }

        /* Panel header con tinte dorado */
        [data-theme="oro"] .panel-header {
            border-bottom-color: rgba(245, 158, 11, 0.2);
        }

        /* Result section label dorado */
        [data-theme="oro"] .result-section-label { color: #f59e0b; }

        /* Distribution bar gradiente dorado */
        [data-theme="oro"] .dist-bar-fill {
            background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%);
        }
        [data-theme="oro"] .dist-value { color: #f59e0b; }

        /* raid-creator card-title dorado */
        [data-theme="oro"] .raid-creator-scope .card-title,
        [data-theme="oro"] .config-section-title {
            color: #f59e0b;
            border-bottom-color: rgba(245, 158, 11, 0.2);
        }

        /* raid-creator botones con gradiente dorado */
        [data-theme="oro"] .raid-creator-scope .btn-primary {
            background: linear-gradient(135deg, #f59e0b, #d97706) !important;
            color: #1a1a24 !important;
            border: 1px solid rgba(245, 158, 11, 0.4) !important;
        }

        /* History list item title dorado */
        [data-theme="oro"] .history-list-item-title { color: #fbbf24; }
        [data-theme="oro"] .history-list-item-loot { color: #f59e0b; }
        [data-theme="oro"] .history-list-item:hover {
            border-color: #f59e0b;
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
        }

        /* History modal title dorado */
        [data-theme="oro"] .history-modal-title {
            color: #f59e0b;
            text-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
        }

        /* Top players rank/value dorado */
        [data-theme="oro"] .top-players-rank { color: #f59e0b; }
        [data-theme="oro"] .top-players-value { color: #f59e0b; }
        [data-theme="oro"] .api-data-num { color: #f59e0b; }

        /* Webhook popover title dorado */
        [data-theme="oro"] .webhook-popover-title { color: #f59e0b; }

        /* Role badge admin dorado */
        [data-theme="oro"] .role-badge.admin {
            background: rgba(245, 158, 11, 0.12);
            border-color: rgba(245, 158, 11, 0.3);
            color: #f59e0b;
        }

        /* Admin role badges */
        [data-theme="oro"] .admin-user-role-badge.role-admin {
            background: rgba(245, 158, 11, 0.15);
            color: #f59e0b;
            border: 1px solid rgba(245, 158, 11, 0.3);
        }
        [data-theme="oro"] .admin-user-role-badge.role-user {
            background: rgba(6, 182, 212, 0.15);
            color: #06b6d4;
            border: 1px solid rgba(6, 182, 212, 0.3);
        }

        /* Admin checkbox checked dorado */
        [data-theme="oro"] .admin-checkbox-item:has(input[type="checkbox"]:checked) {
            background: rgba(245, 158, 11, 0.12);
            border-color: #f59e0b;
            box-shadow: 0 0 8px rgba(245, 158, 11, 0.2);
        }
        [data-theme="oro"] .admin-checkbox-item input[type="checkbox"]:checked {
            background: #f59e0b;
            border-color: #f59e0b;
        }

        /* Inputs con placeholder gris */
        [data-theme="oro"] input,
        [data-theme="oro"] select {
            color: #e5e7eb;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        [data-theme="oro"] input::placeholder,
        [data-theme="oro"] select::placeholder { color: #9ca3af; }
        [data-theme="oro"] select option { color: #e5e7eb !important; }
        [data-theme="oro"] input:focus,
        [data-theme="oro"] select:focus {
            box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
        }

        /* Cofre-label hover dorado */
        [data-theme="oro"] .cofre-label { border-color: rgba(245, 158, 11, 0.25); }
        [data-theme="oro"] .cofre-label:hover {
            background: #f59e0b;
            color: #1a1a24;
        }

        /* Botón primary hover glow dorado */
        [data-theme="oro"] .btn-primary { box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3); }

        /* Scrollbar dorada — OPTIMIZADO: scrollbar-color es heredada, no usar * */
        [data-theme="oro"] {
            scrollbar-color: rgba(245, 158, 11, 0.4) var(--bg-card);
        }
        [data-theme="oro"] ::-webkit-scrollbar-thumb {
            background: rgba(245, 158, 11, 0.4);
        }
        [data-theme="oro"] ::-webkit-scrollbar-thumb:hover {
            background: rgba(245, 158, 11, 0.6);
        }

        /* Kbd hints dorado */
        [data-theme="oro"] .kbd-hint kbd { color: #fbbf24; }

        /* Botón Theme toggle hover dorado */
        [data-theme="oro"] #btnThemeToggle:hover {
            background: var(--bg-input);
            color: #f59e0b;
            border-color: #f59e0b;
        }

        /* Manual badge dorado */
        [data-theme="oro"] .manual-badge {
            background: rgba(245, 158, 11, 0.15);
            color: #fbbf24;
            border: 1px solid rgba(245, 158, 11, 0.3);
        }

        /* Copy-name y btn-check dorado */
        [data-theme="oro"] .btn-copy-name {
            background: rgba(245, 158, 11, 0.12);
            color: #f59e0b;
        }
        [data-theme="oro"] .btn-copy-name:hover {
            background: #f59e0b;
            color: #1a1a24;
        }
        [data-theme="oro"] .btn-check.is-checked {
            background: #f59e0b;
            color: #1a1a24;
            border-color: #f59e0b;
        }

        /* btn-add dashed dorado */
        [data-theme="oro"] .btn-add {
            border-color: rgba(245, 158, 11, 0.4);
            color: #f59e0b;
        }
        [data-theme="oro"] .btn-add:hover {
            border-color: #f59e0b;
            color: #fbbf24;
            background: rgba(245, 158, 11, 0.08);
        }

        /* Split toggle dorado */
        [data-theme="oro"] .split-toggle.on {
            background: rgba(245, 158, 11, 0.08);
            border-color: rgba(245, 158, 11, 0.25);
            color: #fbbf24;
        }

        [data-theme="oro"] .split-toggle.on .dot {
            background: #fbbf24;
            box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
        }

        /* Distribution chart toggle dorado */
        [data-theme="oro"] .distribution-chart-toggle { color: #f59e0b; }

        /* Webhook save button dorado */
        [data-theme="oro"] .webhook-popover-actions button.btn-save-webhook {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #1a1a24;
            border-color: #f59e0b;
        }

        /* History empty dorado */
        [data-theme="oro"] .history-empty {
            border-color: rgba(245, 158, 11, 0.3);
            background: var(--bg-card);
        }

        /* Autocomplete list dorado */
        [data-theme="oro"] .autocomplete-list {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            box-shadow: 0 12px 30px rgba(245, 158, 11, 0.2);
        }
        [data-theme="oro"] .autocomplete-list li:hover,
        [data-theme="oro"] .autocomplete-list li.highlighted {
            background: var(--bg-input);
            color: #fbbf24;
        }

        /* Login modal y modales dorado */
        [data-theme="oro"] .login-card { box-shadow: 0 25px 50px -12px rgba(245, 158, 11, 0.3); }
        [data-theme="oro"] .history-modal-card,
        [data-theme="oro"] .admin-modal-card { box-shadow: 0 30px 70px rgba(245, 158, 11, 0.3); }

        /* Webhook trigger (⚙️) hover dorado */
        [data-theme="oro"] .webhook-trigger:hover {
            background: var(--bg-input);
            color: #f59e0b;
            border-color: #f59e0b;
        }

        /* ==========================================================================
           TEMA AZUL — AZUL CELESTE (Solo [data-theme="azul"])
           Estética clara: blanco con gradientes indigo→cyan.
           ========================================================================== */
        [data-theme="azul"] body {
            background:
                radial-gradient(ellipse at top, rgba(99, 102, 241, 0.06) 0%, transparent 55%),
                radial-gradient(ellipse at bottom, rgba(6, 182, 212, 0.04) 0%, transparent 55%),
                var(--bg-body);
            background-attachment: fixed;
        }

        /* h1 con gradiente amber→red→purple (page-title de diseño11) */
        [data-theme="azul"] h1 {
            background: linear-gradient(135deg, #d97706, #dc2626, #7c3aed);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            letter-spacing: -0.5px;
            text-shadow: none;
        }

        /* h2 con gradiente indigo→cyan (total-value de diseño11 diseño 2) */
        [data-theme="azul"] h2 {
            background: linear-gradient(135deg, #4f46e5, #0891b2);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        [data-theme="azul"] .subtitle {
            color: #4b5563;
            letter-spacing: 1px;
        }

        /* Top accent line indigo→cyan (signature de diseño11 diseño 2) */
        [data-theme="azul"] .container,
        [data-theme="azul"] .config-card,
        [data-theme="azul"] .stat-card,
        [data-theme="azul"] .summary-card,
        [data-theme="azul"] .chart-card,
        [data-theme="azul"] .webhook-popover,
        [data-theme="azul"] .login-card,
        [data-theme="azul"] .history-modal-card,
        [data-theme="azul"] .admin-modal-card,
        [data-theme="azul"] .history-list-item,
        [data-theme="azul"] .raid-creator-scope .card,
        [data-theme="azul"] .api-data-card,
        [data-theme="azul"] .category-card,
        [data-theme="azul"] .mini-category-card,
        [data-theme="azul"] .role-item,
        [data-theme="azul"] .data-source-selector {
            position: relative;
            box-shadow: 0 4px 20px rgba(99, 102, 241, 0.08), 0 1px 3px rgba(0,0,0,0.04);
        }

        [data-theme="azul"] .container::before,
        [data-theme="azul"] .config-card::before,
        [data-theme="azul"] .stat-card::before,
        [data-theme="azul"] .summary-card::before,
        [data-theme="azul"] .chart-card::before,
        [data-theme="azul"] .webhook-popover::before,
        [data-theme="azul"] .login-card::before,
        [data-theme="azul"] .history-modal-card::before,
        [data-theme="azul"] .admin-modal-card::before,
        [data-theme="azul"] .history-list-item::before,
        [data-theme="azul"] .raid-creator-scope .card::before,
        [data-theme="azul"] .api-data-card::before,
        [data-theme="azul"] .category-card::before,
        [data-theme="azul"] .mini-category-card::before,
        [data-theme="azul"] .role-item::before,
        [data-theme="azul"] .data-source-selector::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, #6366f1, #06b6d4, #6366f1);
            pointer-events: none;
            border-radius: inherit;
            z-index: 1;
        }

        [data-theme="azul"] .tabs-container {
            position: relative;
            box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1);
        }
        [data-theme="azul"] .tabs-container::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, #6366f1, #06b6d4, #6366f1);
            pointer-events: none;
            border-radius: 99px;
            z-index: 1;
        }

        /* Tab activa con gradiente indigo→cyan */
        [data-theme="azul"] .tab-btn.active {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(6, 182, 212, 0.1));
            color: #4f46e5;
            border: 1px solid rgba(99, 102, 241, 0.3);
            box-shadow: 0 4px 14px rgba(99, 102, 241, 0.2);
        }

        /* Botón primary con gradiente indigo→cyan */
        [data-theme="azul"] .btn-primary {
            background: linear-gradient(135deg, #6366f1, #06b6d4);
            color: #ffffff;
            border: 1px solid rgba(99, 102, 241, 0.4);
        }
        [data-theme="azul"] .btn-primary:hover {
            background: linear-gradient(135deg, #4f46e5, #0891b2);
            box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
        }

        /* Botón Discord con tinte indigo */
        [data-theme="azul"] .btn-discord {
            background: linear-gradient(135deg, #5865F2, #6366f1);
            border: 1px solid rgba(99, 102, 241, 0.3);
        }

        /* Stat values con gradientes indigo/cyan */
        [data-theme="azul"] .stat-card.gold .stat-card-value,
        [data-theme="azul"] .summary-card .summary-card-value {
            background: linear-gradient(135deg, #4f46e5, #0891b2);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }
        [data-theme="azul"] .stat-card.blue .stat-card-value {
            background: linear-gradient(135deg, #06b6d4, #0891b2);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }
        [data-theme="azul"] .stat-card.success .stat-card-value { color: #16a34a; }
        [data-theme="azul"] .stat-card.danger .stat-card-value { color: #dc2626; }
        [data-theme="azul"] .stat-card.purple .stat-card-value {
            background: linear-gradient(135deg, #8b5cf6, #a78bfa);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        /* Section header accent indigo */
        [data-theme="azul"] .config-card .section-header { border-left-color: #6366f1; }
        [data-theme="azul"] .config-card.card-gastos .section-header { border-left-color: #dc2626; }
        [data-theme="azul"] .config-card.card-jugadores .section-header { border-left-color: #d97706; }

        /* Panel header con tinte indigo */
        [data-theme="azul"] .panel-header {
            border-bottom-color: rgba(99, 102, 241, 0.2);
        }

        /* Result section label indigo */
        [data-theme="azul"] .result-section-label { color: #6366f1; }

        /* Distribution bar gradiente indigo→cyan */
        [data-theme="azul"] .dist-bar-fill {
            background: linear-gradient(90deg, #6366f1 0%, #06b6d4 100%);
        }
        [data-theme="azul"] .dist-value {
            background: linear-gradient(135deg, #6366f1, #06b6d4);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        /* raid-creator card-title con gradiente */
        [data-theme="azul"] .raid-creator-scope .card-title,
        [data-theme="azul"] .config-section-title {
            background: linear-gradient(135deg, #6366f1, #06b6d4);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            border-bottom-color: rgba(99, 102, 241, 0.2);
        }

        /* raid-creator botones con gradiente */
        [data-theme="azul"] .raid-creator-scope .btn-primary {
            background: linear-gradient(135deg, #6366f1, #06b6d4) !important;
            color: #ffffff !important;
            border: 1px solid rgba(99, 102, 241, 0.4) !important;
        }

        /* History list item title indigo */
        [data-theme="azul"] .history-list-item-title { color: #4f46e5; }
        [data-theme="azul"] .history-list-item-loot {
            background: linear-gradient(135deg, #6366f1, #06b6d4);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }
        [data-theme="azul"] .history-list-item:hover {
            border-color: #6366f1;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
        }

        /* History modal title indigo */
        [data-theme="azul"] .history-modal-title {
            background: linear-gradient(135deg, #4f46e5, #0891b2);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        /* Top players rank/value indigo */
        [data-theme="azul"] .top-players-rank {
            background: linear-gradient(135deg, #6366f1, #06b6d4);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }
        [data-theme="azul"] .top-players-value { color: #0891b2; }
        [data-theme="azul"] .api-data-num {
            background: linear-gradient(135deg, #6366f1, #06b6d4);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        /* Webhook popover title indigo */
        [data-theme="azul"] .webhook-popover-title { color: #6366f1; }

        /* Role badge admin indigo */
        [data-theme="azul"] .role-badge.admin {
            background: rgba(99, 102, 241, 0.12);
            border-color: rgba(99, 102, 241, 0.3);
            color: #6366f1;
        }

        /* Admin role badges */
        [data-theme="azul"] .admin-user-role-badge.role-admin {
            background: rgba(217, 119, 6, 0.15);
            color: #d97706;
            border: 1px solid rgba(217, 119, 6, 0.3);
        }
        [data-theme="azul"] .admin-user-role-badge.role-user {
            background: rgba(99, 102, 241, 0.15);
            color: #6366f1;
            border: 1px solid rgba(99, 102, 241, 0.3);
        }

        /* Admin checkbox checked indigo */
        [data-theme="azul"] .admin-checkbox-item:has(input[type="checkbox"]:checked) {
            background: rgba(99, 102, 241, 0.12);
            border-color: #6366f1;
            box-shadow: 0 0 8px rgba(99, 102, 241, 0.2);
        }
        [data-theme="azul"] .admin-checkbox-item input[type="checkbox"]:checked {
            background: #6366f1;
            border-color: #6366f1;
        }
        [data-theme="azul"] .admin-checkbox-item input[type="checkbox"]::after {
            color: #ffffff;
        }

        /* Inputs con texto índigo oscuro */
        [data-theme="azul"] input,
        [data-theme="azul"] select {
            color: #1e1b4b;
            box-shadow: inset 0 1px 3px rgba(30, 27, 75, 0.08);
        }
        [data-theme="azul"] input::placeholder,
        [data-theme="azul"] select::placeholder { color: #6b7280; }
        [data-theme="azul"] select option { color: #1e1b4b !important; }
        [data-theme="azul"] input:focus,
        [data-theme="azul"] select:focus {
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
        }

        /* Cofre-label hover indigo */
        [data-theme="azul"] .cofre-label {
            background: rgba(99, 102, 241, 0.12);
            color: #6366f1;
            border-color: rgba(99, 102, 241, 0.25);
        }
        [data-theme="azul"] .cofre-label:hover {
            background: #6366f1;
            color: #ffffff;
        }

        /* Scrollbar indigo — OPTIMIZADO: scrollbar-color es heredada, no usar * */
        [data-theme="azul"] {
            scrollbar-color: rgba(99, 102, 241, 0.4) var(--bg-card);
        }
        [data-theme="azul"] ::-webkit-scrollbar-thumb {
            background: rgba(99, 102, 241, 0.4);
        }
        [data-theme="azul"] ::-webkit-scrollbar-thumb:hover {
            background: rgba(99, 102, 241, 0.6);
        }

        /* Kbd hints indigo */
        [data-theme="azul"] .kbd-hint kbd { color: #6366f1; }

        /* Botón Theme toggle hover indigo */
        [data-theme="azul"] #btnThemeToggle:hover {
            background: var(--bg-input);
            color: #6366f1;
            border-color: #6366f1;
        }

        /* Manual badge indigo */
        [data-theme="azul"] .manual-badge {
            background: rgba(99, 102, 241, 0.15);
            color: #6366f1;
            border: 1px solid rgba(99, 102, 241, 0.3);
        }

        /* Copy-name y btn-check indigo */
        [data-theme="azul"] .btn-copy-name {
            background: rgba(99, 102, 241, 0.12);
            color: #6366f1;
        }
        [data-theme="azul"] .btn-copy-name:hover {
            background: #6366f1;
            color: #ffffff;
        }
        [data-theme="azul"] .btn-check.is-checked {
            background: #6366f1;
            color: #ffffff;
            border-color: #6366f1;
        }

        /* btn-add dashed indigo */
        [data-theme="azul"] .btn-add {
            border-color: rgba(99, 102, 241, 0.4);
            color: #6366f1;
        }
        [data-theme="azul"] .btn-add:hover {
            border-color: #6366f1;
            color: #4f46e5;
            background: rgba(99, 102, 241, 0.08);
        }

        /* Split toggle */
        [data-theme="azul"] .split-toggle.on {
            background: rgba(99, 102, 241, 0.08);
            border-color: rgba(99, 102, 241, 0.25);
            color: #818cf8;
        }

        [data-theme="azul"] .split-toggle.on .dot {
            background: #818cf8;
            box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
        }

        /* Distribution chart toggle */
        [data-theme="azul"] .distribution-chart-toggle { color: #d97706; }

        /* Webhook save button indigo */
        [data-theme="azul"] .webhook-popover-actions button.btn-save-webhook {
            background: linear-gradient(135deg, #6366f1, #06b6d4);
            color: #ffffff;
            border-color: #6366f1;
        }

        /* History empty indigo */
        [data-theme="azul"] .history-empty {
            border-color: rgba(99, 102, 241, 0.3);
            background: var(--bg-card);
        }

        /* Autocomplete list indigo */
        [data-theme="azul"] .autocomplete-list {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            box-shadow: 0 12px 30px rgba(99, 102, 241, 0.15);
        }
        [data-theme="azul"] .autocomplete-list li:hover,
        [data-theme="azul"] .autocomplete-list li.highlighted {
            background: var(--bg-input);
            color: #6366f1;
        }

        /* Login modal y modales indigo */
        [data-theme="azul"] .login-card { box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.2); }
        [data-theme="azul"] .history-modal-card,
        [data-theme="azul"] .admin-modal-card { box-shadow: 0 30px 70px rgba(99, 102, 241, 0.2); }

        /* Webhook trigger hover indigo */
        [data-theme="azul"] .webhook-trigger:hover {
            background: var(--bg-input);
            color: #6366f1;
            border-color: #6366f1;
        }

        /* btn-remove y btn-toggle-descuento azul */
        [data-theme="azul"] .btn-remove {
            background: rgba(220, 38, 38, 0.1);
            color: #dc2626;
        }
        [data-theme="azul"] .btn-remove:hover {
            background: #dc2626;
            color: #ffffff;
        }
        [data-theme="azul"] .btn-toggle-descuento {
            background: rgba(220, 38, 38, 0.12);
            color: #dc2626;
            border: 1px solid rgba(220, 38, 38, 0.25);
        }
        [data-theme="azul"] .btn-toggle-descuento.bono {
            background: rgba(22, 163, 74, 0.12);
            color: #16a34a;
            border-color: rgba(22, 163, 74, 0.25);
        }

        /* Resultado y Distribución Visual en Azul (Fondo claro de contraste) */
        [data-theme="azul"] #resultado,
        [data-theme="azul"] .distribution-chart {
            background: #eef2ff;
            border-color: #6366f1;
            color: #1e1b4b;
        }


        /* ==========================================================================
           TEMA ROSA — ROSA DULCE SUAVIZADO (Solo [data-theme="rosa"])
           Estética clara equilibrada: blanco domina, rosa solo como acento puntual
           en bordes, h1 y botones. Cards neutras, no rosas.
           ========================================================================== */
        [data-theme="rosa"] body {
            background:
                radial-gradient(ellipse at top, rgba(225, 29, 72, 0.025) 0%, transparent 60%),
                var(--bg-body);
            background-attachment: fixed;
        }

        /* h1 con gradiente sutil (rosa→purple, sin amber que descuadra) */
        [data-theme="rosa"] h1 {
            background: linear-gradient(135deg, #e11d48, #be123c, #a855f7);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            letter-spacing: -0.5px;
            text-shadow: none;
        }

        /* h2 sobrio: rosa profundo pero sólido (no gradiente) */
        [data-theme="rosa"] h2 {
            color: #be123c;
        }

        [data-theme="rosa"] .subtitle {
            color: #4b5563;
            letter-spacing: 1px;
        }

        /* Cards con tono rosa más evidente (no blanco, pero no tan fuerte como el fondo) */
        [data-theme="rosa"] .container,
        [data-theme="rosa"] .config-card,
        [data-theme="rosa"] .stat-card,
        [data-theme="rosa"] .summary-card,
        [data-theme="rosa"] .chart-card,
        [data-theme="rosa"] .webhook-popover,
        [data-theme="rosa"] .login-card,
        [data-theme="rosa"] .history-modal-card,
        [data-theme="rosa"] .admin-modal-card,
        [data-theme="rosa"] .history-list-item,
        [data-theme="rosa"] .raid-creator-scope .card,
        [data-theme="rosa"] .api-data-card,
        [data-theme="rosa"] .category-card,
        [data-theme="rosa"] .mini-category-card,
        [data-theme="rosa"] .role-item,
        [data-theme="rosa"] .data-source-selector {
            background: linear-gradient(180deg, #ffe4e6, #ffdce0);
            border: 1px solid #f43f5e;
            position: relative;
            box-shadow: 0 4px 14px rgba(136, 19, 55, 0.12), 0 1px 3px rgba(136, 19, 55, 0.06);
        }

        /* Top accent line rosa MUY sutil y corta (no invade toda la card) */
        [data-theme="rosa"] .container::before,
        [data-theme="rosa"] .config-card::before,
        [data-theme="rosa"] .stat-card::before,
        [data-theme="rosa"] .summary-card::before,
        [data-theme="rosa"] .chart-card::before,
        [data-theme="rosa"] .webhook-popover::before,
        [data-theme="rosa"] .login-card::before,
        [data-theme="rosa"] .history-modal-card::before,
        [data-theme="rosa"] .admin-modal-card::before,
        [data-theme="rosa"] .history-list-item::before,
        [data-theme="rosa"] .raid-creator-scope .card::before,
        [data-theme="rosa"] .api-data-card::before,
        [data-theme="rosa"] .category-card::before,
        [data-theme="rosa"] .mini-category-card::before,
        [data-theme="rosa"] .role-item::before,
        [data-theme="rosa"] .data-source-selector::before {
            content: '';
            position: absolute;
            top: 0; left: 30%; right: 30%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #fda4af, transparent);
            border-radius: 2px;
            opacity: 0.6;
            pointer-events: none;
            z-index: 1;
        }

        [data-theme="rosa"] .tabs-container {
            position: relative;
            background: linear-gradient(180deg, #ffe4e6, #ffdce0);
            border: 1px solid #f43f5e;
            box-shadow: 0 4px 14px rgba(136, 19, 55, 0.12);
        }
        [data-theme="rosa"] .tabs-container::before {
            content: '';
            position: absolute;
            top: 0; left: 30%; right: 30%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #fda4af, transparent);
            border-radius: 2px;
            opacity: 0.6;
            pointer-events: none;
            z-index: 1;
        }

        /* Tab activa con tinte rosa */
        [data-theme="rosa"] .tab-btn.active {
            background: rgba(225, 29, 72, 0.1);
            color: #be123c;
            border: 1px solid rgba(225, 29, 72, 0.25);
            box-shadow: 0 2px 6px rgba(225, 29, 72, 0.1);
        }

        /* Botón primary con gradiente rosa SOBRIO (no neón) */
        [data-theme="rosa"] .btn-primary {
            background: linear-gradient(135deg, #e11d48, #be123c);
            color: #ffffff;
            border: 1px solid rgba(225, 29, 72, 0.3);
        }
        [data-theme="rosa"] .btn-primary:hover {
            background: linear-gradient(135deg, #be123c, #9f1239);
            box-shadow: 0 2px 8px rgba(225, 29, 72, 0.2);
        }

        /* Botón Discord neutro (sin tinte rosa invasivo) */
        [data-theme="rosa"] .btn-discord {
            background: #5865F2;
            border: 1px solid rgba(88, 101, 242, 0.3);
        }

        /* Stat values sobrios: gris oscuro por defecto, rosa solo en gold */
        [data-theme="rosa"] .stat-card .stat-card-value,
        [data-theme="rosa"] .summary-card .summary-card-value {
            color: #111827;
        }
        [data-theme="rosa"] .stat-card.gold .stat-card-value {
            color: #be123c;
        }
        [data-theme="rosa"] .stat-card.blue .stat-card-value { color: #0891b2; }
        [data-theme="rosa"] .stat-card.success .stat-card-value { color: #16a34a; }
        [data-theme="rosa"] .stat-card.danger .stat-card-value { color: #dc2626; }
        [data-theme="rosa"] .stat-card.purple .stat-card-value { color: #a855f7; }

        /* Section header accent rosa pero sutil */
        [data-theme="rosa"] .config-card .section-header { border-left-color: #fda4af; }
        [data-theme="rosa"] .config-card.card-gastos .section-header { border-left-color: #dc2626; }
        [data-theme="rosa"] .config-card.card-jugadores .section-header { border-left-color: #d97706; }

        /* Panel header neutro */
        [data-theme="rosa"] .panel-header {
            border-bottom-color: #f3f4f6;
        }

        /* Result section label: rosa profundo pero sólido */
        [data-theme="rosa"] .result-section-label { color: #be123c; }

        /* Distribution bar gradiente rosa SOBRIO */
        [data-theme="rosa"] .dist-bar-fill {
            background: linear-gradient(90deg, #be123c 0%, #f43f5e 100%);
        }
        [data-theme="rosa"] .dist-value { color: #be123c; }

        /* raid-creator card-title rosa profundo sólido */
        [data-theme="rosa"] .raid-creator-scope .card-title,
        [data-theme="rosa"] .config-section-title {
            color: #be123c;
            border-bottom-color: #f3f4f6;
        }

        /* raid-creator botones con gradiente rosa sobrio */
        [data-theme="rosa"] .raid-creator-scope .btn-primary {
            background: linear-gradient(135deg, #e11d48, #be123c) !important;
            color: #ffffff !important;
            border: 1px solid rgba(225, 29, 72, 0.3) !important;
        }

        /* History list item title vino oscuro */
        [data-theme="rosa"] .history-list-item-title { color: #881337; }
        [data-theme="rosa"] .history-list-item-loot { color: #be123c; }
        [data-theme="rosa"] .history-list-item:hover {
            border-color: #f43f5e;
            box-shadow: 0 4px 12px rgba(225, 29, 72, 0.12);
        }

        /* History modal title vino oscuro */
        [data-theme="rosa"] .history-modal-title {
            color: #881337;
        }

        /* Top players rank/value vino */
        [data-theme="rosa"] .top-players-rank { color: #be123c; }
        [data-theme="rosa"] .top-players-value { color: #881337; }
        [data-theme="rosa"] .api-data-num { color: #be123c; }

        /* Webhook popover title vino oscuro */
        [data-theme="rosa"] .webhook-popover-title { color: #881337; }

        /* Role badge admin: rosa MUY sutil */
        [data-theme="rosa"] .role-badge.admin {
            background: rgba(225, 29, 72, 0.06);
            border-color: rgba(225, 29, 72, 0.2);
            color: #be123c;
        }

        /* Admin role badges */
        [data-theme="rosa"] .admin-user-role-badge.role-admin {
            background: rgba(217, 119, 6, 0.1);
            color: #b45309;
            border: 1px solid rgba(217, 119, 6, 0.25);
        }
        [data-theme="rosa"] .admin-user-role-badge.role-user {
            background: rgba(99, 102, 241, 0.1);
            color: #4f46e5;
            border: 1px solid rgba(99, 102, 241, 0.25);
        }

        /* Admin checkbox checked: rosa sobrio */
        [data-theme="rosa"] .admin-checkbox-item:has(input[type="checkbox"]:checked) {
            background: rgba(225, 29, 72, 0.06);
            border-color: #fda4af;
            box-shadow: none;
        }
        [data-theme="rosa"] .admin-checkbox-item input[type="checkbox"]:checked {
            background: #e11d48;
            border-color: #e11d48;
        }
        [data-theme="rosa"] .admin-checkbox-item input[type="checkbox"]::after {
            color: #ffffff;
        }

        /* Inputs con tinte rosa tenue */
        [data-theme="rosa"] input,
        [data-theme="rosa"] select {
            color: #881337;
            background: #ffffff;
            border: 1px solid #fda4af;
            box-shadow: inset 0 1px 2px rgba(225, 29, 72, 0.05);
        }
        [data-theme="rosa"] input::placeholder,
        [data-theme="rosa"] select::placeholder { color: #9f1239; }
        [data-theme="rosa"] select option { color: #881337 !important; }
        [data-theme="rosa"] input:focus,
        [data-theme="rosa"] select:focus {
            border-color: #f43f5e;
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15);
        }

        /* Cofre-label hover rosa */
        [data-theme="rosa"] .cofre-label {
            background: rgba(225, 29, 72, 0.06);
            color: #be123c;
            border-color: rgba(225, 29, 72, 0.15);
        }
        [data-theme="rosa"] .cofre-label:hover {
            background: #e11d48;
            color: #ffffff;
        }

        /* Dynamic row rosa más marcado */
        [data-theme="rosa"] .dynamic-row {
            background: #ffdce0;
            border-color: #fda4af;
        }
        [data-theme="rosa"] .dynamic-row:hover {
            background: #ffc5cd;
            border-color: #f43f5e;
        }

        /* Scrollbar rosa — OPTIMIZADO: scrollbar-color es heredada, no usar * */
        [data-theme="rosa"] {
            scrollbar-color: #fda4af #ffffff;
        }
        [data-theme="rosa"] ::-webkit-scrollbar-track {
            background: #ffffff;
        }
        [data-theme="rosa"] ::-webkit-scrollbar-thumb {
            background: #fda4af;
            border-radius: 8px;
        }
        [data-theme="rosa"] ::-webkit-scrollbar-thumb:hover {
            background: #f43f5e;
        }

        /* Kbd hints con tinte rosa */
        [data-theme="rosa"] .kbd-hint kbd { color: #881337; }
        [data-theme="rosa"] .kbd-hint { background: #ffdce0; border-color: #f43f5e; }

        /* Botón Theme toggle hover rosa sutil */
        [data-theme="rosa"] #btnThemeToggle:hover {
            background: rgba(225, 29, 72, 0.06);
            color: #be123c;
            border-color: #fda4af;
        }

        /* Manual badge rosa sutil */
        [data-theme="rosa"] .manual-badge {
            background: rgba(225, 29, 72, 0.08);
            color: #be123c;
            border: 1px solid rgba(225, 29, 72, 0.2);
        }

        /* Copy-name y btn-check rosa sobrio */
        [data-theme="rosa"] .btn-copy-name {
            background: rgba(225, 29, 72, 0.06);
            color: #be123c;
        }
        [data-theme="rosa"] .btn-copy-name:hover {
            background: #e11d48;
            color: #ffffff;
        }
        [data-theme="rosa"] .btn-check.is-checked {
            background: #e11d48;
            color: #ffffff;
            border-color: #e11d48;
        }

        /* btn-add dashed rosa sutil */
        [data-theme="rosa"] .btn-add {
            border-color: #fda4af;
            color: #be123c;
        }
        [data-theme="rosa"] .btn-add:hover {
            border-color: #e11d48;
            color: #be123c;
            background: rgba(225, 29, 72, 0.04);
        }

        /* Split toggle */
        [data-theme="rosa"] .split-toggle.on {
            background: #fecdd3;
            border-color: #fda4af;
            color: #9f1239;
        }

        [data-theme="rosa"] .split-toggle.on .dot {
            background: #9f1239;
            box-shadow: 0 0 6px rgba(159, 18, 57, 0.3);
        }

        /* Distribution chart toggle */
        [data-theme="rosa"] .distribution-chart-toggle { color: #d97706; }

        /* Webhook save button rosa sobrio */
        [data-theme="rosa"] .webhook-popover-actions button.btn-save-webhook {
            background: linear-gradient(135deg, #e11d48, #be123c);
            color: #ffffff;
            border-color: #e11d48;
        }

        /* History empty rosa tenue */
        [data-theme="rosa"] .history-empty {
            background: #ffe4e6;
            border: 2px dashed #f43f5e;
            color: #881337;
        }

        /* Autocomplete list con tinte rosa */
        [data-theme="rosa"] .autocomplete-list {
            background: linear-gradient(180deg, #ffe4e6, #ffdce0);
            border: 1px solid #f43f5e;
            box-shadow: 0 4px 12px rgba(136, 19, 55, 0.18);
        }
        [data-theme="rosa"] .autocomplete-list li:hover,
        [data-theme="rosa"] .autocomplete-list li.highlighted {
            background: #ffc5cd;
            color: #be123c;
        }

        /* Login modal y modales sombras rosas */
        [data-theme="rosa"] .login-card { box-shadow: 0 12px 30px rgba(136, 19, 55, 0.15); }
        [data-theme="rosa"] .history-modal-card,
        [data-theme="rosa"] .admin-modal-card { box-shadow: 0 14px 35px rgba(136, 19, 55, 0.18); }

        /* Webhook trigger hover sutil */
        [data-theme="rosa"] .webhook-trigger:hover {
            background: rgba(225, 29, 72, 0.06);
            color: #be123c;
            border-color: #fda4af;
        }

        /* btn-remove y btn-toggle-descuento neutros */
        [data-theme="rosa"] .btn-remove {
            background: rgba(220, 38, 38, 0.06);
            color: #dc2626;
        }
        [data-theme="rosa"] .btn-remove:hover {
            background: #dc2626;
            color: #ffffff;
        }
        [data-theme="rosa"] .btn-toggle-descuento {
            background: rgba(220, 38, 38, 0.08);
            color: #dc2626;
            border: 1px solid rgba(220, 38, 38, 0.2);
        }
        [data-theme="rosa"] .btn-toggle-descuento.bono {
            background: rgba(22, 163, 74, 0.08);
            color: #16a34a;
            border-color: rgba(22, 163, 74, 0.2);
        }

        /* #resultado y distribution-chart con fondo rosa más marcado */
        [data-theme="rosa"] #resultado,
        [data-theme="rosa"] .distribution-chart {
            background: #ffdce0;
            border-color: #f43f5e;
        }
        [data-theme="rosa"] .dist-bar-bg,
        [data-theme="rosa"] .penalty-row {
            background: #e8b0b8;
        }

        [data-theme="rosa"] .kbd-hint kbd {
            background: #ffffff;
        }

        /* History empty rosa tenue (override duplicado, mantener por compat) */
        [data-theme="rosa"] .history-empty {
            border: 2px dashed #f43f5e;
        }

        /* =================================================================
           TEMA ROSA — Refuerzo para el panel "Crear Raid" (.raid-creator-scope)
           El panel Crear Raid hereda estilos internos que usan var(--accent-blue)
           (cian #0891b2) en bordes y acentos, lo que diluye el tema rosa y lo
           hace verse azul/grisáceo en lugar de rosa como el Panel de Reparto.
           Estos overrides reemplazan esos acentos cian por rosa, SIN tocar layout,
           estructura, ni animaciones — solo colores, para que visualmente el panel
           Crear Raid se vea tan claramente "rosa" como el Panel de Reparto.
           ================================================================= */

        /* Card principal: borde rosa más grueso y visible, gradiente de fondo más marcado */
        [data-theme="rosa"] .raid-creator-scope .card {
            background: linear-gradient(180deg, #ffe4e6 0%, #ffdce0 100%) !important;
            background-image: linear-gradient(180deg, #ffe4e6 0%, #ffdce0 100%) !important;
            background-origin: padding-box !important;
            background-clip: padding-box !important;
            border: 2px solid #f43f5e !important;
            box-shadow: 0 6px 18px rgba(136, 19, 55, 0.18), 0 2px 4px rgba(136, 19, 55, 0.08) !important;
            animation: none !important;
        }

        /* category-card: reemplazar borde cian por rosa, mismo grosor */
        [data-theme="rosa"] .raid-creator-scope .category-card {
            border: 2px solid #f43f5e !important;
            box-shadow: 0 4px 12px rgba(225, 29, 72, 0.15) !important;
            background: #ffffff !important;
        }
        [data-theme="rosa"] .raid-creator-scope .category-card:hover {
            border-color: #be123c !important;
            box-shadow: 0 8px 24px rgba(225, 29, 72, 0.22) !important;
            background: #fff5f7 !important;
        }

        /* category-header: barra izquierda rosa (reemplaza cian) */
        [data-theme="rosa"] .raid-creator-scope .category-header {
            border-left: 6px solid #e11d48 !important;
            border-bottom: 2px solid rgba(225, 29, 72, 0.18) !important;
            background: linear-gradient(to right, rgba(225, 29, 72, 0.10), transparent) !important;
        }
        [data-theme="rosa"] .raid-creator-scope .category-header:hover {
            background: linear-gradient(to right, rgba(225, 29, 72, 0.16), transparent) !important;
        }

        /* category-content.open: tint rosa en lugar de cian */
        [data-theme="rosa"] .raid-creator-scope .category-content.open {
            background: linear-gradient(135deg, rgba(255, 228, 230, 0.85) 0%, rgba(254, 205, 211, 0.55) 100%) !important;
            border-top: 2px solid rgba(225, 29, 72, 0.20) !important;
        }

        /* role-item: bordes cian → rosa, incluida la barra izquierda gruesa */
        [data-theme="rosa"] .raid-creator-scope .role-item {
            border: 2px solid #f43f5e !important;
            border-left: 6px solid #e11d48 !important;
            background: #fff5f7 !important;
            box-shadow: 0 2px 6px rgba(225, 29, 72, 0.12) !important;
        }
        [data-theme="rosa"] .raid-creator-scope .role-item:hover {
            border-color: #be123c !important;
            border-left-color: #9f1239 !important;
            background: #ffe4e6 !important;
            box-shadow: 0 8px 16px rgba(225, 29, 72, 0.20) !important;
        }

        /* Inputs internos de roles: nombre y límite — bordes cian → rosa */
        [data-theme="rosa"] .raid-creator-scope .role-name-input,
        [data-theme="rosa"] .raid-creator-scope .role-limit-input {
            border: 1px solid #fda4af !important;
            background: #ffffff !important;
            color: #881337 !important;
        }
        [data-theme="rosa"] .raid-creator-scope .role-name-input:focus,
        [data-theme="rosa"] .raid-creator-scope .role-limit-input:focus {
            border-color: #e11d48 !important;
            box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15) !important;
            background: #ffffff !important;
        }

        /* Botón borrar rol: rojo, pero con tinte rosa coherente */
        [data-theme="rosa"] .raid-creator-scope .btn-delete-role {
            background: #e11d48 !important;
            color: #ffffff !important;
        }
        [data-theme="rosa"] .raid-creator-scope .btn-delete-role:hover {
            background: #be123c !important;
        }

        /* Etiquetas de sección internas (Título, Descripción, Canal, etc.):
           ya usan var(--accent-primary-deep) en inline style — asegurar coherencia.
           Inputs del form-group base dentro de raid-creator: bordes rosas */
        [data-theme="rosa"] .raid-creator-scope .input-group input,
        [data-theme="rosa"] .raid-creator-scope .input-group select,
        [data-theme="rosa"] .raid-creator-scope .input-group textarea {
            border: 2px solid #fda4af !important;
            background: #ffffff !important;
            color: #881337 !important;
        }
        [data-theme="rosa"] .raid-creator-scope .input-group input:hover,
        [data-theme="rosa"] .raid-creator-scope .input-group select:hover,
        [data-theme="rosa"] .raid-creator-scope .input-group textarea:hover {
            border-color: #f43f5e !important;
            background: #fff5f7 !important;
        }
        [data-theme="rosa"] .raid-creator-scope .input-group input:focus,
        [data-theme="rosa"] .raid-creator-scope .input-group select:focus,
        [data-theme="rosa"] .raid-creator-scope .input-group textarea:focus {
            border-color: #e11d48 !important;
            background: #ffffff !important;
            box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15) !important;
        }
        [data-theme="rosa"] .raid-creator-scope .input-group input::placeholder,
        [data-theme="rosa"] .raid-creator-scope .input-group textarea::placeholder {
            color: #9f1239 !important;
        }

        /* date/time pickers que tenían borde cian (--accent-blue) */
        [data-theme="rosa"] .raid-creator-scope input[type="date"],
        [data-theme="rosa"] .raid-creator-scope input[type="time"] {
            border: 2px solid #fda4af !important;
            background: #ffffff !important;
            color: #881337 !important;
        }
        [data-theme="rosa"] .raid-creator-scope input[type="date"]:focus,
        [data-theme="rosa"] .raid-creator-scope input[type="time"]:focus {
            border-color: #e11d48 !important;
            box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15) !important;
        }
        [data-theme="rosa"] .raid-creator-scope #timezone-selector {
            border: 1px solid #fda4af !important;
            background: #ffffff !important;
            color: #881337 !important;
        }

        /* Selects del Canal de Voz — coherentes con el tema rosa */
        [data-theme="rosa"] .raid-creator-scope select#voice-channel-type,
        [data-theme="rosa"] .raid-creator-scope select#voice-channel-select {
            border: 2px solid #fda4af !important;
            background: #ffffff !important;
            color: #881337 !important;
        }
        [data-theme="rosa"] .raid-creator-scope select#voice-channel-type:focus,
        [data-theme="rosa"] .raid-creator-scope select#voice-channel-select:focus {
            border-color: #e11d48 !important;
            box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15) !important;
        }

        /* Botón primary dentro de raid-creator: gradiente rosa ya definido,
           asegurar que los .btn genéricos también hereden tono rosa */
        [data-theme="rosa"] .raid-creator-scope .btn-secondary {
            background: #ffe4e6 !important;
            color: #be123c !important;
            border: 1px solid #fda4af !important;
        }
        [data-theme="rosa"] .raid-creator-scope .btn-secondary:hover {
            background: #ffdce0 !important;
            border-color: #f43f5e !important;
        }

        /* Cajas de "display" (publication-channel-display, ping-role-display):
           borde rosa consistente */
        [data-theme="rosa"] .raid-creator-scope [id$="-display"] {
            border: 2px solid #fda4af !important;
            background: #ffffff !important;
            color: #881337 !important;
        }
        [data-theme="rosa"] .raid-creator-scope [id$="-display"]:hover {
            border-color: #e11d48 !important;
            background: #fff5f7 !important;
        }

        /* Tooltips internos: borde rosa coherente */
        [data-theme="rosa"] .raid-creator-scope [id^="tooltip-"] {
            border: 1px solid #e11d48 !important;
            background: #ffffff !important;
            color: #881337 !important;
            box-shadow: 0 4px 12px rgba(136, 19, 55, 0.20) !important;
        }
        [data-theme="rosa"] .raid-creator-scope [id^="tooltip-"] strong {
            color: #be123c !important;
        }

        /* mini-category-card: borde rosa (reemplaza cualquier azul heredado) */
        [data-theme="rosa"] .raid-creator-scope .mini-category-card {
            border: 2px solid #fda4af !important;
            background: linear-gradient(180deg, #ffe4e6, #ffdce0) !important;
            box-shadow: 0 2px 8px rgba(225, 29, 72, 0.12) !important;
        }
        [data-theme="rosa"] .raid-creator-scope .mini-category-card:hover {
            border-color: #e11d48 !important;
            box-shadow: 0 4px 12px rgba(225, 29, 72, 0.20) !important;
        }

        /* alert-error y alert-success dentro de raid-creator: acentos rosas */
        [data-theme="rosa"] .raid-creator-scope .alert-error {
            background: rgba(225, 29, 72, 0.08) !important;
            border: 1px solid #f43f5e !important;
            color: #be123c !important;
        }
        [data-theme="rosa"] .raid-creator-scope .alert-success {
            background: rgba(22, 163, 74, 0.08) !important;
            border: 1px solid #16a34a !important;
            color: #15803d !important;
        }

    
        /* =================================================================
           DASHBOARD LAYOUT (rediseño) — conserva temas/colores existentes
           Sobrescribe .main-wrapper y body para layout sidebar + contenido
           ================================================================= */
        body {
            padding: 0 !important;
            display: block !important;
            justify-content: initial !important;
            overflow-x: hidden;
            width: 100%;
        }

        .main-wrapper {
            width: 100% !important;
            max-width: 100% !important;
            display: grid !important;
            grid-template-columns: 264px 1fr;
            min-height: 100vh;
            gap: 0;
            margin: 0;
            overflow-x: hidden;
        }

        /* === SIDEBAR === */
        .dashboard-sidebar {
            background: var(--bg-card);
            border-right: 1px solid var(--border-color);
            padding: 22px 14px;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            width: 264px;
            height: 100vh;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 22px;
            z-index: 100;
            box-shadow: 4px 0 24px -16px rgba(0,0,0,0.4);
        }

        .sidebar-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 4px 10px 18px;
            border-bottom: 1px solid var(--border-color);
        }
        .sidebar-brand-logo {
            width: 40px; height: 40px;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-gold) 100%);
            display: flex; align-items: center; justify-content: center;
            color: var(--text-main); font-weight: 800; font-size: 1.05rem;
            box-shadow: 0 6px 14px var(--accent-primary-soft);
            flex-shrink: 0;
            font-family: var(--font-title);
        }
        .sidebar-brand-text {
            font-family: var(--font-title);
            color: var(--text-main);
            font-weight: 700;
            font-size: 0.98rem;
            line-height: 1.2;
            min-width: 0;
        }
        .sidebar-brand-text small {
            display: block;
            color: var(--text-muted);
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.4px;
            margin-top: 2px;
        }

        .sidebar-section-label {
            font-size: 0.68rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1.2px;
            font-weight: 700;
            padding: 0 12px;
            margin-bottom: 8px;
        }

        .sidebar-nav {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .sidebar-nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 11px 14px;
            border-radius: var(--radius-md);
            color: var(--text-muted);
            font-weight: 600;
            font-family: var(--font-body);
            font-size: 0.9rem;
            cursor: pointer;
            border: none;
            background: transparent;
            width: 100%;
            text-align: left;
            transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
            position: relative;
            box-shadow: inset 0 0 0 0 transparent;
        }
        .sidebar-nav-item:hover {
            background: var(--bg-input);
            color: var(--text-main);
        }
        .sidebar-nav-item.active {
            background: var(--accent-primary-soft);
            color: var(--accent-primary);
            box-shadow: inset 3px 0 0 var(--accent-primary);
            font-weight: 700;
        }
        .sidebar-nav-item svg {
            width: 18px; height: 18px; flex-shrink: 0;
        }
        .sidebar-nav-item .nav-label {
            flex: 1;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sidebar-nav-item .tab-badge {
            position: static !important;
            background: var(--danger);
            color: #fff;
            margin-left: auto;
            min-width: 20px; height: 20px;
            border-radius: 99px;
            font-size: 0.7rem; font-weight: 700;
            display: none; align-items: center; justify-content: center;
            padding: 0 6px;
            border: none !important;
            right: auto !important;
            top: auto !important;
        }
        .sidebar-nav-item .tab-badge.visible { display: flex; }

        .sidebar-footer {
            margin-top: auto;
            padding: 12px 14px;
            background: var(--bg-input);
            border-radius: var(--radius-md);
            font-size: 0.72rem;
            color: var(--text-muted);
            line-height: 1.55;
            border: 1px solid var(--border-color);
        }
        .sidebar-footer strong { color: var(--accent-primary); font-weight: 700; }

        /* === MAIN CONTENT === */
        .dashboard-main {
            display: flex;
            flex-direction: column;
            grid-column: 2;
            min-width: 0;
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
            box-sizing: border-box;
            min-height: 100vh;
            background:
                radial-gradient(ellipse at top, var(--bg-body-glow) 0%, var(--bg-body) 75%),
                var(--bg-body);
        }

        .dashboard-header {
            background: var(--bg-card);
            border-bottom: 1px solid var(--border-color);
            padding: 14px 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            position: sticky;
            top: 0;
            /* === FIX: z-index 100 para que esté encima del loading overlay de Contrabando (z-index: 50) === */
            z-index: 100;
            box-shadow: 0 2px 12px -8px rgba(0,0,0,0.3);
            flex-wrap: wrap;
        }

        .dashboard-header-left {
            display: flex;
            align-items: center;
            gap: 14px;
            min-width: 0;
            flex: 1;
        }

        .sidebar-toggle {
            display: none;
            background: var(--bg-input);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            width: 40px; height: 40px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            align-items: center; justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .dashboard-header-titles {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }
        .dashboard-header-titles h1 {
            margin: 0;
            font-size: 1.25rem;
            text-align: left;
            color: var(--accent-primary);
            font-family: var(--font-title);
            font-weight: 700;
            letter-spacing: 0;
            line-height: 1.2;
        }
        .dashboard-header-titles .subtitle {
            text-align: left;
            font-size: 0.76rem;
            margin: 0;
            color: var(--text-muted);
            font-weight: 500;
            letter-spacing: 0.3px;
        }

        .dashboard-page-title {
            color: var(--text-muted);
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            font-weight: 700;
            padding: 4px 10px;
            background: var(--bg-input);
            border-radius: 99px;
            border: 1px solid var(--border-color);
            white-space: nowrap;
        }

        /* === HEADER ACTIONS (movidas al dashboard header) === */
        .dashboard-header .header-actions {
            display: flex;
            gap: 10px;
            align-items: center;
            z-index: 10;
            position: relative;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        /* === FIX (v7): Reordenar header cuando el usuario está logueado ===
           Orden deseado (según usuario):
             1. ⚙️ (tuerquita / webhook settings)
             2. ☀️ (botón tema)
             3. 📜 (audit log / mensajes)
             4. contador de días (accessTimerWidget)
             5. perfil + nick (si Discord) o solo nick (si email)
             6. roleIndicator (badge de rol, al final)
           Cuando NO está logueado, se mantiene el orden HTML original
           (con btnLoginToggle y btnEmailLoginToggle visibles al final). === */
        body.logged-in .dashboard-header .header-actions > #webhookWrapper   { order: 1; }
        body.logged-in .dashboard-header .header-actions > #btnThemeToggle   { order: 2; }
        body.logged-in .dashboard-header .header-actions > #btnAuditLog      { order: 3; }
        body.logged-in .dashboard-header .header-actions > #accessTimerWidget { order: 4; }
        body.logged-in .dashboard-header .header-actions > #userAvatarBox    { order: 5; }
        body.logged-in .dashboard-header .header-actions > #roleIndicator    { order: 6; }
        /* Botones de login se ocultan cuando hay sesión (lo gestiona JS),
           pero por si acaso, forzarlos al final y ocultos cuando body.logged-in. */
        body.logged-in .dashboard-header .header-actions > #btnLoginToggle,
        body.logged-in .dashboard-header .header-actions > #btnEmailLoginToggle {
            order: 99;
            display: none !important;
        }

        /* === FIX (v7): #userAvatarBox como chip compacto (con o sin avatar) ===
           - Discord login: avatar 32x32 + nick  (FIX v8: era 26x26 → ahora 32x32 más grande)
           - Email login: solo nick (avatar oculto via JS) — el chip se ve igual sin imagen === */
        #userAvatarBox {
            background: var(--bg-input);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            padding: 4px 12px 4px 6px;
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-main);
            line-height: 1;
            height: 42px;
            box-sizing: border-box;
        }
        #userAvatarBox #userAvatarImg {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: none; /* === FIX v9: sin aro/borde — el usuario pidió ver solo el nick sin adornos === */
            object-fit: cover;
            flex-shrink: 0;
        }
        #userAvatarBox #userAvatarName {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-main);
            white-space: nowrap;
            max-width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .dashboard-header .header-actions button,
        .dashboard-header .header-actions .role-badge {
            padding: 8px 14px;
            border-radius: var(--radius-sm);
            font-size: 0.82rem;
            font-weight: 600;
            border: 1px solid var(--border-color);
            background: var(--bg-input);
            color: var(--text-main);
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
            white-space: nowrap;
            font-family: var(--font-body);
        }
        .dashboard-header .header-actions button:hover {
            background: var(--bg-input-hover);
            border-color: var(--accent-primary);
        }
        .dashboard-header .header-actions .role-badge {
            cursor: default;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-size: 0.7rem;
            padding: 6px 12px;
        }
        .dashboard-header .header-actions .role-badge.visitor {
            background: var(--bg-input);
            color: var(--text-muted);
        }
        .dashboard-header .header-actions .role-badge.admin {
            background: var(--accent-primary-soft);
            color: var(--accent-primary);
            border-color: var(--accent-primary);
        }
        .dashboard-header .header-actions .webhook-trigger {
            font-size: 1rem;
            padding: 8px 10px;
            min-width: 38px;
            text-align: center;
        }

        /* Webhook popover debe anclarse al botón en el header */
        .dashboard-header .webhook-popover {
            top: 100%;
            right: 0;
            margin-top: 8px;
        }

        /* === CONTENT === */
        .dashboard-content {
            padding: 24px 28px;
            flex: 1;
            overflow-x: hidden;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            min-width: 0;
        }
        .dashboard-content > .container,
        .dashboard-content > .container.view-panel {
            padding: 24px;
            border-radius: var(--radius-lg);
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            box-shadow: 0 8px 24px -12px rgba(0,0,0,0.35);
            margin: 0 auto;
            max-width: 1140px;
            width: 100%;
            box-sizing: border-box;
            overflow-x: hidden;
        }

        /* === Responsive: colapsar sidebar en mobile === */
        .sidebar-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.55);
            z-index: 99;
            opacity: 0;
            transition: opacity 0.25s ease;
        }
        .sidebar-backdrop.visible {
            display: block;
            opacity: 1;
        }

        @media (max-width: 980px) {
            .main-wrapper {
                grid-template-columns: 1fr !important;
            }
            .dashboard-sidebar {
                position: fixed;
                left: 0; top: 0;
                height: 100vh;
                width: 280px;
                z-index: 1000;
                transform: translateX(-100%);
                transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .dashboard-sidebar.open {
                transform: translateX(0);
                box-shadow: 0 0 40px rgba(0,0,0,0.5);
            }
            .dashboard-main {
                grid-column: 1 !important;
            }
            .sidebar-toggle {
                display: inline-flex !important;
            }
            .dashboard-content {
                padding: 16px;
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
                overflow-x: hidden;
            }
            .dashboard-content > .container,
            .dashboard-content > .container.view-panel {
                max-width: 100%;
                width: 100%;
                box-sizing: border-box;
                overflow-x: hidden;
                margin: 0;
            }
            .dashboard-header {
                padding: 12px 16px;
            }
            .dashboard-header-titles h1 {
                font-size: 1.05rem;
            }
            .dashboard-page-title {
                display: none;
            }
        }

        /* =================================================================
           SIDEBAR COLAPSADO (solo iconos) — ventana mediana
           Objetivo: evitar que las tabs del navbar host (Mercado / Craft /
           Refinación / Panel de Reparto / Historial Nube / etc.) se
           superpongan con el panel Contrabando cuando la ventana es pequeña.
           El usuario mantiene acceso a las tabs vía iconos; hover muestra el
           nombre como tooltip.
           Breakpoint: 981px–1280px (por debajo de 980px ya entra modo móvil
           overlay definido arriba).
           ================================================================= */
        @media (max-width: 1280px) and (min-width: 981px) {
            .main-wrapper {
                grid-template-columns: 64px 1fr !important;
            }
            .dashboard-sidebar {
                width: 64px;
                padding: 22px 8px;
                overflow: visible; /* para que el tooltip no se recorte */
            }
            /* Brand: solo logo, sin texto */
            .sidebar-brand {
                padding: 4px 0 18px;
                justify-content: center;
                gap: 0;
            }
            .sidebar-brand-text {
                display: none;
            }
            /* Etiqueta "NAVEGACIÓN": oculta */
            .sidebar-section-label {
                display: none;
            }
            /* Tabs: centrar icono, ocultar texto completamente (display:none)
               El texto SOLO aparece como tooltip flotante en hover */
            .sidebar-nav-item {
                justify-content: center;
                padding: 11px 0;
                position: relative;
            }
            .sidebar-nav-item .nav-label {
                /* display:none por defecto = no se renderiza, no ocupa espacio,
                   no se ve aunque el contenedor se desborde */
                display: none;
                position: absolute;
                left: calc(100% + 10px);
                top: 50%;
                transform: translateY(-50%);
                background: var(--bg-card);
                border: 1px solid var(--border-color);
                padding: 6px 12px;
                border-radius: var(--radius-sm);
                font-size: 0.78rem;
                white-space: nowrap;
                z-index: 200;
                box-shadow: 0 4px 12px rgba(0,0,0,0.35);
                pointer-events: none;
                color: var(--text-main);
                font-weight: 600;
            }
            .sidebar-nav-item:hover .nav-label {
                display: block;
            }
            /* Badge: visible si lo hubiera, posicionado sobre el icono */
            .sidebar-nav-item .tab-badge {
                position: absolute !important;
                top: 4px !important;
                right: 4px !important;
                margin-left: 0;
                min-width: 16px; height: 16px;
                font-size: 0.62rem;
                padding: 0 4px;
            }
            /* Footer pequeño: ocultar texto largo, dejar solo iconos si los hay */
            .sidebar-footer {
                padding: 8px 4px;
                font-size: 0;
                text-align: center;
                line-height: 1;
            }
            .sidebar-footer strong {
                display: none;
            }
            /* Asegurar que el contenido principal use el espacio liberado */
            .dashboard-content {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
                overflow-x: hidden;
            }
        }

        @media (max-width: 768px) {
            .dashboard-header .header-actions {
                gap: 6px;
            }
            .dashboard-header .header-actions button,
            .dashboard-header .header-actions .role-badge {
                padding: 7px 10px;
                font-size: 0.75rem;
            }
        }

        /* === FIX Panel de Reparto: desbordamiento al loguearse === */
        /* Garantizar que TODO dentro del panel principal no desborde */
        #panelPrincipal {
            width: 100%;
            box-sizing: border-box;
            overflow-x: hidden;
        }
        #panelPrincipal .config-card {
            width: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }
        /* El select del canal de voz hereda padding grande del selector global, corregir */
        #voiceChannelSelect {
            padding: 2px 6px !important;
            height: 24px !important;
            box-sizing: border-box !important;
            max-width: 110px;
        }
        /* El input de búsqueda de jugadores debe caber siempre en su contenedor */
        #buscadorJugadoresAdmin {
            width: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }
        #inputBuscadorJugadores {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        /* El header de la tarjeta de jugadores: en móvil pasa a column para que canal de voz no comprima el título */
        @media (max-width: 600px) {
            .config-card.card-jugadores .section-header {
                flex-direction: column !important;
                align-items: flex-start !important;
            }
            #voiceImportWrapper {
                width: 100%;
                justify-content: flex-start;
            }
            #voiceChannelSelect {
                width: 140px !important;
                max-width: 60% !important;
            }
        }

        /* El panel-grid del Principal puede usar más espacio en dashboard */
        @media (min-width: 1280px) {
            .dashboard-content > .container .panel-grid {
                gap: 28px;
            }
        }
        
    
        /* =================================================================
           MEJORAS RESPONSIVE — Crear Raid (móvil)
           ================================================================= */

        /* Layout de 2 columnas (Roles | Sub-roles) → 1 columna en móvil */
        .raid-creator-scope .roles-columns-wrapper {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }
        @media (max-width: 768px) {
            .raid-creator-scope .roles-columns-wrapper {
                flex-direction: column;
                gap: 18px;
            }
        }

        /* Mini-categorías: 5 cols desktop → 2 cols móvil */
        .raid-creator-scope #mini-categories-grid {
            grid-template-columns: repeat(5, 1fr) !important;
        }
        @media (max-width: 768px) {
            .raid-creator-scope #mini-categories-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 8px !important;
            }
        }

        /* Usuarios por rol: 2 cols desktop → 1 col móvil */
        .raid-creator-scope #raid-user-assignments {
            grid-template-columns: repeat(2, 1fr) !important;
        }
        @media (max-width: 768px) {
            .raid-creator-scope #raid-user-assignments {
                grid-template-columns: 1fr !important;
                gap: 8px !important;
                max-height: 280px !important;
            }
            .raid-creator-scope #raid-user-assignments > div[style*="grid-column: span 2"] {
                grid-column: span 1 !important;
            }
        }

        /* Selector de emoji en category-card: más pequeño en móvil */
        .raid-creator-scope .category-card {
            flex-wrap: wrap;
        }
        @media (max-width: 768px) {
            .raid-creator-scope .category-card {
                padding: 12px !important;
                gap: 10px !important;
                flex-direction: row;
            }
            .raid-creator-scope .category-card > div[style*="font-size: 2.8rem"] {
                font-size: 2rem !important;
                min-height: 48px !important;
                min-width: 48px !important;
            }
        }

        /* Inputs dentro de category-card: prevenir overflow */
        .raid-creator-scope .category-card input[type="text"],
        .raid-creator-scope .category-card input[type="number"] {
            min-width: 0;
            width: 100%;
            box-sizing: border-box;
        }

        /* Fila "Límite + Botón": apilar en móvil */
        @media (max-width: 768px) {
            .raid-creator-scope .category-card > div[style*="display: flex; gap: 10px"] {
                flex-wrap: wrap;
                gap: 8px !important;
            }
            .raid-creator-scope .category-card > div[style*="display: flex; gap: 10px"] > label {
                font-size: 0.78rem !important;
                flex: 0 0 auto;
            }
            .raid-creator-scope .category-card > div[style*="display: flex; gap: 10px"] > input[type="number"] {
                width: 60px !important;
                flex: 0 0 auto;
            }
            .raid-creator-scope .category-card > div[style*="display: flex; gap: 10px"] > button {
                margin-left: 0 !important;
                flex: 1 1 auto;
                min-width: 80px;
            }
        }

        /* Especiales: ajustar inputs número en móvil */
        @media (max-width: 768px) {
            .raid-creator-scope #section-especiales label[style*="display: flex; align-items: center; justify-content: space-between"] {
                flex-wrap: nowrap;
            }
            .raid-creator-scope #section-especiales input[type="number"] {
                width: 50px !important;
                min-width: 50px !important;
                flex-shrink: 0;
            }
        }

        /* Botones de acción: stack vertical en móvil con gap consistente */
        .raid-creator-scope .button-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }
        @media (max-width: 768px) {
            .raid-creator-scope .button-row {
                flex-direction: column;
                gap: 10px !important;
            }
            .raid-creator-scope .button-row .btn {
                width: 100%;
                min-height: 48px !important;
                padding: 12px 16px !important;
                font-size: 0.92rem !important;
            }
        }

        /* Dropdown Fecha/Hora/Zona horaria: apilar en móvil */
        @media (max-width: 768px) {
            .raid-creator-scope #custom-datetime {
                flex-direction: column !important;
                gap: 8px !important;
            }
            .raid-creator-scope #custom-datetime input[type="date"],
            .raid-creator-scope #custom-datetime input[type="time"] {
                width: 100% !important;
                flex: 1 1 100% !important;
            }
            .raid-creator-scope #custom-datetime #timezone-selector {
                width: 100% !important;
                min-width: 0 !important;
            }
        }

        /* Selectores de Canal de Voz: apilar en móvil */
        @media (max-width: 768px) {
            .raid-creator-scope select#voice-channel-type,
            .raid-creator-scope select#voice-channel-select {
                width: 100% !important;
            }
        }

        /* Asignación de raid: inputs y selectores full width en móvil */
        @media (max-width: 768px) {
            .raid-creator-scope #raid-user-search {
                width: 100% !important;
                box-sizing: border-box !important;
            }
        }

        /* Header del dashboard: en móvil muy pequeño, reducir aún más */
        @media (max-width: 480px) {
            .dashboard-header {
                padding: 10px 12px !important;
                gap: 8px !important;
            }
            .dashboard-header-titles h1 {
                font-size: 0.95rem !important;
            }
            .dashboard-header-titles .subtitle {
                font-size: 0.68rem !important;
                display: none;
            }
            .dashboard-header .header-actions button,
            .dashboard-header .header-actions .role-badge {
                padding: 6px 9px !important;
                font-size: 0.7rem !important;
            }
            .dashboard-header .header-actions .role-badge {
                display: none;
            }
        }

        /* Sidebar en móvil muy pequeño: ancho óptimo */
        @media (max-width: 480px) {
            .dashboard-sidebar.open {
                width: 86vw !important;
                max-width: 320px;
            }
        }

        /* Contenido del dashboard: padding menor en móvil pequeño */
        @media (max-width: 480px) {
            .dashboard-content {
                padding: 12px !important;
            }
            .dashboard-content > .container,
            .dashboard-content > .container.view-panel {
                padding: 14px !important;
            }
        }

        /* Panel grid principal: gap menor en móvil */
        @media (max-width: 768px) {
            .dashboard-content .panel-grid {
                gap: 16px !important;
            }
        }

        /* Párrafos dentro de raid-creator: prevenir overflow de texto largo */
        .raid-creator-scope p {
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        /* Code elements: prevenir overflow */
        .raid-creator-scope code {
            word-break: break-word;
            overflow-wrap: anywhere;
            white-space: normal;
        }

        /* Tooltip containers: max-width relativo en móvil */
        @media (max-width: 768px) {
            .raid-creator-scope [id^="tooltip-"] {
                max-width: 220px !important;
                font-size: 0.78rem !important;
            }
        }

        /* Botón sidebar-toggle: mejor toque */
        .sidebar-toggle {
            -webkit-tap-highlight-color: transparent;
        }

        /* Cards dentro del panelConfigRaid: ajustar grids */
        @media (max-width: 768px) {
            .raid-creator-scope .config-data-toolbar {
                gap: 8px !important;
            }
            .raid-creator-scope .config-data-toolbar > button {
                flex: 1 1 calc(50% - 4px) !important;
                min-width: 0 !important;
                padding: 8px 10px !important;
                font-size: 0.7rem !important;
            }
        }

        /* Modal de gestión de datos: scroll horizontal en tablas si es necesario */
        .raid-creator-scope .modal-content {
            max-width: 95vw !important;
            max-height: 90vh !important;
            overflow-y: auto !important;
        }

        /* Botones "Agregar Sub-Rol" y "Agregar Categoría": full width natural */
        .raid-creator-scope .btn-primary[onclick*="addNewRole"],
        .raid-creator-scope .btn-primary[onclick*="addNewCategory"] {
            width: 100%;
        }

        /* Section "Más Categorías": reducir padding en móvil */
        @media (max-width: 768px) {
            .raid-creator-scope > .card > div[style*="margin-top: 30px; padding-top: 20px; border-top"] {
                margin-top: 20px !important;
                padding-top: 14px !important;
            }
        }

        /* Header "Usuarios por Rol": stack vertical en móvil */
        @media (max-width: 768px) {
            .raid-creator-scope #raid-user-assignments ~ * .display-flex,
            .raid-creator-scope div[style*="display: flex; justify-content: space-between"][style*="margin-bottom: 12px"] {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 10px !important;
            }
        }

        /* Reducir el padding del contenedor de raid creator en móvil */
        @media (max-width: 768px) {
            .raid-creator-scope .card {
                padding: 16px !important;
            }
        }

        /* Prevenir zoom en iOS: inputs deben tener font-size ≥ 16px */
        .raid-creator-scope input[type="text"],
        .raid-creator-scope input[type="number"],
        .raid-creator-scope input[type="url"],
        .raid-creator-scope input[type="date"],
        .raid-creator-scope input[type="time"],
        .raid-creator-scope textarea,
        .raid-creator-scope select {
            font-size: 16px !important;
        }

        /* Asegurar que textareas no se desborden */
        .raid-creator-scope textarea {
            max-width: 100%;
            box-sizing: border-box;
        }

        /* Distribución chart dist-row: ya está optimizada, pero reforzamos */
        @media (max-width: 768px) {
            .dist-row {
                grid-template-columns: 80px 1fr 75px !important;
                font-size: 0.78rem !important;
                gap: 6px !important;
            }
        }
        
    
        /* === FIX OVERFLOW: inputs dentro de .input-group SIEMPRE 100% width === */
        .raid-creator-scope .input-group input,
        .raid-creator-scope .input-group select,
        .raid-creator-scope .input-group textarea {
            width: 100% !important;
            box-sizing: border-box !important;
            max-width: 100% !important;
        }
        .raid-creator-scope .form-group input,
        .raid-creator-scope .form-group select,
        .raid-creator-scope .form-group textarea {
            width: 100% !important;
            box-sizing: border-box !important;
            max-width: 100% !important;
        }
        /* Prevenir que cualquier input dentro del panel se desborde */
        .raid-creator-scope input,
        .raid-creator-scope select,
        .raid-creator-scope textarea {
            max-width: 100% !important;
        }
        /* === FIX CRÍTICO: min-width: 0 en flex/grid items para que respeten el contenedor padre === */
        .raid-creator-scope .raid-form-grid {
            min-width: 0 !important;
        }
        .raid-creator-scope .raid-form-col {
            min-width: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            overflow: hidden;
        }
        .raid-creator-scope .form-group.input-group {
            min-width: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        .raid-creator-scope .roles-columns-wrapper > * {
            min-width: 0 !important;
            flex: 1 1 0 !important;
        }
        @media (max-width: 768px) {
            .raid-creator-scope .roles-columns-wrapper {
                flex-direction: column !important;
            }
            .raid-creator-scope .roles-columns-wrapper > * {
                width: 100% !important;
                flex: 1 1 100% !important;
            }
        }
        /* Asegurar que .card tenga box-sizing border-box */
        .raid-creator-scope .card {
            box-sizing: border-box !important;
        }
        /* Section-especiales y otros contenedores flex también */
        .raid-creator-scope #section-especiales,
        .raid-creator-scope #section-subroles,
        .raid-creator-scope #custom-datetime,
        .raid-creator-scope .category-card {
            min-width: 0 !important;
            box-sizing: border-box !important;
        }

    
        /* =================================================================
           REDESIGN Config Raid — cards modulares con variables de tema
           ================================================================= */
        .configraid-header {
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border-color);
        }

        .configraid-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .configraid-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 18px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            box-shadow: 0 4px 12px -6px rgba(0,0,0,0.2);
            transition: box-shadow 0.2s ease, border-color 0.2s ease;
            box-sizing: border-box;
            /* === FIX CARD DEMASIADO GRANDE: permitir que la card se encoja
               a su contenido natural en lugar de ocupar toda la altura disponible
               del grid. Antes: como configraid-card-wide ocupa grid-column: 1 / -1
               y la card tiene display:flex con gap, el navegador a veces estiraba
               la card para llenar el espacio disponible → card enorme con contenido
               pequeño y mucho espacio vacío dentro.
               Ahora: align-self: start hace que la card se alinee al inicio del
               grid cell y solo ocupe la altura de su contenido. */
            align-self: start;
        }
        .configraid-card:hover {
            border-color: var(--accent-primary);
            box-shadow: 0 8px 24px -10px rgba(0,0,0,0.3);
        }

        .configraid-card-wide {
            grid-column: 1 / -1;
            /* === FIX CARD DEMASIADO GRANDE: la card wide (que ocupa toda la fila)
               tiende a estirarse verticalmente. Reducimos el gap interno de 14px
               (heredado de .configraid-card) a 10px para que el contenido esté más
               compacto y no deje tanto espacio vacío entre elementos. */
            gap: 10px;
        }

        .configraid-card-danger {
            border-color: rgba(250, 59, 59, 0.25);
        }

        .configraid-card-header {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .configraid-card-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
            flex-shrink: 0;
            font-weight: 700;
        }

        .configraid-card-title {
            margin: 0;
            font-size: 0.98rem;
            font-weight: 700;
            color: var(--text-main);
            font-family: var(--font-title);
            line-height: 1.2;
        }

        .configraid-card-subtitle {
            margin: 4px 0 0 0;
            font-size: 0.78rem;
            color: var(--text-muted);
            line-height: 1.35;
        }

        /* Fila de botones FREE / PREMIUM */
        .configraid-version-row {
            display: flex;
            gap: 8px;
        }

        .configraid-version-btn {
            flex: 1;
            padding: 10px 12px;
            background: var(--bg-input);
            color: var(--text-result);
            border: 2px solid var(--border-color);
            border-radius: var(--radius-md);
            font-weight: 700;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
            font-size: 0.82rem;
            font-family: var(--font-body);
            white-space: nowrap;
        }
        .configraid-version-btn:hover {
            border-color: var(--accent-primary);
            transform: translateY(-1px);
        }
        .configraid-version-btn.premium {
            background: var(--accent-purple-soft);
            color: var(--accent-purple);
            border-color: var(--accent-purple);
            box-shadow: 0 0 12px var(--accent-purple-soft);
        }

        /* Botón de acción principal */
        .configraid-action-btn {
            width: 100%;
            padding: 11px 14px;
            background: var(--accent-primary);
            color: var(--text-main);
            border: none;
            border-radius: var(--radius-md);
            font-weight: 700;
            font-size: 0.88rem;
            cursor: pointer;
            transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
            font-family: var(--font-body);
        }
        .configraid-action-btn:hover {
            background: var(--accent-primary-deep);
            transform: translateY(-1px);
            box-shadow: 0 6px 14px var(--accent-primary-soft);
        }
        [data-theme="dark"] .configraid-action-btn:hover {
            box-shadow: 0 6px 14px rgba(139, 92, 246, 0.3);
        }

        .configraid-hint {
            margin: 0;
            font-size: 0.76rem;
            color: var(--text-muted);
            line-height: 1.4;
        }

        /* Grid de IDs */
        .configraid-ids-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }

        /* Grid de gestión de datos */
        .configraid-management-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 10px;
        }

        /* Botones de categoría en Gestionar Datos */
        .mgmt-cat-btn {
            padding: 16px 12px;
            background: var(--bg-input);
            border: 2px solid var(--border-color);
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            transition: all 0.2s ease;
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--text-main);
            font-family: var(--font-body);
        }
        .mgmt-cat-btn:hover {
            background: var(--bg-input-hover);
            border-color: var(--accent-primary);
            transform: scale(1.05);
        }
        .mgmt-cat-count {
            font-size: 1.05rem;
            color: var(--accent-primary);
            font-weight: 700;
        }

        /* Modal de gestión de datos (reemplaza background: white) */
        .mgmt-modal-card {
            background: var(--bg-card);
            color: var(--text-main);
            border: 1px solid var(--border-color);
        }

        .configraid-management-empty {
            grid-column: 1 / -1;
            text-align: center;
            color: var(--text-muted);
            /* === FIX CARD DEMASIADO GRANDE: reducir padding de 18px a 12px
               cuando no hay datos cargados. Antes: el padding 18px hacía que
               el cuadro "Carga primero los datos..." se viera enorme dentro de
               la card, dejando mucho espacio vacío abajo. */
            padding: 12px;
            background: var(--bg-input);
            border-radius: var(--radius-md);
            border: 1px dashed var(--border-color);
            font-size: 0.85rem;
        }

        /* Fila danger (eliminar) */
        .configraid-danger-row {
            display: flex;
            gap: 10px;
            padding-top: 12px;
            border-top: 1px solid var(--border-color);
            margin-top: 4px;
        }

        .configraid-danger-btn {
            flex: 1;
            padding: 11px 14px;
            background: transparent;
            color: var(--danger);
            border: 1.5px solid var(--danger);
            border-radius: var(--radius-md);
            font-weight: 700;
            font-size: 0.85rem;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
            font-family: var(--font-body);
        }
        .configraid-danger-btn:hover {
            background: var(--danger);
            color: #fff;
        }

        /* Responsive Config Raid */
        @media (max-width: 768px) {
            .configraid-grid {
                grid-template-columns: 1fr;
                gap: 14px;
            }
            .configraid-ids-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            .configraid-card {
                padding: 14px;
            }
            .configraid-card-title {
                font-size: 0.92rem;
            }
            .configraid-card-icon {
                width: 36px;
                height: 36px;
                font-size: 1.05rem;
            }
            .configraid-management-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .configraid-version-row {
                flex-direction: column;
            }
            .configraid-danger-row {
                flex-direction: column;
            }
            .configraid-management-grid {
                grid-template-columns: 1fr;
            }
        }
        
    
        /* =================================================================
           PULIDO FINAL — Especiales + Modo de Datos responsive
           ================================================================= */

        /* === FIX ESPECIALES: forzar flex-direction: column ===
           La regla existente `.raid-creator-scope #section-especiales { display: flex !important; }`
           hace que el H4 (header "🎮 Especiales") y el DIV (contenedor de filas Comodín/Scout/Montura)
           se coloquen lado a lado. Necesitamos flex-direction: column para apilarlos verticalmente. */
        .raid-creator-scope #section-especiales,
        .raid-creator-scope #section-notifications,
        .raid-creator-scope #section-subroles {
            flex-direction: column !important;
            align-items: stretch !important;
            justify-content: flex-start !important;
            gap: 8px !important;
        }
        /* El H4 dentro de estas secciones debe ocupar todo el ancho */
        .raid-creator-scope #section-especiales > h4,
        .raid-creator-scope #section-notifications > h4 {
            width: 100% !important;
            align-self: stretch !important;
        }
        /* El contenedor interno de filas también */
        .raid-creator-scope #section-especiales > div[style*="display: flex; flex-direction: column"],
        .raid-creator-scope #section-especiales > div:not(#tooltip-especiales):not(h4) {
            width: 100% !important;
            align-self: stretch !important;
            box-sizing: border-box !important;
        }

        /* === FIX MODO DE DATOS: forzar display: flex en labels ===
           La regla existente `.raid-creator-scope label { display: block; }` sobreescribe
           el `display: flex` de `.data-source-selector label`. Necesitamos !important. */
        .raid-creator-scope .data-source-selector {
            display: flex !important;
            flex-direction: column !important;
            gap: 8px !important;
            padding: 14px !important;
            background: var(--bg-input) !important;
            border-radius: var(--radius-md) !important;
            border: 1px solid var(--border-color) !important;
            margin: 0 !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }
        .raid-creator-scope .data-source-selector label {
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            cursor: pointer !important;
            color: var(--text-result) !important;
            font-size: 0.88rem !important;
            text-transform: none !important;
            letter-spacing: 0 !important;
            margin: 0 !important;
            padding: 10px 12px !important;
            background: var(--bg-card) !important;
            border: 1px solid var(--border-color) !important;
            border-radius: var(--radius-sm) !important;
            transition: background 0.15s ease, border-color 0.15s ease !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }
        .raid-creator-scope .data-source-selector label:hover {
            background: var(--bg-input-hover) !important;
            border-color: var(--accent-primary) !important;
        }
        .raid-creator-scope .data-source-selector label:has(input:checked) {
            background: var(--accent-primary-soft) !important;
            border-color: var(--accent-primary) !important;
            color: var(--accent-primary) !important;
            font-weight: 700 !important;
        }
        .raid-creator-scope .data-source-selector input[type="radio"] {
            accent-color: var(--accent-primary) !important;
            cursor: pointer !important;
            width: 18px !important;
            height: 18px !important;
            flex-shrink: 0 !important;
            margin: 0 !important;
        }
        .raid-creator-scope .data-source-selector label span {
            color: inherit !important;
            text-shadow: none !important;
        }

        /* Responsive: en desktop mantener 2 columnas, en móvil 1 columna */
        @media (min-width: 769px) {
            .raid-creator-scope .data-source-selector {
                flex-direction: row !important;
                gap: 12px !important;
            }
            .raid-creator-scope .data-source-selector label {
                flex: 1 1 0 !important;
                justify-content: center !important;
            }
        }

        /* === Ajustes adicionales para Especiales en móvil === */
        @media (max-width: 768px) {
            .raid-creator-scope #section-especiales {
                padding: 12px !important;
            }
            /* Filas Comodín/Scout/Montura: ajustar padding y gap */
            .raid-creator-scope #section-especiales label {
                padding: 10px 12px !important;
                gap: 8px !important;
                min-height: 44px !important;
            }
            /* Inputs number (Scout/Montura): tamaño táctil adecuado */
            .raid-creator-scope #section-especiales input[type="number"] {
                width: 50px !important;
                min-width: 50px !important;
                height: 32px !important;
                font-size: 0.9rem !important;
                padding: 4px 6px !important;
                flex-shrink: 0 !important;
            }
            /* Checkbox: tamaño táctil adecuado */
            .raid-creator-scope #section-especiales input[type="checkbox"] {
                width: 18px !important;
                height: 18px !important;
                flex-shrink: 0 !important;
            }
            /* Texto de cada opción: legible */
            .raid-creator-scope #section-especiales label > span {
                font-size: 0.88rem !important;
                flex: 1 1 auto !important;
                min-width: 0 !important;
            }
        }

        /* En móvil muy pequeño, asegurar que todo quepa */
        @media (max-width: 380px) {
            .raid-creator-scope #section-especiales input[type="number"] {
                width: 44px !important;
                min-width: 44px !important;
            }
        }

    
        /* =================================================================
           AUDIT LOG — Modal + filtros + tabla de entradas
           ================================================================= */
        /* Overlay del modal de Audit Log — centrado en pantalla */
        #auditLogModal {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: rgba(0, 0, 0, 0.65);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            animation: auditFadeIn 0.2s ease;
        }
        #auditLogModal.hidden {
            display: none !important;
        }
        @keyframes auditFadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        .audit-modal-card {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6);
            width: 95%;
            max-width: 920px;
            max-height: 92vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            animation: auditSlideUp 0.25s ease;
        }
        @keyframes auditSlideUp {
            from { transform: translateY(24px); opacity: 0; }
            to   { transform: translateY(0);    opacity: 1; }
        }

        .audit-modal-header {
            padding: 18px 22px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            background: var(--bg-card);
        }

        .audit-modal-title {
            font-family: var(--font-title);
            color: var(--accent-gold);
            font-size: 1.15rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .audit-modal-meta {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-top: 4px;
        }

        .audit-modal-close {
            width: 32px; height: 32px;
            border-radius: 8px;
            background: var(--bg-input);
            color: var(--text-main);
            border: 1px solid var(--border-color);
            cursor: pointer;
            font-size: 1rem;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.15s ease;
        }
        .audit-modal-close:hover { background: var(--danger); color: #fff; }

        .audit-filters {
            padding: 14px 22px;
            background: var(--bg-input);
            border-bottom: 1px solid var(--border-color);
            display: grid;
            grid-template-columns: 1fr 1fr 1.5fr auto;
            gap: 10px;
            align-items: center;
        }

        .audit-filters select,
        .audit-filters input {
            padding: 8px 12px;
            background: var(--bg-input-field);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            color: var(--text-main);
            font-size: 0.82rem;
            font-family: var(--font-body);
            outline: none;
            box-sizing: border-box;
            width: 100%;
        }
        .audit-filters select:focus,
        .audit-filters input:focus {
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px var(--accent-primary-soft);
        }

        .audit-filters .audit-clear-btn {
            padding: 8px 12px;
            background: transparent;
            color: var(--text-muted);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 0.78rem;
            font-weight: 600;
            font-family: var(--font-body);
            white-space: nowrap;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .audit-filters .audit-clear-btn:hover {
            background: var(--bg-input-hover);
            color: var(--text-main);
        }

        .audit-toolbar {
            padding: 10px 22px;
            background: var(--bg-card);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            font-size: 0.78rem;
            color: var(--text-muted);
            flex-wrap: wrap;
        }

        .audit-toolbar .audit-actions {
            display: flex;
            gap: 8px;
        }

        .audit-toolbar .audit-action-btn {
            padding: 6px 12px;
            background: var(--bg-input);
            color: var(--text-main);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 0.75rem;
            font-weight: 600;
            font-family: var(--font-body);
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .audit-toolbar .audit-action-btn:hover {
            background: var(--bg-input-hover);
            border-color: var(--accent-primary);
        }
        .audit-toolbar .audit-action-btn.danger:hover {
            background: var(--danger);
            color: #fff;
            border-color: var(--danger);
        }

        .audit-list {
            flex: 1;
            overflow-y: auto;
            padding: 12px 22px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .audit-list::-webkit-scrollbar { width: 8px; }
        .audit-list::-webkit-scrollbar-thumb { background: var(--bg-input-hover); border-radius: 4px; }
        .audit-list::-webkit-scrollbar-track { background: transparent; }

        .audit-entry {
            background: var(--bg-input);
            border: 1px solid var(--border-color);
            border-left: 3px solid var(--text-muted);
            border-radius: var(--radius-sm);
            padding: 10px 14px;
            display: grid;
            grid-template-columns: 32px 1fr auto;
            gap: 12px;
            align-items: start;
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .audit-entry:hover {
            background: var(--bg-input-hover);
        }

        .audit-entry[data-cat="save"] { border-left-color: var(--success); }
        .audit-entry[data-cat="loot"] { border-left-color: var(--accent-gold); }
        .audit-entry[data-cat="gastos"] { border-left-color: var(--danger); }
        .audit-entry[data-cat="jugadores"] { border-left-color: var(--accent-blue); }
        .audit-entry[data-cat="config"] { border-left-color: var(--text-muted); }
        .audit-entry[data-cat="discord"] { border-left-color: #5865F2; }
        .audit-entry[data-cat="manual"] { border-left-color: var(--accent-purple); }
        .audit-entry[data-cat="clear"] { border-left-color: var(--danger); }
        .audit-entry[data-cat="nota"] { border-left-color: var(--accent-gold); }

        .audit-entry-icon {
            width: 32px; height: 32px;
            border-radius: 8px;
            background: var(--bg-card);
            display: flex; align-items: center; justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .audit-entry-body {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .audit-entry-action {
            font-size: 0.88rem;
            color: var(--text-main);
            font-weight: 600;
            line-height: 1.3;
        }

        .audit-entry-details {
            font-size: 0.76rem;
            color: var(--text-muted);
            line-height: 1.4;
            font-family: var(--font-mono);
            word-break: break-word;
        }

        .audit-entry-details .diff-before {
            color: var(--danger);
            text-decoration: line-through;
            opacity: 0.7;
        }
        .audit-entry-details .diff-after {
            color: var(--success);
            font-weight: 600;
        }

        .audit-entry-meta {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 4px;
            font-size: 0.7rem;
            color: var(--text-muted);
            text-align: right;
            white-space: nowrap;
        }

        .audit-entry-time {
            font-family: var(--font-mono);
            font-weight: 600;
            color: var(--text-result);
        }

        .audit-entry-user {
            background: var(--bg-card);
            padding: 2px 8px;
            border-radius: 99px;
            font-size: 0.66rem;
            font-weight: 600;
            border: 1px solid var(--border-color);
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .audit-entry-raid {
            font-size: 0.66rem;
            color: var(--accent-gold);
            font-family: var(--font-mono);
        }

        .audit-empty {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-muted);
            font-size: 0.9rem;
        }
        .audit-empty .icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.5; }

        .audit-count-badge {
            background: var(--accent-gold);
            color: #1a1d27;
            font-size: 0.65rem;
            font-weight: 800;
            padding: 2px 8px;
            border-radius: 99px;
            margin-left: 8px;
        }

        /* Botón en header */
        #btnAuditLog {
            position: relative;
            transition: opacity 0.25s ease, filter 0.25s ease;
        }
        #btnAuditLog .audit-new-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            background: var(--danger);
            color: #fff;
            font-size: 0.6rem;
            font-weight: 700;
            min-width: 16px;
            height: 16px;
            border-radius: 99px;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
            border: 2px solid var(--bg-card);
        }
        #btnAuditLog .audit-new-badge.visible { display: flex; }

        /* Estado bloqueado: badge sigue visible y pulsa, icono atenuado */
        #btnAuditLog.audit-btn-locked {
            cursor: default !important;
            user-select: none;
        }
        #btnAuditLog.audit-btn-locked .audit-new-badge.visible {
            animation: auditBadgePulse 2s ease-in-out infinite;
        }
        @keyframes auditBadgePulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(var(--danger-rgb, 250,59,59), 0.6); }
            50%       { box-shadow: 0 0 0 5px rgba(var(--danger-rgb, 250,59,59), 0); }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .audit-filters {
                grid-template-columns: 1fr 1fr;
                gap: 8px;
            }
            .audit-filters .audit-clear-btn {
                grid-column: 1 / -1;
            }
            .audit-entry {
                grid-template-columns: 28px 1fr;
                gap: 8px;
            }
            .audit-entry-meta {
                grid-column: 1 / -1;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                text-align: left;
                padding-top: 6px;
                border-top: 1px dashed var(--border-color);
                margin-top: 4px;
            }
            .audit-modal-card {
                width: 100%;
                max-height: 100vh;
                border-radius: 0;
            }
        }
        /* === AUTH LOADING SCREEN ===
           FIX v7: Ya no usa spinner + texto "Cargando panel...".
           Ahora muestra la animación del gato durmiendo (dotlottie-player).
           Reutiliza las clases .cat-loading-content / .cat-loading-title /
           .cat-loading-subtitle para mantener consistencia visual con
           el overlay post-login. */
        .auth-loading-screen {
            position: fixed; inset: 0; background: #1a1d27;
            display: none; flex-direction: column; justify-content: center; align-items: center;
            z-index: 9999; gap: 8px;
            padding: 24px;
            box-sizing: border-box;
        }
        body.auth-loading .auth-loading-screen {
            display: flex;
        }
        body.auth-loading .main-wrapper {
            display: none !important;
        }
        /* El contenido interno (gato + título + subtítulo) hereda el estilo
           de .cat-loading-content ya definido más abajo en este archivo. */
        .auth-loading-screen .cat-loading-content {
            animation: catFadeIn 0.3s ease;
        }
        /* En móvil, el gato ocupa 280px (igual que el overlay post-login) */
        @media (max-width: 520px) {
            .auth-loading-screen .cat-lottie-player {
                width: 280px !important;
                height: 280px !important;
            }
            .auth-loading-screen .cat-loading-title {
                font-size: 1.5rem !important;
            }
            .auth-loading-screen .cat-loading-subtitle {
                font-size: 0.9rem !important;
            }
        }
        /* Spinner clásico eliminado en v7 (ya no se usa) — mantenido solo por retrocompatibilidad */
        .sleek-spinner {
            width: 48px; height: 48px;
            border: 4px solid rgba(245, 158, 11, 0.1);
            border-top: 4px solid var(--accent-gold);
            border-radius: 50%;
            animation: auth-spin 1s linear infinite;
            display: none; /* oculto — el gato lo reemplaza */
        }
        .loading-text {
            font-size: 0.95rem; color: var(--text-muted);
            font-weight: 500; font-family: var(--font-body);
            letter-spacing: 0.5px;
            display: none; /* oculto — reemplazado por .cat-loading-subtitle */
        }
        @keyframes auth-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* =================================================================
           FIX RESPONSIVE — Panel de Reparto (#panelPrincipal) en móvil
           =================================================================
           Alcance: SOLO el tab #panelPrincipal (Panel de Reparto).
           NO afecta a "Crear Raid" (#panelEstructura) ni a la vista en PC.
           NO toca la lógica JS de reparto de loot ni de creación de raids.
           Solo corrige desbordamiento horizontal en móvil tras login.
           ================================================================= */

        /* --- 1. Contenedores principales: nunca desbordar horizontalmente --- */
        #panelPrincipal {
            box-sizing: border-box !important;
            overflow-x: hidden !important;
        }
        #panelPrincipal .panel-grid,
        #panelPrincipal .panel-left,
        #panelPrincipal .panel-right {
            max-width: 100% !important;
            box-sizing: border-box !important;
            min-width: 0 !important;
        }
        #panelPrincipal .config-card {
            box-sizing: border-box !important;
            overflow: hidden !important;
        }

        /* --- 2. min-width: 0 en TODOS los hijos flex (causa clásica de overflow en Safari iOS) --- */
        #panelPrincipal .config-card,
        #panelPrincipal .panel-left,
        #panelPrincipal .panel-right,
        #panelPrincipal .section-header,
        #panelPrincipal .section-header > *,
        #panelPrincipal .top-form-row,
        #panelPrincipal .top-form-row > *,
        #panelPrincipal .dynamic-row,
        #panelPrincipal .dynamic-row > *,
        #panelPrincipal .autocomplete-container,
        #panelPrincipal .autocomplete-container > *,
        #panelPrincipal .descuento-wrapper,
        #panelPrincipal .descuento-wrapper > *,
        #panelPrincipal .penalty-row,
        #panelPrincipal .penalty-row > *,
        #panelPrincipal .redistribucion-row,
        #panelPrincipal .redistribucion-row > *,
        #panelPrincipal .redistribucion-row > div,
        #panelPrincipal .redistribucion-row > div > *,
        #panelPrincipal .kbd-hint,
        #panelPrincipal .kbd-hint > *,
        #panelPrincipal .channel-select-group,
        #panelPrincipal .channel-select-group > *,
        #panelPrincipal #voiceImportWrapper,
        #panelPrincipal #voiceImportWrapper > *,
        #panelPrincipal .action-grid,
        #panelPrincipal .action-grid > *,
        #panelPrincipal .stats-grid,
        #panelPrincipal .stats-grid > *,
        #panelPrincipal .stat-card,
        #panelPrincipal .stat-card > * {
            min-width: 0 !important;
        }

        /* --- 3. Todos los inputs/selects/textareas: 100% sin excepciones --- */
        #panelPrincipal input[type="text"],
        #panelPrincipal input[type="number"],
        #panelPrincipal input[type="email"],
        #panelPrincipal input[type="password"],
        #panelPrincipal input[type="search"],
        #panelPrincipal input:not([type]),
        #panelPrincipal select,
        #panelPrincipal textarea {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
        }
        /* Excepciones: checkboxes/radios/hidden mantienen su tamaño natural */
        #panelPrincipal input[type="checkbox"],
        #panelPrincipal input[type="radio"],
        #panelPrincipal input[type="hidden"],
        #panelPrincipal input[type="file"] {
            width: auto !important;
            max-width: none !important;
        }

        /* --- 4. Buscador de jugadores: OCULTO permanentemente --- */
        /* El usuario solicitó eliminar el buscador "Buscar por Nick de Discord".
           No eliminamos el HTML ni el JS (para no romper referencias),
           solo lo ocultamos visualmente con display:none !important. */
        #panelPrincipal #buscadorJugadoresAdmin {
            display: none !important;
        }
        #panelPrincipal #inputBuscadorJugadores {
            display: none !important;
        }
        #panelPrincipal #listaBuscador {
            display: none !important;
        }
        #panelPrincipal .autocomplete-list {
            max-width: 100% !important;
            box-sizing: border-box !important;
            overflow-x: hidden !important;
        }

        /* --- 5. Resultado contenteditable: prevenir overflow de texto --- */
        #panelPrincipal #resultado {
            overflow-x: hidden !important;
            word-break: break-word !important;
            overflow-wrap: anywhere !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        #panelPrincipal .distribution-chart,
        #panelPrincipal .distribution-chart-body,
        #panelPrincipal .distribution-chart-body > * {
            max-width: 100% !important;
            box-sizing: border-box !important;
            overflow-x: hidden !important;
        }

        /* =================================================================
           MÓVIL (max-width: 768px) — Ajustes específicos
           ================================================================= */
        @media (max-width: 768px) {
            /* Contenedores de tarjeta: ocupar todo el ancho disponible */
            #panelPrincipal .config-card {
                padding: 14px !important;
                width: 100% !important;
            }

            /* Header de jugadores: columna en móvil para que el select de voz
               no comprima el título ni empuje el contenido fuera de la card */
            #panelPrincipal .config-card.card-jugadores .section-header {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 10px !important;
                width: 100% !important;
                max-width: 100% !important;
            }
            #panelPrincipal #voiceImportWrapper {
                width: 100% !important;
                max-width: 100% !important;
                justify-content: flex-start !important;
                flex-wrap: wrap !important;
                gap: 6px !important;
            }
            /* Select de canal de voz: resolver conflicto entre 3 reglas previas.
               No crece más allá del 60% del wrapper, pero tampoco fuerza flex-grow */
            #panelPrincipal #voiceChannelSelect {
                flex: 0 1 auto !important;
                width: auto !important;
                max-width: 60% !important;
                min-width: 0 !important;
                padding: 2px 6px !important;
                height: 28px !important;
                box-sizing: border-box !important;
            }

            /* top-form-row: 1 columna en móvil para que los inputs no se compriman */
            #panelPrincipal .top-form-row {
                grid-template-columns: 1fr !important;
                gap: 10px !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            /* dynamic-row de jugadores: grid de 5 columnas.
               col 1 = cofre-label (fila 1) / user-pct (fila 2) — 55px fijo
               col 2 = nombre del jugador (fila 1) / descuento-wrapper (fila 2) — 1fr flexible
               col 3 = btn-copy-name (fila 2) — 32px
               col 4 = btn-check (fila 2) — 32px
               col 5 = btn-remove (fila 1 y fila 2) — 32px  */
            #panelPrincipal #listaJugadores .dynamic-row {
                grid-template-columns: 55px 1fr 32px 32px 32px !important;
                gap: 6px !important;
                padding: 10px !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
            /* Re-colocar elementos en el grid */
            #panelPrincipal #listaJugadores .cofre-label {
                grid-column: 1 !important;
                grid-row: 1 !important;
                width: 100% !important;
                max-width: 55px !important;
                height: 38px !important;
            }
            #panelPrincipal #listaJugadores .autocomplete-container {
                grid-column: 2 / 6 !important;
                grid-row: 1 !important;
                width: 100% !important;
                max-width: 100% !important;
            }
            #panelPrincipal #listaJugadores .btn-remove {
                grid-column: 5 !important;
                grid-row: 2 !important;
                justify-self: center !important;
            }
            /* user-pct (campo "100"): ocupa SU PROPIA columna 1 (55px = tamaño justo
               para 4 dígitos "100" o "1000"). No se solapa con nada. */
            #panelPrincipal #listaJugadores .user-pct {
                grid-column: 1 !important;
                grid-row: 2 !important;
                width: 100% !important;
                max-width: 55px !important;
                text-align: center !important;
                height: 38px !important;
                font-size: 0.9rem !important;
                font-weight: 600 !important;
                padding: 6px 4px !important;
                box-sizing: border-box !important;
            }
            /* descuento-wrapper (campo "1k"): ocupa la columna 2 en fila 2 = flexible */
            #panelPrincipal #listaJugadores .descuento-wrapper {
                grid-column: 2 !important;
                grid-row: 2 !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                grid-template-columns: 28px 1fr !important;
                gap: 4px !important;
                overflow: hidden !important;
            }
            /* Toggle de descuento: tamaño moderado */
            #panelPrincipal #listaJugadores .btn-toggle-descuento {
                width: 28px !important;
                height: 38px !important;
                font-size: 0.95rem !important;
            }
            /* Input "1k": padding y fuente estándar */
            #panelPrincipal #listaJugadores .user-descuento-monto {
                padding: 6px 6px !important;
                font-size: 0.82rem !important;
            }
            #panelPrincipal #listaJugadores .btn-copy-name {
                grid-column: 3 !important;
                grid-row: 2 !important;
                justify-self: center !important;
            }
            #panelPrincipal #listaJugadores .btn-check {
                grid-column: 4 !important;
                grid-row: 2 !important;
                justify-self: center !important;
            }
            /* Botones cuadrados: tamaño fijo, no crecen */
            #panelPrincipal #listaJugadores .btn-sq {
                width: 32px !important;
                height: 32px !important;
                flex-shrink: 0 !important;
                padding: 0 !important;
            }
            /* Inputs dentro de dynamic-row: 100% de su celda (excepto user-pct que es fijo) */
            #panelPrincipal #listaJugadores .dynamic-row input:not(.user-pct),
            #panelPrincipal #listaJugadores .dynamic-row select {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                height: 38px !important;
                padding: 6px 8px !important;
            }

            /* dynamic-row de gastos: grid de 3 columnas que siempre cabe */
            #panelPrincipal #listaGastos .dynamic-row {
                grid-template-columns: 1fr 90px 32px !important;
                gap: 6px !important;
                padding: 10px !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
            #panelPrincipal #listaGastos .dynamic-row input {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
            }

            /* penalty-row: los elementos envuelven correctamente */
            #panelPrincipal .penalty-row {
                padding: 8px !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
            #panelPrincipal .redistribucion-row > div {
                flex-wrap: nowrap !important;
                justify-content: center !important;
                gap: 6px !important;
                width: 100% !important;
                max-width: 100% !important;
            }
            /* Móvil (panel principal): penalizaciones en UNA SOLA FILA */
            #panelPrincipal .redistribucion-row > div > span {
                white-space: nowrap !important;
                flex-shrink: 0 !important;
                font-size: 0.82rem !important;
            }
            #panelPrincipal .redistribucion-row > div .split-toggle {
                padding: 5px 10px !important;
                font-size: 0.78rem !important;
                white-space: nowrap !important;
                flex-shrink: 0 !important;
            }
            #panelPrincipal #btnAgregarNota {
                margin-left: 0 !important;
                width: auto !important;
                max-width: 100% !important;
                padding: 5px 10px !important;
                font-size: 0.78rem !important;
                white-space: nowrap !important;
                flex-shrink: 0 !important;
            }
            #panelPrincipal #btnRedistribuir {
                max-width: 100% !important;
            }

            /* action-grid: flex wrap, botones no fuerzan overflow */
            #panelPrincipal .action-grid {
                display: flex !important;
                flex-wrap: wrap !important;
                gap: 6px !important;
                width: 100% !important;
                max-width: 100% !important;
            }
            #panelPrincipal .action-grid .btn {
                flex: 1 1 100px !important;
                min-width: 0 !important;
                max-width: 100% !important;
                padding: 8px 10px !important;
                font-size: 0.78rem !important;
            }

            /* kbd-hint: el grupo del select de canal ocupa 100% sin overflow */
            #panelPrincipal .kbd-hint {
                background: transparent !important;
                border: none !important;
                padding: 0 !important;
                margin-top: 10px !important;
                justify-content: center !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                flex-wrap: wrap !important;
            }
            #panelPrincipal .kbd-hint .kbd-group:not(.channel-select-group) {
                display: none !important;
            }
            #panelPrincipal .kbd-hint .channel-select-group {
                width: 100% !important;
                max-width: 100% !important;
                border-left: none !important;
                margin-left: 0 !important;
                padding-left: 0 !important;
                justify-content: center !important;
                box-sizing: border-box !important;
                display: flex !important;
                flex-wrap: wrap !important;
                gap: 6px !important;
            }
            /* Select de canal de Discord: limitado a 70% del padre, nunca overflow */
            #panelPrincipal #apiChannelSelect {
                width: 130px !important;
                max-width: 70% !important;
                min-width: 0 !important;
                box-sizing: border-box !important;
                flex: 0 1 auto !important;
            }

            /* stats-grid: 2 columnas en móvil, tarjetas no desbordan */
            #panelPrincipal .stats-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 8px !important;
                width: 100% !important;
                max-width: 100% !important;
            }
            #panelPrincipal .stat-card {
                min-width: 0 !important;
                max-width: 100% !important;
                padding: 12px 10px !important;
            }
            #panelPrincipal .stat-card-value {
                word-break: break-all !important;
                overflow-wrap: anywhere !important;
                font-size: 1.05rem !important;
            }
        }

        /* MÓVIL MUY ESTRECHO (max-width: 380px) — ajustes adicionales */
        @media (max-width: 380px) {
            #panelPrincipal .config-card {
                padding: 12px !important;
            }
            #panelPrincipal #listaJugadores .dynamic-row {
                grid-template-columns: 48px 1fr 28px 28px 28px !important;
                gap: 4px !important;
                padding: 8px !important;
            }
            /* En móvil muy estrecho, user-pct también más chico (48px = 4 dígitos apretados) */
            #panelPrincipal #listaJugadores .user-pct {
                width: 48px !important;
                max-width: 48px !important;
                font-size: 0.82rem !important;
                padding: 4px 2px !important;
            }
            /* En móvil muy estrecho, el descuento-wrapper necesita columnas más chicas */
            #panelPrincipal #listaJugadores .descuento-wrapper {
                grid-template-columns: 24px 1fr !important;
                gap: 3px !important;
            }
            #panelPrincipal #listaJugadores .btn-toggle-descuento {
                width: 24px !important;
                font-size: 0.85rem !important;
            }
            #panelPrincipal #listaJugadores .user-descuento-monto {
                padding: 4px 3px !important;
                font-size: 0.75rem !important;
            }
            #panelPrincipal #listaJugadores .btn-sq {
                width: 28px !important;
                height: 28px !important;
                font-size: 0.85rem !important;
            }
            #panelPrincipal #listaGastos .dynamic-row {
                grid-template-columns: 1fr 80px 28px !important;
                gap: 4px !important;
                padding: 8px !important;
            }
            #panelPrincipal #voiceChannelSelect {
                max-width: 55% !important;
            }
            #panelPrincipal #apiChannelSelect {
                max-width: 65% !important;
            }

            /* Móvil muy estrecho: penalizaciones aún más compactas pero en UNA fila */
            #panelPrincipal .redistribucion-row > div {
                gap: 4px !important;
            }
            #panelPrincipal .redistribucion-row > div > span {
                font-size: 0.74rem !important;
            }
            #panelPrincipal .redistribucion-row > div .split-toggle,
            #panelPrincipal #btnAgregarNota {
                padding: 4px 8px !important;
                font-size: 0.72rem !important;
                padding: 0 !important;
            }
            /* Inputs dentro de dynamic-row: 100% de su celda (excepto user-pct que es fijo) */
            #panelPrincipal #listaJugadores .dynamic-row input:not(.user-pct),
            #panelPrincipal #listaJugadores .dynamic-row select {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                height: 38px !important;
                padding: 6px 8px !important;
            }

            /* dynamic-row de gastos: grid de 3 columnas que siempre cabe */
            #panelPrincipal #listaGastos .dynamic-row {
                grid-template-columns: 1fr 90px 32px !important;
                gap: 6px !important;
                padding: 10px !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
            #panelPrincipal #listaGastos .dynamic-row input {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
            }

            /* penalty-row: los elementos envuelven correctamente */
            #panelPrincipal .penalty-row {
                padding: 8px !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
            #panelPrincipal .redistribucion-row > div {
                flex-wrap: nowrap !important;
                justify-content: center !important;
                gap: 6px !important;
                width: 100% !important;
                max-width: 100% !important;
            }
            /* Móvil (panel principal): penalizaciones en UNA SOLA FILA */
            #panelPrincipal .redistribucion-row > div > span {
                white-space: nowrap !important;
                flex-shrink: 0 !important;
                font-size: 0.82rem !important;
            }
            #panelPrincipal .redistribucion-row > div .split-toggle {
                padding: 5px 10px !important;
                font-size: 0.78rem !important;
                white-space: nowrap !important;
                flex-shrink: 0 !important;
            }
            #panelPrincipal #btnAgregarNota {
                margin-left: 0 !important;
                width: auto !important;
                max-width: 100% !important;
                padding: 5px 10px !important;
                font-size: 0.78rem !important;
                white-space: nowrap !important;
                flex-shrink: 0 !important;
            }
            #panelPrincipal #btnRedistribuir {
                max-width: 100% !important;
            }

            /* action-grid: flex wrap, botones no fuerzan overflow */
            #panelPrincipal .action-grid {
                display: flex !important;
                flex-wrap: wrap !important;
                gap: 6px !important;
                width: 100% !important;
                max-width: 100% !important;
            }
            #panelPrincipal .action-grid .btn {
                flex: 1 1 100px !important;
                min-width: 0 !important;
                max-width: 100% !important;
                padding: 8px 10px !important;
                font-size: 0.78rem !important;
            }

            /* kbd-hint: el grupo del select de canal ocupa 100% sin overflow */
            #panelPrincipal .kbd-hint {
                background: transparent !important;
                border: none !important;
                padding: 0 !important;
                margin-top: 10px !important;
                justify-content: center !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                flex-wrap: wrap !important;
            }
            #panelPrincipal .kbd-hint .kbd-group:not(.channel-select-group) {
                display: none !important;
            }
            #panelPrincipal .kbd-hint .channel-select-group {
                width: 100% !important;
                max-width: 100% !important;
                border-left: none !important;
                margin-left: 0 !important;
                padding-left: 0 !important;
                justify-content: center !important;
                box-sizing: border-box !important;
                display: flex !important;
                flex-wrap: wrap !important;
                gap: 6px !important;
            }
            /* Select de canal de Discord: limitado a 70% del padre, nunca overflow */
            #panelPrincipal #apiChannelSelect {
                width: 130px !important;
                max-width: 70% !important;
                min-width: 0 !important;
                box-sizing: border-box !important;
                flex: 0 1 auto !important;
            }

            /* stats-grid: 2 columnas en móvil, tarjetas no desbordan */
            #panelPrincipal .stats-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 8px !important;
                width: 100% !important;
                max-width: 100% !important;
            }
            #panelPrincipal .stat-card {
                min-width: 0 !important;
                max-width: 100% !important;
                padding: 12px 10px !important;
            }
            #panelPrincipal .stat-card-value {
                word-break: break-all !important;
                overflow-wrap: anywhere !important;
                font-size: 1.05rem !important;
            }
        }

        /* MÓVIL MUY ESTRECHO (max-width: 380px) — ajustes adicionales */
        @media (max-width: 380px) {
            #panelPrincipal .config-card {
                padding: 12px !important;
            }
            #panelPrincipal #listaJugadores .dynamic-row {
                grid-template-columns: 48px 1fr 28px 28px 28px !important;
                gap: 4px !important;
                padding: 8px !important;
            }
            /* En móvil muy estrecho, user-pct también más chico (48px = 4 dígitos apretados) */
            #panelPrincipal #listaJugadores .user-pct {
                width: 48px !important;
                max-width: 48px !important;
                font-size: 0.82rem !important;
                padding: 4px 2px !important;
            }
            /* En móvil muy estrecho, el descuento-wrapper necesita columnas más chicas */
            #panelPrincipal #listaJugadores .descuento-wrapper {
                grid-template-columns: 24px 1fr !important;
                gap: 3px !important;
            }
            #panelPrincipal #listaJugadores .btn-toggle-descuento {
                width: 24px !important;
                font-size: 0.85rem !important;
            }
            #panelPrincipal #listaJugadores .user-descuento-monto {
                padding: 4px 3px !important;
                font-size: 0.75rem !important;
            }
            #panelPrincipal #listaJugadores .btn-sq {
                width: 28px !important;
                height: 28px !important;
                font-size: 0.85rem !important;
            }
            #panelPrincipal #listaGastos .dynamic-row {
                grid-template-columns: 1fr 80px 28px !important;
                gap: 4px !important;
                padding: 8px !important;
            }
            #panelPrincipal #voiceChannelSelect {
                max-width: 55% !important;
            }
            #panelPrincipal #apiChannelSelect {
                max-width: 65% !important;
            }

            /* Móvil muy estrecho: penalizaciones aún más compactas pero en UNA fila */
            #panelPrincipal .redistribucion-row > div {
                gap: 4px !important;
            }
            #panelPrincipal .redistribucion-row > div > span {
                font-size: 0.74rem !important;
            }
            #panelPrincipal .redistribucion-row > div .split-toggle,
            #panelPrincipal #btnAgregarNota {
                padding: 4px 8px !important;
                font-size: 0.72rem !important;
            }
        }

        /* =================================================================
           FIX VISIBILIDAD: Botones "?" de ayuda + Logo "CE" del sidebar
           =================================================================
           Fuerza colores fijos (oscuro + blanco) que se ven bien en TODOS
           los temas. Sin esto, en temas como 'azul' o 'rosa' el "?" o el
           "CE" del logo se vuelven invisibles por bajo contraste.
           ================================================================= */

        /* Botones "?" de ayuda en Crear Raid: fondo oscuro + "?" blanco siempre */
        .raid-creator-scope span[style*="border-radius: 50%"][style*="background: var(--accent-primary)"],
        .raid-creator-scope span[onmouseover*="tooltip-"] {
            background: #1a1a1a !important;
            color: #ffffff !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
        }
        .raid-creator-scope span[onmouseover*="tooltip-"]:hover {
            background: #2a2a2a !important;
            border-color: var(--accent-primary) !important;
        }

        /* Logo "CE" del sidebar: gradiente vibrante + texto blanco con sombra */
        .sidebar-brand-logo {
            background: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #d84f29 100%) !important;
            color: #ffffff !important;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
            box-shadow: 0 6px 14px rgba(245, 158, 11, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        /* Asegurar que el texto del sidebar-brand-text siempre se vea */
        .sidebar-brand-text {
            color: var(--text-main) !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
        }
        .sidebar-brand-text small {
            color: var(--text-muted) !important;
        }

        /* === PANEL MERCADO (Scroll Natural) === */
        #panelMercado {
            padding: 0 !important;
            overflow: visible !important;
            height: auto !important;
            min-height: 500px;
        }

/* ==========================================================================
   NUEVAS ANIMACIONES, SKELETONS Y ESTILOS DEL MERCADO ALBION (MODULAR)
   ========================================================================== */

/* === PESTAÑAS CON TRANSICIONES SUAVES === */
/* === FIX: forzar display:none !important en view-panel sin .active === */
/* === FIX LENTITUD: quitar transition de view-panel ===
   Antes: transition: opacity 0.25s, transform 0.25s → el navegador animaba
   cada cambio de pestaña, causando recálculo de layout de TODOS los paneles
   (incluyendo los ocultos). Con 30+ cards por panel, eso causaba lentitud.
   Ahora: sin transition → el cambio de pestaña es instantáneo. */
.view-panel {
    display: none !important;
}
.view-panel.active {
    display: block !important;
}

/* === PANEL ADMIN: ocupa toda la pantalla, padding consistente === */
#panelAdmin.container.view-panel {
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}
@media (max-width: 768px) {
    #panelAdmin.container.view-panel {
        padding: 14px !important;
    }
}
@media (max-width: 480px) {
    #panelAdmin.container.view-panel {
        padding: 10px !important;
    }
}

/* === PANEL ADMIN: mostrar versión corta de username/id en móvil === */
.admin-user-short, .admin-id-short { display: none; }
.admin-user-full, .admin-id-full { display: inline; }

@media (max-width: 768px) {
    .admin-user-full, .admin-id-full { display: none; }
    .admin-user-short, .admin-id-short { display: inline; }
}

/* === GLASSMORPHISM BLUR PARA OVERLAYS Y MODALES === */
#sorteoModal, #adminUsersModal, #noteModal, #auditLogModal, .drawer-overlay {
    backdrop-filter: blur(8px) !important;
    background: rgba(0, 0, 0, 0.45) !important;
}

/* === SKELETON PULSING SHIMMERS === */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 154px;
    box-sizing: border-box;
}
.skeleton-shimmer {
    background: linear-gradient(90deg, var(--bg-input-field) 25%, var(--border-color) 50%, var(--bg-input-field) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}
.skeleton-header { display: flex; justify-content: space-between; align-items: center; }
.skeleton-body { display: flex; gap: 12px; align-items: center; }
.skeleton-info { display: flex; flex-direction: column; }
.skeleton-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
}

/* === MICRO-INTERACCIONES === */
.sidebar-nav-item:hover { transform: translateX(4px); }
.item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -8px rgba(0,0,0,0.15) !important;
}
.item-card.is-profit:hover {
    border-color: var(--albion-profit) !important;
}
.item-card.is-loss:hover {
    border-color: var(--albion-loss) !important;
}

/* Clases CSS viejas del mercado eliminadas — ahora se usa inline styles con var(--albion-*) en market.js */

/* === FIX ALINEACION: Panel de Reparto (#panelPrincipal) ===
   El .container tiene padding:28px y card styling propio, pero .view-panel
   ya aporta su propio padding/background. Esto genera un doble marco visual
   y desalinea el contenido respecto a las demás pestañas.
   Normalizamos el padding para que el interior quede igual al resto. */
#panelPrincipal.container {
    padding: 24px !important;         /* Mismo padding que .view-panel usa en las demás tabs */
    box-shadow: 0 8px 24px -12px rgba(0,0,0,0.35) !important; /* Sombra ligera, no doble */
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* === FIX SALTO DE SCROLLBAR (Panel de Reparto) ===
   Cuando se cambia de pestaña, si el scrollbar aparece o desaparece,
   el layout completo (header, botones, contenido) se desplaza ~15px.
   scrollbar-gutter: stable reserva ese espacio SIEMPRE,
   eliminando el salto visual al cambiar de pestaña. */
html {
    scrollbar-gutter: stable;
}

/* Bloque "FORCE DARK GOLD THEME" eliminado — ahora el mercado respeta el tema activo */
/* === FIX MODAL ADMIN USER === */
/* El CSS original usaba #adminUsersModal (con S) pero el HTML usa #adminUserModal (sin S).
   Esto hacía que el modal no tuviera position:fixed ni overlay → aparecía mal posicionado. */
#adminUserModal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    animation: adminModalFadeIn 0.2s ease;
}
#adminUserModal.hidden {
    display: none !important;
}
@keyframes adminModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* El modal-card debe respetar max-width pero también centrarse bien */
#adminUserModal .admin-modal-card {
    margin: auto;
    box-sizing: border-box;
    max-width: 620px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

/* === FIX POPOVER WEBHOOK (tuerquita) === */
/* Asegurar que la tuerquita también tenga overlay correcto cuando esté visible */
#webhookPopover {
    z-index: 1000;
}

/* === FIX POPUP GRIS (selección de servidor) ===
   CAUSA: .dashboard-header es position:sticky con z-index:100 → crea un stacking
   context. El popover de la tuerquita vive DENTRO del header, así que su z-index
   (1000/9999) solo aplica DENTRO del header: frente al resto de la página, el
   popover pinta al nivel 100 del header.
   El overlay de bloqueo de paneles (.server-lock-overlay, z-index:100 !important,
   position:absolute inset:0, pointer-events:auto) está más TARDE en el DOM → con
   z-index igual (100 vs 100) gana el overlay → el popover abierto quedaba DEBAJO
   del fondo negro semitransparente (rgba(0,0,0,0.35)): se veía gris, "como si
   estuviera por debajo de algo", y los clics caían en el overlay → no dejaba
   seleccionar el servidor.
   SOLUCIÓN: mientras el popover está abierto, subir el z-index del header por
   encima de cualquier overlay del contenido (100) y del sidebar (1000), pero por
   debajo de los modales (998/999) y las pantallas de carga (9999).
   La clase .popover-open la añade/quita toggleWebhookPopover/closeWebhookPopover
   (js/panel de reparto.js). La regla :has() es un refuerzo para navegadores
   modernos por si la clase no se llegó a sincronizar. */
.dashboard-header.popover-open { z-index: 9000; }
.dashboard-header:has(#webhookPopover.visible) { z-index: 9000; }

/* === FIX: panel con contenido bloqueado por permisos === */
/* Se aplica cuando un usuario logueado no tiene permiso para una pestaña.
   El contenido se ve pero no se puede interactuar (modo visitante).
   IMPORTANTE: solo se aplica a .view-panel (los paneles de contenido), NUNCA al sidebar.
   NOTA: NO se muestra mensaje de "bloqueado" — el usuario simplemente ve el contenido
   pero no puede interactuar (igual que el modo visitante sin login). */
.view-panel.panel-content-locked {
    position: relative;
    pointer-events: none;
    /* === FIX v31: 30% de opacidad + blur para que se vea borroso (con !important).
       Antes: sin !important → otras reglas con !important (como .disabled-field opacity:1 !important)
       sobreescribían esta opacidad y el panel se veía normal. === */
    opacity: 0.7 !important;
    filter: blur(1.5px) !important;
}
/* === Asegurar que el sidebar NUNCA se vea afectado por panel-content-locked === */
.dashboard-sidebar,
.dashboard-sidebar *,
.sidebar-nav-item,
.sidebar-nav-item * {
    pointer-events: auto !important;
    opacity: 1 !important;
}
.sidebar-nav-item {
    opacity: 1 !important;
}

/* === Separador del sidebar (entre grupos de botones) === */
.sidebar-separator {
    margin: 10px 14px;
    border-top: 1px solid var(--border-color);
    opacity: 0.4;
    height: 0;
}

/* ========================================================== */
/* === FIX (v2): mejoras visuales para todos los popups === */
/* ========================================================== */

/* === X (cerrar) más visible en todos los modales === */
.history-modal-close,
button.history-modal-close,
.audit-modal-close,
button.audit-modal-close {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0;
}
.history-modal-close:hover,
button.history-modal-close:hover,
.audit-modal-close:hover,
button.audit-modal-close:hover {
    background: #ef4444 !important;
    color: #fff !important;
    border-color: #ef4444 !important;
    transform: scale(1.08);
}

/* === Mejorar el admin-modal-card (crear cuenta temporal, editar canales) === */
#adminUserModal .admin-modal-card,
#sorteoModal .admin-modal-card {
    padding: 26px !important;
    border-radius: 16px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

/* === Header del modal más claro y alineado === */
#adminUserModal .history-modal-header,
#sorteoModal .history-modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding-bottom: 14px !important;
    border-bottom: 2px solid var(--border-color) !important;
    margin-bottom: 18px !important;
}

/* === FIX (v3): contenedor del título + subtítulo === */
/* Asegurar que el <div> que envuelve .history-modal-title y .history-modal-meta
   apile su contenido verticalmente (display: block) y ocupe el espacio disponible. */
#adminUserModal .history-modal-header > div:first-child,
#sorteoModal .history-modal-header > div:first-child,
#noteModal .history-modal-header > div:first-child,
#historyModal .history-modal-header > div:first-child {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* === FIX (v3): título siempre en su propia línea, subtítulo debajo === */
#adminUserModal .history-modal-title,
#sorteoModal .history-modal-title,
#noteModal .history-modal-title,
#historyModal .history-modal-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
}
#adminUserModal .history-modal-meta,
#sorteoModal .history-modal-meta,
#noteModal .history-modal-meta,
#historyModal .history-modal-meta {
    display: block !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    line-height: 1.4 !important;
    clear: both !important;
}

/* === Sistema de secciones del modal admin === */
#adminUserModal .admin-section {
    background: var(--bg-input-field) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#adminUserModal .admin-section:hover {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 2px 12px rgba(0, 212, 255, 0.08);
}

/* === Título de sección === */
#adminUserModal .admin-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    background: rgba(0, 0, 0, 0.15) !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--accent-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
#adminUserModal .admin-section-subtitle {
    margin-left: auto !important;
    font-weight: 400 !important;
    color: var(--text-muted) !important;
    font-size: 0.7rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* === Cuerpo de sección === */
#adminUserModal .admin-section-body {
    padding: 16px !important;
}

/* === Campo de formulario === */
#adminUserModal .admin-field {
    margin-bottom: 12px !important;
}
#adminUserModal .admin-field:last-child {
    margin-bottom: 0 !important;
}
#adminUserModal .admin-label {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
}

/* === Input uniforme === */
#adminUserModal .admin-input {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 0.88rem !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    font-family: var(--font-body) !important;
}
#adminUserModal .admin-input:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12) !important;
}

/* === Hint text === */
#adminUserModal .admin-hint {
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
    margin-top: 8px !important;
    line-height: 1.4 !important;
}

/* === Info boxes === */
#adminUserModal .admin-info-box {
    font-size: 0.74rem !important;
    color: var(--text-muted) !important;
    margin-top: 12px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    line-height: 1.5 !important;
}
#adminUserModal .admin-info-gold {
    background: rgba(212, 175, 55, 0.08) !important;
    border-left: 3px solid var(--accent-gold) !important;
}
#adminUserModal .admin-info-blue {
    background: rgba(0, 212, 255, 0.06) !important;
    border-left: 3px solid var(--accent-primary) !important;
}

/* === Grid de checkboxes (Pestañas) === */
#adminUserModal .admin-checkbox-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}
@media (max-width: 580px) {
    #adminUserModal .admin-checkbox-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* === Checkbox card (tarjeta cliqueable con icono) === */
#adminUserModal .admin-checkbox-card {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-card) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-size: 0.82rem !important;
    color: var(--text-main) !important;
    user-select: none !important;
}
#adminUserModal .admin-checkbox-card:hover {
    border-color: var(--accent-primary) !important;
    background: rgba(0, 212, 255, 0.05) !important;
    transform: translateY(-1px);
}
#adminUserModal .admin-checkbox-card input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    accent-color: var(--accent-primary) !important;
    flex-shrink: 0 !important;
}
#adminUserModal .admin-checkbox-card input[type="checkbox"]:checked + .admin-checkbox-icon {
    filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.5));
}
#adminUserModal .admin-checkbox-icon {
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}

/* === Mini botones (Todos / Ninguno) === */
#adminUserModal .admin-mini-btn {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
    font-size: 0.74rem !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
}
#adminUserModal .admin-mini-btn:hover {
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    background: rgba(0, 212, 255, 0.05) !important;
}

/* === Lista de canales permitidos === */
#adminUserModal .admin-channels-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    padding: 10px !important;
    background: var(--bg-card) !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-color) !important;
}
#adminUserModal .admin-channel-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 10px !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    background: var(--bg-input-field) !important;
    cursor: pointer !important;
    font-size: 0.8rem !important;
    color: var(--text-main) !important;
    transition: all 0.15s ease !important;
}
#adminUserModal .admin-channel-item:hover {
    border-color: var(--accent-primary) !important;
    background: rgba(0, 212, 255, 0.05) !important;
}
#adminUserModal .admin-channel-item input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    cursor: pointer !important;
    accent-color: var(--accent-primary) !important;
    flex-shrink: 0 !important;
}
#adminUserModal .admin-channel-icon {
    font-weight: 700 !important;
    color: var(--accent-primary) !important;
    flex-shrink: 0 !important;
}

/* === Lista de servidores permitidos === */
#adminUserModal .admin-guilds-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    max-height: 180px !important;
    overflow-y: auto !important;
    padding: 10px !important;
    background: var(--bg-card) !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-color) !important;
}
#adminUserModal .admin-guild-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-input-field) !important;
    cursor: pointer !important;
    font-size: 0.84rem !important;
    color: var(--text-main) !important;
    transition: all 0.15s ease !important;
}
#adminUserModal .admin-guild-item:hover {
    border-color: var(--accent-gold) !important;
    background: rgba(212, 175, 55, 0.05) !important;
}
#adminUserModal .admin-guild-item input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    accent-color: var(--accent-gold) !important;
    flex-shrink: 0 !important;
}
#adminUserModal .admin-guild-icon {
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}

/* === Botones de acción del modal (Cancelar / Guardar) === */
#adminUserModal .admin-modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--bg-card) !important;
    padding: 14px 0 14px !important;
    border-top: 2px solid var(--border-color) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    z-index: 10 !important;
    margin-top: 4px !important;
    /* === FIX (v3): asegurar que el fondo cubre todo el área === */
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15) !important;
    border-radius: 0 0 12px 12px !important;
}
#adminUserModal .admin-btn-cancel {
    padding: 10px 18px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    background: var(--bg-input-field) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}
#adminUserModal .admin-btn-cancel:hover {
    background: var(--bg-card) !important;
    border-color: var(--text-muted) !important;
}
#adminUserModal .admin-btn-save {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 22px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    background: var(--accent-gold) !important;
    color: #1a1d27 !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25) !important;
    transition: all 0.15s ease !important;
}
#adminUserModal .admin-btn-save:hover {
    background: var(--accent-gold-deep, #c9941a) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.35) !important;
}
#adminUserModal .admin-btn-save:active {
    transform: translateY(1px) !important;
}

/* === Botón "Sincronizar Datos" en estado cooldown === */
#btnActualizarDatos[disabled] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* === Sorteo modal: mejorar espaciado === */
#sorteoModal .admin-form-group {
    margin-bottom: 14px !important;
}
#sorteoModal .admin-form-group label {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
}
#sorteoModal .admin-form-group input,
#sorteoModal .admin-form-group select,
#sorteoModal .admin-form-group textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    outline: none !important;
    box-sizing: border-box !important;
}
#sorteoModal .admin-form-group input:focus,
#sorteoModal .admin-form-group select:focus,
#sorteoModal .admin-form-group textarea:focus {
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1) !important;
}

/* === Popover de la tuerquita (webhook) — mejorar visual === */
#webhookPopover {
    border-radius: 14px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================================== */
/* === NUEVO: Bloqueo de paneles cuando no hay servidor === */
/* ========================================================== */

/* Panel bloqueado: atenuar contenido */
.panel-server-locked {
    position: relative !important;
    pointer-events: none !important;
    /* === FIX (sin difuminado junto al pop-up): el usuario pidió que el
       difuminado NO vaya junto con el pop-up "Selecciona un servidor en ⚙️
       para usar esta sección". Antes (v31) el panel se veía borroso (blur)
       detrás del mensaje. Ahora NO se aplica ningún blur: el contenido queda
       nítido, solo levemente atenuado (regla de abajo), y el pop-up se ve
       perfectamente. Tampoco se pone opacity/filter aquí porque el overlay
       del pop-up es HIJO del panel y heredaría el efecto visual. === */
}

/* === Atenuar (SIN difuminado) SOLO el contenido del panel: todos los hijos
   directos excepto el overlay del pop-up. El panel queda levemente atenuado
   para indicar que está bloqueado, pero NÍTIDO — sin blur — y el mensaje de
   bloqueo se ve perfecto encima. === */
.panel-server-locked > *:not(.server-lock-overlay) {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

/* Overlay que cubre el panel con el mensaje de bloqueo */
.server-lock-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 100 !important;
    /* === FIX: fondo semitransparente para que el mensaje se lea bien sobre el
       contenido atenuado. SIN backdrop-filter: el difuminado no debe acompañar
       al pop-up (el contenido de atrás se ve nítido, solo oscurecido). === */
    background: rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    border-radius: inherit !important;
    animation: serverLockFadeIn 0.25s ease !important;
}

@keyframes serverLockFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Contenido del overlay (icono + mensaje + hint) */
.server-lock-content {
    background: var(--bg-card) !important;
    border: 2px solid var(--accent-gold) !important;
    border-radius: 16px !important;
    padding: 32px 28px !important;
    max-width: 400px !important;
    width: 90% !important;
    text-align: center !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}

.server-lock-icon {
    font-size: 3.5rem !important;
    line-height: 1 !important;
    filter: drop-shadow(0 4px 8px rgba(212, 175, 55, 0.3)) !important;
}

.server-lock-message {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--accent-gold) !important;
    line-height: 1.4 !important;
    font-family: var(--font-title) !important;
}

.server-lock-hint {
    font-size: 0.82rem !important;
    color: var(--text-muted) !important;
    line-height: 1.5 !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--border-color) !important;
    margin-top: 4px !important;
    width: 100% !important;
}

/* === Responsive: overlay más pequeño en móvil === */
@media (max-width: 580px) {
    .server-lock-content {
        padding: 24px 18px !important;
    }
    .server-lock-icon {
        font-size: 2.8rem !important;
    }
    .server-lock-message {
        font-size: 1rem !important;
    }
    .server-lock-hint {
        font-size: 0.75rem !important;
    }
}

/* === FIX (v3): overlay de bloqueo ELIMINADO ===
   El usuario pidió eliminar toda la opacidad y el blur en los canales sin acceso.
   Los bloques de abajo (server-lock-overlay y panel-server-locked) han sido
   eliminados para que solo apliquen los de arriba (que tienen opacity: 1,
   background: transparent, backdrop-filter: none). */

/* === FIX (v3): Botones de sidebar bloqueados por falta de servidor ===
   ANTES: applyServerLock añadía .disabled-field a #btnSorteo y #btnActualizarDatos,
   PERO .disabled-field tiene `opacity: 1 !important` (línea 1310), lo que anulaba
   el `style.opacity = '0.5'` inline → el botón se veía normal aunque estuviera
   bloqueado (pointer-events: none). El usuario no tenía feedback visual del lock.
   AHORA: usamos una clase propia .btn-server-locked que:
     - Aplica opacity 0.45 + grayscale (efecto "apagado")
     - Mantiene pointer-events: none
     - Añade un pseudo-elemento ::after con un icono 🔒 encima del botón
     - Funciona para cualquier .sidebar-nav-item (Sorteo, Sincronizar Datos, etc.)
   Así el usuario ve claramente que el botón está bloqueado, no solo "no responde". */
.sidebar-nav-item.btn-server-locked {
    opacity: 0.45 !important;
    filter: grayscale(0.7) !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    position: relative !important;
}
.sidebar-nav-item.btn-server-locked::after {
    content: "🔒";
    position: absolute !important;
    top: 4px !important;
    right: 6px !important;
    font-size: 0.7rem !important;
    opacity: 0.9 !important;
    pointer-events: none !important;
    filter: grayscale(0) !important;
}
.sidebar-nav-item.btn-server-locked:hover {
    background: transparent !important;
}

/* ========================================================== */
/* === NUEVO (v3): Modal Admin rediseñado — sistema adm-* === */
/* ========================================================== */

/* === Card principal del modal === */
#adminUserModal .adm-card {
    max-width: 720px !important;
    width: 95% !important;
    max-height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    background: var(--bg-card) !important;
}

/* === Header (sticky top) === */
.adm-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 20px 24px 16px !important;
    border-bottom: 2px solid var(--border-color) !important;
    background: var(--bg-card) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
}
.adm-header-text {
    flex: 1 !important;
    min-width: 0 !important;
}
.adm-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.adm-title-icon {
    font-size: 1.4rem !important;
    line-height: 1 !important;
}
.adm-title {
    margin: 0 !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--accent-gold) !important;
    font-family: var(--font-title) !important;
    line-height: 1.3 !important;
}
.adm-subtitle {
    margin: 6px 0 0 0 !important;
    font-size: 0.82rem !important;
    color: var(--text-muted) !important;
    line-height: 1.4 !important;
}
.adm-close {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
}
.adm-close:hover {
    background: #ef4444 !important;
    color: #fff !important;
    border-color: #ef4444 !important;
    transform: scale(1.08) !important;
}

/* === Body (scrollable) === */
.adm-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    margin: 0 !important;
}

/* === Bloque/Sección === */
.adm-block {
    background: var(--bg-input-field) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.adm-block:hover {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 2px 12px rgba(0, 212, 255, 0.08) !important;
}
.adm-block-head {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 11px 16px !important;
    background: rgba(0, 0, 0, 0.15) !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--accent-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
.adm-block-emoji {
    font-size: 1rem !important;
}
.adm-block-name {
    flex: 0 0 auto !important;
}
.adm-block-hint {
    margin-left: auto !important;
    font-weight: 400 !important;
    color: var(--text-muted) !important;
    font-size: 0.7rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.adm-block-content {
    padding: 16px !important;
}

/* === Row (2 columnas) === */
.adm-row {
    display: flex !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}
.adm-field {
    flex: 1 1 200px !important;
    min-width: 0 !important;
    margin-bottom: 12px !important;
}
.adm-field:last-child {
    margin-bottom: 0 !important;
}
.adm-label {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
}
.adm-input {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 0.88rem !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    font-family: var(--font-body) !important;
}
.adm-input:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12) !important;
}

/* === Note / hint text === */
.adm-note {
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
    margin: 8px 0 0 0 !important;
    line-height: 1.4 !important;
}

/* === Callout boxes === */
.adm-callout {
    font-size: 0.74rem !important;
    color: var(--text-muted) !important;
    margin-top: 12px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    line-height: 1.5 !important;
}
.adm-callout-gold {
    background: rgba(212, 175, 55, 0.08) !important;
    border-left: 3px solid var(--accent-gold) !important;
}
.adm-callout-blue {
    background: rgba(0, 212, 255, 0.06) !important;
    border-left: 3px solid var(--accent-primary) !important;
}

/* === Tabs grid (pestañas permitidas) === */
.adm-tabs-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}
@media (max-width: 580px) {
    .adm-tabs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
.adm-tab {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-card) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    font-size: 0.82rem !important;
    color: var(--text-main) !important;
    user-select: none !important;
}
.adm-tab:hover {
    border-color: var(--accent-primary) !important;
    background: rgba(0, 212, 255, 0.05) !important;
    transform: translateY(-1px) !important;
}
.adm-tab input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    accent-color: var(--accent-primary) !important;
    flex-shrink: 0 !important;
}
.adm-tab-emoji {
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}
.adm-tab-label {
    flex: 1 !important;
    min-width: 0 !important;
}

/* === Search row === */
.adm-search-row {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}
.adm-search-input {
    flex: 1 !important;
    padding: 8px 12px !important;
}
.adm-mini-btn {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
    font-size: 0.74rem !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
}
.adm-mini-btn:hover {
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    background: rgba(0, 212, 255, 0.05) !important;
}

/* === Channels list === */
.adm-channels {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    padding: 10px !important;
    background: var(--bg-card) !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-color) !important;
}
.adm-chan {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 10px !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    background: var(--bg-input-field) !important;
    cursor: pointer !important;
    font-size: 0.8rem !important;
    color: var(--text-main) !important;
    transition: all 0.15s ease !important;
}
.adm-chan:hover {
    border-color: var(--accent-primary) !important;
    background: rgba(0, 212, 255, 0.05) !important;
}
.adm-chan input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    cursor: pointer !important;
    accent-color: var(--accent-primary) !important;
    flex-shrink: 0 !important;
}
.adm-chan-icon {
    font-weight: 700 !important;
    color: var(--accent-primary) !important;
    flex-shrink: 0 !important;
}
.adm-chan-name {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* === Guilds list === */
.adm-guilds {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    max-height: 180px !important;
    overflow-y: auto !important;
    padding: 10px !important;
    background: var(--bg-card) !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-color) !important;
}
.adm-guild {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-input-field) !important;
    cursor: pointer !important;
    font-size: 0.84rem !important;
    color: var(--text-main) !important;
    transition: all 0.15s ease !important;
}
.adm-guild:hover {
    border-color: var(--accent-gold) !important;
    background: rgba(212, 175, 55, 0.05) !important;
}
.adm-guild input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    accent-color: var(--accent-gold) !important;
    flex-shrink: 0 !important;
}
.adm-guild-icon {
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}
.adm-guild-name {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* === Empty state === */
.adm-empty {
    grid-column: 1 / -1 !important;
    color: var(--text-muted) !important;
    font-size: 0.8rem !important;
    padding: 14px !important;
    text-align: center !important;
    line-height: 1.5 !important;
}
.adm-empty small {
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
}

/* === Footer (sticky bottom) === */
.adm-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 16px 24px !important;
    border-top: 2px solid var(--border-color) !important;
    background: var(--bg-card) !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15) !important;
}
.adm-btn {
    padding: 10px 22px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.adm-btn-cancel {
    background: var(--bg-input-field) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    font-weight: 600 !important;
}
.adm-btn-cancel:hover {
    background: var(--bg-card) !important;
    border-color: var(--text-muted) !important;
}
.adm-btn-save {
    background: var(--accent-gold) !important;
    color: #1a1d27 !important;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25) !important;
}
.adm-btn-save:hover {
    background: var(--accent-gold-deep, #c9941a) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.35) !important;
}
.adm-btn-save:active {
    transform: translateY(1px) !important;
}

/* === Responsive: modal más compacto en móvil === */
@media (max-width: 580px) {
    .adm-header,
    .adm-body,
    .adm-footer {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .adm-title {
        font-size: 1.05rem !important;
    }
    .adm-row {
        flex-direction: column !important;
    }
}

/* ========================================================== */
/* === FIX (v4): mejoras de espaciado y responsividad === */
/* ========================================================== */

/* === Más espaciado entre secciones === */
.adm-body {
    gap: 22px !important;
    padding: 24px !important;
}

/* === Header con más respiración === */
.adm-header {
    padding: 22px 24px 18px !important;
}
.adm-title {
    font-size: 1.25rem !important;
}
.adm-subtitle {
    font-size: 0.85rem !important;
    margin-top: 8px !important;
}

/* === Bloques con más padding interno === */
.adm-block-head {
    padding: 13px 18px !important;
    font-size: 0.82rem !important;
}
.adm-block-content {
    padding: 18px !important;
}

/* === Campos con más espaciado === */
.adm-field {
    margin-bottom: 16px !important;
}
.adm-label {
    font-size: 0.82rem !important;
    margin-bottom: 8px !important;
}
.adm-input {
    padding: 11px 14px !important;
    font-size: 0.9rem !important;
}

/* === Tabs grid: 2 columnas por defecto (más espacio), 3 en pantallas grandes === */
.adm-tabs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}
@media (min-width: 768px) {
    .adm-tabs-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
.adm-tab {
    padding: 12px 14px !important;
    font-size: 0.85rem !important;
}
.adm-tab-emoji {
    font-size: 1.1rem !important;
}

/* === Search row con más espacio === */
.adm-search-row {
    gap: 10px !important;
    margin-bottom: 14px !important;
}
.adm-search-input {
    padding: 10px 14px !important;
}
.adm-mini-btn {
    padding: 10px 16px !important;
    font-size: 0.78rem !important;
}

/* === Channels list con más espacio entre items === */
.adm-channels {
    gap: 8px !important;
    padding: 12px !important;
    max-height: 280px !important;
}
.adm-chan {
    padding: 9px 12px !important;
    font-size: 0.84rem !important;
    gap: 10px !important;
}

/* === Guilds list con más espacio === */
.adm-guilds {
    gap: 10px !important;
    padding: 12px !important;
}
.adm-guild {
    padding: 12px 14px !important;
    font-size: 0.86rem !important;
}

/* === Callouts con más padding === */
.adm-callout {
    padding: 12px 14px !important;
    font-size: 0.78rem !important;
    line-height: 1.6 !important;
}

/* === Footer con más padding === */
.adm-footer {
    padding: 18px 24px !important;
}
.adm-btn {
    padding: 12px 24px !important;
    font-size: 0.92rem !important;
}

/* === Notes con más espacio === */
.adm-note {
    font-size: 0.76rem !important;
    line-height: 1.5 !important;
    margin-top: 10px !important;
}

/* === Modal más ancho en pantallas grandes === */
#adminUserModal .adm-card {
    max-width: 760px !important;
}
@media (min-width: 1024px) {
    #adminUserModal .adm-card {
        max-width: 820px !important;
    }
}

/* === Responsive: tablet (581px - 767px) === */
@media (min-width: 581px) and (max-width: 767px) {
    .adm-tabs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .adm-channels,
    .adm-guilds {
        grid-template-columns: 1fr !important;
    }
}

/* === Responsive: móvil pequeño (< 480px) === */
@media (max-width: 480px) {
    .adm-header {
        padding: 16px 14px 14px !important;
    }
    .adm-body {
        padding: 16px 14px !important;
        gap: 18px !important;
    }
    .adm-footer {
        padding: 14px !important;
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }
    .adm-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    .adm-title {
        font-size: 1rem !important;
    }
    .adm-title-icon {
        font-size: 1.2rem !important;
    }
    .adm-close {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
    }
    .adm-block-head {
        padding: 11px 14px !important;
        font-size: 0.76rem !important;
    }
    .adm-block-content {
        padding: 14px !important;
    }
    .adm-tabs-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .adm-search-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .adm-mini-btn {
        width: 100% !important;
        text-align: center !important;
    }
}

/* === Mejorar scrollbars en listas === */
.adm-channels::-webkit-scrollbar,
.adm-guilds::-webkit-scrollbar,
.adm-body::-webkit-scrollbar {
    width: 8px;
}
.adm-channels::-webkit-scrollbar-track,
.adm-guilds::-webkit-scrollbar-track,
.adm-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}
.adm-channels::-webkit-scrollbar-thumb,
.adm-guilds::-webkit-scrollbar-thumb,
.adm-body::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
.adm-channels::-webkit-scrollbar-thumb:hover,
.adm-guilds::-webkit-scrollbar-thumb:hover,
.adm-body::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* ========================================================== */
/* === FIX (v4): Action grid más limpio, botones dentro de su card === */
/* ========================================================== */

/* === Action grid: contener botones dentro del padding de la card === */
#panelPrincipal .action-grid {
    margin-top: 14px !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* === Botones de acción: tamaño consistente, no se salen === */
#panelPrincipal .action-grid .btn {
    padding: 8px 12px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    height: 36px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    transition: all 0.15s ease !important;
    border: none !important;
    cursor: pointer !important;
}

/* === RONDA 14: "Restaurar Auto" SOLO ADMINS (fix del bug real) ===
   El botón se oculta por JS con style.display='none' (restrictVisitorMode),
   pero la regla de abajo con display:inline-flex !important PISABA el estilo
   inline y lo dejaba VISIBLE para usuarios normales. Ahora el display
   forzado EXCLUYE #btnRestaurarAuto: sin important encima, el 'none'
   inline del JS vuelve a funcionar. El resto de propiedades (tamaño,
   padding, radio…) se mantiene para ADMINS y no-admins por igual. */
#panelPrincipal .action-grid .btn:not(#btnRestaurarAuto) {
    display: inline-flex !important;
}

/* === En pantallas pequeñas: los botones se apilan mejor === */
@media (max-width: 580px) {
    #panelPrincipal .action-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    #panelPrincipal .action-grid .btn {
        font-size: 0.72rem !important;
        padding: 7px 8px !important;
        height: 34px !important;
    }
}
@media (max-width: 400px) {
    #panelPrincipal .action-grid {
        grid-template-columns: 1fr !important;
    }
}

/* === Asegurar que los botones no tengan margin negativo o transform que los saque === */
#panelPrincipal .action-grid .btn:not(:last-child) {
    margin-right: 0 !important;
}

/* === kbd-hint también contenido === */
#panelPrincipal .kbd-hint {
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* === FIX (v4): Modal admin aún más compacto y ordenado === */
/* Reducir tamaños generales para que quepa más contenido */
.adm-card {
    max-width: 680px !important;
}
@media (min-width: 1024px) {
    .adm-card {
        max-width: 720px !important;
    }
}

/* Reducir padding general del body */
.adm-body {
    gap: 16px !important;
    padding: 20px !important;
}

/* Header más compacto */
.adm-header {
    padding: 16px 20px 14px !important;
}
.adm-title {
    font-size: 1.1rem !important;
}
.adm-subtitle {
    font-size: 0.78rem !important;
    margin-top: 4px !important;
}

/* Bloques más compactos */
.adm-block-head {
    padding: 10px 14px !important;
    font-size: 0.76rem !important;
}
.adm-block-content {
    padding: 14px !important;
}

/* Campos más compactos */
.adm-field {
    margin-bottom: 12px !important;
}
.adm-label {
    font-size: 0.78rem !important;
    margin-bottom: 6px !important;
}
.adm-input {
    padding: 9px 12px !important;
    font-size: 0.84rem !important;
}

/* Tabs más compactas */
.adm-tab {
    padding: 9px 12px !important;
    font-size: 0.8rem !important;
}
.adm-tab-emoji {
    font-size: 1rem !important;
}

/* Channels/guilds más compactos */
.adm-channels {
    max-height: 200px !important;
    gap: 6px !important;
    padding: 10px !important;
}
.adm-chan {
    padding: 7px 10px !important;
    font-size: 0.8rem !important;
}
.adm-guilds {
    max-height: 150px !important;
}
.adm-guild {
    padding: 10px 12px !important;
    font-size: 0.82rem !important;
}

/* Callouts más compactos */
.adm-callout {
    padding: 10px 12px !important;
    font-size: 0.74rem !important;
    margin-top: 10px !important;
}

/* Footer más compacto */
.adm-footer {
    padding: 14px 20px !important;
}
.adm-btn {
    padding: 9px 18px !important;
    font-size: 0.85rem !important;
}

/* Notes más compactas */
.adm-note {
    font-size: 0.72rem !important;
    margin-top: 8px !important;
}






/* ========================================================== */
/* === Calculadora de Crafteo y Refinación (scoped .calc-scope) === */
/* ========================================================== */

#panelCalculadora.container.view-panel.calc-scope {
    max-width: 1140px !important;
    margin: 0 auto !important;
    width: 100% !important;
    /* === FIX (v7): NO forzar display:block !important aqui.
       Antes (v6) tenia `display: block !important` para "forzar centrado",
       PERO como este selector tiene mayor especificidad que `.view-panel{display:none!important}`
       (por usar ID), hacia que #panelCalculadora SIEMPRE estuviera visible — incluso cuando
       no era la pestaña activa. Eso causaba que en otras pestañas (especialmente Admin)
       se viera un espacio vacio arriba del panel Admin, porque #panelCalculadora (vacio)
       se renderizaba encima.
       Solucion: confiar en `.view-panel.active { display:block !important }` para mostrar
       y `.view-panel { display:none !important }` para ocultar. === */
    float: none !important;
    gap: 0 !important;
    padding: 24px !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 8px 24px -12px rgba(0,0,0,0.35) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* === Responsive: Craft/Refinacion en móvil === */
@media (max-width: 768px) {
    #panelCalculadora.container.view-panel.calc-scope {
        padding: 14px !important;
        border-radius: var(--radius-sm) !important;
        max-width: 100% !important;
    }
}
@media (max-width: 480px) {
    #panelCalculadora.container.view-panel.calc-scope {
        padding: 10px !important;
    }
}

.calc-scope .container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.calc-scope {
    --albion-bg: var(--bg-body);
    --albion-surface: var(--bg-card);
    --albion-surface-subtle: var(--bg-input-field);
    --albion-border: var(--border-color);
    --albion-border-highlight: var(--border-focus);
    --albion-gold: var(--accent-gold);
    --albion-gold-bright: var(--accent-gold);
    --albion-emerald: var(--success);
    --albion-text: var(--text-main);
    --albion-text-dim: var(--text-muted);
    --albion-text-muted: var(--text-muted);
    --font-title: var(--font-title);
    --font-body: var(--font-body);
    --font-mono: var(--font-mono);
}

    .calc-scope :root {
      --albion-bg: var(--bg-body);
      --albion-surface: var(--bg-card);
      --albion-surface-subtle: var(--bg-input-field);
      --albion-border: var(--border-color);
      --albion-border-highlight: var(--border-focus);
      --albion-gold: var(--accent-gold);
      --albion-gold-bright: var(--accent-gold);
      --albion-emerald: var(--success);
      --albion-text: var(--text-main);
      --albion-text-dim: var(--text-muted);
      --albion-text-muted: var(--text-muted);
      --font-title: var(--font-title);
      --font-body: var(--font-body);
      --font-mono: var(--font-mono);
    }

    .calc-scope .micro-fee-card {
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .calc-scope .micro-fee-card:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 200, 98, 0.25) !important;
      background: rgba(255, 200, 98, 0.05) !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .calc-scope .refine-accordion-header {
      background: var(--albion-surface);
      border: 1px solid var(--albion-border);
      border-radius: 8px;
      padding: 14px 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      user-select: none;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .calc-scope .refine-accordion-header:hover {
      background: rgba(255, 255, 255, 0.01);
      border-color: rgba(255, 200, 98, 0.2);
      color: var(--albion-gold-bright);
    }
    .calc-scope .refine-accordion-header.active {
      color: var(--albion-gold-bright);
      border-color: var(--albion-gold);
      background: rgba(220, 161, 52, 0.04);
    }
    .calc-scope .accordion-arrow {
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .calc-scope .refine-accordion-header.active .accordion-arrow {
      transform: rotate(180deg);
    }
    .calc-scope .refine-accordion-content {
      padding: 16px;
      transition: all 0.3s ease;
    }

    .calc-scope * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .calc-scope body {
      background-color: var(--albion-bg);
      color: var(--albion-text);
      font-family: var(--font-body);
      line-height: 1.6;
      padding: 24px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
    }

    .calc-scope .container {
      width: 100%;
      /* === FIX (v7): antes max-width: 1000px sin margin:auto.
         Esto causaba que en pantallas grandes (fullscreen > 1300px), el
         contenedor interno de la calculadora se quedara pegado a la izquierda
         del card externo (1140px), dejando ~90px vacios a la derecha.
         En pantallas pequenas no se notaba porque el contenedor ocupaba todo el ancho.
         Solucion: max-width 100% para que llene el card externo (que ya esta centrado). === */
      max-width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* Header styling */
    .calc-scope header {
      text-align: center;
      margin-bottom: 10px;
      background: linear-gradient(135deg, var(--albion-surface) 0%, #1e212b 100%);
      padding: 24px;
      border-radius: 12px;
      border: 1px solid var(--albion-border);
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }

    .calc-scope header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--albion-gold) 0%, #ffdf9e 100%);
    }

    .calc-scope .logo-container {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--albion-gold) 0%, #ffc862 100%);
      margin-bottom: 12px;
      box-shadow: 0 4px 12px rgba(220, 161, 52, 0.3);
    }

    .calc-scope .logo-svg {
      width: 26px;
      height: 26px;
      fill: var(--albion-bg);
    }

    .calc-scope h1 {
      font-family: var(--font-title);
      font-size: 26px;
      font-weight: 800;
      color: var(--albion-gold-bright);
      letter-spacing: 0.5px;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .calc-scope .subtitle {
      color: var(--albion-text-dim);
      font-size: 14px;
    }

    /* Tabs Navigation */
    .calc-scope .tabs-nav {
      display: flex;
      background: var(--albion-surface);
      border: 1px solid var(--albion-border);
      border-radius: 10px;
      padding: 4px;
      gap: 4px;
    }

    .calc-scope .tab-btn {
      flex: 1;
      padding: 12px;
      border: none;
      background: transparent;
      color: var(--albion-text-dim);
      font-family: var(--font-title);
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .calc-scope .tab-btn:hover {
      color: var(--albion-text);
      background-color: rgba(255, 255, 255, 0.03);
    }

    .calc-scope .tab-btn.active {
      background-color: var(--albion-surface-subtle);
      color: var(--albion-gold-bright);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.2);
      border: 1px solid var(--albion-border);
    }

    /* Card Panels */
    .calc-scope .panel {
      background-color: var(--albion-surface);
      border: 1px solid var(--albion-border);
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      display: none;
    }

    .calc-scope .panel.active {
      display: flex !important;
      flex-direction: column;
      gap: 20px;
    }

    .calc-scope .section-title {
      font-family: var(--font-title);
      font-size: 16px;
      font-weight: 700;
      color: var(--albion-gold);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-bottom: 1px solid var(--albion-border);
      padding-bottom: 8px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Inputs grid */
    .calc-scope .config-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px;
    }

    .calc-scope .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .calc-scope .form-group.full-width {
      grid-column: 1 / -1;
    }

    .calc-scope label {
      font-size: 11px;
      font-weight: 600;
      color: var(--albion-text-dim);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    input[type="text"],
    input[type="number"],
    .calc-scope select {
      background-color: var(--albion-bg);
      border: 1px solid var(--albion-border);
      color: var(--albion-text);
      padding: 10px 14px;
      border-radius: 8px;
      font-family: var(--font-body);
      font-size: 14px;
      outline: none;
      width: 100%;
      transition: all 0.2s ease;
    }

    input[type="text"]:focus,
    input[type="number"]:focus,
    .calc-scope select:focus {
      border-color: var(--albion-gold);
      box-shadow: 0 0 0 2px rgba(220, 161, 52, 0.15);
    }

    /* Autocomplete Styling */
    .calc-scope .autocomplete-wrapper {
      position: relative;
    }

    .calc-scope .suggestions-list {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      width: 100%;
      background-color: var(--albion-surface);
      border: 1px solid var(--albion-border);
      border-radius: 6px;
      max-height: 300px;
      overflow-y: auto;
      z-index: 100;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      display: none;
    }

    .calc-scope .suggestion-item {
      padding: 8px 12px;
      cursor: pointer;
      font-size: 13px;
      border-bottom: 1px solid var(--albion-border);
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      text-align: left;
      transition: background-color 0.12s ease;
    }

    .calc-scope .suggestion-item:last-child {
      border-bottom: none;
    }

    .suggestion-item:hover,
    .calc-scope .suggestion-item.highlighted {
      background-color: color-mix(in srgb, var(--albion-gold) 12%, var(--albion-surface));
      color: var(--albion-gold-bright);
    }

    .calc-scope .suggestion-name {
      font-weight: 700;
      color: var(--albion-gold);
    }

    .calc-scope .suggestion-desc {
      font-size: 11px;
      color: var(--albion-text-dim);
    }

    /* Toggles and buttons */
    .calc-scope .toggles-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .calc-scope .toggle-card {
      flex: 1;
      min-width: 150px;
      background-color: var(--albion-bg);
      border: 1px solid var(--albion-border);
      border-radius: 8px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      user-select: none;
      transition: all 0.2s ease;
    }

    .calc-scope .toggle-card:hover {
      border-color: var(--albion-border-highlight);
    }

    .calc-scope .toggle-card.active {
      border-color: var(--albion-gold);
      background-color: rgba(220, 161, 52, 0.05);
    }

    .calc-scope .toggle-card input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: var(--albion-gold);
      cursor: pointer;
    }

    .calc-scope .toggle-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--albion-text);
    }

    /* Recipe Block */
    .calc-scope .recipe-info-card {
      background-color: var(--albion-surface-subtle);
      border-left: 4px solid var(--albion-gold);
      border-radius: 0 8px 8px 0;
      padding: 12px 16px;
      display: none;
      text-align: left;
    }

    /* Sentence card */
    .calc-scope .sentence-card {
      background: linear-gradient(135deg, color-mix(in srgb, var(--albion-gold) 8%, var(--albion-surface)) 0%, var(--albion-surface) 100%);
      border: 1px solid var(--albion-gold);
      border-radius: 10px;
      padding: 18px;
      text-align: center;
      font-size: 20px;
      font-weight: 600;
      color: var(--albion-text);
      line-height: 1.6;
    }

    /* City Badges Grid */
    .calc-scope .city-badges-grid {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 6px;
      width: 100%;
      overflow: visible;
      justify-content: center;
      box-sizing: border-box;
    }

    /* === FIX: botón de ciudad deshabilitado (Bridgewatch en revisión) === */
    /* Visualmente deshabilitado pero NO elimina la lógica subyacente. */
    .calc-scope .city-badge-btn.city-badge-disabled,
    .calc-scope .city-badge-btn:disabled,
    .calc-scope .city-badge-btn[disabled] {
      opacity: 0.35 !important;
      cursor: not-allowed !important;
      filter: grayscale(1) brightness(0.7) !important;
      pointer-events: none !important;
      transform: none !important;
      box-shadow: none !important;
      position: relative;
      border-style: dashed !important;
      border-color: var(--albion-text-muted, #888) !important;
      background-color: var(--albion-bg-subtle, #1a1d27) !important;
      color: var(--albion-text-muted, #888) !important;
    }
    .calc-scope .city-badge-btn.city-badge-disabled::after {
      content: '🚫';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(2);
      font-size: 24px;
      opacity: 0.9;
      z-index: 10;
      pointer-events: none;
      text-shadow: 0 0 4px #000, 0 0 4px #000;
    }
    .calc-scope .city-badge-btn.city-badge-disabled .city-badge-img,
    .calc-scope .city-badge-btn.city-badge-disabled .city-name {
      opacity: 0.3;
    }
    .calc-scope .city-badge-btn.city-badge-disabled:hover {
      transform: none !important;
      box-shadow: none !important;
      opacity: 0.35 !important;
    }

    .calc-scope .city-badge-btn {
      flex: 1 1 100px;
      min-width: 90px;
      background-color: var(--albion-surface-subtle);
      border: 1px solid var(--albion-border);
      border-radius: 8px;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      cursor: pointer;
      position: relative;
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      color: var(--albion-text-muted);
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .calc-scope .city-badge-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 15px rgba(0,0,0,0.25);
    }
    .calc-scope .city-badge-btn:active {
      transform: translateY(0) scale(0.95) !important;
      transition: all 0.1s ease;
    }

    /* Colorful default styles for each city badge button */
    .calc-scope .city-badge-btn[data-city="Lymhurst"] {
      border-color: rgba(45, 184, 61, 0.25);
      background-color: rgba(45, 184, 61, 0.02);
      color: #3ae34e;
    }
    .calc-scope .city-badge-btn[data-city="Thetford"] {
      border-color: rgba(156, 39, 176, 0.25);
      background-color: rgba(156, 39, 176, 0.02);
      color: #e56bf7;
    }
    .calc-scope .city-badge-btn[data-city="Fort Sterling"] {
      border-color: rgba(173, 200, 255, 0.25);
      background-color: rgba(173, 200, 255, 0.02);
      color: #b0ccff;
    }
    .calc-scope .city-badge-btn[data-city="Martlock"] {
      border-color: rgba(0, 110, 255, 0.25);
      background-color: rgba(0, 110, 255, 0.02);
      color: #4da6ff;
    }
    .calc-scope .city-badge-btn[data-city="Bridgewatch"] {
      border-color: rgba(255, 136, 0, 0.25);
      background-color: rgba(255, 136, 0, 0.02);
      color: #ffb84d;
    }
    .calc-scope .city-badge-btn[data-city="Caerleon"] {
      border-color: rgba(255, 51, 51, 0.25);
      background-color: rgba(255, 51, 51, 0.02);
      color: #ff6666;
    }
    .calc-scope .city-badge-btn[data-city="Brecilien"] {
      border-color: rgba(238, 130, 238, 0.25);
      background-color: rgba(238, 130, 238, 0.02);
      color: #ffb3ff;
    }

    /* Hover states: elevate brightness of borders */
    .city-badge-btn[data-city="Lymhurst"]:hover { border-color: rgba(45, 184, 61, 0.7); background-color: rgba(45, 184, 61, 0.05); }
    .city-badge-btn[data-city="Thetford"]:hover { border-color: rgba(156, 39, 176, 0.7); background-color: rgba(156, 39, 176, 0.05); }
    .city-badge-btn[data-city="Fort Sterling"]:hover { border-color: rgba(173, 200, 255, 0.7); background-color: rgba(173, 200, 255, 0.05); }
    .city-badge-btn[data-city="Martlock"]:hover { border-color: rgba(0, 110, 255, 0.7); background-color: rgba(0, 110, 255, 0.05); }
    .city-badge-btn[data-city="Bridgewatch"]:hover { border-color: rgba(255, 136, 0, 0.7); background-color: rgba(255, 136, 0, 0.05); }
    .city-badge-btn[data-city="Caerleon"]:hover { border-color: rgba(255, 51, 51, 0.7); background-color: rgba(255, 51, 51, 0.05); }
    .city-badge-btn[data-city="Brecilien"]:hover { border-color: rgba(238, 130, 238, 0.7); background-color: rgba(238, 130, 238, 0.05); }

    /* Themed Active States: vibrant glow based on city theme */
    .calc-scope .city-badge-btn[data-city="Lymhurst"].active {
      border: 2px solid #2db83d !important;
      box-shadow: 0 8px 24px rgba(45, 184, 61, 0.5) !important;
      background: linear-gradient(135deg, rgba(45, 184, 61, 0.2) 0%, var(--albion-bg-dark, rgba(0,0,0,0.4)) 100%) !important;
      color: #fff !important;
      transform: translateY(-5px) scale(1.03);
      font-weight: 800;
    }
    .calc-scope .city-badge-btn[data-city="Thetford"].active {
      border: 2px solid #9c27b0 !important;
      box-shadow: 0 8px 24px rgba(156, 39, 176, 0.5) !important;
      background: linear-gradient(135deg, rgba(156, 39, 176, 0.2) 0%, var(--albion-bg-dark, rgba(0,0,0,0.4)) 100%) !important;
      color: #fff !important;
      transform: translateY(-5px) scale(1.03);
      font-weight: 800;
    }
    .calc-scope .city-badge-btn[data-city="Fort Sterling"].active {
      border: 2px solid #adc8ff !important;
      box-shadow: 0 8px 24px rgba(173, 200, 255, 0.5) !important;
      background: linear-gradient(135deg, rgba(173, 200, 255, 0.2) 0%, var(--albion-bg-dark, rgba(0,0,0,0.4)) 100%) !important;
      color: #fff !important;
      transform: translateY(-5px) scale(1.03);
      font-weight: 800;
    }
    .calc-scope .city-badge-btn[data-city="Martlock"].active {
      border: 2px solid #0055ff !important;
      box-shadow: 0 8px 24px rgba(0, 85, 255, 0.5) !important;
      background: linear-gradient(135deg, rgba(0, 85, 255, 0.2) 0%, var(--albion-bg-dark, rgba(0,0,0,0.4)) 100%) !important;
      color: #fff !important;
      transform: translateY(-5px) scale(1.03);
      font-weight: 800;
    }
    .calc-scope .city-badge-btn[data-city="Bridgewatch"].active {
      border: 2px solid #ff8800 !important;
      box-shadow: 0 8px 24px rgba(255, 136, 0, 0.5) !important;
      background: linear-gradient(135deg, rgba(255, 136, 0, 0.2) 0%, var(--albion-bg-dark, rgba(0,0,0,0.4)) 100%) !important;
      color: #fff !important;
      transform: translateY(-5px) scale(1.03);
      font-weight: 800;
    }
    .calc-scope .city-badge-btn[data-city="Caerleon"].active {
      border: 2px solid #ff3333 !important;
      box-shadow: 0 8px 24px rgba(255, 51, 51, 0.5) !important;
      background: linear-gradient(135deg, rgba(255, 51, 51, 0.2) 0%, var(--albion-bg-dark, rgba(0,0,0,0.4)) 100%) !important;
      color: #fff !important;
      transform: translateY(-5px) scale(1.03);
      font-weight: 800;
    }
    .calc-scope .city-badge-btn[data-city="Brecilien"].active {
      border: 2px solid #ee82ee !important;
      box-shadow: 0 8px 24px rgba(238, 130, 238, 0.5) !important;
      background: linear-gradient(135deg, rgba(238, 130, 238, 0.2) 0%, var(--albion-bg-dark, rgba(0,0,0,0.4)) 100%) !important;
      color: #fff !important;
      transform: translateY(-5px) scale(1.03);
      font-weight: 800;
    }

    /* Highlight indicator for SUGGESTED city (distinct from selection) */
    .calc-scope .city-badge-btn.suggested {
      position: relative;
    }
    .calc-scope .city-badge-btn.suggested::after {
      content: '★ Sugerido';
      position: absolute;
      top: -7px;
      right: 4px;
      background: linear-gradient(135deg, #FFE082 0%, #FFB300 100%);
      color: #000;
      font-size: 9px;
      font-weight: 900;
      padding: 2px 5px;
      border-radius: 4px;
      text-transform: uppercase;
      box-shadow: 0 2px 6px rgba(0,0,0,0.6);
      border: 1px solid rgba(255,255,255,0.25);
      z-index: 10;
    }

    .calc-scope .city-badge-img {
      width: 44px;
      height: 44px;
      object-fit: contain;
    }

    .calc-scope .city-name {
      font-size: 11px;
      text-align: center;
    }

    /* Material Badges Grid */
    .calc-scope .material-badges-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
    }

    .calc-scope .mat-badge-btn {
      background-color: var(--albion-surface-subtle);
      border: 1px solid var(--albion-border);
      border-radius: 8px;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      cursor: pointer;
      position: relative;
      transition: all 0.2s ease;
      color: var(--albion-text-muted);
    }

    .calc-scope .mat-badge-img {
      width: 40px;
      height: 40px;
      object-fit: contain;
    }

    .calc-scope .mat-name {
      font-size: 11px;
      font-weight: 600;
      text-align: center;
    }

    /* Hover states: make border brighter */
    .calc-scope .mat-badge-btn:hover {
      border-color: var(--albion-gold-light);
      color: #fff;
      background-color: rgba(220, 161, 52, 0.03);
    }

    /* Selected active states */
    .calc-scope .mat-badge-btn[data-mat="leather"].active {
      border: 2px solid var(--albion-gold) !important;
      box-shadow: 0 0 10px rgba(220, 161, 52, 0.4) !important;
      background: linear-gradient(135deg, rgba(160, 82, 45, 0.18) 0%, rgba(15, 17, 21, 0.3) 100%) !important;
      color: #ffaa66 !important;
      transform: scale(1.03);
      font-weight: 700;
      z-index: 5;
    }

    .calc-scope .mat-badge-btn[data-mat="cloth"].active {
      border: 2px solid var(--albion-gold) !important;
      box-shadow: 0 0 10px rgba(220, 161, 52, 0.4) !important;
      background: linear-gradient(135deg, rgba(240, 230, 140, 0.15) 0%, rgba(15, 17, 21, 0.3) 100%) !important;
      color: #ffffaa !important;
      transform: scale(1.03);
      font-weight: 700;
      z-index: 5;
    }

    .calc-scope .mat-badge-btn[data-mat="planks"].active {
      border: 2px solid var(--albion-gold) !important;
      box-shadow: 0 0 10px rgba(220, 161, 52, 0.4) !important;
      background: linear-gradient(135deg, rgba(222, 184, 135, 0.18) 0%, rgba(15, 17, 21, 0.3) 100%) !important;
      color: #ffe0b3 !important;
      transform: scale(1.03);
      font-weight: 700;
      z-index: 5;
    }

    .calc-scope .mat-badge-btn[data-mat="metalbar"].active {
      border: 2px solid var(--albion-gold) !important;
      box-shadow: 0 0 10px rgba(220, 161, 52, 0.4) !important;
      background: linear-gradient(135deg, rgba(70, 130, 180, 0.18) 0%, rgba(15, 17, 21, 0.3) 100%) !important;
      color: #adc8ff !important;
      transform: scale(1.03);
      font-weight: 700;
      z-index: 5;
    }

    /* RRR Info Box */
    .calc-scope .rrr-info-box {
      background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(15, 17, 21, 0) 100%);
      border: 1px solid rgba(76, 175, 80, 0.3);
      border-radius: 8px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .calc-scope .rrr-info-text {
      font-size: 13px;
      color: var(--albion-text-dim);
      text-align: left;
    }

    .calc-scope .rrr-info-val {
      font-family: var(--font-title);
      font-size: 22px;
      font-weight: 800;
      color: var(--albion-emerald);
    }

    /* Metrics Summary Cards */
    .calc-scope .results-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 16px;
    }

    .calc-scope .metric-card {
      background-color: var(--albion-bg);
      border: 1px solid var(--albion-border);
      border-radius: 10px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      text-align: left;
    }

    .calc-scope .metric-card.highlight {
      border-color: var(--albion-gold);
    }

    .calc-scope .metric-card.highlight::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, transparent 50%, var(--albion-gold) 50%);
    }

    .calc-scope .metric-title {
      font-size: 10px;
      font-weight: 700;
      color: var(--albion-text-dim);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 8px;
    }

    .calc-scope .metric-value {
      font-size: 28px;
      font-weight: 800;
      color: #fff;
      font-family: var(--font-title);
      line-height: 1.2;
    }

    .calc-scope .metric-desc {
      font-size: 11px;
      color: var(--albion-text-dim);
      margin-top: 6px;
      line-height: 1.4;
    }

    /* Ingredients Lists */
    .calc-scope .ingredients-box {
      background-color: var(--albion-bg);
      border: 1px solid var(--albion-border);
      border-radius: 8px;
      padding: 14px;
    }

    .calc-scope .ingredient-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid var(--albion-border);
      gap: 12px;
      flex-wrap: wrap;
    }

    .calc-scope .ingredient-row:last-child {
      border-bottom: none;
    }

    .calc-scope .ingredient-name {
      font-size: 15px;
      font-weight: 600;
      text-align: left;
      color: var(--albion-text);
      flex: 1 1 200px;
    }

    .calc-scope .ingredient-vals {
      display: flex;
      gap: 18px;
      font-size: 14px;
      flex-wrap: wrap;
    }

    .calc-scope .ingredient-val-item {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .calc-scope .ingredient-val-lbl {
      font-size: 10px;
      color: var(--albion-text-muted);
      text-transform: uppercase;
    }

    .calc-scope .ingredient-val-num {
      font-family: var(--font-mono);
      font-weight: 700;
      color: var(--albion-gold-bright);
      font-size: 15px;
    }

    /* === RESPONSIVE: pantallas pequeñas === */
    @media (max-width: 768px) {
      .calc-scope .ingredient-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
      .calc-scope .ingredient-name {
        flex: 1 1 100%;
      }
      .calc-scope .ingredient-vals {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
      }
      .calc-scope .ingredient-val-item {
        align-items: flex-start;
      }
    }

    /* Table styling */
    .calc-scope .table-wrapper {
      width: 100%;
      overflow-x: auto;
      border: 1px solid var(--albion-border);
      border-radius: 8px;
      background-color: var(--albion-bg);
    }

    .calc-scope table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      text-align: left;
    }

    .calc-scope th, .calc-scope td {
      padding: 10px 14px;
      border-bottom: 1px solid var(--albion-border);
    }

    .calc-scope th {
      font-family: var(--font-title);
      font-size: 10px;
      font-weight: 700;
      color: var(--albion-gold);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      background-color: rgba(255, 255, 255, 0.02);
    }

    .calc-scope tr:last-child td {
      border-bottom: none;
    }

    .calc-scope .td-num {
      font-family: var(--font-mono);
      text-align: right;
    }

    .calc-scope .th-num {
      text-align: right;
    }

    /* Refining Dual Tables Layout */
    .calc-scope .dual-tables-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 16px;
    }

    .calc-scope .table-panel {
      background-color: var(--albion-bg);
      border: 1px solid var(--albion-border);
      border-radius: 8px;
      padding: 14px;
    }

    .calc-scope .table-panel-title {
      font-family: var(--font-title);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 10px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .table-panel-title.raw { color: var(--albion-gold); }
    .table-panel-title.refined { color: var(--albion-emerald); }

    /* Combinations Box */
    .calc-scope .combinations-box {
      background-color: var(--albion-bg);
      border: 1px solid var(--albion-border);
      border-radius: 8px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      text-align: left;
    }

    .calc-scope .combination-option {
      padding: 10px 14px;
      border-left: 3px solid var(--albion-gold);
      background-color: rgba(255, 255, 255, 0.01);
      border-radius: 0 6px 6px 0;
      font-size: 13px;
    }

    .calc-scope .combination-option em {
      font-style: normal;
      color: var(--albion-gold-bright);
      font-weight: 600;
      font-family: var(--font-mono);
    }

    /* Simulation Steps Section */
    .calc-scope .sim-toggle-btn {
      align-self: center;
      background-color: transparent;
      border: 1px solid var(--albion-border);
      color: var(--albion-text-dim);
      padding: 8px 16px;
      border-radius: 6px;
      font-family: var(--font-title);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .calc-scope .sim-toggle-btn:hover {
      border-color: var(--albion-gold);
      color: var(--albion-gold-bright);
      background-color: rgba(220, 161, 52, 0.05);
    }

    .calc-scope .sim-box {
      display: none;
      animation: fadeIn 0.3s ease;
    }

    .calc-scope .sim-box.open {
      display: block;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Preset list buttons */
    .calc-scope .presets-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }

    .calc-scope .preset-btn {
      background-color: var(--albion-surface);
      border: 1px solid var(--albion-border);
      color: var(--albion-text-dim);
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: var(--font-title);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .calc-scope .preset-btn:hover {
      border-color: var(--albion-gold);
      color: var(--albion-gold-bright);
    }

    /* General responsive styling */
    @media (max-width: 600px) {
      .calc-scope body {
        padding: 12px 8px;
      }
      .calc-scope .panel {
        padding: 14px;
      }
      .calc-scope .metric-value {
        font-size: 24px;
      }
      .calc-scope th, .calc-scope td {
        padding: 8px 10px;
        font-size: 12px;
      }
      .calc-scope .rrr-info-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }
      .calc-scope .rrr-info-val {
        align-self: flex-end;
      }

      /* === FIX: grids inline → 1 columna en móvil === */
      /* EXCEPCIONES:
         - .calc-grid-search: en móvil → 1fr (Buscar solo) + 1fr 1fr (Tier+Ench juntos)
         - .calc-grid-params: en móvil → Cantidad/Devol/Tasa en 1fr 1fr 1fr, Foco+Daily en 1fr 1fr
         - .calc-grid-refine: en móvil → Tier+Ench en 1fr 1fr, resto apilado, Foco+Daily en 1fr 1fr
      */
      /* Grid de búsqueda (Buscar + Tier + Ench): Buscar arriba, Tier+Ench abajo juntos */
      .calc-scope .calc-grid-search {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }
      .calc-scope .calc-grid-search .calc-field-search {
        grid-column: 1 / -1 !important;
      }
      .calc-scope .calc-grid-search .calc-field-tier,
      .calc-scope .calc-grid-search .calc-field-ench {
        /* Estos dos quedan en la misma fila gracias al grid de 2 columnas abajo */
      }
      /* Reorganizar: usar un sub-grid visual poniendo Tier+Ench en una fila de 2 columnas */
      .calc-scope .calc-grid-search {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
          "search search"
          "tier ench" !important;
      }
      .calc-scope .calc-grid-search .calc-field-search { grid-area: search !important; }
      .calc-scope .calc-grid-search .calc-field-tier { grid-area: tier !important; }
      .calc-scope .calc-grid-search .calc-field-ench { grid-area: ench !important; }

      /* Grid de parámetros crafteo (Cantidad/Devol/Tasa/Foco/+10%/+20%) */
      .calc-scope .calc-grid-params {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
          "qty rrr"
          "fee fee"
          "focus focus"
          "daily10 daily20" !important;
        gap: 10px !important;
      }
      .calc-scope .calc-grid-params .form-group:nth-child(1) { grid-area: qty !important; }
      .calc-scope .calc-grid-params .form-group:nth-child(2) { grid-area: rrr !important; }
      .calc-scope .calc-grid-params .form-group:nth-child(3) { grid-area: fee !important; }
      /* FIX v37: toggles ahora están dentro de .calc-toggle-wrapper */
      .calc-scope .calc-grid-params .calc-toggle-wrapper { display: flex !important; flex-direction: column !important; }
      .calc-scope .calc-grid-params .calc-toggle-wrapper:nth-child(4) { grid-area: focus !important; }
      .calc-scope .calc-grid-params .calc-toggle-wrapper:nth-child(5) { grid-area: daily10 !important; }
      .calc-scope .calc-grid-params .calc-toggle-wrapper:nth-child(6) { grid-area: daily20 !important; }
      .calc-scope .calc-toggle-label-spacer { display: none !important; }

      /* Grid de refinación (Tier/Ench/Qty/Fee/Rrr/Foco/+10%/+20%) */
      .calc-scope .calc-grid-refine {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
          "tier ench"
          "qty fee"
          "rrr rrr"
          "focus focus"
          "daily10 daily20" !important;
        gap: 10px !important;
      }
      .calc-scope .calc-grid-refine .calc-field-tier { grid-area: tier !important; }
      .calc-scope .calc-grid-refine .calc-field-ench { grid-area: ench !important; }
      .calc-scope .calc-grid-refine .form-group:nth-child(3) { grid-area: qty !important; }
      .calc-scope .calc-grid-refine .form-group:nth-child(4) { grid-area: fee !important; }
      .calc-scope .calc-grid-refine .form-group:nth-child(5) { grid-area: rrr !important; }
      /* FIX v37: toggles ahora están dentro de .calc-toggle-wrapper */
      .calc-scope .calc-grid-refine .calc-toggle-wrapper { display: flex !important; flex-direction: column !important; }
      .calc-scope .calc-grid-refine .calc-toggle-wrapper:nth-child(6) { grid-area: focus !important; }
      .calc-scope .calc-grid-refine .calc-toggle-wrapper:nth-child(7) { grid-area: daily10 !important; }
      .calc-scope .calc-grid-refine .calc-toggle-wrapper:nth-child(8) { grid-area: daily20 !important; }
      /* === FIX: forzar max-width:100% en inputs del grid de refinación === */
      /* Los inputs tienen max-width:65px/90px/100px inline que los hace salirse del borde en móvil */
      .calc-scope .calc-grid-refine select,
      .calc-scope .calc-grid-refine input {
        max-width: 100% !important;
        width: 100% !important;
      }

      /* Otros grids inline → 1 columna */
      .calc-scope .form-group.full-width[style*="grid-template-columns"]:not(.calc-grid-search):not(.calc-grid-params):not(.calc-grid-refine),
      .calc-scope div[style*="grid-template-columns: 3fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }
      /* Selects e inputs ocupan todo el ancho en móvil */
      .calc-scope .form-group select,
      .calc-scope .form-group input,
      .calc-scope select[id^="crafteo"],
      .calc-scope select[id^="refine"],
      .calc-scope input[id^="crafteo"],
      .calc-scope input[id^="refine"] {
        max-width: 100% !important;
        width: 100% !important;
      }
      /* Toggle cards (Foco/+10%/+20%): altura original restaurada (FIX v35) */
      .calc-scope .calc-toggle-focus,
      .calc-scope .calc-toggle-bonus10,
      .calc-scope .calc-toggle-bonus20 {
        width: 100% !important;
        height: 42px !important;
        margin-bottom: 0 !important;
      }
      /* Otros toggles que no sean calc-toggle-*: 100% */
      .calc-scope .toggle-card:not(.calc-toggle-focus):not(.calc-toggle-bonus10):not(.calc-toggle-bonus20) {
        width: 100% !important;
        height: 38px !important;
        margin-bottom: 6px !important;
      }
      .calc-scope .toggle-card .toggle-label {
        font-size: 11px !important;
      }
      /* City badges: wrap normal en móvil (NO scroll horizontal que corta bordes) */
      .calc-scope .city-badges-grid,
      .calc-scope .material-badges-grid {
        flex-wrap: wrap !important;
        overflow: visible !important;
        gap: 6px !important;
      }
      .calc-scope .city-badge-btn,
      .calc-scope .mat-badge-btn {
        flex: 1 1 calc(33% - 6px) !important;
        min-width: 0 !important;
        padding: 6px 2px !important;
      }
      .calc-scope .city-badge-img,
      .calc-scope .mat-badge-img {
        width: 28px !important;
        height: 28px !important;
      }
      .calc-scope .city-name,
      .calc-scope .mat-name {
        font-size: 10px !important;
      }
      /* Sentence card (resumen de crafteo): texto más pequeño */
      .calc-scope .sentence-card {
        font-size: 16px !important;
        padding: 14px !important;
      }
      /* Tablas: scroll horizontal */
      .calc-scope .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
      }
      /* Acordeones de refinación: apilar en columna */
      .calc-scope .refine-headers-container,
      .calc-scope .refine-contents-container {
        width: 100% !important;
      }
      .calc-scope .refine-accordion-content {
        padding: 14px !important;
      }
      /* Cards de ingredientes en móvil: apilar */
      .calc-scope .ingredient-row {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 6px !important;
      }
      .calc-scope .ingredient-vals {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 8px !important;
      }
      .calc-scope .ingredient-val-item {
        align-items: flex-start !important;
      }
      /* Panel de Costo de Plata: apilar precio debajo del título */
      .calc-scope .sentence-card > div > div:last-child > div > div {
        flex-direction: column !important;
        align-items: flex-start !important;
      }

      /* === Tabs nav (Crafteo/Refinación): apilar verticalmente en móvil === */
      .calc-scope .tabs-nav {
        flex-direction: column !important;
        gap: 6px !important;
      }
      .calc-scope .tab-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
      }

      /* === Sim-box (simulación): ocupar todo el ancho === */
      .calc-scope .sim-box,
      .calc-scope .sim-toggle-btn {
        width: 100% !important;
        text-align: center !important;
      }

      /* === Refine accordion header: texto más pequeño === */
      .calc-scope .refine-accordion-header {
        padding: 10px 12px !important;
        font-size: 13px !important;
      }

      /* === Cards de materiales: ocupar todo el ancho === */
      .calc-scope .sentence-card > div > div > div > div[style*="flex-wrap:wrap"] > div[style*="min-width"] {
        min-width: 100% !important;
        flex: 1 1 100% !important;
      }
    }

    /* === Responsive adicional para tablet (768px) === */
    @media (max-width: 768px) and (min-width: 601px) {
      .calc-scope .form-group.full-width[style*="grid-template-columns"]:not(.calc-grid-search):not(.calc-grid-params):not(.calc-grid-refine) {
        grid-template-columns: 1fr 1fr !important;
      }
      .calc-scope .sentence-card {
        font-size: 18px !important;
      }
      /* En tablet, los grids de 5-7 columnas colapsan a 3 */
      .calc-scope .calc-grid-params {
        grid-template-columns: 1fr 1fr 1fr !important;
      }
      .calc-scope .calc-grid-refine {
        grid-template-columns: 1fr 1fr 1fr !important;
      }
    }
  

/* === Responsive === */
.calc-scope img {
    max-width: 100% !important;
    height: auto !important;
}

@media (max-width: 600px) {
    .calc-scope .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .calc-scope .city-badges-grid,
    .calc-scope .material-badges-grid {
        flex-wrap: wrap !important;
        overflow: visible !important;
    }
}

/* Compact search input row in item crafting calculator */
.calc-scope .calc-grid-search input,
.calc-scope .calc-grid-search select {
    padding: 8px 12px !important;
    font-size: 13.5px !important;
    height: 38px !important;
    box-sizing: border-box !important;
}

/* Responsive headers row for raw material refining */
.calc-scope .refine-headers-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
}

.calc-scope .refine-headers-container .refine-accordion-header {
    flex: 1 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .calc-scope .refine-headers-container {
        flex-direction: column !important;
        gap: 8px !important;
    }
}

/* =================================================================
   CAT LOADING OVERLAY — Gato durmiendo + "Cargando..."
   Se muestra durante la transición post-login y primera carga
   ================================================================= */
.cat-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(14, 23, 28, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 0.45s ease, visibility 0.45s ease;
    pointer-events: all;
}
.cat-loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.cat-loading-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}
.cat-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: catFadeIn 0.3s ease;
}
.cat-loading-title {
    font-family: 'Outfit', 'Sora', 'DM Sans', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.cat-loading-subtitle {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-top: 8px;
    letter-spacing: 0.3px;
    min-height: 1.4em;
    transition: opacity 0.2s ease;
}
@keyframes catFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === FIX (v6): gatito +20% más grande en PC (468 → 562). Móvil se mantiene. === */
/* === FIX v9: ahora es <img src="cat.webp"> (WebP animado) en vez de dotlottie-player. === */
.cat-lottie-player {
    width: 562px;
    height: 562px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* Optimización: el navegador decodifica el WebP en background sin bloquear el paint */
    content-visibility: auto;
    contain: layout style paint;
}
.cat-webp-anim {
    display: block;
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
@media (max-width: 520px) {
    .cat-lottie-player {
        width: 280px;
        height: 280px;
    }
}

/* =================================================================
   MODO LECTURA — Pestañas visibles pero no interactivas
   Para usuarios no logueados: pueden ver y desplazarse,
   pero no interactuar con botones, inputs, selects, etc.
   ================================================================= */
body.read-only-mode .view-panel input,
body.read-only-mode .view-panel select,
body.read-only-mode .view-panel textarea,
body.read-only-mode .view-panel button:not(.sidebar-nav-item):not(.sidebar-toggle),
body.read-only-mode .view-panel .btn-add,
body.read-only-mode .view-panel .btn-remove,
body.read-only-mode .view-panel .btn-admin-only,
body.read-only-mode .view-panel [contenteditable="true"],
body.read-only-mode .view-panel .clickable-row,
body.read-only-mode .view-panel .market-card,
body.read-only-mode .view-panel .market-item-card,
body.read-only-mode .view-panel .accordion-header,
body.read-only-mode .view-panel .popup-trigger {
    pointer-events: none !important;
    /* === 30% de opacidad === */
    opacity: 0.7;
    cursor: default !important;
}

/* === Modo lectura: Modal de Sorteo — todo no interactivo excepto X === */
body.read-only-mode #sorteoModal input,
body.read-only-mode #sorteoModal select,
body.read-only-mode #sorteoModal textarea,
body.read-only-mode #sorteoModal button {
    pointer-events: none !important;
    /* === FIX: eliminar opacidad === */
    opacity: 1;
    cursor: default !important;
}
/* Solo el botón X (.history-modal-close) es clickeable en modo lectura */
body.read-only-mode #sorteoModal .history-modal-close {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* === Modo lectura: Popups de Mercado — todo no interactivo === */
body.read-only-mode .market-popup,
body.read-only-mode .market-popup-overlay,
body.read-only-mode .market-popup-modal,
body.read-only-mode .market-popup-modal input,
body.read-only-mode .market-popup-modal select,
body.read-only-mode .market-popup-modal textarea,
body.read-only-mode .market-popup-modal button:not(.market-popup-close),
body.read-only-mode .market-popup-modal .popup-trigger,
body.read-only-mode .market-popup-modal [contenteditable="true"],
body.read-only-mode .market-popup-modal .clickable-row {
    pointer-events: none !important;
    /* === FIX: eliminar opacidad === */
    opacity: 1;
    cursor: default !important;
}

/* Permitir cerrar popups de mercado en modo lectura */
body.read-only-mode .market-popup-close {
    pointer-events: auto !important;
    opacity: 1 !important;
}

/* === Modo lectura: Cualquier modal que se abra sin login === */
body.read-only-mode .admin-modal-card input,
body.read-only-mode .admin-modal-card select,
body.read-only-mode .admin-modal-card textarea,
body.read-only-mode .admin-modal-card button:not(.history-modal-close) {
    pointer-events: none !important;
    opacity: 0.6;
    cursor: default !important;
}

/* Permitir cerrar modales en modo lectura (el botón X) */
body.read-only-mode .history-modal-close {
    pointer-events: auto !important;
    opacity: 1 !important;
}

/* Los sidebar nav items siguen funcionando (para navegar entre pestañas) */
body.read-only-mode .sidebar-nav-item {
    pointer-events: auto !important;
    opacity: 1 !important;
}

/* Badge sutil de modo lectura en cada panel */
.read-only-badge {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--accent-purple);
    backdrop-filter: blur(4px);
    animation: badgePulse 3s ease-in-out infinite;
}
.read-only-badge svg {
    width: 18px;
    height: 18px;
    opacity: 0.8;
}
@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

/* Permitir scroll en modo lectura */
body.read-only-mode .view-panel {
    overflow-y: auto !important;
}

/* Restaurar interactividad completa cuando el usuario se loguea */
body:not(.read-only-mode) .read-only-badge {
    display: none !important;
}

/* ============================================================
   FIX v2: POPUPS / MODALES RESPONSIVE — FULL-WIDTH EN MÓVIL
   ============================================================
   Todos los modales (login, history, admin, audit, sorteo, note)
   ahora se adaptan a distintos dispositivos móviles:
   - En móvil (<600px): full-width con padding lateral mínimo (8px),
     border-radius reducido, max-height 92vh con scroll interno.
   - En tablet (600-850px): max-width normal pero padding optimizado.
   - En desktop (>850px): sin cambios (reglas originales).
   ============================================================ */
@media (max-width: 600px) {
    /* === Overlay de todos los modales === */
    #loginModal,
    #historyModal,
    #adminUsersModal,
    #adminUserModal,
    #noteModal,
    #sorteoModal,
    #auditLogModal {
        padding: 8px !important;
    }

    /* === Login card: full-width en móvil === */
    #loginModal .login-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 16px !important;
        border-radius: 12px !important;
        margin: 0 !important;
    }

    /* === History modal: full-width === */
    #historyModal .history-modal-card {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        padding: 18px 14px !important;
        border-radius: 12px !important;
    }
    #historyModal .history-modal-content {
        max-height: 50vh !important;
        padding: 14px !important;
        font-size: 0.82rem !important;
    }
    #historyModal .history-modal-title {
        font-size: 1.1rem !important;
    }

    /* === Admin / Note / Sorteo modales: full-width === */
    #adminUsersModal .admin-modal-card,
    #adminUserModal .admin-modal-card,
    #noteModal .admin-modal-card,
    #sorteoModal .admin-modal-card {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        padding: 18px 14px !important;
        border-radius: 12px !important;
    }
    /* Sorteo modal inline max-width override */
    #sorteoModal .admin-modal-card[style*="max-width"] {
        max-width: 100% !important;
    }

    /* === Audit log modal: full-width === */
    #auditLogModal .audit-modal-card {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        border-radius: 12px !important;
    }

    /* === Grid de admin form: 1 columna en móvil === */
    .admin-modal-grid {
        grid-template-columns: 1fr !important;
    }

    /* === Botones de acción: apilar === */
    .history-modal-actions {
        grid-template-columns: 1fr !important;
    }
}

/* === Tablet (600px-850px): ajustes menores === */
@media (min-width: 601px) and (max-width: 850px) {
    #historyModal .history-modal-card,
    #adminUsersModal .admin-modal-card,
    #adminUserModal .admin-modal-card,
    #noteModal .admin-modal-card,
    #sorteoModal .admin-modal-card,
    #auditLogModal .audit-modal-card {
        max-width: 95% !important;
        max-height: 90vh !important;
    }
}

/* ============================================================
   FIX: SCROLLBAR MÁS GRANDE EN PANEL DE CONTROL (MÓVIL)
   ============================================================ */
@media (max-width: 768px) {
    /* Scrollbar más grande para #panelAdmin y #adminViewControl en móvil */
    #panelAdmin,
    #adminViewControl {
        /* Firefox */
        scrollbar-width: auto !important;
        scrollbar-color: var(--accent-primary, #e06a4a) var(--bg-input-field, transparent);
    }
    /* Webkit (Chrome/Safari/Edge) */
    #panelAdmin::-webkit-scrollbar,
    #adminViewControl::-webkit-scrollbar {
        width: 14px !important;
        height: 14px !important;
        -webkit-appearance: none;
    }
    #panelAdmin::-webkit-scrollbar-track,
    #adminViewControl::-webkit-scrollbar-track {
        background: var(--bg-input-field, rgba(0,0,0,0.1)) !important;
        border-radius: 7px !important;
    }
    #panelAdmin::-webkit-scrollbar-thumb,
    #adminViewControl::-webkit-scrollbar-thumb {
        background: var(--accent-primary, #e06a4a) !important;
        border-radius: 7px !important;
        border: 2px solid var(--bg-input-field, transparent) !important;
        min-height: 40px !important;
    }
    #panelAdmin::-webkit-scrollbar-thumb:hover,
    #adminViewControl::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--accent-primary, #e06a4a) 80%, white) !important;
    }
}

/* ============================================================
   FIX v10: FILTROS FAB — Botón flotante fijo (esquina inferior derecha).
   Reemplaza al "sticky bar" de v8/v9 que se rompía cuando un ancestro
   tenía overflow-x: hidden (sticky pierde efecto porque el navegador
   computa overflow-y: auto, creando un nuevo contexto de scroll).
   position: fixed => SIEMPRE visible sin importar overflow ni scroll.
   El FAB vive en <body> (no dentro de #panelMercado, porque
   .view-panel.active tiene transform: translateY(0) que crea un
   containing block que capturaría position:fixed). Se muestra solo
   cuando la pestaña Mercado está activa (body.market-tab-active).
   Solo visible en móvil (≤768px). En desktop queda oculto.
   ============================================================ */
.market-filters-fab {
    display: none !important;
}
@media (max-width: 768px) {
    /* Solo se muestra cuando Mercado es la pestaña activa */
    body.market-tab-active .market-filters-fab {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 7px;
        position: fixed;
        bottom: 20px;
        right: 16px;
        z-index: 50;
        height: 46px;
        padding: 0 18px;
        font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.3px;
        line-height: 1;
        color: var(--albion-text);
        background: var(--albion-surface);
        border: 1px solid var(--albion-border-strong, var(--albion-border));
        border-radius: 9999px;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        white-space: nowrap;
        box-shadow:
            0 6px 18px rgba(0, 0, 0, 0.45),
            0 2px 6px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
        -webkit-tap-highlight-color: transparent;
    }
    body.market-tab-active .market-filters-fab:hover {
        border-color: var(--albion-gold);
        color: var(--albion-gold);
        background: color-mix(in srgb, var(--albion-gold) 10%, var(--albion-surface));
        transform: translateY(-1px);
        box-shadow:
            0 8px 22px rgba(0, 0, 0, 0.5),
            0 3px 8px rgba(0, 0, 0, 0.4),
            0 0 14px color-mix(in srgb, var(--albion-gold) 30%, transparent);
    }
    body.market-tab-active .market-filters-fab:active {
        transform: scale(0.95);
    }
    body.market-tab-active .market-filters-fab .mtf-icon {
        font-size: 15px;
        line-height: 1;
    }
    body.market-tab-active .market-filters-fab .mtf-label {
        font-size: 13px;
        line-height: 1;
    }
    body.market-tab-active .market-filters-fab .mtf-arrow {
        font-size: 11px;
        line-height: 1;
        opacity: 0.85;
        transition: transform 0.25s ease, opacity 0.2s ease;
        margin-left: 1px;
    }
    /* Estado colapsado: dorado sólido + pulso suave para indicar "hay filtros ocultos" */
    body.market-tab-active .market-filters-fab.is-collapsed {
        background: color-mix(in srgb, var(--albion-gold) 22%, var(--albion-surface));
        border-color: var(--albion-gold);
        color: var(--albion-gold);
        box-shadow:
            0 6px 18px rgba(0, 0, 0, 0.5),
            0 0 18px color-mix(in srgb, var(--albion-gold) 40%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        animation: mtf-pulse 2s ease-in-out infinite;
    }
    body.market-tab-active .market-filters-fab.is-collapsed .mtf-arrow {
        opacity: 1;
        transform: translateY(1px);
    }
    @keyframes mtf-pulse {
        0%, 100% {
            box-shadow:
                0 6px 18px rgba(0, 0, 0, 0.5),
                0 0 14px color-mix(in srgb, var(--albion-gold) 30%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }
        50% {
            box-shadow:
                0 6px 18px rgba(0, 0, 0, 0.5),
                0 0 22px color-mix(in srgb, var(--albion-gold) 55%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }
    }
    /* Cuando el body tiene la clase market-mobile-collapsed,
       ocultar las cards marcadas con .market-mobile-collapsible
       (el toolbar y el stats grid). El FAB no tiene esa clase, así que
       sigue visible. */
    body.market-mobile-collapsed .market-mobile-collapsible {
        display: none !important;
    }
}

/* Wrapper collapsible tiene transición suave */
.market-mobile-collapsible {
    transition: max-height 0.25s ease, opacity 0.2s ease;
}

/* ============================================================
   FIX v7: POPUPS GENERALES — RESPONSIVE MÓVIL MEJORADO
   Antes los modales (login, history, note, sorteo, audit log) se veían
   apretados en móvil: padding excesivo, header desbordado, inputs pequeños.
   Mejoras:
   - Header: padding 10-12px (era 14-18px), gaps reducidos
   - Title: font 1rem (era 1.3rem) para que no ocupe 2 líneas
   - Close button: 36x36px touch-target fácil de tocar
   - Inputs: padding 12px (era 10px) y font 16px (evita zoom iOS)
   - Content: max-height con scroll interno + font 0.8rem
   - Audit filters: 1 columna en móvil (grid auto-fit)
   ============================================================ */
@media (max-width: 600px) {
    /* === Header común a todos los modales === */
    #loginModal .login-card,
    #historyModal .history-modal-card,
    #adminUsersModal .admin-modal-card,
    #adminUserModal .admin-modal-card,
    #noteModal .admin-modal-card,
    #sorteoModal .admin-modal-card,
    #auditLogModal .audit-modal-card {
        max-height: 94vh !important;
        border-radius: 12px !important;
    }

    /* History modal header compacto */
    #historyModal .history-modal-header {
        padding-bottom: 10px !important;
        margin-bottom: 12px !important;
        gap: 10px !important;
    }
    #historyModal .history-modal-title {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }
    #historyModal .history-modal-meta {
        font-size: 0.75rem !important;
        margin-top: 4px !important;
    }
    #historyModal .history-modal-content {
        max-height: 45vh !important;
        padding: 12px !important;
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
        margin-bottom: 14px !important;
    }
    /* History modal close button más grande + accesible */
    #historyModal .history-modal-close,
    #adminUserModal .history-modal-close,
    #noteModal .history-modal-close,
    #sorteoModal .history-modal-close,
    #auditLogModal .audit-modal-close {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
        flex-shrink: 0 !important;
    }
    /* History modal actions: botones full-width apilados */
    #historyModal .history-modal-actions {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    #historyModal .history-modal-actions .btn {
        padding: 11px !important;
        font-size: 0.9rem !important;
    }

    /* Login card más compacta */
    #loginModal .login-card {
        padding: 22px 18px !important;
        gap: 14px !important;
        border-radius: 14px !important;
    }
    #loginModal .login-card input {
        padding: 12px 14px !important;
        font-size: 16px !important; /* evita auto-zoom en iOS */
        border-radius: 8px !important;
    }
    #loginModal .login-card label {
        font-size: 0.8rem !important;
    }
    #loginModal .login-card .btn-primary {
        padding: 12px !important;
        font-size: 0.95rem !important;
    }

    /* Note modal textarea más alto y cómodo */
    #noteModal textarea,
    #noteModal #textNotaReparto {
        font-size: 16px !important; /* evita zoom iOS */
        padding: 12px !important;
        height: 140px !important;
        border-radius: 8px !important;
    }

    /* Sorteo modal: form inputs touch-friendly */
    #sorteoModal .admin-form-group input,
    #sorteoModal .admin-form-group select,
    #sorteoModal .admin-form-group textarea {
        padding: 11px 12px !important;
        font-size: 16px !important; /* evita zoom iOS */
        border-radius: 8px !important;
    }
    #sorteoModal .admin-form-group label {
        font-size: 0.8rem !important;
    }

    /* Audit log modal: filtros en 1 columna (era flex-wrap apretado) */
    #auditLogModal .audit-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 12px !important;
    }
    #auditLogModal .audit-filters > * {
        width: 100% !important;
    }
    #auditLogModal .audit-filters select,
    #auditLogModal .audit-filters input {
        padding: 11px 12px !important;
        font-size: 16px !important; /* evita zoom iOS */
        border-radius: 8px !important;
    }
    #auditLogModal .audit-filters .audit-clear-btn {
        padding: 11px 14px !important;
        font-size: 0.85rem !important;
    }
    /* Audit toolbar: apilar stats + actions */
    #auditLogModal .audit-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 10px 12px !important;
    }
    #auditLogModal .audit-actions {
        display: flex !important;
        gap: 8px !important;
    }
    #auditLogModal .audit-actions .audit-action-btn {
        flex: 1 !important;
        padding: 10px !important;
        font-size: 0.8rem !important;
    }
    #auditLogModal .audit-modal-header {
        padding: 12px 14px !important;
    }
    #auditLogModal .audit-modal-title {
        font-size: 1rem !important;
    }
    #auditLogModal .audit-modal-meta {
        font-size: 0.75rem !important;
    }
    #auditLogModal .audit-list {
        font-size: 0.8rem !important;
    }
    #auditLogModal .audit-list .icon {
        font-size: 2rem !important;
    }

    /* Admin user modal inputs touch-friendly */
    #adminUserModal .admin-input,
    #adminUserModal select,
    #adminUserModal input[type="text"],
    #adminUserModal input[type="email"],
    #adminUserModal input[type="password"],
    #adminUserModal input[type="number"] {
        padding: 11px 12px !important;
        font-size: 16px !important; /* evita zoom iOS */
        border-radius: 8px !important;
    }
    #adminUserModal .admin-modal-actions {
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }
    #adminUserModal .admin-modal-actions button {
        width: 100% !important;
        padding: 12px !important;
    }
}

/* Móvil muy pequeño (<380px) — ajustes extra */
@media (max-width: 380px) {
    #loginModal .login-card {
        padding: 18px 14px !important;
    }
    #historyModal .history-modal-card,
    #adminUserModal .admin-modal-card,
    #noteModal .admin-modal-card,
    #sorteoModal .admin-modal-card {
        padding: 14px 10px !important;
    }
    #auditLogModal .audit-modal-card {
        padding: 0 !important;
    }
    #auditLogModal .audit-filters {
        padding: 10px !important;
    }
}

/* ============================================================
   === PANEL CRAFT/REFINE: Inputs compactos + Toggle fixes ===
   === DUDA 1: Limitar ancho visual + escritura (PC + móvil) ===
   === DUDA 2: Usar Foco — alineación vertical, altura auto, padding generoso (PC + móvil) ===
   === DUDA 3: Actividad Diaria / Bono Diario — padding generoso SOLO en móvil ===
   ============================================================ */

/* --- Anchos compactos para inputs/selects del panel Craft/Refine (PC + móvil) --- */
.calc-scope input.calc-input-2dig,
.calc-scope select.calc-input-2dig {
    width: 60px !important;
    max-width: 60px !important;
    min-width: 60px !important;
    box-sizing: border-box;
}
.calc-scope input.calc-input-3dig,
.calc-scope select.calc-input-3dig {
    width: 75px !important;
    max-width: 75px !important;
    min-width: 75px !important;
    box-sizing: border-box;
}
.calc-scope input.calc-input-4dig,
.calc-scope select.calc-input-4dig {
    width: 85px !important;
    max-width: 85px !important;
    min-width: 85px !important;
    box-sizing: border-box;
}
.calc-scope input.calc-input-8dig,
.calc-scope select.calc-input-8dig {
    width: 130px !important;
    max-width: 130px !important;
    min-width: 130px !important;
    box-sizing: border-box;
}

/* --- Toggle "Usar Foco" (PC): altura automática, alineación vertical, padding generoso --- */
.calc-scope .calc-toggle-focus {
    height: auto !important;
    padding: 12px 16px !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box;
    margin-bottom: 0 !important;
}
.calc-scope .calc-toggle-focus .toggle-label {
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

/* === FIX v36: Botones +10%, +20% y "Usar Foco" — anchos específicos en ch ===
   El usuario pidió: "Usar Foco" = 10 digitos, "+10%" = 5 digitos, "+20%" = 5 digitos.
   Usamos ch (ancho del caracter "0") para el label, y el grid usa columnas auto
   para que el botón se ajuste al contenido (checkbox + label + padding). === */
.calc-scope .calc-toggle-focus {
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 12px 14px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    height: auto !important;
    align-items: center !important;
}
.calc-scope .calc-toggle-focus .toggle-label {
    line-height: 1.3 !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    width: 10ch !important;
    text-align: center !important;
}

.calc-scope .calc-toggle-bonus10,
.calc-scope .calc-toggle-bonus20 {
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 12px 10px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    height: auto !important;
    align-items: center !important;
    justify-content: center !important;
}
.calc-scope .calc-toggle-bonus10 .toggle-label,
.calc-scope .calc-toggle-bonus20 .toggle-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    width: 5ch !important;
    text-align: center !important;
}
.calc-scope .calc-toggle-bonus10 input[type="checkbox"],
.calc-scope .calc-toggle-bonus20 input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

/* === FIX v37: Toggle wrapper para alinear toggles con inputs (solo PC) ===
   El wrapper añade un label-spacer invisible que ocupa el mismo espacio que
   el label de los inputs, así los toggles se alinean verticalmente con los
   campos Cantidad/Devolución/Tasa. Solo se aplica en PC (>= 769px); en móvil
   el wrapper se "aplana" para no afectar el layout existente. */
@media (min-width: 769px) {
    .calc-scope .calc-toggle-wrapper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-end;
    }
    .calc-scope .calc-toggle-label-spacer {
        font-size: 11px;
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        opacity: 0;
        line-height: 1;
        height: 15px;
        display: block;
    }
}

/* ============================================================
   === REDESIGN MÓVIL: Layout elegante + ordenado ===
   === Inputs llenan su celda del grid (alineación perfecta) ===
   === Toggles más grandes, touch-friendly, con jerarquía visual ===
   ============================================================ */
@media (max-width: 768px) {
    /* === Inputs/selects: 100% width para llenar celdas del grid 2-col ===
       Mantenemos maxlength (limita escritura) pero el ancho visual se adapta
       a la celda → alineación perfecta sin espacios vacíos. */
    .calc-scope input.calc-input-2dig,
    .calc-scope select.calc-input-2dig,
    .calc-scope input.calc-input-3dig,
    .calc-scope select.calc-input-3dig,
    .calc-scope input.calc-input-4dig,
    .calc-scope select.calc-input-4dig,
    .calc-scope input.calc-input-8dig,
    .calc-scope select.calc-input-8dig {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* === Grid de Crafteo: layout limpio 2-col + toggles apilados ===
       SWAP VISUAL (solo móvil): qty → full-width row (donde estaba fee)
       para que "Cantidad a craftear" tenga más campo visual.
       fee sube a la fila 1 junto con rrr.
       qty | rrr   →   fee | rrr
       fee (full)      qty (full)
       FIX v33: ahora hay 3 toggles (focus, +10%, +20%) en una fila de 3 cols */
    .calc-scope .calc-grid-params {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
          "fee rrr"
          "qty qty"
          "focus focus"
          "daily10 daily20" !important;
        gap: 12px !important;
        margin-top: 12px !important;
    }
    .calc-scope .calc-grid-params .form-group:nth-child(1) { grid-area: qty !important; }
    .calc-scope .calc-grid-params .form-group:nth-child(2) { grid-area: rrr !important; }
    .calc-scope .calc-grid-params .form-group:nth-child(3) { grid-area: fee !important; }
    /* === FIX v37: toggles ahora están dentro de .calc-toggle-wrapper.
       Asignamos grid-area a los wrappers directamente. === */
    .calc-scope .calc-grid-params .calc-toggle-wrapper { display: flex !important; flex-direction: column !important; }
    .calc-scope .calc-grid-params .calc-toggle-wrapper:nth-child(4) { grid-area: focus !important; }
    .calc-scope .calc-grid-params .calc-toggle-wrapper:nth-child(5) { grid-area: daily10 !important; }
    .calc-scope .calc-grid-params .calc-toggle-wrapper:nth-child(6) { grid-area: daily20 !important; }
    /* En móvil, el label-spacer está oculto (no se necesita alineación) */
    .calc-scope .calc-toggle-label-spacer { display: none !important; }

    /* === Grid de Refinación: layout limpio 2-col + toggles apilados ===
       SWAP VISUAL (solo móvil): qty → full-width row (donde estaba rrr)
       para que "Cantidad a obtener" / "Stock en bruto" tenga más campo visual.
       rrr sube a la fila 2 junto con fee.
       tier | ench
       qty  | fee   →   rrr | fee
       rrr  | rrr       qty  | qty (full)
       FIX v33: ahora hay 3 toggles (focus, +10%, +20%) */
    .calc-scope .calc-grid-refine {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
          "tier ench"
          "rrr fee"
          "qty qty"
          "focus focus"
          "daily10 daily20" !important;
        gap: 12px !important;
        margin-top: 12px !important;
    }
    .calc-scope .calc-grid-refine .calc-field-tier { grid-area: tier !important; }
    .calc-scope .calc-grid-refine .calc-field-ench { grid-area: ench !important; }
    .calc-scope .calc-grid-refine .form-group:nth-child(3) { grid-area: qty !important; }
    .calc-scope .calc-grid-refine .form-group:nth-child(4) { grid-area: fee !important; }
    .calc-scope .calc-grid-refine .form-group:nth-child(5) { grid-area: rrr !important; }
    /* === FIX v37: toggles ahora están dentro de .calc-toggle-wrapper.
       En calc-grid-refine hay 5 form-groups + 3 wrappers = 8 hijos.
       Los wrappers son los hijos 6, 7, 8. === */
    .calc-scope .calc-grid-refine .calc-toggle-wrapper { display: flex !important; flex-direction: column !important; }
    .calc-scope .calc-grid-refine .calc-toggle-wrapper:nth-child(6) { grid-area: focus !important; }
    .calc-scope .calc-grid-refine .calc-toggle-wrapper:nth-child(7) { grid-area: daily10 !important; }
    .calc-scope .calc-grid-refine .calc-toggle-wrapper:nth-child(8) { grid-area: daily20 !important; }

    /* === Inputs en móvil: padding más compacto, font-size legible === */
    .calc-scope .calc-grid-params input,
    .calc-scope .calc-grid-params select,
    .calc-scope .calc-grid-refine input,
    .calc-scope .calc-grid-refine select {
        padding: 10px 12px !important;
        font-size: 14px !important;
        text-align: center !important;
    }
    /* Cantidad/Stock: alineado a la izquierda como número */
    .calc-scope .calc-grid-params input.calc-input-8dig,
    .calc-scope .calc-grid-refine input.calc-input-8dig {
        text-align: left !important;
    }

    /* === Labels: tamaño consistente, espaciado uniforme === */
    .calc-scope .calc-grid-params label,
    .calc-scope .calc-grid-refine label {
        font-size: 11px !important;
        margin-bottom: 4px !important;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        opacity: 0.85;
    }

    /* === Toggles (Usar Foco / +10% / +20%): altura restaurada, touch-friendly ===
       FIX v36: mantener los anchos ch del label (10ch / 5ch) en móvil también. */
    .calc-scope .calc-toggle-focus,
    .calc-scope .calc-toggle-bonus10,
    .calc-scope .calc-toggle-bonus20 {
        height: auto !important;
        min-height: 48px !important;
        padding: 12px 10px !important;
        align-items: center !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        background-color: var(--albion-surface-subtle, rgba(255,255,255,0.03)) !important;
        border: 1px solid var(--albion-border) !important;
        border-radius: 10px !important;
        transition: all 0.2s ease !important;
    }
    /* Toggle activo: highlight dorado */
    .calc-scope .calc-toggle-focus.active,
    .calc-scope .calc-toggle-daily.active {
        border-color: var(--albion-gold) !important;
        background-color: rgba(220, 161, 52, 0.08) !important;
    }

    /* +10%/+20% en móvil: lado a lado, centrados */
    .calc-scope .calc-toggle-bonus10,
    .calc-scope .calc-toggle-bonus20 {
        justify-content: center !important;
    }

    /* Checkbox touch-friendly (todos los toggles) */
    .calc-scope .calc-toggle-focus input[type="checkbox"],
    .calc-scope .calc-toggle-bonus10 input[type="checkbox"],
    .calc-scope .calc-toggle-bonus20 input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
        accent-color: var(--albion-gold) !important;
    }

    /* === FIX v36: Label con ancho ch específico (igual que PC) === */
    .calc-scope .calc-toggle-focus .toggle-label {
        font-size: 13px !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        font-weight: 600 !important;
        color: var(--albion-text) !important;
        width: 10ch !important;
        text-align: center !important;
    }
    .calc-scope .calc-toggle-bonus10 .toggle-label,
    .calc-scope .calc-toggle-bonus20 .toggle-label {
        font-size: 13px !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        font-weight: 600 !important;
        color: var(--albion-text) !important;
        width: 5ch !important;
        text-align: center !important;
    }
}




/* ========================================================== */
/* === ADMIN MOBILE REDESIGN (v3) === */
/* ========================================================== */
/* Problemas detectados en movil (iPhone 14 viewport):
   1. Header del panel: titulo + boton "Crear Cuenta Temporal" se solapan
   2. Tabs (Panel Control / Favoritos / Configuracion) muy pegadas, texto pequeno
   3. Tabla de usuarios: fuerza scroll horizontal, columnas cortadas
      ("PROVEEDOR" se ve "PROVEEDO"), checkboxes ilegibles
   4. Pagination: "Mostrando X-Y" + botones en una fila se desborda
   5. Formulario de Configuracion:
      - adm-block sections pegadas (falta separacion vertical)
      - adm-row fields en una fila -> muy estrechos en movil
      - adm-tabs-grid (pestanas permitidas) muy apretado
      - inputs con padding insuficiente (touch target < 44px)
      - botones "Todos / Ninguno" pegados al buscador
   6. Botones de accion de la tabla: touch target < 44px

   Solucion: redise~o mobile-first con:
   - Header: stack vertical (titulo arriba, boton abajo full-width)
   - Tabs: grid 3-col full-width con texto mas legible
   - Tabla: convertir a cards (cada <tr> es un card, cada <td> es una fila
     con label ::before). No mas scroll horizontal.
   - Pagination: stack vertical
   - adm-block: mas gap vertical entre sections
   - adm-row: stack vertical en movil
   - adm-tabs-grid: 2 columnas con checkboxes mas grandes
   - Inputs: padding 14px (touch target ~48px)
   - Botones: padding 12px (touch target ~48px)
*/

@media (max-width: 768px) {
    /* === 1. Header del panel admin: stack vertical === */
    #panelAdmin .admin-panel-card > div:first-of-type {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    #panelAdmin .admin-panel-card > div:first-of-type > div:first-child {
        width: 100% !important;
    }
    #panelAdmin .admin-panel-card > div:first-of-type > button {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 16px !important;
        font-size: 0.95rem !important;
    }
    /* Reducir tamano del titulo en movil */
    #panelAdmin .admin-panel-card h2 {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
    }
    #panelAdmin .admin-panel-card > div:first-of-type p {
        font-size: 0.78rem !important;
        line-height: 1.4 !important;
    }

    /* === 2. Tabs (Panel Control / Favoritos / Configuracion) === */
    #panelAdmin .admin-panel-card > div:nth-of-type(2) {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }
    #panelAdmin .admin-panel-card > div:nth-of-type(2) > button {
        padding: 10px 6px !important;
        font-size: 0.74rem !important;
        text-align: center !important;
        justify-content: center !important;
        line-height: 1.2 !important;
        min-height: 44px !important; /* Apple HIG touch target */
    }
    /* Botones con icono + label — permitir wrap si hace falta */
    #panelAdmin .admin-panel-card > div:nth-of-type(2) > button > span:not([id]) {
        font-size: 0.72rem !important;
    }

    /* === 3. Buscador: full-width === */
    #adminUserSearch {
        max-width: 100% !important;
        padding: 12px 14px !important;
        font-size: 0.95rem !important;
        min-height: 44px !important;
    }

    /* === 4. TABLA -> CARDS (mobile-only) ===
       Cada <tr> se convierte en un card con border.
       Cada <td> se muestra como una fila con label ::before.
       Se oculta el <thead> porque las labels ya estan en cada td. */
    #adminUsersTable,
    #adminUsersTable thead,
    #adminUsersTable tbody,
    #adminUsersTable tr,
    #adminUsersTable th,
    #adminUsersTable td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #adminUsersTable {
        border: none !important;
        min-width: 0 !important;
    }
    /* Ocultar headers — las labels van en cada td via ::before */
    #adminUsersTable thead {
        display: none !important;
    }
    /* Eliminar el scroll horizontal del contenedor */
    #panelAdmin .admin-panel-card > div[style*="overflow-x"] {
        overflow-x: visible !important;
    }
    /* Cada fila = card */
    #adminUsersTable tbody tr {
        background: var(--bg-input-field) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: relative !important;
    }
    /* Cada td = fila dentro del card */
    #adminUsersTable tbody td {
        padding: 10px 14px !important;
        text-align: left !important;
        border-bottom: 1px solid rgba(255,255,255,0.04) !important;
        position: static !important; /* override sticky */
        background: transparent !important;
        z-index: auto !important;
        min-height: 0 !important;
        font-size: 0.85rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
    #adminUsersTable tbody td:last-child {
        border-bottom: none !important;
    }
    /* Label ::before con el nombre de la columna */
    #adminUsersTable tbody td::before {
        content: attr(data-label);
        font-weight: 700 !important;
        color: var(--text-muted) !important;
        font-size: 0.7rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        flex: 0 0 auto !important;
        margin-right: auto !important;
    }
    /* Primera celda (Usuario/Correo): full-width, destacada */
    #adminUsersTable tbody td:first-child {
        background: rgba(0, 212, 255, 0.04) !important;
        padding: 14px !important;
        padding-right: 50px !important; /* espacio para el boton favorito flotante */
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    #adminUsersTable tbody td:first-child::before {
        content: "Usuario";
    }
    /* Celdas de checkboxes (pestanas): mas compactas */
    #adminUsersTable tbody td:nth-child(6),
    #adminUsersTable tbody td:nth-child(7),
    #adminUsersTable tbody td:nth-child(8),
    #adminUsersTable tbody td:nth-child(9),
    #adminUsersTable tbody td:nth-child(10),
    #adminUsersTable tbody td:nth-child(11),
    #adminUsersTable tbody td:nth-child(12),
    #adminUsersTable tbody td:nth-child(13) {
        padding: 8px 14px !important;
        min-height: 0 !important;
    }
    #adminUsersTable tbody td:nth-child(6)::before { content: "Reparto"; }
    #adminUsersTable tbody td:nth-child(7)::before { content: "Historial"; }
    #adminUsersTable tbody td:nth-child(8)::before { content: "Estadist."; }
    #adminUsersTable tbody td:nth-child(9)::before { content: "Crear Raid"; }
    #adminUsersTable tbody td:nth-child(10)::before { content: "Mercado"; }
    #adminUsersTable tbody td:nth-child(11)::before { content: "Config Raid"; }
    #adminUsersTable tbody td:nth-child(12)::before { content: "Sorteo"; }
    #adminUsersTable tbody td:nth-child(13)::before { content: "Sync Datos"; }
    /* Checkboxes mas grandes en movil */
    #adminUsersTable tbody input[type="checkbox"] {
        transform: scale(1.4) !important;
        width: 20px !important;
        height: 20px !important;
    }
    /* Celula Dias (5ta) */
    #adminUsersTable tbody td:nth-child(5)::before { content: "Dias"; }
    /* Celula Proveedor (3ra) */
    #adminUsersTable tbody td:nth-child(3)::before { content: "Proveedor"; }
    /* Celula Favorito (2da) — posicionar absolutamente arriba a la derecha */
    #adminUsersTable tbody td:nth-child(2) {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        z-index: 2 !important;
        min-height: 0 !important;
    }
    #adminUsersTable tbody td:nth-child(2)::before {
        content: "" !important;
    }
    #adminUsersTable tbody td:nth-child(2) button {
        font-size: 1.3rem !important;
        padding: 6px !important;
    }
    /* Celula Rol (4ta) */
    #adminUsersTable tbody td:nth-child(4)::before { content: "Rol"; }
    /* Celula Canales (14) */
    #adminUsersTable tbody td:nth-child(14)::before { content: "Canales"; }
    /* Celula Servidores (15) */
    #adminUsersTable tbody td:nth-child(15)::before { content: "Servidores"; }
    /* Celula Acciones (16) — botones full-width */
    #adminUsersTable tbody td:nth-child(16) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        background: rgba(0,0,0,0.15) !important;
    }
    #adminUsersTable tbody td:nth-child(16)::before { content: "Acciones"; }
    #adminUsersTable tbody td:nth-child(16) div {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        width: 100% !important;
    }
    #adminUsersTable tbody td:nth-child(16) button {
        width: 100% !important;
        padding: 10px 8px !important;
        font-size: 0.78rem !important;
        min-height: 40px !important;
        justify-content: center !important;
    }
    /* Esconder versiones "cortas" del username (mostrar siempre el completo) */
    #adminUsersTable tbody .admin-user-short,
    #adminUsersTable tbody .admin-id-short {
        display: none !important;
    }
    #adminUsersTable tbody .admin-user-full,
    #adminUsersTable tbody .admin-id-full {
        display: inline !important;
    }
    /* Emails/IDs largos: permitir wrap */
    #adminUsersTable tbody .admin-id-cell {
        word-break: break-all !important;
        font-size: 0.72rem !important;
    }

    /* === 5. Pagination: stack vertical === */
    #adminPagination {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }
    #adminPagination > span {
        text-align: center !important;
        font-size: 0.78rem !important;
    }
    #adminPagination > div {
        justify-content: center !important;
    }
    #adminPagination button {
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
        min-height: 44px !important;
    }

    /* === 6. Formulario de Configuracion (adm-block) === */
    /* Mas separacion vertical entre secciones del form */
    #adminUserConfigForm {
        gap: 20px !important;
    }
    /* Header de cada seccion: padding mas generoso */
    #panelAdmin .adm-block-head {
        padding: 14px 16px !important;
        font-size: 0.78rem !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    #panelAdmin .adm-block-hint {
        flex-basis: 100% !important;
        margin-left: 0 !important;
        font-size: 0.72rem !important;
        opacity: 0.85 !important;
    }
    /* Content padding mas generoso */
    #panelAdmin .adm-block-content {
        padding: 16px !important;
    }
    /* adm-row: stack vertical en movil */
    #panelAdmin .adm-row {
        flex-direction: column !important;
        gap: 14px !important;
    }
    #panelAdmin .adm-field {
        margin-bottom: 0 !important;
    }
    /* Inputs: padding mas generoso + touch target 44px+ */
    #panelAdmin .adm-input {
        padding: 13px 14px !important;
        font-size: 0.95rem !important;
        min-height: 44px !important;
    }
    #panelAdmin .adm-label {
        font-size: 0.78rem !important;
        margin-bottom: 6px !important;
    }
    /* Dias + Ilimitado: checkbox mas grande */
    #adminConfigDaysUnlimited {
        width: 20px !important;
        height: 20px !important;
    }
    /* adm-tabs-grid: 2 columnas, mas espacio */
    #panelAdmin .adm-tabs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    #panelAdmin .adm-tab {
        padding: 12px 12px !important;
        font-size: 0.82rem !important;
        min-height: 48px !important;
    }
    #panelAdmin .adm-tab input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
    }
    /* adm-search-row: stack vertical, botones Todos/Ninguno en otra fila */
    #panelAdmin .adm-search-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    #panelAdmin .adm-search-row > div:not(.adm-search-input) {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    #panelAdmin .adm-mini-btn {
        padding: 11px 14px !important;
        font-size: 0.8rem !important;
        min-height: 44px !important;
        text-align: center !important;
    }
    /* Lista de canales: 1 columna en movil muy estrecho */
    #panelAdmin .adm-channels {
        grid-template-columns: 1fr !important;
        max-height: 280px !important;
    }
    /* Callouts: padding mas generoso */
    #panelAdmin .adm-callout {
        padding: 12px 14px !important;
        font-size: 0.78rem !important;
        line-height: 1.55 !important;
    }
    /* Botones Guardar/Cancelar: full-width stack */
    #adminUserConfigForm > div[style*="justify-content: flex-end"] {
        flex-direction: column-reverse !important;
        gap: 10px !important;
    }
    #adminUserConfigForm .adm-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 13px 18px !important;
        font-size: 0.95rem !important;
        min-height: 48px !important;
    }
    /* Boton "Volver al Panel de Control" */
    #adminViewConfig > div:first-child button {
        padding: 11px 14px !important;
        font-size: 0.85rem !important;
        min-height: 44px !important;
    }
    /* Header de configuracion (con icono + titulo) */
    #panelAdmin .adm-config-header {
        padding: 16px !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    #panelAdmin .adm-config-header h2 {
        font-size: 1.05rem !important;
    }
    /* Padding general del panel-card en movil */
    #panelAdmin .admin-panel-card {
        padding: 14px !important;
    }
}

/* === Movil muy estrecho (<= 400px): labels a una columna === */
@media (max-width: 400px) {
    #panelAdmin .adm-tabs-grid {
        grid-template-columns: 1fr !important;
    }
    /* En cards, las celdas de checkbox pueden ocupar menos espacio */
    #adminUsersTable tbody td:nth-child(6),
    #adminUsersTable tbody td:nth-child(7),
    #adminUsersTable tbody td:nth-child(8),
    #adminUsersTable tbody td:nth-child(9),
    #adminUsersTable tbody td:nth-child(10),
    #adminUsersTable tbody td:nth-child(11),
    #adminUsersTable tbody td:nth-child(12),
    #adminUsersTable tbody td:nth-child(13) {
        padding: 6px 14px !important;
    }
    #adminUsersTable tbody input[type="checkbox"] {
        transform: scale(1.3) !important;
    }
}