@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* Alineado con oneway-navbar (--ow-nav-height); evita tarjeta descentrada bajo nav fija */
    --ow-nav-height: 72px;

    /* Colors - PREMIUM DARK (Exclusive) */
    --bg-base: #080a0f;
    --bg-surface: rgba(17, 21, 31, 0.65);
    --bg-surface-hover: rgba(28, 35, 51, 0.85);
    --bg-glass: rgba(10, 14, 23, 0.75);
    --bg-input: rgba(0, 0, 0, 0.35);
    /* Member-row: dark keeps the original near-invisible white tint (not the opaque surface) */
    --member-row-bg: rgba(255, 255, 255, 0.02);
    --member-row-bg-hover: rgba(255, 255, 255, 0.04);

    --primary: #5865F2;
    --primary-hover: #4752C4;
    --primary-glow: rgba(88, 101, 242, 0.35);
    --primary-rgb: 88, 101, 242;

    --secondary: #4f46e5;
    
    --accent: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;

    --text-primary: #ffffff;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;

    --border: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Effects */
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    --glass-blur: blur(25px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);

    --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] {
    --bg-base: #f1f5f9;
    --bg-surface: #ffffff;
    --bg-surface-hover: #eef2f6;
    --bg-glass: rgba(255, 255, 255, 0.9);
    --bg-input: #e2e8f0;

    --text-primary: #0f172a;
    --text-main: #334155;
    --text-muted: #64748b;
    --border: rgba(0, 0, 0, 0.1);

    --primary-glow: rgba(88, 101, 242, 0.1);
    --member-row-bg: #ffffff;
    --member-row-bg-hover: #f8fafc;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 10px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
}

[data-theme="light"] .imsg-input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
}

[data-theme="light"] .modal-overlay {
    background: rgba(226, 232, 240, 0.7) !important;
    backdrop-filter: blur(10px) !important;
}

[data-theme="light"] .imsg-input::placeholder {
    color: #94a3b8 !important;
}

[data-theme="light"] .modal-content {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
    color: #1e293b !important;
}

[data-theme="light"] .modal-body,
[data-theme="light"] .modal-title,
[data-theme="light"] .modal-header h3 {
    color: #0f172a !important;
}

[data-theme="light"] .btn-ios {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .btn-ios-primary {
    background: linear-gradient(135deg, #5865f2, #4752c4) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3) !important;
}

[data-theme="light"] .btn-ios:hover {
    background: #e2e8f0 !important;
}

[data-theme="light"] .btn-ios-primary:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-1px) !important;
}

[data-theme="light"] .btn-ios {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

[data-theme="light"] .btn-ios:hover {
    background: #e2e8f0 !important;
}

[data-theme="light"] .overview-banner-content h1 {
    color: #ffffff !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    background: transparent;
}

[data-theme="light"] .overview-banner-content div {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    font-weight: 500;
}

[data-theme="light"] .card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .overview-banner-bg {
    filter: brightness(0.8) saturate(1.1) !important;
}

/* LIGHT-CHAT-V99 — Social & Comunidad light-mode legibility fix */
[data-theme="light"] .msg-v2:hover {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .chat-sidebar-v2,
[data-theme="light"] .chat-sidebar-v3 {
    background: #f1f5f9 !important;
    border-right: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .chat-sidebar-header {
    color: #475569 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: #ffffff;
}

[data-theme="light"] .chat-sidebar-header .btn-icon {
    color: #475569;
}

[data-theme="light"] .chat-sidebar-header .btn-icon:hover {
    color: #0f172a;
    background: #e2e8f0;
}

[data-theme="light"] .chat-category-v2 {
    color: #334155 !important;
    font-weight: 800;
    letter-spacing: 0.6px;
}

[data-theme="light"] .cat-arrow {
    color: #64748b;
    opacity: 0.9;
}

[data-theme="light"] .chat-channels-v2 {
    background: #f1f5f9;
}

[data-theme="light"] .channel-v2 {
    color: #475569;
}

[data-theme="light"] .channel-v2:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
}

[data-theme="light"] .channel-v2.active {
    background: rgba(88, 101, 242, 0.14);
    color: #4338ca;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(88, 101, 242, 0.12);
}

[data-theme="light"] .channel-v2-icon {
    color: #5865F2;
    opacity: 0.85;
}

[data-theme="light"] .chat-content-v3 {
    background: #ffffff;
}

[data-theme="light"] .chat-navbar {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .chat-navbar-title {
    color: #1e293b;
}

[data-theme="light"] .chat-messages-v3 {
    background: #f8fafc;
}

[data-theme="light"] .chat-messages-v3 .empty-state h3 {
    color: #0f172a !important;
}

[data-theme="light"] .chat-messages-v3 .empty-state p {
    color: #475569 !important;
}

[data-theme="light"] .msg-v2-text {
    color: #334155;
}

[data-theme="light"] .msg-v2-author {
    font-weight: 700;
}

[data-theme="light"] .msg-v2-avatar {
    border: 2px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .msg-v2-time {
    color: #64748b;
}

[data-theme="light"] .reply-line {
    border-left: 2px solid #cbd5e1;
    border-top: 2px solid #cbd5e1;
}

[data-theme="light"] .reply-text {
    color: #475569;
}

[data-theme="light"] .chat-reply-bar {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}

[data-theme="light"] .chat-input-row-v3 {
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
}

[data-theme="light"] .chat-input-wrapper-v3 {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .chat-input-wrapper-v3:focus-within {
    border-color: #5865F2;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.15);
}

[data-theme="light"] #chat-input {
    color: #1e293b;
}

[data-theme="light"] #chat-input::placeholder {
    color: #94a3b8;
}

[data-theme="light"] .btn-add-file {
    color: #64748b !important;
}

[data-theme="light"] .btn-add-file:hover {
    color: #334155 !important;
}

[data-theme="light"] .reaction-v2 {
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: #334155;
}

[data-theme="light"] .reaction-v2:hover {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .stat-value {
    color: #1e293b;
}

[data-theme="light"] .stat-label {
    color: #64748b;
}

[data-theme="light"] .data-name {
    color: #1e293b;
}

[data-theme="light"] .data-meta {
    color: #64748b;
}

[data-theme="light"] .tabs {
    background: #e2e8f0;
}

[data-theme="light"] .tab.active {
    background: #ffffff;
    color: #5865F2;
}

[data-theme="light"] .sidebar {
    background: #ffffff;
}

[data-theme="light"] .nav-item:hover, [data-theme="light"] .nav-item.active {
    background: rgba(var(--primary-rgb), 0.08);
}

[data-theme="light"] .top-navbar {
    background: #ffffff;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-base);
    color: var(--text-main);
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ════════════ Animated Background ════════════ */
.bg-aurora {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle at 50% 50%, rgba(88, 101, 242, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(87, 242, 135, 0.08) 0%, transparent 30%),
        radial-gradient(circle at 20% 80%, rgba(237, 66, 69, 0.05) 0%, transparent 30%);
    animation: aurora-rotate 60s linear infinite;
    z-index: -2;
}

@keyframes aurora-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    opacity: 0.4;
    pointer-events: none;
}

/* ════════════ Typography & Utilities ════════════ */
h1,
h2,
h3,
h4 {
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.02em;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

a:hover {
    color: var(--primary-hover);
    filter: drop-shadow(0 0 8px var(--primary-glow));
}

/* LIGHT-MODE FIX: links en azul claro (#5B8CFF) ilegibles sobre fondo blanco → indigo oscuro accesible */
[data-theme="light"] a { color: #4338ca; }
[data-theme="light"] a:hover { color: #3730a3; }

/* ════════════ Top Navbar ════════════ */
.top-navbar {
    height: 70px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-logo {
    height: 32px;
    width: 32px;
    border-radius: 8px;
}

.nav-brand {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.nav-links {
    display: flex;
    gap: 24px;
}

.nav-link {
    font-weight: 500;
    color: var(--text-muted);
    padding: 8px 12px;
    border-radius: 6px;
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-main);
    background: var(--bg-surface);
}

/* Reduce salto lateral cuando aparece scrollbar (centrado estable al escalar) */
html {
    scrollbar-gutter: stable;
}

/* ════════════ Login Screen (Glassmorphism) ════════════ */
.login-screen {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--ow-nav-height, 72px);
    bottom: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 50;
    padding-left: clamp(16px, 3.5vmin, 40px);
    padding-right: clamp(16px, 3.5vmin, 40px);
    padding-top: clamp(16px, 3.5vmin, 40px);
    padding-bottom: max(clamp(16px, 3.5vmin, 40px), env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* LOGIN-FROST 2026-06-12: fondo difuminado (frosted) con tinte de marca. */
    background:
        radial-gradient(46vmin 40vmin at 14% 20%, rgba(88,101,242,0.30), transparent 62%),
        radial-gradient(42vmin 38vmin at 86% 84%, rgba(111,224,255,0.18), transparent 62%),
        rgba(8, 9, 15, 0.50);
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
}
[data-theme="light"] .login-screen {
    background:
        radial-gradient(46vmin 40vmin at 14% 20%, rgba(88,101,242,0.16), transparent 62%),
        radial-gradient(42vmin 38vmin at 86% 84%, rgba(14,165,233,0.12), transparent 62%),
        rgba(238, 241, 250, 0.58);
}

.login-card {
    width: 100%;
    max-width: min(420px, calc(100% - clamp(24px, 6vmin, 48px)));
    margin-inline: auto;
    padding: clamp(26px, 4vmin, 42px);
    box-sizing: border-box;
    background: var(--bg-glass);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: clamp(18px, 2.5vmin, 26px);
    box-shadow: var(--shadow-lg), 0 0 48px rgba(88, 101, 242, 0.18);
    text-align: center;
    animation: fade-in-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
}

.login-card.login-card--link {
    max-width: min(96vw, 720px);
    box-shadow: var(--shadow-lg), 0 0 56px rgba(139, 92, 246, 0.15);
}

.login-hero {
    margin-block: 0 clamp(18px, 2.8vmin, 26px);
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-logo-wrap {
    position: relative;
    margin: 0 auto clamp(14px, 2.5vmin, 20px);
    width: 80px;
    height: 80px;
}

.login-logo {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    position: relative;
    z-index: 2;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.login-title {
    font-size: clamp(1.45rem, 4.2vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
    line-height: 1.15;
}

.login-subtitle {
    color: var(--text-muted);
    font-size: clamp(0.875rem, 2.2vw, 0.95rem);
    margin-bottom: 0;
    line-height: 1.45;
    max-width: 36ch;
    margin-inline: auto;
}

.auth-tabs {
    display: flex;
    gap: 6px;
    margin-block: 0 clamp(18px, 2.8vmin, 26px);
    background: rgba(0, 0, 0, 0.28);
    border-radius: 12px;
    padding: 5px;
    border: 1px solid var(--border);
    width: 100%;
    box-sizing: border-box;
}

.auth-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px clamp(8px, 2vmin, 14px);
    text-align: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: clamp(0.8125rem, 2vw, 0.9375rem);
    cursor: pointer;
    border-radius: 9px;
    transition: var(--transition-fast);
    min-height: 46px;
}

.auth-tab:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.auth-tab.active {
    background: var(--bg-surface-hover);
    color: var(--text-main);
    box-shadow: var(--shadow-sm);
}

.auth-forms-container {
    text-align: left;
    width: 100%;
}

.auth-form {
    text-align: left;
}

/* Login: espaciado vertical simétrico entre campos y botón */
.auth-form:not(.auth-form--link) {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.2vmin, 20px);
}

.auth-form--link .btn-primary {
    margin-top: 4px;
}

.auth-form-lead {
    font-size: clamp(0.875rem, 2.1vw, 0.9375rem);
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 clamp(18px, 2.5vw, 22px);
    text-align: center;
}

.login-card--link .auth-form-lead {
    text-align: left;
}

@media (min-width: 680px) {
    .login-card--link .auth-form-lead {
        text-align: center;
        max-width: 52ch;
        margin-left: auto;
        margin-right: auto;
    }
}

.auth-fields-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(14px, 2.2vw, 18px);
    align-items: start;
}

@media (min-width: 680px) {
    .auth-fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(16px, 2vw, 20px);
    }
}

.auth-field-span {
    grid-column: 1 / -1;
}

.auth-register-hint {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: var(--text-main);
    font-size: clamp(0.8125rem, 2vw, 0.875rem);
    line-height: 1.45;
    text-align: left;
}

.auth-register-hint strong {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--warning);
    margin-bottom: 4px;
}

.auth-register-hint p {
    margin: 0;
    color: var(--text-muted);
}

.auth-register-hint code {
    font-family: var(--font-mono);
    font-size: 0.8em;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.25);
}

.auth-register-hint__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
    font-size: 1rem;
    font-weight: 700;
}

.login-error-box {
    margin-top: clamp(14px, 2.2vmin, 20px);
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: var(--danger);
    font-size: clamp(0.8125rem, 2vw, 0.9rem);
    line-height: 1.45;
    text-align: left;
}

/* ════════════════════════════════════════════════════════════════════
   LOGIN ONE WAY — split de dos paneles (remodel v2, 2026-06-12).
   Panel de marca (showcase) + panel de auth, dentro de un contenedor
   premium. Colapsa a una columna en móvil. Más moderno, atractivo e
   intuitivo, con identidad OneWay.
   ════════════════════════════════════════════════════════════════════ */
/* Orbes ambientales detrás del stage (solo login). */
.login-screen::before, .login-screen::after {
    content: ''; position: fixed; border-radius: 50%; filter: blur(80px);
    opacity: 0.5; pointer-events: none; z-index: -1;
}
.login-screen::before { width: 50vmin; height: 50vmin; left: -10vmin; top: 4vmin;
    background: radial-gradient(circle, rgba(88,101,242,0.55), transparent 70%); animation: lgOrb1 20s ease-in-out infinite; }
.login-screen::after { width: 44vmin; height: 44vmin; right: -8vmin; bottom: 2vmin;
    background: radial-gradient(circle, rgba(111,224,255,0.40), transparent 70%); animation: lgOrb2 24s ease-in-out infinite; }
@keyframes lgOrb1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vmin,5vmin) scale(1.12); } }
@keyframes lgOrb2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5vmin,-6vmin) scale(1.1); } }
[data-theme="light"] .login-screen::before { opacity: 0.30; }
[data-theme="light"] .login-screen::after { opacity: 0.26; }

/* Contenedor split premium. */
.login-stage {
    display: grid;
    grid-template-columns: 1.04fr 1fr;
    width: 100%;
    max-width: min(940px, calc(100% - clamp(20px, 5vmin, 56px)));
    margin-inline: auto;
    border-radius: clamp(22px, 2.6vmin, 30px);
    overflow: hidden;
    background: var(--bg-glass);
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: var(--shadow-lg), 0 40px 100px -36px rgba(88,101,242,0.5);
    animation: fade-in-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-theme="light"] .login-stage { border-color: rgba(15,23,42,0.10); box-shadow: var(--shadow-lg), 0 40px 90px -40px rgba(88,101,242,0.30); }

/* ── Panel de marca (izquierda) ── */
.login-brandside {
    position: relative;
    overflow: hidden;
    padding: clamp(34px, 4.2vmin, 52px) clamp(28px, 3.4vmin, 44px);
    display: flex; flex-direction: column; justify-content: center;
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(88,101,242,0.30), transparent 55%),
        radial-gradient(120% 120% at 100% 100%, rgba(111,224,255,0.20), transparent 55%),
        linear-gradient(160deg, #14162a 0%, #0c0e1a 60%, #0a0b14 100%);
    border-right: 1px solid rgba(255,255,255,0.06);
}
[data-theme="light"] .login-brandside {
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(88,101,242,0.18), transparent 55%),
        radial-gradient(120% 120% at 100% 100%, rgba(14,165,233,0.12), transparent 55%),
        linear-gradient(160deg, #eef1fb 0%, #e7ecf9 100%);
    border-right-color: rgba(15,23,42,0.08);
}
.login-bs-orbs { position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(40% 30% at 75% 20%, rgba(111,224,255,0.18), transparent 70%); }
.login-bs-inner { position: relative; z-index: 1; }
.login-bs-title { font-size: clamp(2rem, 4.6vw, 2.9rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1.0; margin: 16px 0 10px; }
.login-bs-tagline { color: var(--text-muted); font-size: clamp(0.9rem, 2.2vw, 1.02rem); line-height: 1.5; max-width: 30ch; margin: 0 0 22px; }
[data-theme="light"] .login-bs-tagline { color: #475569; }
.login-bs-features { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.login-bs-features li { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; font-weight: 600; color: var(--text-main); }
[data-theme="light"] .login-bs-features li { color: #1e293b; }
.login-bs-ic { width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px; font-size: 1.05rem;
    background: linear-gradient(135deg, rgba(88,101,242,0.22), rgba(111,224,255,0.12));
    border: 1px solid rgba(88,101,242,0.28); box-shadow: 0 6px 16px -8px rgba(88,101,242,0.5); }
[data-theme="light"] .login-bs-ic { background: linear-gradient(135deg, rgba(88,101,242,0.14), rgba(14,165,233,0.08)); border-color: rgba(88,101,242,0.22); }
.login-bs-foot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 0.74rem; color: var(--text-muted); }
.login-bs-foot .login-foot-brand { font-weight: 800; color: var(--text-main); }
.login-bs-dot { opacity: 0.5; }

/* ── Panel de auth (derecha) ── */
.login-card {
    position: relative;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: clamp(32px, 3.8vmin, 48px) clamp(26px, 3.2vmin, 42px) !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: left;
    animation: none;
    display: flex; flex-direction: column;
}
.login-card::before { display: none !important; }
/* el card del registro NO ensancha el stage en el split */
.login-card.login-card--link { max-width: none !important; box-shadow: none !important; }

.login-cardhead { margin-bottom: clamp(16px, 2.4vmin, 22px); }
.login-welcome { font-size: clamp(1.35rem, 3.4vw, 1.7rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 4px 0 4px; }
.login-welcome-sub { color: var(--text-muted); font-size: 0.85rem; line-height: 1.4; margin: 0; }

/* tabs alineadas a la izquierda en el split */
.auth-tabs { margin-top: 0; }

/* ── Marca / logo (compartidos) ── */
.login-eyebrow { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--primary); opacity: 0.92; }
[data-theme="light"] .login-eyebrow { color: #4338ca; }
.login-brand {
    background: linear-gradient(120deg, #fff 8%, #C7D2FE 40%, #6FE0FF 95%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    font-weight: 900; letter-spacing: -0.035em;
}
[data-theme="light"] .login-brand { background: linear-gradient(120deg, #4338CA 5%, #5865F2 45%, #0EA5E9 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.login-logo-wrap { position: relative; width: 74px; height: 74px; }
.login-logo-glow { position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, rgba(88,101,242,0.55), transparent 68%); filter: blur(14px); z-index: 0; animation: lgPulse 4s ease-in-out infinite; }
@keyframes lgPulse { 0%,100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.login-logo-ring { position: absolute; inset: -5px; border-radius: 22px; background: linear-gradient(135deg, #5865F2, #6FE0FF); z-index: 1; }
.login-logo { width: 100%; height: 100%; border-radius: 18px; position: relative; z-index: 2; border: 3px solid #0e1016; box-shadow: 0 10px 30px -8px rgba(88,101,242,0.55); }

/* ── Responsive: una columna en móvil/tablet ── */
@media (max-width: 760px) {
    .login-stage { grid-template-columns: 1fr; max-width: min(440px, calc(100% - 24px)); }
    .login-brandside { padding: 30px 26px 22px; text-align: center; align-items: center; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
    [data-theme="light"] .login-brandside { border-bottom-color: rgba(15,23,42,0.08); }
    .login-brandside .login-logo-wrap { margin: 0 auto; }
    .login-bs-tagline { margin-inline: auto; }
    .login-bs-features { display: none; }
    .login-bs-foot { justify-content: center; margin-top: 6px; }
    .login-cardhead { text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════
   LOGIN POLISH v3 (2026-06-12): bordes con tinte de marca (no blanco
   duro), scroll interno (no desborda en ninguna resolución), botón con
   gradiente OneWay. Va al final → gana sobre lo anterior.
   ════════════════════════════════════════════════════════════════════ */
/* Orbes viejos OFF: el fondo difuminado del login-screen ya da el glow. */
.login-screen::before, .login-screen::after { display: none !important; }

/* Stage: sin borde blanco duro; borde de gradiente de marca + altura tope. */
.login-stage {
    border: 1px solid transparent;
    max-height: calc(100vh - var(--ow-nav-height, 72px) - clamp(24px, 6vmin, 64px));
    position: relative;
}
.login-stage::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, rgba(120,140,255,0.45), rgba(111,224,255,0.22) 45%, rgba(120,140,255,0.10) 80%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 3;
}
[data-theme="light"] .login-stage { border-color: transparent; }
[data-theme="light"] .login-stage::before { background: linear-gradient(135deg, rgba(88,101,242,0.32), rgba(14,165,233,0.16) 50%, transparent 80%); }

/* Divisor entre paneles: sutil, no línea blanca. */
.login-brandside { border-right: 1px solid rgba(120,140,255,0.10); }
[data-theme="light"] .login-brandside { border-right-color: rgba(88,101,242,0.12); }
@media (max-width: 760px) {
    .login-brandside { border-right: 0; border-bottom: 1px solid rgba(120,140,255,0.10); }
    [data-theme="light"] .login-brandside { border-bottom-color: rgba(88,101,242,0.12); }
}

/* El panel de auth scrollea internamente si el form es largo (registro);
   el panel de marca queda fijo. Así no desborda en ninguna resolución. */
.login-card { overflow-y: auto; min-height: 0; }
.login-card::-webkit-scrollbar { width: 8px; }
.login-card::-webkit-scrollbar-thumb { background: rgba(120,140,255,0.25); border-radius: 8px; }
.login-card::-webkit-scrollbar-track { background: transparent; }

/* Inputs del login: borde con tinte de marca (no blanco). */
.login-screen .input-group input,
.login-screen .input-group select {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(120,140,255,0.14);
}
.login-screen .input-group input:focus,
.login-screen .input-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(88,101,242,0.18);
    background: rgba(255,255,255,0.05);
}
[data-theme="light"] .login-screen .input-group input,
[data-theme="light"] .login-screen .input-group select {
    background: #ffffff; border-color: rgba(15,23,42,0.12);
}

/* Tabs: contenedor con tinte de marca, no borde blanco. */
.login-screen .auth-tabs { background: rgba(120,140,255,0.06); border: 1px solid rgba(120,140,255,0.12); }
[data-theme="light"] .login-screen .auth-tabs { background: rgba(88,101,242,0.05); border-color: rgba(88,101,242,0.12); }

/* Botón primario del login: gradiente OneWay (no blanco stark). */
.login-screen .btn-primary,
.login-screen button.btn-primary {
    background: linear-gradient(135deg, #5865F2 0%, #6f7dff 55%, #5cc8ff 130%) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 10px 26px -10px rgba(88,101,242,0.6) !important;
}
.login-screen .btn-primary:hover,
.login-screen button.btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 14px 32px -10px rgba(88,101,242,0.72) !important;
}

[data-theme="light"] .auth-register-hint {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(217, 119, 6, 0.35);
}

[data-theme="light"] .auth-register-hint code {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-main);
}

.input-group {
    margin-bottom: 0;
    position: relative;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    font-size: clamp(0.78rem, 1.9vw, 0.875rem);
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.input-group input,
.input-group select {
    width: 100%;
    padding: 14px 16px;
    min-height: 48px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-main);
    font-family: var(--font-sans);
    transition: var(--transition-fast);
    outline: none;
    font-size: clamp(0.9375rem, 2.4vw, 1rem);
}

.input-group input:focus,
.input-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
    background: rgba(0, 0, 0, 0.4);
}

/* ════════════ Buttons ════════════ */
.btn-primary {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), #7280ed);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px var(--primary-glow);
    position: relative;
    overflow: hidden;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--primary-glow);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn {
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.btn-ghost {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border);
}

.btn-ghost:hover {
    background: var(--bg-surface);
}

.btn-accent {
    background: var(--accent);
    color: #000;
}

.btn-accent:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.btn-danger {
    background: rgba(237, 66, 69, 0.1);
    color: var(--danger);
    border: 1px solid rgba(237, 66, 69, 0.2);
}

.btn-danger:hover {
    background: var(--danger);
    color: #fff;
}

.btn-icon {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.btn-icon:hover {
    color: var(--text-main);
    background: var(--bg-surface);
}

/* Loader */
.btn-loader {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/* --- Tactile Feedback Animations --- */
.btn-pop {
    transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-pop:active {
    transform: scale(0.85);
}
.btn-pop.clicked {
    animation: btn-pop-anim 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes btn-pop-anim {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

.copy-success {
    color: var(--accent) !important;
    filter: drop-shadow(0 0 5px var(--accent));
}

/* ════════════ Main Dashboard SPA ════════════ */
.dashboard {
    flex: 1;
    display: flex;
    overflow: hidden;
    /* Important: dashboard container stays fixed */
}

/* ════════════ Sidebar ════════════ */
.sidebar {
    width: 280px;
    background: var(--bg-glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    /* SIDEBAR-ANIM-V15: solo transicionar width (no `all` — evita stutter del
       backdrop-filter). Misma duración/easing que los nav-items (0.34s) para
       que aside e items encojan/ensanchen EN SINCRONÍA, sin saltos. */
    transition: width 0.34s cubic-bezier(.4,0,.2,1);
    z-index: 900;
}

/* SIDEBAR-COLLAPSED-V2 (2026-05-20): Ricardo "se ve fatal cuando se colapsa".
   Compacto, items en pill rectangular con bg sutil al hover, active con
   barra lateral accent + bg, divisores entre secciones, tooltip nativo. */
.sidebar.collapsed {
    width: 82px;
    overflow: visible;
    transition: width 0.34s cubic-bezier(.4,0,.2,1);
}

.sidebar.collapsed .sidebar-brand,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .sidebar-user-info {
    display: none;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 14px 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sidebar.collapsed .sidebar-toggle {
    margin: 0;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: rotate(180deg);
    font-size: 1rem;
    width: 36px;
    height: 36px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 0.2s, transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

.sidebar.collapsed .sidebar-toggle:hover {
    background: rgba(88, 101, 242, 0.18);
    border-color: rgba(88, 101, 242, 0.35);
    color: var(--text-main);
}

.sidebar.collapsed,
aside.sidebar.collapsed,
body .sidebar.collapsed,
body aside.sidebar.collapsed {
    /* SIDEBAR-V12 (2026-05-21): sidebar 82px + padding-X=0 cuando collapsed
       (antes era 20px 16px y el contenido se calculaba sobre 50px de inner).
       Ahora sidebar-nav fill 100% de 82px y las pills (con margin 6px y
       width:auto + box-sizing border-box) caben exactas. */
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.sidebar.collapsed .sidebar-nav {
    width: 100% !important;
    box-sizing: border-box;
    padding: 8px 0;
    gap: 2px;
    display: flex;
    flex-direction: column;
    /* SIDEBAR-V6: hide scrollbar visualmente, scroll sigue funcionando */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/legacy Edge */
}
.sidebar.collapsed .sidebar-nav::-webkit-scrollbar {
    width: 0;
    display: none;
}

/* SIDEBAR-FLAT-V13 (2026-05-30): rediseño IMPECABLE. Se ELIMINARON las pills
   grises (gradiente + border rgba(255,255,255,.18) + box-shadow inset/outer)
   que parecían botones feos. Ahora colapsado = ícono centrado sin cápsula:
   fondo transparente; hover = cuadradito accent MUY sutil (rgba primary ~.12);
   active = fondo accent sutil + ícono accent + barra accent a la izquierda.
   Look Linear/Vercel, aireado. Tokens de tema; NADA de gris pesado. */
.sidebar.collapsed .nav-item,
.sidebar.collapsed .sidebar-nav .nav-item,
aside.sidebar.collapsed .sidebar-nav .nav-item {
    position: relative;
    padding: 0 !important;
    margin: 3px auto !important;
    width: 48px !important;
    min-width: 0 !important;
    height: 48px !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    justify-content: center !important;
    align-items: center !important;
    /* SIDEBAR-COLLAPSE-V3 (2026-05-31): el label lo oculta su propio span
       (.nav-item-text) con opacity + max-width animados (regla más abajo). */
    overflow: visible !important;
    cursor: pointer !important;
    gap: 0 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transition:
        background-color 0.18s ease,
        color 0.18s ease !important;
}

.sidebar.collapsed .nav-item:hover,
.sidebar.collapsed .sidebar-nav .nav-item:hover,
aside.sidebar.collapsed .sidebar-nav .nav-item:hover {
    background: rgba(var(--primary-rgb), 0.12) !important;
    border-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

.sidebar.collapsed .nav-item.active,
.sidebar.collapsed .sidebar-nav .nav-item.active,
aside.sidebar.collapsed .sidebar-nav .nav-item.active {
    background: rgba(var(--primary-rgb), 0.16) !important;
    border-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* SIDEBAR-FLAT-V13 (2026-05-30): modo claro colapsado, mismo tratamiento plano
   y aireado que el oscuro. SIN cápsulas grises, SIN gradiente, SIN borde, SIN
   sombra. Solo el ícono; hover/active = cuadradito accent sutil detrás. */
[data-theme="light"] .sidebar.collapsed .nav-item {
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}
[data-theme="light"] .sidebar.collapsed .nav-item:hover {
    background: rgba(var(--primary-rgb), 0.10) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
[data-theme="light"] .sidebar.collapsed .nav-item.active {
    background: rgba(var(--primary-rgb), 0.14) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Accent indicator bar — barra accent sutil a la izquierda del rail. Anclada al
   borde del ítem (left:0), sin clip y sin glow pesado. */
.sidebar.collapsed .nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
    box-shadow: none;
    animation: sbActiveBar 0.3s cubic-bezier(0.16,1,0.3,1);
}
@keyframes sbActiveBar {
    from { height: 8px; opacity: 0; }
    to { height: 22px; opacity: 1; }
}

.sidebar.collapsed .nav-item-icon {
    color: var(--text-muted);
    font-size: 1.3rem !important;
    min-width: 24px;
    width: 24px;
    height: 24px;
    margin: 0;
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.18s ease;
    opacity: 1;
}

.sidebar.collapsed .nav-item:hover .nav-item-icon {
    color: var(--text-main);
}

.sidebar.collapsed .nav-item.active .nav-item-icon {
    color: var(--primary);
    filter: none;
}

/* SIDEBAR-COLLAPSE-V3: en colapsado el label se desvanece y colapsa su ancho.
   Esto es el FALLBACK sin GSAP (transición CSS). Con GSAP, el timeline ya
   dejó opacity:0 antes de añadir .collapsed, así que no hay salto; y al
   re-render de buildSidebar() el JS limpia los inline-styles para que esta
   regla mande de inmediato (sin animar). */
.sidebar.collapsed .nav-item-text {
    opacity: 0;
    max-width: 0;
    margin: 0;
    pointer-events: none;
}

/* TOOLTIP — hover shows item label as floating chip */
.sidebar.collapsed .nav-item[data-label]::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    background: rgba(20, 22, 30, 0.96);
    color: var(--text-main);
    font-size: 0.78rem !important;
    font-weight: 600;
    letter-spacing: 0;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6);
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16,1,0.3,1);
}

.sidebar.collapsed .nav-item:hover[data-label]::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Separator between nav sections in collapsed mode */
.sidebar.collapsed .sidebar-nav-section + .sidebar-nav-section {
    border-top: 1px dashed rgba(255,255,255,0.05);
    margin-top: 6px;
    padding-top: 6px;
}

.sidebar.collapsed .sidebar-user {
    justify-content: center;
    align-items: center;
    padding: 12px 0;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.sidebar.collapsed .sidebar-user-avatar {
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
    border: 2px solid rgba(88,101,242,0.4);
    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.4);
    transition: transform 0.2s ease, border-color 0.2s ease;
    object-fit: cover;
}
.sidebar.collapsed .sidebar-user-avatar:hover {
    transform: scale(1.06);
    border-color: var(--primary);
}

.sidebar.collapsed #btn-logout {
    margin: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.20);
    color: rgba(239, 68, 68, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.sidebar.collapsed #btn-logout:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
}
.sidebar.collapsed #btn-logout span {
    display: none !important;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] .card-title {
    color: var(--text-primary);
}

[data-theme="light"] .stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Ensure content doesn't jump */
.sidebar>* {
    min-width: 80px;
}

/* Sidebar Toggle Improvements */
.sidebar-toggle-fixed {
    position: fixed;
    top: 20px;
    left: 260px;
    z-index: 1001;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    backdrop-filter: blur(10px);
}

.sidebar.collapsed ~ .sidebar-toggle-fixed {
    left: 62px;
}

/* Ticket Avatar Styles */
.tk-inbox-avatar-wrap {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    position: relative;
}

.tk-inbox-avatar {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid var(--border);
    background: var(--bg-surface);
}

.tk-inbox-item {
    display: flex;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition-fast);
}

.tk-inbox-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-hover);
    transform: translateX(4px);
}

.tk-inbox-item.active {
    background: rgba(88, 101, 242, 0.1);
    border-color: var(--primary);
    box-shadow: 0 4px 20px rgba(88, 101, 242, 0.1);
}

/* ════════════ Main Content ════════════ */
.main-content {
    flex: 1;
    overflow-y: auto;
    background: transparent;
    padding: 30px;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
    animation: fadeInDown 0.6s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    background: rgba(22, 27, 34, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.card:hover {
    border-color: rgba(88, 101, 242, 0.3);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.sidebar-header {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border);
}

.sidebar-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.sidebar-brand {
    font-size: 1.2rem;
    font-weight: 800;
    flex: 1;
    white-space: nowrap;
}

.sidebar-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 4px;
    border-radius: 6px;
}

.sidebar-toggle:hover {
    background: var(--bg-surface);
    color: var(--text-main);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 20px 12px;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.nav-section-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
    margin: 16px 0 8px 12px;
    letter-spacing: 0.5px;
}

/* SIDEBAR-FLAT-V13 (2026-05-30): base/fallback PLANA del estado expandido. El
   look final lo refuerza dashboard-skin.css (fuente única). Sin border-left que
   empuje, sin gradiente, sin text-shadow, sin translateX brusco. */
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    margin-bottom: 4px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-muted);
    font-weight: 500;
    border: 1px solid transparent;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.nav-item:hover {
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--text-main);
}

.nav-item.active {
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary);
    font-weight: 600;
}

.nav-item-icon {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

/* SIDEBAR-COLLAPSE-V3 (2026-05-31): el label es su propio elemento animable.
   Antes el colapso ocultaba el texto con font-size:0;color:transparent en el
   .nav-item (instantáneo = brusco). Ahora animamos opacity + width sobre el
   span, con transición CSS para que el fallback SIN GSAP también se vea suave.
   Con GSAP, el timeline tweenea opacity/x y estos defaults sirven de base. */
.nav-item-text {
    white-space: nowrap;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.18s ease, max-width 0.26s cubic-bezier(0.16,1,0.3,1);
    max-width: 220px;
}

.sidebar-user {
    padding: 20px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--bg-surface);
}

.sidebar-user-info {
    flex: 1;
    overflow: hidden;
}

.sidebar-user-name {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.sidebar-user-role {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Main Content Area */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: transparent;
    overflow: hidden;
    position: relative;
}

.content-header {
    padding: 30px 40px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-header h2 {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.content-body {
    flex: 1;
    padding: 20px 40px 40px;
    overflow-y: auto;
}

/* ════════════ Layout Cards & Stats ════════════ */
.overview-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

@media (max-width: 1024px) {
    .overview-grid {
        grid-template-columns: 1fr;
    }
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: linear-gradient(145deg, var(--bg-surface), rgba(20, 20, 25, 0.4));
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    background: var(--bg-surface-hover);
}

.stat-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(88, 101, 242, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--primary);
    font-size: 1.5rem;
}

.stat-value {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 6px;
    font-family: var(--font-mono);
    color: var(--text-main);
    letter-spacing: -1px;
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    background: var(--bg-surface);
}

.stat-icon {
    font-size: 2rem;
    margin-bottom: 12px;
    opacity: 0.8;
}

.stat-value {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 4px;
    font-family: var(--font-mono);
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

.card {
    background: var(--bg-glass);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
}

.card-title {
    font-size: 1.2rem;
    font-weight: 700;
}

/* Badges */
.badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-accent {
    background: rgba(88, 101, 242, 0.15);
    color: var(--primary);
}

.badge-success {
    background: rgba(87, 242, 135, 0.15);
    color: var(--accent);
}

.badge-danger {
    background: rgba(237, 66, 69, 0.15);
    color: var(--danger);
}

.badge-warning {
    background: rgba(254, 231, 92, 0.15);
    color: var(--warning);
}

/* Tabs inside Cards */
.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.tab {
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: var(--transition);
}

.tab:hover {
    background: var(--bg-surface);
    color: var(--text-main);
}

.tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 10px var(--primary-glow);
}

/* Lists (Lineups/Tops/Members) */
.data-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.data-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: var(--transition);
    gap: 16px;
}

.data-item:hover {
    background: var(--bg-surface);
    transform: translateX(4px);
    border-color: rgba(255, 255, 255, 0.1);
}

.data-rank {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text-muted);
    width: 40px;
    text-align: center;
}

.data-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.data-info {
    flex: 1;
}

.data-name {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.data-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}

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

/* Empty States */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state-text {
    font-size: 1.1rem;
    font-weight: 500;
}

/* ════════════ Modals ════════════ */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px) saturate(180%);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.show {
    display: flex;
    opacity: 1;
}

@keyframes modal-spring {
    0% { transform: scale(0.6) translateY(100px); opacity: 0; }
    70% { transform: scale(1.05) translateY(-5px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.modal-content {
    background: var(--bg-glass);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 90%;
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.show .modal-content {
    transform: scale(1) translateY(0);
}

.modal-header {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
}

.modal-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-main);
}

.modal-close {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-accent {
    background: rgba(88, 101, 242, 0.15);
    color: var(--primary);
}

.badge-success {
    background: rgba(87, 242, 135, 0.15);
    color: var(--accent);
}

.badge-danger {
    background: rgba(237, 66, 69, 0.15);
    color: var(--danger);
}

.badge-warning {
    background: rgba(254, 231, 92, 0.15);
    color: var(--warning);
}

/* Tabs inside Cards */
.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.tab {
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: var(--transition);
}

.tab:hover {
    background: var(--bg-surface);
    color: var(--text-main);
}

.tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 10px var(--primary-glow);
}

/* Lists (Lineups/Tops/Members) */
.data-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.data-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: var(--transition);
    gap: 16px;
}

.data-item:hover {
    background: var(--bg-surface);
    transform: translateX(4px);
    border-color: rgba(255, 255, 255, 0.1);
}

.data-rank {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text-muted);
    width: 40px;
    text-align: center;
}

.data-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.data-info {
    flex: 1;
}

.data-name {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.data-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
}

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

/* Empty States */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state-text {
    font-size: 1.1rem;
    font-weight: 500;
}

/* ════════════ Modals ════════════ */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px) saturate(180%);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.show {
    display: flex;
    opacity: 1;
}

@keyframes modal-spring {
    0% { transform: scale(0.6) translateY(100px); opacity: 0; }
    70% { transform: scale(1.05) translateY(-5px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.modal-content {
    background: var(--bg-glass);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 90%;
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.show .modal-content {
    transform: scale(1) translateY(0);
}

.modal-header {
    padding: 24px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
}

.modal-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-main);
}

.modal-close {
    font-size: 1.2rem;
    color: var(--text-muted);
    cursor: pointer;
    background: none;
    border: none;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s;
    line-height: 1;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ff3b30;
}

.modal-body {
    padding: 30px;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.5;
}

.btn-ios {
    padding: 12px 24px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.95rem;
}

.btn-ios:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-ios-primary {
    background: var(--primary) !important;
    border: none;
    color: white;
    box-shadow: 0 8px 20px rgba(88, 101, 242, 0.3);
}

.btn-ios-primary:hover {
    background: var(--primary-hover) !important;
    box-shadow: 0 12px 30px rgba(88, 101, 242, 0.5);
    transform: translateY(-3px) scale(1.02);
}

/* ════════════ Autocomplete ════════════ */
.autocomplete-wrap {
    position: relative;
}

.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 10;
    max-height: 250px;
    overflow-y: auto;
}

.autocomplete-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover {
    background: var(--bg-surface);
}

.autocomplete-item img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* ════════════ Toasts ════════════ */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* TOASTS-Z-FIX 2026-06-11: por encima de modal-overlay (99999) y navbar
       (99999) para que las confirmaciones ('Guardado', etc.) sean visibles
       cuando se disparan con un modal abierto. */
    z-index: 100001;
}

.toast {
    background: var(--bg-glass);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    padding: 14px 20px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: toast-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    font-weight: 500;
}

.toast.out {
    animation: toast-out 0.3s ease-in forwards;
}

@keyframes toast-in {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toast-out {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(50px);
    }
}

.toast-success {
    border-left: 4px solid var(--accent);
}

.toast-error {
    border-left: 4px solid var(--danger);
}

.toast-info {
    border-left: 4px solid var(--primary);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Responsive adjustments */
/* ════════════ Overview Banner ════════════ */
.overview-banner-container {
    position: relative;
    width: 100%;
    height: 240px;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: var(--shadow-lg);
}

.overview-banner-bg {
    position: absolute;
    inset: 0;
    filter: brightness(0.6);
}

.overview-banner-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 40px;
    gap: 25px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

.avatar-wrap { position: relative; }
.banner-avatar {
    width: 120px;
    height: 120px;
    border-radius: 35px;
    border: 5px solid rgba(255,255,255,0.15);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    object-fit: cover;
}

.banner-admin-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: var(--primary);
    color: white;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 800;
    border: 3px solid var(--bg-surface);
}

.banner-display-name {
    font-size: 3rem;
    margin: 0;
    font-weight: 900;
    letter-spacing: -1.5px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.banner-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    opacity: 0.9;
}

.banner-username {
    background: rgba(255,255,255,0.1);
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.1);
}

.banner-id { font-size: 0.9rem; letter-spacing: 1px; opacity: 0.7; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        /* iOS FIX 2026-06-02 (reporte owner: footer/user-card cortado abajo en
           iPhone real): top:0+bottom:0 se extiende DETRÁS de la barra inferior de
           Safari + home indicator. 100dvh = viewport dinámico (excluye la barra);
           si el navegador no soporta dvh, height se ignora y vuelve a top/bottom.
           Padding-bottom seguro para que el footer nunca quede tapado. */
        height: 100dvh;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
        box-sizing: border-box;
        z-index: 1000;
        transform: translateX(-100%);
        width: 260px;
        transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1);
    }

    .sidebar.show { transform: translateX(0); }

    .top-navbar { padding: 0 12px; height: 60px; }
    .nav-links { display: none; }
    .guild-drop-item span { max-width: 120px; }

    .main-content { margin-left: 0 !important; padding-top: 70px !important; }

    .content-body { padding: 12px; }
    
    .chat-sidebar-v3 {
        position: absolute;
        width: 240px;
        z-index: 10;
        height: 100%;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .chat-sidebar-v3.show { transform: translateX(0); }
}

@media (max-width: 480px) {
    .banner-display-name { font-size: 2rem; }
    .banner-avatar { width: 80px; height: 80px; border-radius: 24px; }
    .overview-banner-container { height: 180px; border-radius: 20px; }
    .overview-banner-content { padding: 20px; gap: 15px; }
    
    .stats-grid { grid-template-columns: 1fr; }
    .stat-card { padding: 20px; }
    .stat-value { font-size: 1.8rem; }
    
    .data-item { flex-direction: column; align-items: flex-start; gap: 10px; }
    .data-rank { text-align: left; width: auto; font-size: 0.9rem; }
    .data-actions { width: 100%; justify-content: flex-end; }
    
    .modal-card { height: 100%; max-height: 100%; border-radius: 0; }
    
    .banner-display-name { font-size: 1.8rem; }
    .nav-brand-name { display: none; } /* Specific brand hiding */
    #guild-selector-header button { min-width: 140px; padding: 6px 10px !important; }
    #guild-selector-header span { display: inline-block !important; max-width: 100px; }
    #guild-dropdown-menu { width: 280px !important; right: -50px !important; } /* Center better on small screens */
    .guild-drop-item span { display: block !important; }
}

/* Responsive Utility Classes */
.mobile-only { display: none !important; }
@media (max-width: 768px) {
    .mobile-only { display: inline-block !important; }
    .desktop-only { display: none !important; }
}

/* Pulse animation for bot status indicator */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.3);
    }
}

/* Stat cards responsive */
@media (max-width: 900px) {
    .stat-card {
        min-width: 120px;
    }
}

/* Audit log code styling */
code {
    background: rgba(88, 101, 242, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--primary);
}

/* ════════════ Toggle Switch ════════════ */
.switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: .4s;
    border: 1px solid var(--border);
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--primary);
    border-color: var(--primary);
}

input:checked+.slider:before {
    transform: translateX(16px);
}

.slider.round {
    border-radius: 20px;
}

.slider.round:before {
    border-radius: 50%;
}

/* ════════════ Badges & Data Items ════════════ */
.badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.badge-accent {
    background: rgba(87, 242, 135, 0.15);
    color: var(--accent);
}

.badge-success {
    background: rgba(87, 242, 135, 0.2);
    color: var(--accent);
}

.data-item {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.data-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.data-name {
    font-weight: 700;
    font-size: 1.05rem;
}

/* Tabs responsive wrap */
.tabs {
    display: flex;
    flex-wrap: wrap;
}

/* ════════════ Evolution Chat 2.0 ════════════ */
/* ════════════ Evolution Chat V3 (Social & Comunidad) ════════════ */
.chat-layout-v2 {
    display: flex;
    height: 100%;
    min-height: 0;
    max-height: calc(100vh - 120px);
    background: var(--bg-surface);
    backdrop-filter: var(--glass-blur);
    border-radius: 24px;
    border: var(--glass-border);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-lg);
}

.chat-sidebar-v3 {
    width: 260px;
    background: rgba(0, 0, 0, 0.2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.chat-content-v3 {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: rgba(0, 0, 0, 0.05);
}

.chat-messages-v3 {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

.chat-input-row-v3 {
    padding: 20px 24px 24px;
    background: transparent;
}

.chat-input-wrapper-v3 {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 6px 14px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

.chat-input-wrapper-v3:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

.chat-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    height: calc(100vh - 70px);
    /* Fill remaining screen height */
    background: var(--bg-surface);
    backdrop-filter: var(--glass-blur);
    border-radius: 20px;
    margin: -10px;
    /* Bleed for full area feel */
    overflow: hidden;
}

.chat-sidebar-v2 {
    background: rgba(0, 0, 0, 0.2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.chat-sidebar-header {
    padding: 16px;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.chat-category-v2 {
    padding: 18px 12px 6px 16px;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cat-arrow {
    font-size: 0.6rem;
    opacity: 0.6;
}

.chat-channels-v2 {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.channel-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

.channel-v2:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    transform: translateX(3px);
}

.channel-v2.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.channel-v2-icon {
    font-size: 1.1rem;
    opacity: 0.5;
    color: var(--primary);
}

.chat-content-v2 {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.05);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.chat-navbar {
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.chat-navbar-title {
    font-weight: 700;
    font-size: 1rem;
}

.chat-messages-v2 {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Chat Media Components */
/* ════════════ Modern Chat V2 (msg-v2) ════════════ */
.msg-v2 {
    display: flex;
    flex-direction: column;
    padding: 8px 16px;
    margin: 4px 0;
    transition: all 0.2s ease;
    border-radius: 12px;
    position: relative;
    max-width: 100%;
}

.msg-v2:hover {
    background: rgba(255, 255, 255, 0.03);
}

.msg-v2-inner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.msg-v2-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.msg-v2-content {
    flex: 1;
    min-width: 0;
}

.msg-v2-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.msg-v2-author {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-main);
    letter-spacing: -0.2px;
}

.msg-v2-time {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
    opacity: 0.6;
}

.msg-v2-text {
    font-size: 0.92rem;
    color: #dbdee1;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.msg-v2-reply {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    margin-left: 21px;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.2s;
}

.msg-v2-reply:hover {
    opacity: 1;
}

.reply-line {
    width: 33px;
    height: 12px;
    border-left: 2px solid #4e5058;
    border-top: 2px solid #4e5058;
    border-top-left-radius: 6px;
    margin-right: 4px;
}

.reply-text {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

.msg-v2-actions {
    position: absolute;
    right: 16px;
    top: -10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    gap: 4px;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

.msg-v2:hover .msg-v2-actions {
    opacity: 1;
    transform: translateY(0);
}

.msg-v2-actions button {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.2s;
}

.msg-v2-actions button:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
}

.msg-v2-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.reaction-v2 {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 3px 8px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: 0.2s;
}

.reaction-v2:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.reaction-v2.active {
    background: rgba(88, 101, 242, 0.15);
    border-color: #5865f2;
}

.reaction-v2.active .count {
    color: #5865f2;
}

.chat-media-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    max-width: 100%;
}

.media-item {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    max-width: 400px;
    max-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-item:hover {
    transform: scale(1.02);
    border-color: var(--primary);
}

.modal-card.wide {
    max-width: 600px;
}

.modal-card.exclusive {
    background: var(--bg-base);
    border: 1px solid var(--border);
    box-shadow: 0 30px 60px rgba(0,0,0,0.8);
    border-radius: 28px;
}

.modal-card.exclusive .modal-header {
    border-bottom: 1px solid var(--border);
    padding: 15px 25px;
}

.media-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

[data-theme="light"] .media-item {
    background: rgba(0, 0, 0, 0.05);
}

.discord-msg {
    display: flex;
    gap: 16px;
    padding: 2px 16px;
    margin-top: 17px;
    transition: background 0.1s;
    position: relative;
}

.discord-msg:hover {
    background: rgba(255, 255, 255, 0.02);
}

.discord-msg.grouped {
    margin-top: 0;
    padding-top: 1px;
    padding-bottom: 1px;
}

.discord-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    margin-top: 2px;
}

.discord-msg.grouped .discord-avatar {
    visibility: hidden;
    height: 0;
}

.discord-content {
    flex: 1;
    min-width: 0;
}

.discord-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.discord-author {
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    cursor: pointer;
}

.discord-author:hover {
    text-decoration: underline;
}

.discord-time {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
}

.discord-msg.grouped .discord-header {
    display: none;
}

.discord-msg.grouped .discord-time-inline {
    position: absolute;
    left: 8px;
    top: 5px;
    font-size: 0.65rem;
    color: var(--text-muted);
    opacity: 0;
    width: 45px;
    text-align: right;
}

.discord-msg.grouped:hover .discord-time-inline {
    opacity: 1;
}

.discord-text {
    color: #dbdee1;
    line-height: 1.375;
    font-size: 0.95rem;
    word-break: break-word;
    white-space: pre-wrap;
}

.discord-mention {
    background: rgba(88, 101, 242, 0.15);
    color: #c9cdfb;
    padding: 0 4px;
    border-radius: 3px;
    font-weight: 500;
    cursor: pointer;
}

.discord-mention:hover {
    background: var(--primary);
    color: #fff;
}

/* Embeds Style */
.discord-embed {
    margin-top: 8px;
    padding: 12px 16px;
    background: #2b2d31;
    border-left: 4px solid var(--primary);
    border-radius: 4px;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.discord-embed-title {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.discord-embed-desc {
    font-size: 0.9rem;
    color: #dbdee1;
}

/* Connection Status indicator */
.sse-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #23a55a;
    display: inline-block;
    margin-right: 8px;
    box-shadow: 0 0 8px #23a55a;
}

.sse-status-dot.connecting {
    background: #f0b232;
    box-shadow: 0 0 8px #f0b232;
    animation: pulse-status 1s infinite;
}

.sse-status-dot.disconnected {
    background: #f23f43;
    box-shadow: 0 0 8px #f23f43;
}

@keyframes pulse-status {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

/* Input Area */
.chat-input-container-v2 {
    padding: 0 20px 20px 20px;
    background: transparent;
}

.chat-input-wrapper-v2 {
    background: var(--bg-input);
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    min-height: 44px;
    border: 1px solid var(--border);
}

.chat-input-wrapper-v2 input {
    flex: 1;
    background: none;
    border: none;
    padding: 12px;
    color: var(--text-main);
    outline: none;
}

.chat-reply-bar {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px 8px 0 0;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-send-v2 {
    background: var(--primary);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-send-v2:hover {
    transform: scale(1.1);
}

/* ════════════ Move UI ════════════ */
.move-controls {
    display: flex;
    gap: 4px;
    opacity: 0.4;
    transition: opacity 0.3s;
}

.card:hover .move-controls,
.data-item:hover .move-controls {
    opacity: 1;
}

.btn-move {
    padding: 4px 8px;
    font-size: 0.8rem;
    border-radius: 6px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    cursor: pointer;
    color: var(--text-main);
}

.btn-move:hover {
    background: var(--primary-glow);
    border-color: var(--primary);
    color: var(--text-primary);
}

/* Dynamic Logo Styling */
.nav-logo-container {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-guild-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ════════════ Administration Modules (Tickets, BL, Strikes) ════════════ */
.content-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 20px;
    background: var(--bg-surface);
    border-radius: 20px;
    border: 1px solid var(--border);
}

.header-main {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon {
    font-size: 2rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-glow);
    border-radius: 18px;
    color: var(--primary);
}

.header-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
}

.header-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 4px 0 0 0;
}

.data-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.strike-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    background: var(--danger);
    color: white;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

/* ════════════ Mobile Enhancements v13.5 ════════════ */
@media (max-width: 768px) {
    #sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 2000;
        transform: translateX(-100%);
        width: 280px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
        background: var(--bg-surface);
        backdrop-filter: blur(20px);
    }

    #sidebar.show {
        transform: translateX(0);
    }

    #main-content {
        margin-left: 0 !important;
        padding: 75px 15px 15px 15px !important; /* Proper top gap for navbar */
        width: 100%;
        overflow-x: hidden;
    }

    .top-navbar {
        padding: 0 15px;
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav-links {
        display: none;
    }

    #sidebar-collapse-btn {
        display: flex !important;
        position: relative;
        z-index: 2100;
        background: var(--primary);
        color: white;
        border: none;
        border-radius: 12px;
        width: 44px;
        height: 44px;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 12px var(--primary-glow);
        margin-right: 12px;
        font-size: 1.5rem;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(6px);
        z-index: 1900;
        animation: fadeIn 0.3s ease;
    }

    body.sidebar-open .sidebar-overlay {
        display: block;
    }

    .data-grid-v2 {
        grid-template-columns: 1fr;
    }

    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 10px;
        margin-bottom: 20px;
        -webkit-overflow-scrolling: touch;
    }

    .tab {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 12px 24px;
    }
}

/* Hidden by default on desktop */
#sidebar-collapse-btn {
    display: none;
}

/* ════════════ Modern Chat & Scroll Styles ════════════ */

/* Thin Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Chat Container Specifics */
#tk-chat-stream {
    scroll-behavior: smooth;
    padding-right: 10px !important;
}

/* Animations */
@keyframes bubble-in {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.apple-ticket-item {
    animation: bubble-in 0.3s ease-out backwards;
}

/* Ticket Sidebar/Control Scroll */
.apple-card {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.apple-card::-webkit-scrollbar {
    width: 4px;
}

.apple-card::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.apple-card:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
}

.widget-btn {
    width: 100%;
    margin-bottom: 12px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.widget-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary);
    transform: translateY(-1px);
}

/* ════════════ Spinner & Loading Stats ════════════ */
.btn-loader-mini {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: none;
    margin-right: 8px;
}

.btn-ios.loading .btn-loader-mini {
    display: inline-block;
}

.btn-ios.loading {
    pointer-events: none;
    opacity: 0.8;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.modal-icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.modal-icon-wrapper svg {
    width: 32px;
    height: 32px;
}

/* ════════════ Skeleton & Pulse Loading ════════════ */
.skeleton-msg {
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    animation: skeleton-pulse 1.8s infinite ease-in-out;
}

[data-theme="light"] .skeleton-msg {
    background: #eef2f6 !important;
}

/* ════════════ Autocomplete Mentions (@) ════════════ */
.mention-box {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 20px;
    width: 280px;
    max-height: 250px;
    background: rgba(15, 15, 20, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
    z-index: 10000;
    overflow-y: auto;
    display: none;
    animation: modal-pop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mention-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.mention-item:last-child { border-bottom: none; }

.mention-item:hover, .mention-item.active {
    background: rgba(var(--primary-rgb), 0.2);
    box-shadow: inset 2px 0 0 var(--primary);
}

.mention-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    object-fit: cover; border: 1px solid rgba(255,255,255,0.1);
}

.mention-info {
    flex: 1; min-width: 0;
}

.mention-name {
    font-size: 0.9rem; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mention-user {
    font-size: 0.75rem; color: var(--text-muted); opacity: 0.7;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mention-box::-webkit-scrollbar { width: 4px; }
.mention-box::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }

/* ════════════ iOS-Style Glassmorphism & Custom Select ════════════ */
.ios-blur {
    background: rgba(var(--bg-rgb), 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ow-select {
    position: relative;
    width: 100%;
    cursor: pointer;
    user-select: none;
}

.ow-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ow-select-trigger:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--primary);
}

.ow-select.active .ow-select-trigger {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

.ow-select-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: rgba(20, 20, 25, 0.9);
    backdrop-filter: blur(25px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ow-select.active .ow-select-options {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.ow-option {
    padding: 12px 16px;
    color: var(--text-main);
    font-size: 0.85rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ow-option:hover {
    background: rgba(var(--primary-rgb), 0.15);
    color: #fff;
}

.ow-option.selected {
    background: rgba(var(--primary-rgb), 0.3);
    font-weight: 700;
}

/* ════════════ Ticket Layout Fix (Fixed Height) ════════════ */
.tk-layout-v2 {
    display: grid;
    grid-template-columns: 280px 1fr 300px;
    height: calc(100vh - 110px);
    background: var(--bg-surface);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tk-sidebar {
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tk-main-area {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}

.tk-control-panel {
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px;
    overflow-y: auto;
    background: var(--bg-surface);
}

.chat-stream-fixed {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ════════════ Modern Verify UI ════════════ */
.vf-card-premium {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 16px 18px;
    transition: transform 0.3s;
}

.vf-card-premium:hover {
    border-color: rgba(var(--primary-rgb), 0.3);
}

.vf-icon-wrap {
    width: 42px; height: 42px;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}

/* ════════════ Modern Profile Modal & Animations ════════════ */
@keyframes modal-pop {
    0% { opacity: 0; transform: scale(0.9) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-content.modern-modal {
    animation: modal-pop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-radius: 28px;
    padding: 0;
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid rgba(255,255,255,0.1);
}

.profile-banner {
    height: 120px;
    background: linear-gradient(135deg, var(--primary), #7289da);
    position: relative;
}

.profile-avatar-wrapper {
    position: absolute;
    bottom: -40px;
    left: 24px;
    padding: 4px;
    background: var(--bg-surface);
    border-radius: 22px;
}

.profile-avatar {
    width: 80px; height: 80px; border-radius: 18px; 
    object-fit: cover; cursor: pointer; transition: 0.3s;
}
.profile-avatar:hover { transform: scale(1.05); filter: brightness(1.1); }

.profile-info-section {
    padding: 50px 24px 24px;
}

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

.zoom-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 9999;
    display: none; align-items: center; justify-content: center;
    backdrop-filter: blur(10px); cursor: zoom-out;
}
.zoom-content { max-width: 90%; max-height: 90%; border-radius: 12px; box-shadow: 0 0 50px rgba(0,0,0,0.5); }

/* Custom Select Styling */
.modern-select {
    width: 100%; padding: 10px 14px; border-radius: 12px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-main); font-size: 0.9rem; outline: none; transition: 0.3s;
}
.modern-select:focus { border-color: var(--primary); }

/* ════════════ iOS 18 AUDIT LOG REMODEL ════════════ */
.audit-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 10px 5px;
}

.audit-ios-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation: audit-slide-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    position: relative;
    overflow: hidden;
}

.audit-ios-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 6px; height: 100%;
    background: var(--accent-color, var(--primary));
    opacity: 0.8;
}

.audit-ios-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: scale(1.01) translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.audit-icon-wrapper {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--accent-glow, rgba(88, 101, 242, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    box-shadow: inset 0 0 15px rgba(255,255,255,0.05);
}

.audit-info-main {
    flex: 1;
    min-width: 0;
}

.audit-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audit-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.audit-time-badge {
    padding: 6px 14px;
    background: rgba(0,0,0,0.25);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    border: 1px solid rgba(255,255,255,0.05);
    white-space: nowrap;
}

@keyframes audit-slide-in {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Action Specific iOS Glows */
.audit-type-danger { --accent-color: #ff3b30; --accent-glow: rgba(255, 59, 48, 0.15); }
.audit-type-success { --accent-color: #34c759; --accent-glow: rgba(52, 199, 89, 0.15); }
.audit-type-warning { --accent-color: #ffcc00; --accent-glow: rgba(255, 204, 0, 0.15); }
.audit-type-info { --accent-color: #007aff; --accent-glow: rgba(0, 122, 255, 0.15); }
.audit-type-purple { --accent-color: #af52de; --accent-glow: rgba(175, 82, 222, 0.15); }

/* Custom Dropdown for Tickets */
.tk-custom-dropdown {
    position: relative;
    width: 170px;
    user-select: none;
    z-index: 100;
}

.tk-dropdown-trigger {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.tk-dropdown-trigger:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary);
    transform: translateY(-1px);
}

.tk-custom-dropdown.active .tk-dropdown-trigger {
    border-color: var(--primary);
    box-shadow: 0 0 15px var(--primary-glow);
    background: rgba(88, 101, 242, 0.1);
}

.tk-dropdown-content {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 240px;
    background: rgba(15, 20, 30, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: top right;
}

.tk-custom-dropdown.active .tk-dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.tk-dropdown-item {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 2px;
}

.tk-dropdown-item:last-child {
    margin-bottom: 0;
}

.tk-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
    padding-left: 18px;
}

.tk-dropdown-item.active {
    background: rgba(88, 101, 242, 0.15);
    color: var(--primary);
    font-weight: 700;
}

.tk-dropdown-arrow {
    font-size: 0.65rem;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0.6;
}

.tk-custom-dropdown.active .tk-dropdown-arrow {
    transform: rotate(180deg);
}

/* Scrollbar for long lists */
.tk-dropdown-content {
    max-height: 400px;
    overflow-y: auto;
}

.tk-dropdown-content::-webkit-scrollbar {
    width: 4px;
}
.tk-dropdown-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
/* Control Center Widgets */
.widget-btn {
    width: 100%;
    padding: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.widget-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.widget-btn:active {
    transform: translateY(0);
}

/* WhatsApp-style Chat */
.wa-msg {
    display: flex;
    margin-bottom: 16px;
    gap: 12px;
    animation: slideInUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wa-msg-right {
    flex-direction: row-reverse;
}
.wa-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    flex-shrink: 0;
}
.wa-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 18px;
    position: relative;
    font-size: 0.9rem;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.wa-msg-left .wa-bubble {
    background: rgba(255,255,255,0.06);
    border-top-left-radius: 4px;
    color: var(--text-main);
}
.wa-msg-right .wa-bubble {
    background: var(--primary);
    border-top-right-radius: 4px;
    color: #fff;
}
.wa-author {
    font-size: 0.7rem;
    font-weight: 800;
    margin-bottom: 4px;
    opacity: 0.8;
}
.wa-text {
    word-break: break-word;
}
.wa-time {
    font-size: 0.65rem;
    margin-top: 6px;
    text-align: right;
    opacity: 0.6;
}
/* TICKETS-CHAT-V2 2026-06-12: legibilidad + animación + responder + reaccionar */
@keyframes waPop { 0% { opacity:0; transform: translateY(10px) scale(0.97); } 100% { opacity:1; transform: none; } }
.wa-msg { align-items: flex-end; animation: waPop 0.26s cubic-bezier(0.2,0.85,0.25,1); }
.wa-bubble.wa-flash { animation: waFlash 1.1s ease; }
@keyframes waFlash { 0%,100% { box-shadow: 0 2px 8px rgba(0,0,0,0.1); } 30% { box-shadow: 0 0 0 3px var(--primary); } }
/* insignias legibles sobre la burbuja azul (lado derecho/staff) */
.wa-msg-right .tk-ow-badge, .wa-msg-right .tk-ow-badge--web { background: rgba(255,255,255,0.22); color:#fff; border-color: rgba(255,255,255,0.4); }
.wa-via-time { opacity:0.8; font-weight:700; margin-left:2px; }
/* cita de respuesta dentro de la burbuja */
.wa-reply-quote { display:flex; align-items:center; gap:6px; font-size:0.74rem; padding:5px 9px; margin-bottom:7px; border-radius:9px; cursor:pointer; background:rgba(0,0,0,0.16); border-left:3px solid rgba(255,255,255,0.55); opacity:0.9; max-width:100%; }
.wa-reply-quote span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.wa-reply-quote:hover { opacity:1; }
.wa-msg-left .wa-reply-quote { background:rgba(255,255,255,0.05); border-left-color: var(--primary); }
/* reacciones */
.wa-reactions { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.wa-react { display:inline-flex; align-items:center; gap:4px; font-size:0.8rem; line-height:1; padding:3px 8px; border-radius:11px; cursor:pointer; border:1px solid rgba(255,255,255,0.15); background:rgba(0,0,0,0.16); color:inherit; transition:transform 0.12s ease, background 0.12s ease; }
.wa-react:hover { transform: translateY(-1px); }
.wa-react.active { background: rgba(255,255,255,0.26); border-color: rgba(255,255,255,0.5); }
.wa-msg-left .wa-react.active { background: rgba(88,101,242,0.22); border-color: rgba(88,101,242,0.5); }
.wa-react-n { font-weight:800; font-size:0.72rem; }
.wa-react-img { width:1.05em; height:1.05em; object-fit:contain; vertical-align:-2px; }
/* acciones por mensaje (aparecen al hover) */
.wa-actions { display:flex; align-items:center; gap:3px; opacity:0; pointer-events:none; transition:opacity 0.15s ease; align-self:center; }
.wa-msg:hover .wa-actions { opacity:1; pointer-events:auto; }
.wa-actions button { width:30px; height:30px; border-radius:9px; border:1px solid var(--border); background:var(--bg-input); cursor:pointer; font-size:0.92rem; line-height:1; display:flex; align-items:center; justify-content:center; padding:0; transition:transform 0.12s ease, background 0.12s ease; }
.wa-actions button:hover { background: rgba(88,101,242,0.28); transform: scale(1.12); }
.wa-embed {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    border-left: 3px solid var(--primary);
}
.wa-embed-title {
    font-weight: 700;
    font-size: 0.85rem;
}
.wa-embed-desc {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-top: 2px;
}

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


/* ————— TICKET SYSTEM OVERHAUL ————— */
.apple-card {
    background: var(--bg-surface);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.apple-tab {
    background: transparent; border: none; padding: 10px 22px; border-radius: 12px;
    font-weight: 600; font-size: 0.9rem; color: var(--text-muted); cursor: pointer; transition: 0.3s;
}
.apple-tab.active { background: var(--primary); color: #fff; box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3); }

.tk-grid {
    display: grid;
    /* TICKETS-SPACE 2026-06-12: bandeja más ancha (más info por fila), altura por
       flex en vez de magic-number (llenaba mal el viewport), y transición suave. */
    grid-template-columns: clamp(300px, 23vw, 340px) minmax(0, 1fr) 300px;
    gap: 14px;
    height: auto !important;
    flex: 1 1 auto;
    max-height: none !important;
    min-height: 0 !important;
    transition: grid-template-columns .35s cubic-bezier(.2,.8,.2,1);
}
/* TICKETS-SPACE: sin ticket abierto el Control Center colapsa y el chat se
   come la columna (el placeholder vacío desperdiciaba ~300px). */
.tk-panel-right { min-width: 0; transition: opacity .25s ease; }
.tk-grid.tk-no-ticket { grid-template-columns: clamp(300px, 23vw, 340px) minmax(0, 1fr) 0px; }
.tk-grid.tk-no-ticket .tk-panel-right { opacity: 0; pointer-events: none; padding: 0; border-width: 0; }
@media (max-width: 1300px) { .tk-grid.tk-no-ticket { grid-template-columns: 280px minmax(0,1fr) 0px; } }
/* TICKETS-CC-COLLAPSE 2026-06-14: ocultar el Control Center (más ancho de chat). */
.tk-grid { position: relative; }
.tk-grid.tk-cc-collapsed { grid-template-columns: clamp(300px, 23vw, 340px) minmax(0, 1fr) 0px !important; }
@media (max-width: 1300px) { .tk-grid.tk-cc-collapsed { grid-template-columns: 280px minmax(0,1fr) 0px !important; } }
.tk-grid.tk-cc-collapsed .tk-panel-right { opacity: 0 !important; pointer-events: none; padding: 0; border-width: 0; overflow: hidden; }
.tk-cc-toggle { margin-left: auto; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border, rgba(255,255,255,.1)); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1; transition: .15s; }
.tk-cc-toggle:hover { background: rgba(255,255,255,.08); color: var(--text-main); }
/* Botón "Mostrar Control Center" — vive en el header del chat (al lado de Sincronizado),
   sólo visible cuando el panel está colapsado. Posicionado limpio arriba a la derecha. */
#tk-cc-reopen { display: none; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 20px; border: 1px solid rgba(99,102,241,0.35); background: rgba(99,102,241,0.12); color: var(--primary); cursor: pointer; font-size: 0.72rem; font-weight: 800; white-space: nowrap; transition: transform .14s ease, background .14s ease; }
#tk-cc-reopen:hover { background: rgba(99,102,241,0.2); transform: translateY(-1px); }
.tk-grid.tk-cc-collapsed #tk-cc-reopen { display: inline-flex; }
/* TICKETS-SPACE full-bleed: la sección usa todo el ancho (gana al padding 40/50
   de dashboard-pro.css y al max-width del content-body). */
.main-content.tk-page-mode { padding: 8px 16px 12px !important; max-width: none !important; }
.main-content.tk-page-mode .content-body { padding: 0 !important; max-width: none !important; margin: 0 !important; }
.main-content.tk-page-mode .content-header { padding: 12px 20px 6px !important; margin-bottom: 8px !important; }
@media (max-width: 768px) { .main-content.tk-page-mode { padding: 64px 6px 8px !important; } }
/* TICKETS-CC 2026-06-12: "Dar clave" más estético (dorado integrado, no verde sólido) */
.tk-cc-key { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(245,158,11,0.14), rgba(217,119,6,0.10)); color: #FCD34D;
    border: 1px solid rgba(245,158,11,0.34); font-weight: 700; cursor: pointer; text-align: left;
    transition: transform .14s ease, box-shadow .2s ease, border-color .14s ease; }
.tk-cc-key:hover { transform: translateY(-1px); border-color: rgba(245,158,11,0.6); box-shadow: 0 8px 22px -10px rgba(245,158,11,0.5); }
.tk-cc-key-ic { font-size: 1.5rem; line-height: 1; filter: drop-shadow(0 2px 6px rgba(245,158,11,0.4)); }
[data-theme="light"] .tk-cc-key { background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(217,119,6,0.08)); color: #92600a; border-color: rgba(245,158,11,0.4); }
/* badges de estado del usuario en el header del Control Center */
.tk-cc-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.tk-cc-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.64rem; font-weight: 800; padding: 3px 9px; border-radius: 9px; letter-spacing: 0.02em; }
.tk-cc-badge--ok { background: rgba(16,185,129,0.14); color: #34D399; border: 1px solid rgba(16,185,129,0.3); }
.tk-cc-badge--warn { background: rgba(245,158,11,0.12); color: #FCD34D; border: 1px solid rgba(245,158,11,0.3); }
.tk-cc-badge--bad { background: rgba(239,68,68,0.12); color: #FCA5A5; border: 1px solid rgba(239,68,68,0.3); }
.tk-cc-badge--neutral { background: rgba(255,255,255,0.06); color: var(--text-muted); border: 1px solid var(--border); }

/* SELECT-POLISH 2026-06-12: los <select> nativos (mercado, etc.) se veían feos
   en oscuro. Flecha propia + relleno oscuro coherente. */
select.imsg-input, select.setup-input, select.cl-input {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 34px !important; cursor: pointer;
}
select.imsg-input option { background: #14171f; color: var(--text-main); }
[data-theme="light"] select.imsg-input option { background: #ffffff; color: #0f172a; }

/* TICKETS-CC-TEXT 2026-06-12: los botones del Control Center cortaban palabras
   largas ("Renombrar") por overflow:hidden + padding grande. Texto completo. */
#tk-quick-panel .pro-btn {
    overflow: visible !important;
    padding: 10px 8px !important;
    white-space: normal !important;
    line-height: 1.2;
    font-size: 0.83rem;
    text-align: center;
    min-width: 0;
    gap: 6px;
    min-height: 44px;
}
#tk-quick-panel .pro-btn > span { flex-shrink: 0; }

.tk-grid > div {
    min-height: 0; /* Prevents grid children from stretching beyond grid height */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1300px) {
    /* TICKETS-UI 2026-06-01: NO ocultar el Control Center tan pronto (antes se
       escondía a ≤1300px y el user no encontraba claim/agregar/renombrar). Sólo
       angostamos los carriles laterales para que el panel de acciones quepa. */
    .tk-grid { grid-template-columns: 280px minmax(0,1fr) 264px; }
}
@media (max-width: 1080px) {
    .tk-grid { grid-template-columns: 240px minmax(0,1fr); }
    .tk-panel-right { display: none; } /* la barra de acciones del header cubre lo esencial */
}
/* Config en 2 columnas → colapsa a 1 en pantallas chicas. */
@media (max-width: 1080px) {
    .tk-config-grid { grid-template-columns: 1fr !important; }
}
/* Barra de ACCIONES del header del chat (siempre visible al abrir un ticket). */
.tk-hdr-act {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 10px; cursor: pointer;
    font-size: 0.76rem; font-weight: 800; line-height: 1;
    color: var(--text-main);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.tk-hdr-act:hover { transform: translateY(-1px); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.tk-hdr-act:active { transform: translateY(0); }
.tk-hdr-act--key {
    color: #fff;
    background: linear-gradient(135deg,#10b981,#059669);
    border-color: rgba(16,185,129,0.55);
    box-shadow: 0 6px 16px -10px rgba(16,185,129,0.7);
}
.tk-hdr-act--key:hover { background: linear-gradient(135deg,#12c993,#06a574); border-color: rgba(16,185,129,0.8); }
/* En pantallas medianas escondemos las etiquetas y dejamos solo los íconos. */
@media (max-width: 1480px) {
    .tk-hdr-act-lbl { display: none; }
    .tk-hdr-act { padding: 7px 10px; font-size: 0.92rem; }
}
@media (max-width: 800px) {
    .tk-grid { grid-template-columns: 1fr; height: auto !important; display: flex !important; flex-direction: column; }
    .tk-panel-left { height: 300px; max-height: 40vh; }
}
/* TICKETS-REMODEL (2026-05-30) MOBILE FIX: por debajo de 768px el chat panel
   debe APILARSE (stack), no quedar bloqueado por el max-height/overflow del
   grid. Se fuerza flex column + min-height para que cada panel crezca con su
   contenido y el chat sea usable a pantalla completa en móvil. */
@media (max-width: 768px) {
    .tk-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        gap: 12px !important;
    }
    .tk-grid > div {
        overflow: visible !important;      /* libera el lock de overflow del grid */
        min-height: 0 !important;
        width: 100% !important;
    }
    .tk-panel-left {
        height: auto !important;
        max-height: 42vh !important;       /* la bandeja sí es scroll acotado */
        min-height: 180px !important;
    }
    /* El chat (panel central, .pro-mod-card dentro del grid) ocupa alto propio. */
    .tk-grid > .pro-mod-card {
        min-height: 60vh !important;       /* alto usable garantizado en móvil */
        height: auto !important;
    }
    .tk-grid .chat-stream-fixed {
        max-height: none !important;
        min-height: 240px !important;      /* el stream crece, no se colapsa */
        flex: 1 1 auto !important;
    }
    .tk-panel-right {
        display: flex !important;          /* en móvil sí mostramos Control Center apilado */
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }
}

.tk-inbox-item {
    padding: 14px 18px; border-radius: 14px; margin-bottom: 6px; cursor: pointer;
    background: rgba(255,255,255,0.02); border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex; align-items: center; gap: 14px;
}
.tk-inbox-item:hover { background: rgba(255,255,255,0.05); transform: translateX(4px); }
.tk-inbox-item.active { 
    border-color: var(--primary); 
    background: rgba(88, 101, 242, 0.1); 
    box-shadow: 0 0 0 1px rgba(88, 101, 242, 0.2);
}

.tk-inbox-dot {
    width: 10px; height: 10px; border-radius: 50%; background: var(--primary); 
    box-shadow: 0 0 10px var(--primary); flex-shrink: 0;
}

.chat-stream-fixed {
    flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column;
    gap: 12px; scroll-behavior: smooth;
    background: rgba(0,0,0,0.15);
    min-height: 0; /* Ensures the flex child shrinks properly */
}

.imsg-input-bar {
    padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; gap: 12px; align-items: center; 
    background: rgba(0,0,0,0.2); backdrop-filter: blur(15px);
}

.imsg-input {
    flex: 1; border-radius: 24px; border: 1px solid rgba(255,255,255,0.1);
    padding: 12px 20px; background: rgba(255,255,255,0.05); color: var(--text-main); 
    outline: none; transition: 0.3s; font-size: 0.95rem;
}
.imsg-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.15); }

.chat-btn {
    padding: 12px 22px; border-radius: 24px; font-weight: 700; font-size: 0.9rem;
    border: none; cursor: pointer; transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.chat-btn-send { background: linear-gradient(135deg, var(--primary), #7289da); color: #fff; }
.chat-btn-send:hover { box-shadow: 0 4px 15px rgba(88, 101, 242, 0.4); transform: translateY(-1px); }
.chat-btn-close { background: rgba(255, 59, 48, 0.15); color: #ff6b6b; }
.chat-btn-close:hover { background: #ff3b30; color: #fff; transform: translateY(-1px); }

/* Dropdown */
.tk-custom-dropdown { position: relative; }
.tk-dropdown-trigger {
    display: flex; align-items: center; gap: 8px; padding: 8px 14px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; cursor: pointer; font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.tk-dropdown-content {
    position: absolute; top: calc(100% + 8px); right: 0; width: 200px;
    background: #1a1a1a; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: none;
    flex-direction: column; z-index: 1000; overflow: hidden;
}
.tk-custom-dropdown.active .tk-dropdown-content { display: flex; animation: slideInUp 0.2s ease; }
.tk-dropdown-item {
    padding: 12px 16px; cursor: pointer; transition: 0.2s; font-size: 0.85rem; color: var(--text-muted);
}
.tk-dropdown-item:hover { background: rgba(255,255,255,0.05); color: var(--text-main); }
.tk-dropdown-item.active { background: rgba(88, 101, 242, 0.1); color: var(--primary); font-weight: 700; }

.sse-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #23a55a; box-shadow: 0 0 8px #23a55a; }
.sse-status-dot.connecting { background: #f0b232; box-shadow: 0 0 8px #f0b232; }
.sse-status-dot.disconnected { background: #f23f43; box-shadow: 0 0 8px #f23f43; }

.tk-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; opacity: 0.4; gap: 12px; text-align: center;
}

/* TICKETS-REMODEL (2026-05-30): sub-tabs + paneles de integración + badge OW. */
.tk-subtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-subtab {
    padding: 6px 14px; border-radius: 10px; font-size: 0.8rem; font-weight: 700;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-muted); cursor: pointer; transition: all 0.18s ease; white-space: nowrap;
}
.tk-subtab:hover { color: var(--text-main); background: rgba(255,255,255,0.07); }
.tk-subtab.active { color: var(--primary); background: rgba(88,101,242,0.12); border-color: var(--primary); }
.tk-ow-badge {
    display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 800;
    padding: 2px 8px; border-radius: 8px; background: rgba(88,101,242,0.15);
    color: #A5B4FC; border: 1px solid rgba(88,101,242,0.35); letter-spacing: 0.3px;
}
/* TICKETS-STAFF-ID 2026-06-12: variante "Web Staff" (cyan) + detalle "vía
   Dashboard" para distinguir respuestas del panel web del bot genérico. */
.tk-ow-badge--web { background: rgba(34,193,195,0.15); color: #7fe9ea; border-color: rgba(34,193,195,0.35); }
/* BOT-BADGE 2026-06-14: el span "BOT" (mensajes del bot genérico) no tenía estilos. */
.bot-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.66rem; font-weight: 800;
    padding: 2px 8px; border-radius: 8px; background: rgba(148,163,184,0.16);
    color: #cbd5e1; border: 1px solid rgba(148,163,184,0.3); letter-spacing: 0.4px; }
[data-theme="light"] .bot-badge { background: rgba(100,116,139,0.12); color: #475569; border-color: rgba(100,116,139,0.28); }
.tk-via-badge {
    display: inline-flex; align-items: center; margin-left: 6px; font-size: 0.6rem; font-weight: 700;
    padding: 1px 7px; border-radius: 7px; background: rgba(255,255,255,0.06);
    color: var(--text-muted); border: 1px solid rgba(255,255,255,0.1);
    letter-spacing: 0.4px; text-transform: uppercase; vertical-align: middle;
}
[data-theme="light"] .tk-ow-badge--web { background: rgba(20,160,162,0.1); color: #0e8a8c; border-color: rgba(20,160,162,0.28); }
[data-theme="light"] .tk-via-badge { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); }
.tk-int-card {
    background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px; padding: 16px; margin-bottom: 12px; transition: border-color 0.2s ease;
}
.tk-int-card:hover { border-color: rgba(88,101,242,0.3); }
.tk-int-link {
    display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 700;
    color: var(--primary); text-decoration: none; padding: 4px 10px; border-radius: 8px;
    background: rgba(88,101,242,0.08); border: 1px solid rgba(88,101,242,0.2); transition: 0.18s;
}
.tk-int-link:hover { background: rgba(88,101,242,0.16); }
/* Light theme: el dropdown de bandeja usaba #1a1a1a fijo (ilegible en claro). */
[data-theme="light"] .tk-dropdown-content { background: #ffffff; border-color: rgba(0,0,0,0.1); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
[data-theme="light"] .tk-subtab { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .tk-subtab:hover { background: rgba(0,0,0,0.06); }
/* FIX modo claro: el sub-tab activo no se distinguía (faltaba override .active
   en light → se veía igual que los inactivos). Fondo accent visible + texto/borde accent. */
[data-theme="light"] .tk-subtab.active { color: #4f46e5; background: rgba(88,101,242,0.16); border-color: var(--primary); font-weight: 700; }
[data-theme="light"] .tk-int-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .tk-ow-badge { background: rgba(88,101,242,0.16); color: #3730a3; }
/* WA-CHAT LIGHT 2026-06-14 (QA): reacciones, citas, badges staff e indicadores
   usaban rgba blanco/negro pensados para oscuro → invisibles en modo claro. */
[data-theme="light"] .wa-react { background: rgba(15,23,42,0.06) !important; border-color: rgba(15,23,42,0.14) !important; color: #0f172a !important; }
[data-theme="light"] .wa-react:hover { background: rgba(15,23,42,0.1) !important; }
[data-theme="light"] .wa-react.active { background: rgba(88,101,242,0.14) !important; border-color: rgba(88,101,242,0.35) !important; color: #4f46e5 !important; }
[data-theme="light"] .wa-msg-left .wa-reply-quote { background: rgba(15,23,42,0.05) !important; border-left-color: var(--primary) !important; color: #334155 !important; }
[data-theme="light"] .wa-msg-left .wa-reply-quote:hover { background: rgba(15,23,42,0.09) !important; }
[data-theme="light"] .wa-msg-right .tk-ow-badge, [data-theme="light"] .wa-msg-right .tk-ow-badge--web { background: rgba(255,255,255,0.28) !important; color: #fff !important; border-color: rgba(255,255,255,0.5) !important; }
[data-theme="light"] .wa-actions button:hover { background: rgba(88,101,242,0.14) !important; border-color: rgba(88,101,242,0.3) !important; color: #0f172a !important; }
[data-theme="light"] #sse-status-container { background: rgba(15,23,42,0.04) !important; border-color: rgba(15,23,42,0.1) !important; }
[data-theme="light"] #tk-cc-reopen { background: rgba(88,101,242,0.08) !important; border-color: rgba(88,101,242,0.25) !important; color: #4f46e5 !important; }
[data-theme="light"] #tk-cc-reopen:hover { background: rgba(88,101,242,0.14) !important; border-color: rgba(88,101,242,0.4) !important; }
[data-theme="light"] .tk-cc-toggle { color: #475569 !important; }
[data-theme="light"] .tk-cc-toggle:hover { color: #0f172a !important; background: rgba(15,23,42,0.07) !important; }

/* --- TICKET CATEGORY CARDS (Config) --- */
.tk-cat-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 20px;
    position: relative;
    transition: all 0.3s ease;
}
.tk-cat-card:hover {
    border-color: var(--primary);
    background: rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}
.tk-cat-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(237, 66, 69, 0.1);
    color: var(--danger);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}
.tk-cat-close:hover {
    background: var(--danger);
    color: #fff;
    transform: rotate(90deg);
}

.apple-card hr {
    border: 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    margin: 20px 0;
}


/* ════════════ Tournaments & Brackets ════════════ */
.tourney-container {
    padding: 20px;
    animation: fadeIn 0.5s ease-out;
}

.tourney-header {
    margin-bottom: 30px;
}

.tourney-title-main {
    font-size: 2.2rem;
    background: linear-gradient(135deg, #fff, #9CA3AF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
}

.tourney-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.tourney-card {
    background: var(--bg-surface);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: var(--transition);
    cursor: pointer;
}

.tourney-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(88, 101, 242, 0.2);
}

.tourney-card-banner {
    height: 160px;
    position: relative;
}

.tourney-status-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    backdrop-filter: blur(5px);
}

.tourney-status-badge.active { background: rgba(87, 242, 135, 0.2); color: #57F287; border: 1px solid rgba(87, 242, 135, 0.4); }
.tourney-status-badge.completed { background: rgba(237, 66, 69, 0.2); color: #ED4245; border: 1px solid rgba(237, 66, 69, 0.4); }

.tourney-card-content {
    padding: 20px;
}

.tourney-name {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.tourney-meta {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Bracket Visualization */
.bracket-scroller {
    overflow-x: auto;
    padding: 20px 0;
    width: 100%;
}

/* ════════════ Control Center ════════════ */
.control-center {
    --cc-accent: var(--primary);
    background: var(--bg-glass);
    border-radius: 24px;
    overflow: hidden;
    color: var(--text-main);
}

.cc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
}

.cc-title {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -0.5px;
}

.cc-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.cc-btn-close {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition-fast);
}

.cc-btn-close:hover {
    background: var(--danger);
    color: white;
}

.cc-tabs {
    display: flex;
    gap: 20px;
    padding: 0 24px;
    border-bottom: 1px solid var(--border);
}

.cc-tab {
    padding: 14px 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: var(--transition-fast);
}

.cc-tab:hover {
    color: var(--text-main);
}

.cc-tab.active {
    color: var(--cc-accent);
}

.cc-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--cc-accent);
    box-shadow: 0 0 10px var(--primary-glow);
}

.cc-panel {
    padding: 24px;
    animation: fadeIn 0.3s ease;
}

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

.cc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cc-grid .full {
    grid-column: span 2;
}

.cc-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    transition: var(--transition-fast);
    outline: none;
}

.cc-input:focus {
    border-color: var(--cc-accent);
    background: rgba(0, 0, 0, 0.5);
}

.cc-toggle-group {
    display: flex;
    gap: 8px;
    background: var(--bg-input);
    padding: 4px;
    border-radius: 14px;
}

.cc-toggle {
    flex: 1;
    padding: 10px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 800;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition-fast);
    color: var(--text-muted);
}

.cc-toggle.active {
    background: var(--cc-accent);
    color: white;
    box-shadow: 0 4px 12px var(--primary-glow);
}

.warn-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 16px;
    border: 1px solid var(--border);
}

.warn-header {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.warn-list {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.warn-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.warn-meta {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.warn-reason {
    font-size: 0.85rem;
    color: var(--text-main);
}

.warn-add {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.cc-btn-add {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--cc-accent);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

.cc-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
}

.cc-btn-save {
    width: 100%;
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), #4f46e5);
    color: white;
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.2);
}

.cc-btn-save:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 15px 30px rgba(79, 70, 229, 0.4);
}

/* Status Dot in Control Center */
.avatar-status-online {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    background: #10b981;
    border: 4px solid var(--bg-base);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.bracket-container {
    display: flex;
    gap: 50px;
    min-width: max-content;
    padding: 20px;
}

.bracket-round {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.round-title {
    text-align: center;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
[data-theme="light"] .round-title { color: #4338ca; }

.round-matches {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
}

.bracket-match {
    position: relative;
    width: 200px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin: 10px 0;
}

.match-team {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.match-team:last-child { border-bottom: none; }

.match-team.winner {
    background: rgba(88, 101, 242, 0.1);
    color: var(--primary);
    font-weight: 700;
}

.match-team.placeholder {
    opacity: 0.3;
    font-style: italic;
}

.team-score {
    font-family: var(--font-mono);
    font-weight: 700;
}

/* ════════════ Exclusive Dashboard UI v2.0 ════════════ */
.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.pro-chip {
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.pro-chip.success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.2);
}

.pro-chip.danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
}

.tabs-modern {
    display: flex;
    gap: 12px;
    padding: 10px 0;
}

.tab-btn {
    padding: 12px 24px;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.tab-btn.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 20px rgba(88, 101, 242, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

.lb-row:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    transform: translateX(5px);
}

.card.exclusive {
    border-radius: 24px;
    box-shadow: 0 15px 45px rgba(0,0,0,0.25);
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%), var(--bg-surface);
}

.btn-ios-mini {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.btn-ios-mini:hover:not(:disabled) {
    background: var(--primary);
    transform: scale(1.1);
}

.btn-ios-mini:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
   OW-EDITOR — Professional Member Control Center
   ═══════════════════════════════════════════════════════════════ */
.ow-editor { background: var(--bg-base); border-radius: 20px; overflow: hidden; }
.ow-banner { position: relative; height: 140px; }
.ow-banner-fade { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg-base) 0%, transparent 60%); }
.ow-avatar-wrap { position: absolute; bottom: -36px; left: 24px; }
.ow-avatar { width: 88px; height: 88px; border-radius: 22px; border: 5px solid var(--bg-base); box-shadow: 0 8px 24px rgba(0,0,0,0.5); cursor: pointer; transition: transform 0.2s; object-fit: cover; }
.ow-avatar:hover { transform: scale(1.05); }
.ow-status-dot { position: absolute; bottom: 6px; right: 6px; width: 18px; height: 18px; background: #22c55e; border-radius: 50%; border: 4px solid var(--bg-base); }
.ow-info-bar { padding: 44px 24px 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ow-info-left { flex: 1; min-width: 0; }
.ow-name { font-size: 1.6rem; font-weight: 900; color: #fff; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-uid { font-size: 0.78rem; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; }
.ow-badge { padding: 5px 14px; border-radius: 10px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px; }
.ow-badge.success { background: rgba(34,197,94,0.12); color: #4ade80; border: 1px solid rgba(34,197,94,0.2); }
.ow-badge.danger { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }

.ow-tabs { display: flex; gap: 0; padding: 0 24px; border-bottom: 2px solid rgba(255,255,255,0.04); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ow-tab { padding: 12px 18px; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: 0.2s; }
.ow-tab:hover { color: #fff; }
.ow-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.ow-tab-count { background: rgba(239,68,68,0.2); color: #f87171; font-size: 0.65rem; padding: 2px 7px; border-radius: 8px; margin-left: 6px; font-weight: 800; }

.ow-panels { padding: 20px 24px; }
.ow-panel { display: none; animation: owFadeIn 0.2s ease; }
.ow-panel.active { display: block; }
@keyframes owFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.ow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ow-field { display: flex; flex-direction: column; }
.ow-field.full { grid-column: 1 / -1; }
.ow-label { font-size: 0.68rem; font-weight: 800; color: var(--text-muted); letter-spacing: 1.2px; margin-bottom: 8px; text-transform: uppercase; }
.ow-input { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 12px 16px; color: #fff; font-size: 0.9rem; font-family: var(--font-sans); outline: none; transition: 0.2s; }
.ow-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(88,101,242,0.15); }

/* Custom Select (replaces native <select>) */
.ow-select { position: relative; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 12px 16px; color: #fff; font-size: 0.9rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; user-select: none; }
.ow-select:hover { border-color: rgba(255,255,255,0.12); }
.ow-select.open { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(88,101,242,0.15); }
.ow-select-arrow { font-size: 0.7rem; color: var(--text-muted); transition: transform 0.2s; }
.ow-select.open .ow-select-arrow { transform: rotate(180deg); }
.ow-select-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #151a27; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 6px; z-index: 999; display: none; box-shadow: 0 12px 36px rgba(0,0,0,0.5); max-height: 220px; overflow-y: auto; }
/* DROPDOWN-FLIP 2026-06-11: abrir hacia arriba cuando no hay espacio abajo
   (selects al fondo de un modal con overflow) — evita el recorte del panel. */
.ow-select.ow-select--up .ow-select-dropdown { top: auto; bottom: calc(100% + 6px); }
.ow-select.open .ow-select-dropdown { display: block; animation: owDropIn 0.15s ease; }
@keyframes owDropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.ow-select-opt { padding: 10px 14px; border-radius: 8px; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; transition: 0.15s; }
.ow-select-opt:hover { background: rgba(88,101,242,0.1); color: #fff; }
.ow-select-opt.active { background: rgba(88,101,242,0.15); color: var(--primary); font-weight: 700; }

.ow-section-title { font-size: 0.68rem; font-weight: 800; color: var(--text-muted); letter-spacing: 1.2px; text-transform: uppercase; margin: 20px 0 12px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.04); }
.ow-toggle-row { display: flex; gap: 10px; }
.ow-toggle-btn { flex: 1; padding: 12px; border-radius: 12px; text-align: center; font-size: 0.82rem; font-weight: 700; cursor: pointer; border: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.2); color: var(--text-muted); transition: 0.2s; }
.ow-toggle-btn.active { border-color: var(--primary); background: rgba(88,101,242,0.1); color: var(--primary); }

.ow-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ow-qbtn { padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.2); color: var(--text-muted); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: 0.2s; font-family: var(--font-sans); }
.ow-qbtn:hover { transform: translateY(-1px); }
.ow-qbtn.warn { border-color: rgba(245,158,11,0.2); color: #fbbf24; }
.ow-qbtn.warn:hover { background: rgba(245,158,11,0.1); }
.ow-qbtn.danger { border-color: rgba(239,68,68,0.2); color: #f87171; }
.ow-qbtn.danger:hover { background: rgba(239,68,68,0.1); }
.ow-qbtn.info { border-color: rgba(59,130,246,0.2); color: #60a5fa; }
.ow-qbtn.info:hover { background: rgba(59,130,246,0.1); }
.ow-qbtn.success { border-color: rgba(34,197,94,0.2); color: #4ade80; }
.ow-qbtn.success:hover { background: rgba(34,197,94,0.1); }

.ow-warn-list { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.ow-warn-card { padding: 12px 16px; border-radius: 12px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.04); }
.ow-warn-meta { font-size: 0.65rem; font-weight: 800; color: var(--primary); letter-spacing: 0.5px; }
.ow-warn-text { margin-top: 4px; font-size: 0.88rem; color: var(--text-main); }
.ow-empty-mini { text-align: center; padding: 24px; color: var(--text-muted); font-size: 0.85rem; opacity: 0.6; }
.ow-add-row { display: flex; gap: 10px; margin-top: 14px; }
.ow-add-btn { width: 48px; height: 48px; border-radius: 12px; background: var(--primary); color: #fff; border: none; font-size: 1.4rem; cursor: pointer; flex-shrink: 0; transition: 0.2s; font-weight: 700; }
.ow-add-btn:hover { background: var(--primary-hover); transform: scale(1.05); }

.ow-strike-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ow-strike-dots { display: flex; gap: 8px; flex: 1; }
.ow-strike-dot { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06); color: var(--text-muted); transition: 0.2s; }
.ow-strike-dot.active { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); color: #f87171; }
.ow-strike-controls { display: flex; gap: 6px; }

.ow-save-bar { padding: 16px 24px 24px; }
.ow-save-btn { width: 100%; padding: 16px; border-radius: 14px; background: linear-gradient(135deg, var(--primary), #7c3aed); color: #fff; border: none; font-size: 0.95rem; font-weight: 800; cursor: pointer; transition: 0.2s; letter-spacing: 0.5px; font-family: var(--font-sans); }
.ow-save-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(88,101,242,0.3); }

@media (max-width: 640px) {
    .ow-grid { grid-template-columns: 1fr; }
    .ow-banner { height: 100px; }
    .ow-avatar { width: 70px; height: 70px; border-radius: 18px; }
    .ow-avatar-wrap { bottom: -30px; left: 16px; }
    .ow-info-bar { padding: 38px 16px 12px; }
    .ow-name { font-size: 1.3rem; }
    .ow-tabs { padding: 0 16px; gap: 0; }
    .ow-tab { padding: 10px 12px; font-size: 0.72rem; }
    .ow-panels { padding: 16px; }
    .ow-quick-grid { grid-template-columns: 1fr 1fr; }
    .ow-strike-dots { gap: 4px; }
    .ow-strike-dot { width: 32px; height: 32px; font-size: 0.7rem; }
    .ow-save-bar { padding: 12px 16px 20px; }
    .donors-layout { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE-V1 (2026-05-21) - Comprehensive mobile responsive overrides
   Touch-friendly, no horizontal scroll, modals adapt, grids collapse.
   Cascade order: style.css → oneway-navbar.css → dashboard-pro.css → dashboard-skin.css
   We use !important where dashboard-pro.css or skin would otherwise win.
   ════════════════════════════════════════════════════════════════════════ */

/* MOBILE-V1: Prevent horizontal scroll at any width ≥ 320px */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* MOBILE-V1: Touch target floor — any clickable that's smaller than 44px on touch */
@media (hover: none) and (pointer: coarse) {
    .btn, .btn-ios, .btn-primary, .btn-icon, .btn-ghost,
    .pro-btn, .pro-filter-chip, .pro-tab, .pro-chip,
    .nav-item, .nav-link, .tab, .auth-tab,
    .tk-inbox-item, .tk-cat-close, .tk-dropdown-trigger, .tk-dropdown-item,
    .modal-close, .sidebar-toggle,
    .guild-drop-item, .ow-toggle-btn, .ow-qbtn, .ow-tab,
    .mention-item, .imsg-input, .pro-search,
    .data-actions button, .data-actions a {
        min-height: 44px;
    }
    /* Disable hover lifts on touch devices — they stick after tap */
    .pro-mod-card:hover, .pro-stat:hover, .pro-clan-card:hover,
    .stat-card:hover, .nav-item:hover, .tk-inbox-item:hover,
    .card-hover:hover, .market-card:hover, .donor-row:hover,
    .pro-feed-item:hover, .pro-chip:hover {
        transform: none !important;
    }
    /* Always-visible action buttons (no hover discovery) */
    .data-actions, .pro-mod-card .pro-mod-body button,
    .tk-inbox-item button, .donor-row button, .market-card button {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* MOBILE-V1: Focus-visible states for keyboard navigation */
.btn:focus-visible, .btn-ios:focus-visible, .btn-primary:focus-visible,
.btn-icon:focus-visible, .btn-ghost:focus-visible,
.pro-btn:focus-visible, .pro-filter-chip:focus-visible, .pro-tab:focus-visible,
.nav-item:focus-visible, .nav-link:focus-visible, .tab:focus-visible,
.tk-inbox-item:focus-visible, .modal-close:focus-visible,
.sidebar-toggle:focus-visible, .ow-toggle-btn:focus-visible,
.ow-qbtn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* MOBILE-V1: Tablet & phone — universal layout fixes for ≤ 768px */
@media (max-width: 768px) {
    /* Hide the top-navbar entirely on mobile — the .ow-navbar shared bar handles it.
       BUT we need to keep #sidebar-collapse-btn reachable, so we shrink the
       container to 0px (children hidden) but keep #sidebar-collapse-btn
       as a FAB via fixed positioning. We need EXTRA specificity to beat
       `body > .top-navbar { display: none !important }` from oneway-navbar.css.
       Strategy: use the ID `#top-navbar` (0,1,0,0) which beats class-only rules. */
    body #top-navbar, html body #top-navbar {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        z-index: 9700 !important;
        pointer-events: none;
    }
    /* Hide direct children of #top-navbar EXCEPT the nav-left container.
       We keep nav-left visible (display:contents) so its child button can
       still be reached and positioned as a FAB. */
    body #top-navbar > *:not(.nav-left) { display: none !important; }
    /* Keep the nav-left container (which holds the hamburger) using display:contents
       so layout doesn't matter — only the fixed-positioned button shows. */
    body #top-navbar .nav-left { display: contents !important; }
    /* Hide direct children of .nav-left EXCEPT the hamburger button. */
    body #top-navbar .nav-left > *:not(#sidebar-collapse-btn) { display: none !important; }

    /* MOBILE-V1: Floating hamburger FAB to open/close the sidebar drawer.
       The top-navbar above is shrunk to 0px (parent stays in DOM for the
       JS click handler to find the button by ID), so the dashboard's own
       #sidebar-collapse-btn can be promoted to a fixed FAB anchored
       bottom-right (thumb-friendly).
       The app.js sidebarToggleFn updates the inner text to '☰' / '✕' so
       this single button works for both open and close.
       NOTE: the parent .top-navbar's child rule `display:none !important` above
       targets DIRECT children of nav-left, but display:contents lets the button
       be re-positioned out of normal flow via fixed. We re-apply display:flex on
       the button with high specificity. */
    body #sidebar-collapse-btn,
    body .top-navbar #sidebar-collapse-btn,
    body .top-navbar .nav-left #sidebar-collapse-btn,
    html body .top-navbar .nav-left #sidebar-collapse-btn {
        display: flex !important;
        position: fixed !important;
        bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
        right: max(16px, env(safe-area-inset-right, 16px)) !important;
        top: auto !important;
        left: auto !important;
        z-index: 9700 !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, var(--primary), #4f46e5) !important;
        color: #fff !important;
        font-size: 1.45rem !important;
        font-weight: 700;
        line-height: 1;
        border: 1px solid rgba(255,255,255,0.18) !important;
        box-shadow:
            0 10px 32px rgba(88, 101, 242, 0.55),
            0 0 0 1px rgba(88, 101, 242, 0.35) inset !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        animation: fadeIn 0.3s ease;
    }
    #sidebar-collapse-btn:active {
        transform: scale(0.96);
    }
    /* Make sure the inner span (which gets ☰ or ✕) is centered */
    #sidebar-collapse-btn > * {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Main content takes full width, no left offset */
    .main-content, #main-content {
        margin-left: 0 !important;
        padding: 14px 12px !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }
    .content-header { padding: 8px 4px 6px !important; margin-bottom: 14px !important; }
    .content-header h2 { font-size: 1.35rem !important; line-height: 1.2; }
    .content-body { padding: 4px 0 !important; }

    /* Body padding: shared .ow-navbar stays 72px (var(--ow-nav-height)).
       Reduce slightly on mobile so cards don't get pushed too far. */
    body { padding-top: var(--ow-nav-height, 72px) !important; }

    /* Sidebar becomes a drawer (anchored below the shared .ow-navbar) */
    .sidebar, aside.sidebar, #sidebar {
        position: fixed !important;
        left: 0 !important;
        top: var(--ow-nav-height, 72px) !important;
        bottom: 0 !important;
        height: calc(100vh - var(--ow-nav-height, 72px)) !important;
        width: 280px !important;
        max-width: 86vw !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
        z-index: 9500 !important;
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.55) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* MOBILE-FIX 2026-06-14: momentum scroll iOS + no encadenar scroll al body */
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
    .sidebar.show, aside.sidebar.show, #sidebar.show {
        transform: translateX(0) !important;
    }
    /* Force the desktop collapsed pill rail OFF on mobile —
       on mobile the sidebar is a drawer, not a pill rail. */
    .sidebar.collapsed, aside.sidebar.collapsed, #sidebar.collapsed {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 86vw !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .sidebar.collapsed .sidebar-brand,
    .sidebar.collapsed .sidebar-user-info,
    .sidebar.collapsed .nav-section-label {
        display: block !important;
    }
    .sidebar.collapsed .nav-item,
    .sidebar.collapsed .sidebar-nav .nav-item {
        width: auto !important;
        height: auto !important;
        min-height: 44px !important;
        padding: 10px 14px !important;
        margin: 2px 10px !important;
        font-size: 0.92rem !important;
        color: var(--text-main) !important;
        justify-content: flex-start !important;
        gap: 12px !important;
    }
    .sidebar.collapsed .nav-item-icon {
        font-size: 1.2rem !important;
    }
    /* SIDEBAR-COLLAPSE-V3: en mobile la sidebar es un DRAWER (no la pill rail);
       los labels SIEMPRE visibles aunque exista la clase .collapsed. */
    .sidebar.collapsed .nav-item-text {
        opacity: 1 !important;
        max-width: none !important;
        pointer-events: auto !important;
    }

    /* Backdrop when sidebar is open. The sidebar itself is z-index:9500, the
       FAB sits at 9700. The backdrop must be < 9500 but > content (which is
       under z-index:1). Using a stacking context trick: ::before with negative
       margin so it covers area outside the drawer. */
    .sidebar.show::after {
        content: '';
        position: fixed;
        top: var(--ow-nav-height, 72px);
        left: 280px;
        right: 0;
        bottom: 0;
        background: rgba(2, 6, 14, 0.65);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: -1;
        animation: fadeIn 0.2s ease;
        pointer-events: none;
    }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    /* Toolbar: stack vertically on mobile */
    .pro-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px !important;
        gap: 10px !important;
    }
    .pro-toolbar > * { width: 100% !important; }
    /* Exception: a toolbar that's *only* filter chips (inline overflow-x:auto)
       should keep chips on a horizontally-scrollable single row.
       Detected via inline style[overflow-x:auto]. */
    .pro-toolbar[style*="overflow-x:auto"],
    .pro-toolbar[style*="overflow-x: auto"] {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none;
    }
    .pro-toolbar[style*="overflow-x:auto"]::-webkit-scrollbar,
    .pro-toolbar[style*="overflow-x: auto"]::-webkit-scrollbar { display: none; }
    .pro-toolbar[style*="overflow-x:auto"] > *,
    .pro-toolbar[style*="overflow-x: auto"] > * {
        width: auto !important;
        flex-shrink: 0 !important;
    }
    .pro-toolbar-title {
        margin-right: 0 !important;
        font-size: 1rem !important;
    }
    .pro-toolbar-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
        flex-shrink: 0;
    }
    /* Toolbar inputs full-width — kill the inline width:280px / 240px */
    .pro-toolbar input[type="text"],
    .pro-toolbar .pro-search,
    .pro-toolbar .imsg-input,
    .pro-toolbar [style*="width:280px"],
    .pro-toolbar [style*="width: 280px"],
    .pro-toolbar [style*="width:240px"],
    .pro-toolbar [style*="width: 240px"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .pro-search { width: 100% !important; }
    .pro-search:focus { width: 100% !important; }

    /* Tab bars: horizontally scrollable */
    .pro-tabs, .ow-tabs, .tk-tabs, .tabs, .auth-tabs, .apple-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none;
        padding-bottom: 6px;
    }
    .pro-tabs::-webkit-scrollbar,
    .ow-tabs::-webkit-scrollbar,
    .tk-tabs::-webkit-scrollbar,
    .tabs::-webkit-scrollbar,
    .auth-tabs::-webkit-scrollbar { display: none; }
    .pro-tab, .ow-tab, .tk-tab, .tab, .apple-tab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Filter chips area */
    [id="mem-filters"], [id="audit-filters"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
    }
    [id="mem-filters"]::-webkit-scrollbar,
    [id="audit-filters"]::-webkit-scrollbar { display: none; }
    .mem-filter-chip, .pro-filter-chip { flex-shrink: 0 !important; white-space: nowrap; }

    /* Stat grids → 2 columns */
    .stats-grid, .pro-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 18px !important;
    }
    .stat-card, .pro-stat {
        padding: 14px 12px !important;
        min-width: 0 !important;
    }
    .stat-value, .pro-stat-value { font-size: 1.5rem !important; }
    .stat-label, .pro-stat-label { font-size: 0.68rem !important; }
    .stat-icon-wrapper, .pro-stat-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
        margin-bottom: 10px !important;
    }

    /* Cards & grids collapse to 1 column */
    .pro-clan-grid, .pro-mod-grid,
    .data-grid-v2, .overview-grid,
    .pro-overview-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    /* Market grid: 1 col */
    .market-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    /* Inline width: repeat(N, 1fr) overrides at low widths — squash to 2 cols */
    [style*="grid-template-columns: repeat(5,"],
    [style*="grid-template-columns:repeat(5,"],
    [style*="grid-template-columns: repeat(4,"],
    [style*="grid-template-columns:repeat(4,"],
    [style*="grid-template-columns: repeat(3,"],
    [style*="grid-template-columns:repeat(3,"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    [style*="grid-template-columns: 1fr auto auto auto"],
    [style*="grid-template-columns:1fr auto auto auto"] {
        grid-template-columns: 1fr !important;
    }
    /* Donor detail / lb-tp-body / tn-field-row / setup grids 2-col → 1 col.
       Includes both `grid-template-columns: 1fr 1fr` (with space) and
       `grid-template-columns:1fr 1fr` (no space) variants. */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Pro hero: tighter on mobile */
    .pro-hero {
        padding: 20px 18px !important;
        border-radius: 18px !important;
        margin-bottom: 16px !important;
    }
    .pro-hero-content { gap: 16px !important; }
    .pro-hero-avatar-wrap { width: 80px !important; height: 80px !important; }
    .pro-hero-title { font-size: 1.5rem !important; letter-spacing: -0.5px !important; }
    .pro-hero-text { min-width: 0 !important; }
    .pro-hero-meta { gap: 6px !important; }
    .pro-chip { font-size: 0.72rem !important; padding: 4px 10px !important; }

    /* Banner / Overview hero classic */
    .overview-banner-container { height: 160px !important; border-radius: 18px !important; }
    .overview-banner-content { padding: 16px !important; gap: 12px !important; }
    .banner-display-name { font-size: 1.5rem !important; }
    .banner-avatar { width: 72px !important; height: 72px !important; border-radius: 18px !important; }

    /* Modal overlay & card */
    .modal-overlay {
        align-items: flex-end !important;
        justify-content: stretch !important;
        padding: 0 !important;
    }
    .modal-card, .modal-content {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 92vh !important;
        border-radius: 22px 22px 0 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    .modal-card.wide, .modal-card.exclusive {
        max-width: 100vw !important;
    }
    .modal-header {
        padding: 16px 18px !important;
        flex-shrink: 0;
    }
    .modal-title { font-size: 1.05rem !important; }
    .modal-close {
        min-width: 40px !important;
        min-height: 40px !important;
        width: 40px;
        height: 40px;
        font-size: 1.2rem !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    .modal-body {
        padding: 16px 18px 18px !important;
        font-size: 0.92rem;
        max-height: calc(92vh - 64px);
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .modal-footer {
        padding: 14px 18px !important;
        flex-shrink: 0;
        flex-wrap: wrap;
        gap: 8px;
    }
    .modal-footer .btn-ios, .modal-footer .btn { width: 100%; }

    /* Tournament modal (injected inline by app.js): tn-modal-backdrop */
    #tn-modal-backdrop {
        padding: 70px 0 0 !important;
        align-items: flex-end !important;
    }
    #tn-modal {
        max-width: 100vw !important;
        max-height: 92vh !important;
        width: 100% !important;
        border-radius: 22px 22px 0 0 !important;
    }
    #tn-modal-scroll {
        padding: 18px 18px 12px !important;
    }
    #tn-modal .tn-modal-actions {
        margin: 12px -18px -12px !important;
        padding: 12px 18px !important;
        flex-direction: column-reverse;
        align-items: stretch;
    }
    #tn-modal .tn-btn { width: 100%; min-height: 44px; }
    #tn-modal .tn-field-row { grid-template-columns: 1fr !important; }

    /* Editor (Member, Settings etc.) ow-editor */
    .ow-editor {
        max-width: 100vw !important;
        border-radius: 18px !important;
    }
    .ow-grid { grid-template-columns: 1fr !important; }

    /* Tk grid (tickets) full-stack already at 800px — reinforce */
    .tk-grid {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        gap: 10px !important;
    }
    .tk-panel-left { max-height: 240px !important; height: 240px !important; }
    .tk-panel-right { display: none !important; }
    .tk-cat-card { padding: 14px 14px 14px 18px !important; }
    .tk-cat-close { width: 36px !important; height: 36px !important; top: 8px !important; right: 8px !important; }

    /* Action grid → 1 col */
    .action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
    }
    .widget-btn { padding: 12px 8px !important; font-size: 0.78rem; min-height: 44px; }

    /* Chat layout: sidebar slides over content */
    .chat-layout-v2, .chat-layout {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        max-height: calc(100vh - 100px) !important;
        margin: 0 !important;
        border-radius: 14px !important;
    }
    .chat-sidebar-v3, .chat-sidebar-v2 {
        width: 260px !important;
    }
    .chat-messages-v3 { padding: 14px 12px !important; }
    .chat-input-row-v3 { padding: 12px 14px 14px !important; }
    .imsg-input-bar { padding: 10px 12px !important; flex-wrap: wrap; gap: 8px !important; }
    .chat-btn { padding: 10px 14px !important; font-size: 0.82rem !important; }

    /* Discord avatar shrinks */
    .discord-avatar { width: 36px !important; height: 36px !important; }
    .discord-msg { padding: 2px 10px !important; gap: 10px !important; }

    /* Login screen */
    .login-card { padding: 22px 18px !important; }
    .login-title { font-size: 1.55rem !important; }
    .login-subtitle { font-size: 0.85rem !important; }

    /* Tabs become scrollable horizontal */
    .tabs { padding-bottom: 6px; margin-bottom: 14px; }

    /* Auth field grid → single column */
    .auth-fields-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

    /* Data items */
    .data-item {
        padding: 14px 16px !important;
        flex-wrap: wrap;
        gap: 10px;
    }
    .data-name { font-size: 0.95rem !important; }

    /* Body text minimum size */
    body, .data-item, .data-name {
        font-size: 14px;
    }
    /* Make sure inline-font-size values don't break tiny */
    .imsg-input, .pro-search, .ow-input,
    input[type="text"], input[type="number"], input[type="email"],
    input[type="password"], input[type="search"], textarea, select {
        font-size: 16px !important; /* prevents iOS zoom on focus */
    }

    /* Member row / donor row / market card / event card stack */
    .donor-row {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }
    .donor-row > div[style*="min-width:120px"],
    .donor-row > div[style*="min-width: 120px"] {
        min-width: 0 !important;
        width: 100% !important;
        text-align: left !important;
    }

    /* Strike bar / quick action grid */
    .ow-strike-bar { flex-direction: column !important; align-items: stretch !important; }
    .ow-strike-controls { justify-content: center; }
    .ow-quick-grid { grid-template-columns: 1fr 1fr !important; }

    /* Pro feed */
    .pro-feed-item { padding: 12px 14px !important; gap: 10px !important; }
    .pro-feed-icon { width: 36px !important; height: 36px !important; }
    .pro-feed-text { font-size: 0.85rem !important; }

    /* Guild selector / lang selector in nav */
    #guild-selector-header, #lang-selector-header {
        min-width: 0 !important;
    }
    #guild-dropdown-menu {
        right: -8px !important;
        left: auto !important;
        width: min(260px, 86vw) !important;
        max-width: 86vw;
    }

    /* Inline styles override: width:300px etc. on search inputs */
    [style*="width:280px"][style*="position:relative"],
    [style*="width: 280px"][style*="position:relative"] {
        width: 100% !important;
    }

    /* Mention box (chat @) */
    .mention-box {
        width: calc(100vw - 24px) !important;
        max-width: 320px;
        left: 12px !important;
    }

    /* MOBILE-V1: Setup dropdown panel (inline-styled in app.js) */
    .setup-dropdown__panel {
        width: min(280px, calc(100vw - 32px)) !important;
        right: 0 !important;
        left: auto !important;
    }
    .setup-dropdown { min-width: 0 !important; }
    .setup-dropdown__trigger { min-width: 0 !important; }

    /* MOBILE-V1: Tournament team chips wrap */
    .tn-mp-chips { flex-wrap: wrap !important; }
    .tn-mp-chip { font-size: 0.78rem !important; }

    /* MOBILE-V1: Lb-tp-body 2-col → 1 col */
    .lb-tp-body { grid-template-columns: 1fr !important; }
    .lb-shell { width: 100% !important; max-width: 100vw !important; }
    .lb-modal { max-height: 92vh !important; }

    /* MOBILE-V1: Tournament create input + button rows */
    .tn-arena-grid { grid-template-columns: 1fr !important; }
    .tn-edit-summary { grid-template-columns: 1fr 1fr !important; }

    /* MOBILE-V1: pro-mod-card adapted */
    .pro-mod-card-header { flex-wrap: wrap !important; }
    .pro-mod-counter { margin-left: 0 !important; }

    /* MOBILE-V1: Custom select dropdown trimmed to viewport */
    .tn-cs-pop { max-width: calc(100vw - 36px); }
    .ow-select-dropdown { max-width: calc(100vw - 28px); }

    /* MOBILE-V1: Toast container — move to top-center to avoid FAB collision */
    .toast-container {
        bottom: auto !important;
        right: 12px !important;
        left: 12px !important;
        top: calc(var(--ow-nav-height, 72px) + 12px) !important;
        align-items: center !important;
    }
    .toast {
        max-width: 100%;
        font-size: 0.88rem;
    }

    /* MOBILE-V1: Zoom overlay (image viewer) — pad for safe areas */
    .zoom-overlay { padding: 12px; }
    .zoom-content { max-width: 100% !important; max-height: 100% !important; }
}

/* MOBILE-V1: Phones — narrower than 480px */
@media (max-width: 480px) {
    /* Main content even tighter */
    .main-content, #main-content {
        padding: 10px 10px !important;
    }
    .content-header h2 { font-size: 1.2rem !important; }

    /* Stats grid → 1 col */
    .stats-grid, .pro-stats { grid-template-columns: 1fr !important; }
    .stat-card, .pro-stat { padding: 16px 14px !important; }
    .stat-value, .pro-stat-value { font-size: 1.6rem !important; }

    /* Pro hero compact */
    .pro-hero { padding: 16px 14px !important; }
    .pro-hero-title { font-size: 1.3rem !important; }
    .pro-hero-avatar-wrap { width: 64px !important; height: 64px !important; }
    .pro-hero-content { gap: 12px !important; }

    /* Banner */
    .banner-display-name { font-size: 1.4rem !important; }
    .banner-avatar { width: 64px !important; height: 64px !important; border-radius: 16px !important; }
    .overview-banner-container { height: 140px !important; }

    /* Sidebar width tighter on phone */
    .sidebar, aside.sidebar, #sidebar {
        width: 84vw !important;
        max-width: 320px !important;
    }

    /* Action grid → 1 col */
    .action-grid { grid-template-columns: 1fr !important; }

    /* Hide nav brand text */
    .nav-brand-name { display: none !important; }

    /* Modal full screen */
    .modal-card, .modal-content {
        max-height: 95vh !important;
        border-radius: 18px 18px 0 0 !important;
    }
    .modal-header { padding: 14px 16px !important; }
    .modal-title { font-size: 1rem !important; }
    .modal-body { padding: 14px 16px !important; }

    /* Tournament inline modal */
    #tn-modal {
        max-height: 94vh !important;
    }
    #tn-modal-scroll {
        padding: 14px 14px 8px !important;
    }
    #tn-modal .tn-modal-actions {
        margin: 10px -14px -10px !important;
        padding: 10px 14px !important;
    }

    /* Auth tabs */
    .auth-tab { font-size: 0.82rem !important; padding: 10px 8px !important; }

    /* Strike dots */
    .ow-strike-dots { gap: 4px; }
    .ow-strike-dot { width: 30px !important; height: 30px !important; font-size: 0.65rem !important; }

    /* Tk cat card */
    .tk-cat-card { padding: 12px !important; }
}

/* MOBILE-V1: Touch device adjustments (hover discovery → always visible) */
@media (hover: none) and (pointer: coarse) {
    /* Buttons inside member rows / donor rows / market cards must be visible */
    .donor-row .data-actions,
    .market-card button,
    .pro-mod-card button,
    .tk-inbox-item .actions,
    .pro-clan-card button {
        opacity: 1 !important;
    }
    /* Tooltips that need hover get replaced visually with always-visible captions
       (the data-label sidebar tooltip is desktop-only anyway, but ensure it doesn't pop) */
    .sidebar.collapsed .nav-item[data-label]::after { display: none !important; }
    /* MOBILE-FIX 2026-06-14: las acciones por mensaje del chat de tickets (responder/
       reaccionar) eran hover-only → en táctil quedaban inalcanzables. Visibles + targets
       más grandes (≥40px) en dispositivos de toque. */
    .wa-actions { opacity: 1 !important; pointer-events: auto !important; }
    .wa-actions button { width: 40px !important; height: 40px !important; }
    .wa-react { min-height: 32px; }
}

/* MOBILE-V1: 720px breakpoint — when neither phone nor tablet is dominant */
@media (max-width: 720px) and (min-width: 481px) {
    /* Sidebar drawer width */
    .sidebar, aside.sidebar, #sidebar {
        width: 280px !important;
    }
}

/* MOBILE-V1: ≥ 768px guard — DO NOT carry over mobile rules to desktop */
/* This is intentional — only mobile breakpoints add styles. */

/* MOBILE-V1 END */

/* ════════════════════════════════════════════════════════════════════════
   LIGHT-V2 (2026-05-21) — Full light mode polish for the dashboard.
   Ricardo "y dashboard aun se ve fatal en modo claro": the existing
   [data-theme="light"] rules above (47-231, 620-628, 974-1002, 1135-1146,
   2818-2820, 3371-3373) cover ~10% of the surface area. dashboard-skin.css
   and dashboard-pro.css hard-code dark colors with !important; app.js
   inlines `background: rgba(...,0.02..0.30)` everywhere.
   This block forces a premium light look on EVERY visible element.
   Cascade order: style.css → oneway-navbar.css → dashboard-pro.css →
   dashboard-skin.css. We use [data-theme="light"] (specificity 0,1,1)
   plus !important to beat skin/pro/inline.
   ════════════════════════════════════════════════════════════════════════ */

/* LIGHT-V2: token rewrite — base palette for light mode */
[data-theme="light"] {
    --bg-base: #f5f7fb !important;
    --bg-surface: #ffffff !important;
    --bg-surface-hover: #f0f3f9 !important;
    --bg-glass: rgba(255, 255, 255, 0.94) !important;
    --bg-input: #ffffff !important;

    --text-primary: #0f172a !important;
    --text-main: #0f172a !important;
    --text-muted: #475569 !important;

    --border: rgba(15, 23, 42, 0.08) !important;
    --border-hover: rgba(15, 23, 42, 0.16) !important;

    /* LIGHT-V2: keep dashboard-skin.css brand --primary (#5B8CFF). The skin
       force-redefines --primary via :root with !important *after* style.css,
       so the skin wins anyway. We keep the legacy #5865F2 commented as a
       reminder of the original style.css palette. */
    --primary: #5865F2 !important;
    --primary-hover: #4752C4 !important;
    --primary-glow: rgba(88, 101, 242, 0.18) !important;
    --primary-rgb: 88, 101, 242 !important;

    --secondary: #4f46e5 !important;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04) !important;
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04) !important;
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06) !important;

    /* dashboard-pro.css tokens (loaded after style.css). We override them
       here so all .pro-* surfaces inherit the light variant. */
    --pro-grad-1: linear-gradient(135deg, rgba(88, 101, 242, 0.10) 0%, rgba(139, 92, 246, 0.06) 50%, rgba(236, 72, 153, 0.08) 100%) !important;
    --pro-grad-2: linear-gradient(135deg, rgba(91, 140, 255, 0.10) 0%, rgba(91, 140, 255, 0.04) 100%) !important;
    --pro-grad-warn: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.06)) !important;
    --pro-grad-strike: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.06)) !important;
    --pro-grad-bl: linear-gradient(135deg, rgba(127, 29, 29, 0.14), rgba(127, 29, 29, 0.04)) !important;
    --pro-grad-clan: linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(34, 197, 94, 0.06)) !important;
    --pro-grad-success: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.06)) !important;

    --pro-border: 1px solid rgba(15, 23, 42, 0.08) !important;
    --pro-glass: rgba(255, 255, 255, 0.96) !important;
    --pro-glass-hover: rgba(248, 250, 252, 1) !important;
    --pro-shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
    --pro-shadow-card: 0 16px 40px rgba(15, 23, 42, 0.10) !important;
}

/* LIGHT-V2: body/page background — kill dark gradient backdrop */
[data-theme="light"] body {
    background: #f5f7fb;
    color: #0f172a;
}
[data-theme="light"] .bg-aurora {
    background:
        radial-gradient(900px 600px at 12% 8%, rgba(88, 101, 242, 0.10), transparent 60%),
        radial-gradient(700px 500px at 88% 92%, rgba(16, 185, 129, 0.06), transparent 65%) !important;
    opacity: 0.6 !important;
}
[data-theme="light"] #particles-canvas { opacity: 0.18; }

/* LIGHT-V2: Top navbar — white with subtle shadow */
[data-theme="light"] .top-navbar {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="light"] .nav-brand-name { color: #0f172a; }
[data-theme="light"] .nav-link { color: #475569; }
[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active {
    color: #5865F2;
    background: rgba(88, 101, 242, 0.08);
}

/* LIGHT-V2: Login screen — clean white card */
[data-theme="light"] .login-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.10), 0 0 32px rgba(88, 101, 242, 0.08);
}
[data-theme="light"] .login-title { color: #0f172a; }
[data-theme="light"] .login-subtitle { color: #475569; }
[data-theme="light"] .login-logo {
    border: 2px solid rgba(15, 23, 42, 0.10);
}
[data-theme="light"] .auth-tabs {
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .auth-tab { color: #475569; }
[data-theme="light"] .auth-tab.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .auth-form-lead { color: #475569; }
[data-theme="light"] .input-group label { color: #475569; }
[data-theme="light"] .input-group input,
[data-theme="light"] .input-group select {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.14);
    color: #0f172a;
}
[data-theme="light"] .input-group input::placeholder,
[data-theme="light"] .input-group select::placeholder {
    color: #94a3b8;
}
[data-theme="light"] .input-group input:focus,
[data-theme="light"] .input-group select:focus {
    border-color: #5865F2;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.14);
}
[data-theme="light"] .login-error-box {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.30);
    color: #b91c1c;
}

/* LIGHT-V2: Sidebar — white panel with light borders */
[data-theme="light"] .sidebar,
[data-theme="light"] aside.sidebar,
[data-theme="light"] .pro-sidebar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}
[data-theme="light"] .sidebar-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .sidebar-brand,
[data-theme="light"] .sidebar h2,
[data-theme="light"] .sidebar h3,
[data-theme="light"] .sidebar-title,
[data-theme="light"] .pro-sidebar-title {
    color: rgba(15, 23, 42, 0.50) !important;
}
[data-theme="light"] .sidebar-toggle {
    background: transparent !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #475569 !important;
}
[data-theme="light"] .sidebar-toggle:hover {
    background: rgba(88, 101, 242, 0.08) !important;
    border-color: rgba(88, 101, 242, 0.35) !important;
    color: #5865F2 !important;
}
/* SIDEBAR-FLAT-V13 (2026-05-30): light expandido plano (fallback; el look final
   lo fija dashboard-skin.css). Sin gradiente, sin borde, sin sombra/glow. */
[data-theme="light"] .sidebar-nav .nav-item,
[data-theme="light"] .sidebar .nav-item {
    color: #475569 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
}
[data-theme="light"] .sidebar-nav .nav-item:hover,
[data-theme="light"] .sidebar .nav-item:hover {
    background: rgba(var(--primary-rgb), 0.08) !important;
    color: #0f172a !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
[data-theme="light"] .sidebar-nav .nav-item.active,
[data-theme="light"] .sidebar .nav-item.active {
    background: rgba(var(--primary-rgb), 0.10) !important;
    color: #4338ca !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
[data-theme="light"] .sidebar-nav .nav-item.active .nav-item-icon {
    color: #4338ca !important;
    filter: none !important;
}
[data-theme="light"] .nav-section-label {
    color: rgba(15, 23, 42, 0.45) !important;
}
[data-theme="light"] .sidebar-user {
    background: #f5f7fb !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .sidebar-user-name { color: #0f172a !important; }
[data-theme="light"] .sidebar-user-role { color: #475569 !important; }
[data-theme="light"] .sidebar-user-avatar {
    border-color: rgba(15, 23, 42, 0.10) !important;
}
[data-theme="light"] #btn-logout {
    background: transparent !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #475569 !important;
}
[data-theme="light"] #btn-logout:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.30) !important;
    color: #b91c1c !important;
}
[data-theme="light"] .sidebar-profile {
    background: #f5f7fb !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .sidebar-profile-name,
[data-theme="light"] .sidebar .username { color: #0f172a !important; }
[data-theme="light"] .sidebar-profile-role,
[data-theme="light"] .sidebar .role { color: #475569 !important; }
[data-theme="light"] .sidebar.collapsed .sidebar-toggle {
    background: rgba(15, 23, 42, 0.04) !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
}
[data-theme="light"] .sidebar.collapsed .nav-item-icon { color: #475569; }
[data-theme="light"] .sidebar.collapsed .nav-item:hover .nav-item-icon { color: #5865F2; }
[data-theme="light"] .sidebar.collapsed .nav-item.active .nav-item-icon { color: #5865F2; }
[data-theme="light"] .sidebar.collapsed .sidebar-user-avatar {
    border-color: rgba(88, 101, 242, 0.30) !important;
}
[data-theme="light"] .sidebar.collapsed #btn-logout {
    background: rgba(239, 68, 68, 0.06) !important;
    border: 1px solid rgba(239, 68, 68, 0.18) !important;
    color: rgba(185, 28, 28, 0.85) !important;
}
[data-theme="light"] .sidebar.collapsed .nav-item[data-label]::after {
    background: rgba(255, 255, 255, 0.98) !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
}
[data-theme="light"] .sidebar.collapsed .sidebar-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .sidebar.collapsed .sidebar-user {
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .sidebar.collapsed .sidebar-nav-section + .sidebar-nav-section {
    border-top: 1px dashed rgba(15, 23, 42, 0.08) !important;
}

/* LIGHT-V2: Content header & body */
[data-theme="light"] .content-header h2 {
    background: linear-gradient(135deg, #0f172a 0%, #475569 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}
[data-theme="light"] #page-title { color: #0f172a; }

/* LIGHT-V2: Cards (.card, .apple-card, .card.exclusive) */
[data-theme="light"] .card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="light"] .card:hover {
    border-color: rgba(88, 101, 242, 0.30) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(88, 101, 242, 0.08) !important;
}
[data-theme="light"] .apple-card,
[data-theme="light"] .tk-panel-left,
[data-theme="light"] .tk-panel-right {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .apple-card hr {
    border-top: 1px dashed rgba(15, 23, 42, 0.10) !important;
}
[data-theme="light"] .card.exclusive,
[data-theme="light"] .modal-card.exclusive {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #ffffff 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12) !important;
}
[data-theme="light"] .card-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .card-title { color: #0f172a; }

/* LIGHT-V2: Stat cards */
[data-theme="light"] .stat-card {
    background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .stat-card:hover {
    background: #ffffff !important;
    border-color: rgba(88, 101, 242, 0.25) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(88, 101, 242, 0.10) !important;
}
[data-theme="light"] .stat-icon-wrapper {
    background: rgba(88, 101, 242, 0.10) !important;
    color: #5865F2 !important;
}
[data-theme="light"] .stat-value { color: #0f172a !important; }
[data-theme="light"] .stat-label { color: #64748b !important; }

/* LIGHT-V2: dashboard-pro.css .pro-* surfaces */
[data-theme="light"] .pro-hero {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.12) 0%, rgba(139, 92, 246, 0.08) 50%, rgba(236, 72, 153, 0.10) 100%) !important;
    border: 1px solid rgba(88, 101, 242, 0.18) !important;
    box-shadow: 0 12px 40px rgba(88, 101, 242, 0.10), 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .pro-hero::before {
    background:
        radial-gradient(circle at 20% 0%, rgba(88, 101, 242, 0.20), transparent 45%),
        radial-gradient(circle at 80% 100%, rgba(236, 72, 153, 0.12), transparent 45%) !important;
}
[data-theme="light"] .pro-hero-title {
    background: linear-gradient(135deg, #0f172a 0%, #4338ca 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}
[data-theme="light"] .pro-hero-sub,
[data-theme="light"] .pro-hero-subtitle,
[data-theme="light"] .pro-hero-description { color: #475569 !important; }
[data-theme="light"] .pro-hero-meta { color: rgba(15, 23, 42, 0.70) !important; }
[data-theme="light"] .pro-hero-avatar {
    border-color: #ffffff !important;
}
[data-theme="light"] .pro-hero-status {
    border-color: #ffffff !important;
}
[data-theme="light"] .pro-hero-pill,
[data-theme="light"] .pro-pill,
[data-theme="light"] .pro-badge,
[data-theme="light"] .pro-hero [class*="pill"],
[data-theme="light"] .pro-hero [class*="badge"] {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #475569 !important;
}
[data-theme="light"] .pro-stat,
[data-theme="light"] .pro-stat-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .pro-stat:hover,
[data-theme="light"] .pro-stat-card:hover {
    border-color: rgba(88, 101, 242, 0.30) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(88, 101, 242, 0.10) !important;
}
[data-theme="light"] .pro-stat-icon {
    background: rgba(88, 101, 242, 0.10) !important;
    border: 1px solid rgba(88, 101, 242, 0.20) !important;
    color: #5865F2 !important;
    background-image: none !important;
}
[data-theme="light"] .pro-stat[data-tone="warn"] .pro-stat-icon {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.30) !important;
    color: #b45309 !important;
}
[data-theme="light"] .pro-stat[data-tone="danger"] .pro-stat-icon {
    background: rgba(239, 68, 68, 0.10) !important;
    border-color: rgba(239, 68, 68, 0.28) !important;
    color: #b91c1c !important;
}
[data-theme="light"] .pro-stat[data-tone="success"] .pro-stat-icon {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.28) !important;
    color: #047857 !important;
}
[data-theme="light"] .pro-stat-value,
[data-theme="light"] .pro-stat .value,
[data-theme="light"] .pro-stat-card .value {
    background: linear-gradient(135deg, #0f172a 0%, #4338ca 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}
[data-theme="light"] .pro-stat-label,
[data-theme="light"] .pro-stat .label { color: rgba(15, 23, 42, 0.50) !important; }
[data-theme="light"] .pro-stat-sub,
[data-theme="light"] .pro-stat-hint,
[data-theme="light"] .pro-stat .sub { color: rgba(15, 23, 42, 0.60) !important; }
[data-theme="light"] .pro-stat-trend { color: #047857 !important; }
[data-theme="light"] .pro-stat-trend.down { color: #b91c1c !important; }

/* LIGHT-V2: pro action buttons / pro-actions card */
[data-theme="light"] .pro-actions,
[data-theme="light"] .pro-actions-card,
[data-theme="light"] .pro-quick-actions,
[data-theme="light"] .pro-recent,
[data-theme="light"] .pro-recent-card,
[data-theme="light"] .pro-activity,
[data-theme="light"] [class*="moderation-recent"] {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .pro-actions-title,
[data-theme="light"] .pro-actions h2,
[data-theme="light"] .pro-actions h3 { color: #0f172a !important; }
[data-theme="light"] .pro-btn,
[data-theme="light"] .pro-action-btn,
[data-theme="light"] .pro-btn-warn,
[data-theme="light"] .pro-btn-strike,
[data-theme="light"] .pro-btn-bl,
[data-theme="light"] .pro-btn-clan,
[data-theme="light"] .pro-btn-search,
[data-theme="light"] .pro-btn-users {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    border-left: 3px solid rgba(15, 23, 42, 0.20) !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="light"] .pro-btn:hover,
[data-theme="light"] .pro-action-btn:hover,
[data-theme="light"] .pro-btn-warn:hover,
[data-theme="light"] .pro-btn-strike:hover,
[data-theme="light"] .pro-btn-bl:hover,
[data-theme="light"] .pro-btn-clan:hover,
[data-theme="light"] .pro-btn-search:hover,
[data-theme="light"] .pro-btn-users:hover {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
    box-shadow: 0 8px 18px -6px rgba(15, 23, 42, 0.10) !important;
}
[data-theme="light"] .pro-btn-primary {
    background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%) !important;
    background-image: linear-gradient(135deg, #4338ca 0%, #3730a3 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 20px -4px rgba(55, 48, 163, 0.40) !important;
}
[data-theme="light"] .pro-btn-primary:hover {
    box-shadow: 0 12px 28px -4px rgba(88, 101, 242, 0.55) !important;
}
[data-theme="light"] .pro-btn-warn { border-left-color: #f59e0b !important; }
[data-theme="light"] .pro-btn-strike { border-left-color: #f59e0b !important; }
[data-theme="light"] .pro-btn-bl,
[data-theme="light"] .pro-btn-blacklist { border-left-color: #ef4444 !important; }
[data-theme="light"] .pro-btn-clan,
[data-theme="light"] .pro-btn-clanes { border-left-color: #22c55e !important; }
[data-theme="light"] .pro-btn-search,
[data-theme="light"] .pro-btn-users { border-left-color: #5865F2 !important; }

/* LIGHT-V2: Pro chips (badge-ish pills) */
[data-theme="light"] .pro-chip {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #475569 !important;
}
[data-theme="light"] .pro-chip:hover {
    background: rgba(248, 250, 252, 1) !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
}
[data-theme="light"] .pro-chip.danger {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #b91c1c !important;
    border-color: rgba(239, 68, 68, 0.30) !important;
}
[data-theme="light"] .pro-chip.warn {
    background: rgba(245, 158, 11, 0.10) !important;
    color: #b45309 !important;
    border-color: rgba(245, 158, 11, 0.30) !important;
}
[data-theme="light"] .pro-chip.success {
    background: rgba(16, 185, 129, 0.10) !important;
    color: #047857 !important;
    border-color: rgba(16, 185, 129, 0.30) !important;
}
[data-theme="light"] .pro-chip.primary {
    background: rgba(88, 101, 242, 0.10) !important;
    color: #4338ca !important;
    border-color: rgba(88, 101, 242, 0.30) !important;
}

/* LIGHT-V2: Pro toolbar */
[data-theme="light"] .pro-toolbar {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .pro-toolbar-title { color: #0f172a !important; }
[data-theme="light"] .pro-toolbar-icon {
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.30) !important;
}
[data-theme="light"] .pro-search {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}
[data-theme="light"] .pro-search:focus {
    border-color: #5865F2 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.14) !important;
}
[data-theme="light"] .pro-search::placeholder { color: #94a3b8; }
[data-theme="light"] .pro-filter-chip {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #475569 !important;
}
[data-theme="light"] .pro-filter-chip:hover {
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
}
[data-theme="light"] .pro-filter-chip.active {
    background: linear-gradient(135deg, #5865F2, #4f46e5) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(88, 101, 242, 0.30) !important;
}

/* LIGHT-V2: Pro tabs */
[data-theme="light"] .pro-tabs {
    background: rgba(241, 245, 251, 1) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .pro-tab {
    color: #475569 !important;
    background: transparent !important;
}
[data-theme="light"] .pro-tab:hover { color: #0f172a !important; }
[data-theme="light"] .pro-tab.active {
    background: linear-gradient(135deg, #5865F2, #4f46e5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.30) !important;
}

/* LIGHT-V2: Pro moderation cards / clan cards / feed */
[data-theme="light"] .pro-mod-card,
[data-theme="light"] .pro-clan-card,
[data-theme="light"] .pro-feed {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .pro-mod-card:hover {
    border-color: rgba(88, 101, 242, 0.30) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10) !important;
}
[data-theme="light"] .pro-mod-card-header {
    background: linear-gradient(180deg, rgba(241, 245, 251, 0.6), transparent) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .pro-mod-name { color: #0f172a !important; }
[data-theme="light"] .pro-mod-id { color: #64748b !important; }
[data-theme="light"] .pro-mod-avatar {
    border-color: rgba(88, 101, 242, 0.40) !important;
}
[data-theme="light"] .pro-mod-counter.warn {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #b45309 !important;
}
[data-theme="light"] .pro-mod-counter.strike {
    background: rgba(239, 68, 68, 0.10) !important;
    color: #b91c1c !important;
}
[data-theme="light"] .pro-mod-counter.bl {
    background: rgba(127, 29, 29, 0.16) !important;
    color: #991b1b !important;
}
[data-theme="light"] .pro-mod-entry {
    background: #f8fafc !important;
    border-left-color: rgba(88, 101, 242, 0.40) !important;
}
[data-theme="light"] .pro-mod-entry:hover {
    background: rgba(88, 101, 242, 0.06) !important;
}
[data-theme="light"] .pro-mod-entry.warn { border-left-color: #f59e0b !important; }
[data-theme="light"] .pro-mod-entry.strike { border-left-color: #ef4444 !important; }
[data-theme="light"] .pro-mod-entry-reason { color: #0f172a !important; }
[data-theme="light"] .pro-mod-entry-meta { color: #64748b !important; }
[data-theme="light"] .pro-mod-actions {
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .pro-clan-logo {
    border: 3px solid #ffffff !important;
}
[data-theme="light"] .pro-clan-name { color: #0f172a !important; }
[data-theme="light"] .pro-clan-meta { color: #64748b !important; }
[data-theme="light"] .pro-clan-meta b { color: #0f172a !important; }
[data-theme="light"] .pro-clan-actions {
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .pro-feed-item {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .pro-feed-title { color: #0f172a !important; }
[data-theme="light"] .pro-feed-text { color: #0f172a !important; }
[data-theme="light"] .pro-feed-time { color: #64748b !important; }
[data-theme="light"] .pro-feed-icon.warn {
    background: rgba(245, 158, 11, 0.10) !important;
    color: #b45309 !important;
}
[data-theme="light"] .pro-feed-icon.strike {
    background: rgba(239, 68, 68, 0.10) !important;
    color: #b91c1c !important;
}
[data-theme="light"] .pro-feed-icon.bl {
    background: rgba(127, 29, 29, 0.14) !important;
    color: #991b1b !important;
}
[data-theme="light"] .pro-feed-icon.clan {
    background: rgba(16, 185, 129, 0.10) !important;
    color: #047857 !important;
}

/* LIGHT-V2: Empty states */
[data-theme="light"] .pro-empty {
    background: #f8fafc !important;
    border: 2px dashed rgba(15, 23, 42, 0.12) !important;
}
[data-theme="light"] .pro-empty-title { color: #0f172a !important; }
[data-theme="light"] .pro-empty-text { color: #475569 !important; }
[data-theme="light"] .empty-state { color: #64748b !important; }

/* LIGHT-V2: Pro form inputs (modals + edit panels) */
[data-theme="light"] .pro-input,
[data-theme="light"] .pro-select,
[data-theme="light"] .pro-textarea {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}
[data-theme="light"] .pro-input:focus,
[data-theme="light"] .pro-select:focus,
[data-theme="light"] .pro-textarea:focus {
    border-color: #5865F2 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.14) !important;
}
[data-theme="light"] .pro-input::placeholder,
[data-theme="light"] .pro-textarea::placeholder { color: #94a3b8; }
[data-theme="light"] .pro-input-group label { color: #475569 !important; }
[data-theme="light"] .pro-radio {
    background: #f8fafc !important;
    color: #475569 !important;
}
[data-theme="light"] .pro-radio:hover { background: #e2e8f0 !important; }
[data-theme="light"] .pro-radio.active {
    background: rgba(88, 101, 242, 0.10) !important;
    border-color: #5865F2 !important;
    color: #0f172a !important;
}

/* LIGHT-V2: Pro severity badges */
[data-theme="light"] .pro-sev.low {
    background: rgba(34, 197, 94, 0.12) !important;
    color: #15803d !important;
}
[data-theme="light"] .pro-sev.med {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #b45309 !important;
}
[data-theme="light"] .pro-sev.high {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #b91c1c !important;
}
[data-theme="light"] .pro-sev.perm {
    background: rgba(127, 29, 29, 0.18) !important;
    color: #991b1b !important;
}
[data-theme="light"] .pro-sev.temp {
    background: rgba(88, 101, 242, 0.12) !important;
    color: #4338ca !important;
}

/* LIGHT-V2: Pro realtime indicator */
[data-theme="light"] .pro-realtime {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(16, 185, 129, 0.40) !important;
    color: #047857 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10) !important;
}
[data-theme="light"] .pro-realtime.disconnected {
    color: #b91c1c !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}

/* LIGHT-V2: Pro shimmer loader */
[data-theme="light"] .pro-shimmer {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.04) 0%, rgba(15, 23, 42, 0.10) 50%, rgba(15, 23, 42, 0.04) 100%) !important;
    background-size: 800px 100%;
}

/* LIGHT-V2: Modal overlay & card */
[data-theme="light"] .modal-overlay {
    background: rgba(15, 23, 42, 0.30) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
[data-theme="light"] .modal-card,
[data-theme="light"] .modal-content {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.20), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
    color: #0f172a !important;
}
[data-theme="light"] .modal-header {
    background: rgba(248, 250, 252, 0.6) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .modal-title {
    background: linear-gradient(135deg, #0f172a 0%, #4338ca 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}
[data-theme="light"] .modal-body { color: #475569 !important; }
[data-theme="light"] .modal-close {
    color: #64748b !important;
}
[data-theme="light"] .modal-close:hover {
    background: rgba(239, 68, 68, 0.10) !important;
    color: #b91c1c !important;
}

/* LIGHT-V2: Generic buttons */
[data-theme="light"] .btn-ghost {
    background: transparent !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}
[data-theme="light"] .btn-ghost:hover {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.22) !important;
}
[data-theme="light"] .btn-primary,
[data-theme="light"] button.btn-primary {
    background: linear-gradient(135deg, #5865F2, #4f46e5) !important;
    background-image: linear-gradient(135deg, #5865F2, #4f46e5) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.30) !important;
}
[data-theme="light"] .btn-primary:hover {
    box-shadow: 0 8px 24px rgba(88, 101, 242, 0.40) !important;
}
[data-theme="light"] .btn-icon {
    color: #475569;
}
[data-theme="light"] .btn-icon:hover {
    background: #f1f5f9;
    color: #0f172a;
}
[data-theme="light"] .btn-danger {
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.30);
}
[data-theme="light"] .btn-danger:hover {
    background: #ef4444;
    color: #ffffff;
}
[data-theme="light"] .btn-accent {
    background: #10b981;
    color: #ffffff;
}
[data-theme="light"] .btn-ios-mini {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    color: #475569;
}
[data-theme="light"] .btn-ios-mini:hover:not(:disabled) {
    background: #5865F2;
    color: #ffffff;
}

/* LIGHT-V2: General inputs / textareas / selects */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"],
[data-theme="light"] textarea,
[data-theme="light"] select {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}
[data-theme="light"] input[type="text"]:focus,
[data-theme="light"] input[type="number"]:focus,
[data-theme="light"] input[type="email"]:focus,
[data-theme="light"] input[type="password"]:focus,
[data-theme="light"] input[type="search"]:focus,
[data-theme="light"] input[type="url"]:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
    border-color: #5865F2 !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.14) !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: #94a3b8 !important; }

/* LIGHT-V2: imsg-input (ticket chat input) */
[data-theme="light"] .imsg-input {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}
[data-theme="light"] .imsg-input:focus {
    border-color: #5865F2 !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.14) !important;
}
[data-theme="light"] .imsg-input-bar {
    background: #f8fafc !important;
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
}

/* LIGHT-V2: Ticket layout */
[data-theme="light"] .tk-layout-v2 {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .tk-sidebar {
    border-right: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .tk-main-area {
    background: #f8fafc !important;
}
[data-theme="light"] .tk-control-panel {
    background: #ffffff !important;
    border-left: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .tk-inbox-item,
[data-theme="light"] .tk-inbox-item:not(:hover):not(.active) {
    background: rgba(15, 23, 42, 0.02) !important;
    color: #0f172a;
}
[data-theme="light"] .tk-inbox-item:hover {
    background: rgba(88, 101, 242, 0.06) !important;
    border-left-color: #5865F2 !important;
}
[data-theme="light"] .tk-inbox-item.active {
    background: linear-gradient(90deg, rgba(88, 101, 242, 0.10), rgba(88, 101, 242, 0.02)) !important;
    border-left-color: #5865F2 !important;
    box-shadow: inset 0 0 0 1px rgba(88, 101, 242, 0.20) !important;
}
[data-theme="light"] .tk-inbox-avatar {
    border: 2px solid rgba(15, 23, 42, 0.08);
    background: #f1f5f9;
}
[data-theme="light"] .chat-stream-fixed {
    background: #f8fafc !important;
}
[data-theme="light"] .tk-cat-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .tk-cat-card:hover {
    border-color: #5865F2 !important;
    background: #f8fafc !important;
}
[data-theme="light"] .tk-cat-close {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #b91c1c !important;
}
[data-theme="light"] .tk-cat-close:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}
[data-theme="light"] .tk-dropdown-trigger {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #0f172a !important;
}
[data-theme="light"] .tk-dropdown-trigger:hover {
    background: #f8fafc !important;
    border-color: #5865F2 !important;
}
[data-theme="light"] .tk-dropdown-content {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
}
[data-theme="light"] .tk-dropdown-item {
    color: #475569 !important;
}
[data-theme="light"] .tk-dropdown-item:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}
[data-theme="light"] .tk-dropdown-item.active {
    background: rgba(88, 101, 242, 0.10) !important;
    color: #5865F2 !important;
}
[data-theme="light"] .chat-btn-send {
    background: linear-gradient(135deg, #5865F2, #4f46e5) !important;
    background-image: linear-gradient(135deg, #5865F2, #4f46e5) !important;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.30) !important;
}
[data-theme="light"] .chat-btn-close {
    background: rgba(239, 68, 68, 0.10) !important;
    color: #b91c1c !important;
}
[data-theme="light"] .chat-btn-close:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* LIGHT-V2: cc-* (Control Center) */
[data-theme="light"] .control-center {
    background: #ffffff !important;
    color: #0f172a !important;
}
[data-theme="light"] .cc-header {
    background: #f8fafc !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .cc-title { color: #0f172a; }
[data-theme="light"] .cc-subtitle { color: #64748b; }
[data-theme="light"] .cc-tabs {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .cc-tab { color: #64748b; }
[data-theme="light"] .cc-tab:hover { color: #0f172a; }
[data-theme="light"] .cc-tab.active { color: #5865F2; }
[data-theme="light"] .cc-input {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}
[data-theme="light"] .cc-input:focus {
    border-color: #5865F2 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.14) !important;
}
[data-theme="light"] .cc-toggle-group {
    background: #f1f5f9 !important;
}
[data-theme="light"] .cc-toggle { color: #64748b; }
[data-theme="light"] .cc-toggle.active {
    background: #5865F2 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.30) !important;
}
[data-theme="light"] .cc-btn-close {
    background: #f1f5f9 !important;
    color: #64748b !important;
}
[data-theme="light"] .cc-btn-close:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}
[data-theme="light"] .cc-footer {
    background: #f8fafc !important;
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .cc-btn-save {
    background: linear-gradient(135deg, #5865F2, #4f46e5) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(88, 101, 242, 0.30) !important;
}
[data-theme="light"] .warn-section {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .warn-header { color: #475569; }
[data-theme="light"] .warn-item {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .warn-meta { color: #64748b; }
[data-theme="light"] .warn-reason { color: #0f172a; }
[data-theme="light"] .cc-btn-add {
    background: #5865F2 !important;
    color: #ffffff !important;
}

/* LIGHT-V2: cc-feed (overview activity feed) */
[data-theme="light"] .cc-feed-row {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .cc-feed-label { color: #0f172a !important; }
[data-theme="light"] .cc-feed-uid { color: #64748b !important; }
[data-theme="light"] .cc-feed-reason { color: #475569 !important; }
[data-theme="light"] .cc-feed-when,
[data-theme="light"] .cc-feed-time { color: #64748b !important; }
[data-theme="light"] .cc-feed-empty { color: #64748b !important; }

/* LIGHT-V2: cc-greet / cc-stats / cc-shell (overview hero/stats) */
[data-theme="light"] .cc-shell {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .cc-greet-h { color: #0f172a !important; }
[data-theme="light"] .cc-greet-sub { color: #475569 !important; }
[data-theme="light"] .cc-tag {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #475569 !important;
}
[data-theme="light"] .cc-stat {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .cc-stat-num { color: #0f172a !important; }
[data-theme="light"] .cc-stat-lbl { color: #64748b !important; }
[data-theme="light"] .cc-stat-sub { color: #475569 !important; }
[data-theme="light"] .cc-pane {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .cc-pane-head { border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
[data-theme="light"] .cc-pane-title { color: #0f172a !important; }
[data-theme="light"] .cc-quick-item {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    color: #0f172a !important;
}
[data-theme="light"] .cc-quick-item:hover {
    background: rgba(88, 101, 242, 0.06) !important;
    border-color: rgba(88, 101, 242, 0.30) !important;
}
[data-theme="light"] .cc-quick-text { color: #0f172a; }
[data-theme="light"] .cc-quick-arrow { color: #64748b; }
[data-theme="light"] .cc-status-block {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .cc-status-title { color: #0f172a; }
[data-theme="light"] .cc-status-row { color: #475569 !important; }

/* LIGHT-V2: ow-editor (member editor modal) */
[data-theme="light"] .ow-editor {
    background: #ffffff !important;
}
[data-theme="light"] .ow-banner-fade {
    background: linear-gradient(to top, #ffffff 0%, transparent 60%) !important;
}
[data-theme="light"] .ow-avatar {
    border: 5px solid #ffffff !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18) !important;
}
[data-theme="light"] .ow-status-dot {
    border: 4px solid #ffffff !important;
}
[data-theme="light"] .ow-name { color: #0f172a !important; }
[data-theme="light"] .ow-uid { color: #64748b !important; }
[data-theme="light"] .ow-badge.success {
    background: rgba(16, 185, 129, 0.10) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.30) !important;
}
[data-theme="light"] .ow-badge.danger {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(239, 68, 68, 0.30) !important;
}
[data-theme="light"] .ow-tabs {
    border-bottom: 2px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .ow-tab { color: #64748b !important; }
[data-theme="light"] .ow-tab:hover { color: #0f172a !important; }
[data-theme="light"] .ow-tab.active {
    color: #5865F2 !important;
    border-bottom-color: #5865F2 !important;
}
[data-theme="light"] .ow-tab-count {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #b91c1c !important;
}
[data-theme="light"] .ow-label { color: #475569 !important; }
[data-theme="light"] .ow-input {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}
[data-theme="light"] .ow-input:focus {
    border-color: #5865F2 !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.14) !important;
}
[data-theme="light"] .ow-select {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}
[data-theme="light"] .ow-select:hover {
    border-color: rgba(15, 23, 42, 0.22) !important;
}
[data-theme="light"] .ow-select.open {
    border-color: #5865F2 !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.14) !important;
}
[data-theme="light"] .ow-select-arrow { color: #64748b !important; }
[data-theme="light"] .ow-select-dropdown {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
}
[data-theme="light"] .ow-select-opt { color: #475569 !important; }
[data-theme="light"] .ow-select-opt:hover {
    background: rgba(88, 101, 242, 0.08) !important;
    color: #0f172a !important;
}
[data-theme="light"] .ow-select-opt.active {
    background: rgba(88, 101, 242, 0.14) !important;
    color: #3730a3 !important;
}
[data-theme="light"] .ow-section-title {
    color: #475569 !important;
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .ow-toggle-btn {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #475569 !important;
}
[data-theme="light"] .ow-toggle-btn.active {
    background: rgba(88, 101, 242, 0.12) !important;
    border-color: #5865F2 !important;
    color: #5865F2 !important;
}
[data-theme="light"] .ow-qbtn {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #475569 !important;
}
[data-theme="light"] .ow-qbtn.warn {
    border-color: rgba(245, 158, 11, 0.30) !important;
    color: #b45309 !important;
}
[data-theme="light"] .ow-qbtn.warn:hover { background: rgba(245, 158, 11, 0.08) !important; }
[data-theme="light"] .ow-qbtn.danger {
    border-color: rgba(239, 68, 68, 0.30) !important;
    color: #b91c1c !important;
}
[data-theme="light"] .ow-qbtn.danger:hover { background: rgba(239, 68, 68, 0.08) !important; }
[data-theme="light"] .ow-qbtn.info {
    border-color: rgba(59, 130, 246, 0.30) !important;
    color: #1d4ed8 !important;
}
[data-theme="light"] .ow-qbtn.info:hover { background: rgba(59, 130, 246, 0.08) !important; }
[data-theme="light"] .ow-qbtn.success {
    border-color: rgba(34, 197, 94, 0.30) !important;
    color: #15803d !important;
}
[data-theme="light"] .ow-qbtn.success:hover { background: rgba(34, 197, 94, 0.08) !important; }
[data-theme="light"] .ow-warn-card {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .ow-warn-meta { color: #5865F2 !important; }
[data-theme="light"] .ow-warn-text { color: #0f172a !important; }
[data-theme="light"] .ow-empty-mini { color: #64748b !important; }
[data-theme="light"] .ow-add-btn {
    background: #5865F2 !important;
    color: #ffffff !important;
}
[data-theme="light"] .ow-add-btn:hover { background: #4752C4 !important; }
[data-theme="light"] .ow-strike-dot {
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #64748b !important;
}
[data-theme="light"] .ow-strike-dot.active {
    background: rgba(239, 68, 68, 0.10) !important;
    border-color: rgba(239, 68, 68, 0.40) !important;
    color: #b91c1c !important;
}
[data-theme="light"] .ow-save-btn {
    background: linear-gradient(135deg, #5865F2, #7c3aed) !important;
    color: #ffffff !important;
}

/* LIGHT-V2: Tournament UI (tn-* — inline styles via app.js use rgba) */
[data-theme="light"] .tn-form-h h2,
[data-theme="light"] .tn-edit-h h2 { color: #0f172a; }
[data-theme="light"] #tn-modal,
[data-theme="light"] #tn-modal-backdrop > div {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.20) !important;
}
[data-theme="light"] #tn-modal-backdrop {
    background: rgba(15, 23, 42, 0.30) !important;
    backdrop-filter: blur(8px) !important;
}
[data-theme="light"] .tn-field-label { color: #475569 !important; }
[data-theme="light"] .tn-field-input,
[data-theme="light"] input.tn-field-input {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}
[data-theme="light"] .tn-field-input:focus { border-color: #5865F2 !important; }
[data-theme="light"] .tn-field-hint { color: #64748b !important; }
[data-theme="light"] .tn-cs-trigger {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}
[data-theme="light"] .tn-cs-trigger:hover {
    border-color: rgba(88, 101, 242, 0.40) !important;
    background: #f8fafc !important;
}
[data-theme="light"] .tn-cs-trigger.open {
    border-color: #5865F2 !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.14) !important;
}
[data-theme="light"] .tn-cs-trig-arrow { color: #64748b !important; }
[data-theme="light"] .tn-cs-pop {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
}
[data-theme="light"] .tn-cs-opt {
    background: transparent !important;
    color: #0f172a !important;
}
[data-theme="light"] .tn-cs-opt:hover { background: rgba(88, 101, 242, 0.08) !important; }
[data-theme="light"] .tn-cs-opt.active { background: rgba(88, 101, 242, 0.14) !important; }
[data-theme="light"] .tn-cs-opt.hi { background: rgba(15, 23, 42, 0.04) !important; }
[data-theme="light"] .tn-cs-opt-sub { color: #64748b !important; }
[data-theme="light"] .tn-mp-wrap { color: #0f172a; }
[data-theme="light"] .tn-mp-chips {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
}
[data-theme="light"] .tn-mp-empty-hint { color: #64748b !important; }
[data-theme="light"] .tn-mp-chip {
    background: rgba(88, 101, 242, 0.10) !important;
    border: 1px solid rgba(88, 101, 242, 0.30) !important;
}
[data-theme="light"] .tn-mp-chip-name { color: #0f172a !important; }
[data-theme="light"] .tn-mp-chip-x { color: rgba(15, 23, 42, 0.50) !important; }
[data-theme="light"] .tn-mp-count { color: #64748b !important; }
[data-theme="light"] .tn-mp-count-num { color: #0f172a !important; }
[data-theme="light"] .tn-mp-search {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}
[data-theme="light"] .tn-mp-search:focus {
    border-color: #5865F2 !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.14) !important;
}
[data-theme="light"] .tn-mp-results {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .tn-mp-row {
    color: #0f172a !important;
    background: transparent !important;
}
[data-theme="light"] .tn-mp-row:hover { background: rgba(88, 101, 242, 0.08) !important; }
[data-theme="light"] .tn-mp-row.selected { background: rgba(16, 185, 129, 0.10) !important; }
[data-theme="light"] .tn-mp-row-sub { color: #475569; }
[data-theme="light"] .tn-mp-badge {
    background: #f1f5f9 !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .tn-mp-id { color: #64748b !important; }
[data-theme="light"] .tn-toggle-row {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.04)) !important;
    border: 1px solid rgba(245, 158, 11, 0.30) !important;
}
[data-theme="light"] .tn-toggle-title { color: #b45309 !important; }
[data-theme="light"] .tn-toggle-desc { color: #475569 !important; }
[data-theme="light"] .tn-toggle-track {
    background: rgba(15, 23, 42, 0.10) !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
}
[data-theme="light"] .tn-toggle-thumb {
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18) !important;
}
[data-theme="light"] .tn-error-banner {
    background: rgba(239, 68, 68, 0.06) !important;
    border: 1px solid rgba(239, 68, 68, 0.30) !important;
    color: #b91c1c !important;
}
[data-theme="light"] .tn-btn-ghost {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}
[data-theme="light"] .tn-btn-ghost:hover {
    background: #f1f5f9 !important;
    border-color: rgba(15, 23, 42, 0.22) !important;
}
[data-theme="light"] .tn-btn-primary {
    background: linear-gradient(135deg, #5865F2, #06b6d4) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px -8px rgba(88, 101, 242, 0.40) !important;
}
[data-theme="light"] .tn-btn-danger {
    background: rgba(239, 68, 68, 0.10) !important;
    border-color: rgba(239, 68, 68, 0.40) !important;
    color: #b91c1c !important;
}
[data-theme="light"] .tn-pe-row,
[data-theme="light"] .tn-team-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
}
[data-theme="light"] .tn-bv {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .tn-bv-title { color: #0f172a; }
[data-theme="light"] .tn-bv-round-label { color: #5865F2 !important; }
[data-theme="light"] .tn-bv-match {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .tn-bv-team { color: #0f172a; }
[data-theme="light"] .tn-arena-team {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .tn-arena-name { color: #0f172a !important; }
[data-theme="light"] .tn-score-btn {
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #0f172a !important;
}
[data-theme="light"] .tn-score-btn:hover { background: rgba(88, 101, 242, 0.10) !important; }
[data-theme="light"] .tn-modal-h h2,
[data-theme="light"] .tn-form-h h2 { color: #0f172a !important; }
[data-theme="light"] .tn-edit-summary .tn-edit-s {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .tn-edit-s-num { color: #0f172a; }
[data-theme="light"] .tn-edit-s-lbl { color: #64748b; }

/* LIGHT-V2: Leaderboards (lb-* — inline-scoped CSS variables in app.js) */
[data-theme="light"] .lb-shell {
    --lb-bg: #f5f7fb !important;
    --lb-surface: #ffffff !important;
    --lb-surface-2: #f8fafc !important;
    --lb-surface-3: #f1f5f9 !important;
    --lb-border: rgba(15, 23, 42, 0.08) !important;
    --lb-border-strong: rgba(15, 23, 42, 0.14) !important;
    --lb-text: #0f172a !important;
    --lb-text-dim: #475569 !important;
    --lb-text-muted: #64748b !important;
    --lb-accent: #5865F2 !important;
    --lb-accent-2: #06b6d4 !important;
}
[data-theme="light"] .lb-shell::before {
    opacity: 0.08 !important;
}
[data-theme="light"] .lb-shell::after {
    background: linear-gradient(to bottom, rgba(245, 247, 251, 0.6) 0%, rgba(245, 247, 251, 0.92) 60%, var(--lb-bg) 100%) !important;
}
[data-theme="light"] .lb-row:not(.podium-1):not(.podium-2):not(.podium-3) { background: #ffffff !important; }
[data-theme="light"] .lb-row:hover {
    background: rgba(15, 23, 42, 0.03) !important;
    border-color: var(--lb-border) !important;
}
[data-theme="light"] .lb-btn-primary {
    /* review: el stop cian #06b6d4 daba 2.43:1 con blanco (falla AA en el lado
       derecho). Indigo #4338ca = 7.9:1, pasa AA en todo el botón. */
    background: linear-gradient(135deg, #5865F2, #4338ca) !important;
    color: #ffffff !important;
}
[data-theme="light"] .lb-btn-primary:hover {
    box-shadow: 0 8px 22px -6px rgba(88, 101, 242, 0.45) !important;
}
[data-theme="light"] .lb-btn-ghost {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}
[data-theme="light"] .lb-board-card,
[data-theme="light"] .lb-empty {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .lb-modal {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.20) !important;
}
[data-theme="light"] .lb-modal-overlay {
    background: rgba(15, 23, 42, 0.30) !important;
}
[data-theme="light"] .lb-input {
    background: #ffffff !important;
    border: 1.5px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}
[data-theme="light"] .lb-input:focus {
    border-color: #5865F2 !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.14) !important;
}
[data-theme="light"] .lb-mini-btn {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #475569 !important;
}
[data-theme="light"] .lb-mini-btn:hover:not(:disabled) {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}
[data-theme="light"] .lb-tp-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .lb-tp-card-name { color: #0f172a; }
[data-theme="light"] .lb-tp-card-tagline { color: #475569; }

/* LIGHT-V2: Tabs (.tab) */
[data-theme="light"] .tab {
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #64748b !important;
}
[data-theme="light"] .tab:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}
[data-theme="light"] .tab.active {
    background: #5865F2 !important;
    color: #ffffff !important;
    border-color: #5865F2 !important;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.30) !important;
}
[data-theme="light"] .apple-tab { color: #64748b; }
[data-theme="light"] .apple-tab.active {
    background: #5865F2 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.30) !important;
}
[data-theme="light"] .tabs { background: transparent; }

/* LIGHT-V2: Tab-btn (modern) */
[data-theme="light"] .tab-btn {
    color: #475569;
}
[data-theme="light"] .tab-btn.active {
    background: #5865F2 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(88, 101, 242, 0.30) !important;
}

/* LIGHT-V2: Member directory row (.member-row + .mem-filter-chip) — these
   are inline-styled in app.js: background rgba(255,255,255,0.02). Override. */
[data-theme="light"] .member-row,
[data-theme="light"] .card.member-row {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
}
[data-theme="light"] .member-row[onmouseover],
[data-theme="light"] .member-row:hover {
    background: #f8fafc !important;
    border-color: rgba(88, 101, 242, 0.30) !important;
}
[data-theme="light"] .mem-filter-chip,
[data-theme="light"] button.mem-filter-chip {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #475569 !important;
}
[data-theme="light"] .mem-filter-chip.active,
[data-theme="light"] button.mem-filter-chip.active {
    background: rgba(88, 101, 242, 0.12) !important;
    border-color: rgba(88, 101, 242, 0.40) !important;
    color: #4338ca !important;
}
[data-theme="light"] #mem-filters {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
}

/* LIGHT-V2: Market cards (inline styles) */
[data-theme="light"] .market-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
    color: #0f172a !important;
}
[data-theme="light"] .market-card:hover {
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10) !important;
}
[data-theme="light"] .market-card h3 { color: #0f172a !important; }
[data-theme="light"] .mk-tag-chip {
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #475569 !important;
}
[data-theme="light"] .mk-tag-chip.active {
    background: rgba(88, 101, 242, 0.12) !important;
    border-color: rgba(88, 101, 242, 0.40) !important;
    color: #4338ca !important;
}

/* LIGHT-V2: Donors */
[data-theme="light"] .donor-row {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
}
[data-theme="light"] .donor-row:hover {
    background: #f8fafc !important;
    border-color: rgba(88, 101, 242, 0.30) !important;
}

/* LIGHT-V2: Discord-style messages */
[data-theme="light"] .discord-msg:hover { background: rgba(15, 23, 42, 0.02); }
[data-theme="light"] .discord-author { color: #0f172a; }
[data-theme="light"] .discord-time { color: #64748b; }
[data-theme="light"] .discord-text { color: #0f172a; }
[data-theme="light"] .discord-embed {
    background: #f8fafc;
    border-left: 4px solid #5865F2;
}
[data-theme="light"] .discord-embed-title { color: #0f172a; }
[data-theme="light"] .discord-embed-desc { color: #475569; }
[data-theme="light"] .discord-mention {
    background: rgba(88, 101, 242, 0.10);
    color: #4338ca;
}

/* LIGHT-V2: Channels v2 */
[data-theme="light"] .channel-v2 { color: #64748b; }
[data-theme="light"] .channel-v2:hover {
    background: rgba(15, 23, 42, 0.04);
    color: #0f172a;
}
[data-theme="light"] .channel-v2.active {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
}
[data-theme="light"] .channel-v2-icon { color: #5865F2; }

/* LIGHT-V2: Chat layout / msg-v2 */
[data-theme="light"] .chat-layout-v2,
[data-theme="light"] .chat-layout {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .chat-sidebar-header {
    background: #f8fafc;
    color: #475569;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .chat-category-v2 { color: #64748b; }
[data-theme="light"] .chat-content-v2 { background: #f8fafc; }
[data-theme="light"] .chat-messages-v2 { background: #f8fafc; }
[data-theme="light"] .msg-v2-actions {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10);
}
[data-theme="light"] .msg-v2-actions button { color: #475569; }
[data-theme="light"] .msg-v2-actions button:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
}
[data-theme="light"] .reaction-v2 {
    background: #f1f5f9;
    border: 1px solid transparent;
    color: #0f172a;
}
[data-theme="light"] .reaction-v2:hover {
    background: #e2e8f0;
    border-color: rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .reaction-v2.active {
    background: rgba(88, 101, 242, 0.10);
    border-color: #5865F2;
}
[data-theme="light"] .reaction-v2.active .count { color: #4338ca; }

/* LIGHT-V2: Toasts */
[data-theme="light"] .toast {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #0f172a;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}
[data-theme="light"] .toast-success { border-left: 4px solid #10b981 !important; }
[data-theme="light"] .toast-error { border-left: 4px solid #ef4444 !important; }
[data-theme="light"] .toast-info { border-left: 4px solid #5865F2 !important; }

/* LIGHT-V2: Code blocks */
[data-theme="light"] code {
    background: rgba(88, 101, 242, 0.08) !important;
    color: #4338ca !important;
}
[data-theme="light"] .auth-register-hint code {
    background: rgba(15, 23, 42, 0.06) !important;
    color: #0f172a !important;
}

/* LIGHT-V2: Badges (general) */
[data-theme="light"] .badge-accent {
    background: rgba(88, 101, 242, 0.10);
    color: #4338ca;
}
[data-theme="light"] .badge-success {
    background: rgba(16, 185, 129, 0.10);
    color: #047857;
}
[data-theme="light"] .badge-danger {
    background: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
}
[data-theme="light"] .badge-warning {
    background: rgba(245, 158, 11, 0.10);
    color: #b45309;
}

/* LIGHT-V2: Autocomplete + Mention box */
[data-theme="light"] .autocomplete-results {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
}
[data-theme="light"] .autocomplete-item {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    color: #0f172a;
}
[data-theme="light"] .autocomplete-item:hover { background: #f8fafc; }
[data-theme="light"] .mention-box {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.15) !important;
}
[data-theme="light"] .mention-item {
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}
[data-theme="light"] .mention-item:hover,
[data-theme="light"] .mention-item.active {
    background: rgba(88, 101, 242, 0.10);
}
[data-theme="light"] .mention-name { color: #0f172a; }
[data-theme="light"] .mention-user { color: #64748b; }

/* LIGHT-V2: Guild selector */
[data-theme="light"] #guild-selector-header #btn-guild-sel,
[data-theme="light"] #ow-guild-selector-slot #btn-guild-sel,
[data-theme="light"] #sidebar-guild-selector #btn-guild-sel {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="light"] #guild-selector-header #btn-guild-sel:hover,
[data-theme="light"] #ow-guild-selector-slot #btn-guild-sel:hover,
[data-theme="light"] #sidebar-guild-selector #btn-guild-sel:hover {
    border-color: rgba(88, 101, 242, 0.45) !important;
    background: #f8fafc !important;
}
[data-theme="light"] #guild-dropdown-menu {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.15) !important;
}
[data-theme="light"] .guild-drop-item { color: #0f172a !important; }
[data-theme="light"] .guild-drop-item:hover {
    background: rgba(88, 101, 242, 0.08) !important;
}

/* LIGHT-V2: Setup dropdown panel (inline styles) */
[data-theme="light"] .setup-dropdown__panel {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
}
[data-theme="light"] .setup-dropdown__trigger {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #0f172a !important;
}

/* LIGHT-V2: Audit log iOS cards */
[data-theme="light"] .audit-ios-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: none !important;
}
[data-theme="light"] .audit-ios-card:hover {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10) !important;
}
[data-theme="light"] .audit-title { color: #0f172a !important; }
[data-theme="light"] .audit-subtitle { color: #475569 !important; }
[data-theme="light"] .audit-time-badge {
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    color: #475569 !important;
}

/* LIGHT-V2: Verify ui premium */
[data-theme="light"] .vf-card-premium {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .vf-card-premium:hover {
    border-color: rgba(88, 101, 242, 0.30) !important;
}
[data-theme="light"] .vf-icon-wrap {
    background: rgba(88, 101, 242, 0.10) !important;
}

/* LIGHT-V2: Switch (toggle) */
[data-theme="light"] .slider {
    background-color: #cbd5e1;
    border: 1px solid rgba(15, 23, 42, 0.10);
}
[data-theme="light"] input:checked + .slider {
    background-color: #5865F2;
    border-color: #5865F2;
}

/* LIGHT-V2: Tourney cards */
[data-theme="light"] .tourney-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .tourney-card:hover {
    border-color: #5865F2 !important;
    box-shadow: 0 12px 32px rgba(88, 101, 242, 0.15) !important;
}
[data-theme="light"] .tourney-title-main {
    background: linear-gradient(135deg, #0f172a, #475569) !important;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
[data-theme="light"] .tourney-meta { color: #64748b; }
[data-theme="light"] .bracket-match {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
}
[data-theme="light"] .match-team {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .match-team.winner {
    background: rgba(88, 101, 242, 0.10);
    color: #4338ca;
}

/* LIGHT-V2: Sidebar guild selector specifically inside sidebar */
[data-theme="light"] #sidebar-guild-selector {
    background: transparent !important;
}

/* LIGHT-V2: Data list rows */
[data-theme="light"] .data-item {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    color: #0f172a;
}
[data-theme="light"] .data-item:hover {
    background: #f8fafc !important;
    border-color: rgba(88, 101, 242, 0.20) !important;
}
[data-theme="light"] .data-rank { color: #64748b; }
[data-theme="light"] .data-name { color: #0f172a; }
[data-theme="light"] .data-meta { color: #64748b; }
[data-theme="light"] .data-avatar {
    border: 2px solid rgba(15, 23, 42, 0.10);
}

/* LIGHT-V2: Sidebar guild-selector wrapping fix (white bg inside sidebar) */
[data-theme="light"] #sidebar-guild-selector { background: transparent; }

/* LIGHT-V2: Scrollbar in light mode */
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18) !important;
    border-radius: 4px;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.30) !important;
}
[data-theme="light"] .apple-card::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.10) !important;
}
[data-theme="light"] .apple-card:hover::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.20) !important;
}
[data-theme="light"] .main-content::-webkit-scrollbar-thumb {
    background: linear-gradient(#5865F2, #06b6d4) !important;
}
[data-theme="light"] .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18) !important;
}

/* LIGHT-V2: General override — kill leftover dark backgrounds on inline-styled
   surfaces. We target the most common rgba dark patterns used inline by app.js.
   These are necessary because the dashboard injects hundreds of `style="..."`
   blocks with dark colors that can't be changed without touching app.js. */
[data-theme="light"] [style*="background:rgba(255,255,255,0.02)"],
[data-theme="light"] [style*="background: rgba(255,255,255,0.02)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.03)"],
[data-theme="light"] [style*="background: rgba(255,255,255,0.03)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.04)"],
[data-theme="light"] [style*="background: rgba(255,255,255,0.04)"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.05)"],
[data-theme="light"] [style*="background: rgba(255,255,255,0.05)"] {
    background: #f8fafc !important;
}
[data-theme="light"] [style*="background:rgba(0,0,0,0.15)"],
[data-theme="light"] [style*="background: rgba(0,0,0,0.15)"],
[data-theme="light"] [style*="background:rgba(0,0,0,0.18)"],
[data-theme="light"] [style*="background: rgba(0,0,0,0.18)"],
[data-theme="light"] [style*="background:rgba(0,0,0,0.20)"],
[data-theme="light"] [style*="background: rgba(0,0,0,0.20)"],
[data-theme="light"] [style*="background:rgba(0,0,0,0.2)"],
[data-theme="light"] [style*="background: rgba(0,0,0,0.2)"],
[data-theme="light"] [style*="background:rgba(0,0,0,0.25)"],
[data-theme="light"] [style*="background: rgba(0,0,0,0.25)"],
[data-theme="light"] [style*="background:rgba(0,0,0,0.3)"],
[data-theme="light"] [style*="background: rgba(0,0,0,0.3)"],
[data-theme="light"] [style*="background:rgba(0,0,0,0.30)"],
[data-theme="light"] [style*="background: rgba(0,0,0,0.30)"] {
    background: #f1f5f9 !important;
}

/* LIGHT-V2: Inline dark gradient backdrops (market cards mainly) */
[data-theme="light"] [style*="linear-gradient(180deg, rgba(20,22,30"],
[data-theme="light"] [style*="linear-gradient(180deg, rgba(14,16,22"] {
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
}

/* LIGHT-V2: Inline white text on dark bg (var(--text-main) is now #0f172a
   so anything binding to it is fine; but a few hard-coded color:#fff need a
   guard). The banner header keeps white text because it sits on a dark photo. */
[data-theme="light"] [style*="color:var(--text-main)"],
[data-theme="light"] [style*="color: var(--text-main)"] {
    color: #0f172a !important;
}
[data-theme="light"] [style*="color:var(--text-muted)"],
[data-theme="light"] [style*="color: var(--text-muted)"] {
    color: #475569 !important;
}

/* LIGHT-V2: White text on the .overview-banner-content (sits on photo bg) —
   keep white text as is (already handled by the existing rules at 127-137). */

/* LIGHT-V2: Skeleton (loading) */
[data-theme="light"] .pro-skeleton {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.04) 0%, rgba(15, 23, 42, 0.10) 50%, rgba(15, 23, 42, 0.04) 100%) !important;
    background-size: 800px 100%;
}

/* LIGHT-V2: Tooltips / floating labels — generic class hooks used in dashboards */
[data-theme="light"] [role="tooltip"],
[data-theme="light"] .tooltip {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
}

/* LIGHT-V2: .ios-blur / .modern-modal / .modern-select */
[data-theme="light"] .ios-blur {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .modal-content.modern-modal {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
}
[data-theme="light"] .profile-avatar-wrapper {
    background: #ffffff !important;
}
[data-theme="light"] .modern-select {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}

/* LIGHT-V2: .ow-select-trigger / .ow-option (newer ones at ~line 3440) */
[data-theme="light"] .ow-select-trigger {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}
[data-theme="light"] .ow-select-trigger:hover {
    background: #f8fafc !important;
    border-color: #5865F2 !important;
}
[data-theme="light"] .ow-select.active .ow-select-trigger {
    border-color: #5865F2 !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.14) !important;
}
[data-theme="light"] .ow-select-options {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.15) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
}
[data-theme="light"] .ow-option { color: #0f172a !important; }
[data-theme="light"] .ow-option:hover {
    background: rgba(88, 101, 242, 0.10) !important;
    color: #0f172a !important;
}
[data-theme="light"] .ow-option.selected {
    background: rgba(88, 101, 242, 0.18) !important;
}

/* LIGHT-V2: Widget btn (overview shortcuts) */
[data-theme="light"] .widget-btn {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
}
[data-theme="light"] .widget-btn:hover {
    background: #f8fafc !important;
    border-color: #5865F2 !important;
}

/* LIGHT-V2: btn-ios (general iOS-style button used everywhere) */
[data-theme="light"] .btn-ios {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #0f172a !important;
}
[data-theme="light"] .btn-ios:hover {
    background: #eef2f6 !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
}
[data-theme="light"] .btn-ios-primary {
    background: linear-gradient(135deg, #5865F2, #4f46e5) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.30) !important;
}
[data-theme="light"] .btn-ios-primary:hover {
    box-shadow: 0 8px 24px rgba(88, 101, 242, 0.40) !important;
}

/* LIGHT-V2: tk-tag-chip and ticket misc */
[data-theme="light"] .tk-tag-chip {
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #475569 !important;
}
[data-theme="light"] .tk-tag-chip.active {
    background: rgba(88, 101, 242, 0.12) !important;
    border-color: rgba(88, 101, 242, 0.40) !important;
    color: #4338ca !important;
}
[data-theme="light"] .tk-empty { color: #64748b !important; }

/* LIGHT-V2: All inline-styled border-colors with rgba(255,255,255,X) need
   to be made compatible. Use a fallback transparent border on a known-light
   container. */
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.04)"],
[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.04)"],
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.06)"],
[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.06)"],
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.08)"],
[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.08)"] {
    border-color: rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] [style*="border:1px dashed rgba(255,255,255,0.06)"],
[data-theme="light"] [style*="border: 1px dashed rgba(255,255,255,0.06)"],
[data-theme="light"] [style*="border-top:1px dashed rgba(255,255,255,0.06)"],
[data-theme="light"] [style*="border-bottom:1px dashed rgba(255,255,255,0.06)"] {
    border-color: rgba(15, 23, 42, 0.10) !important;
}
[data-theme="light"] [style*="border:2px dashed rgba(255,255,255,0.06)"],
[data-theme="light"] [style*="border: 2px dashed rgba(255,255,255,0.06)"] {
    border-color: rgba(15, 23, 42, 0.10) !important;
}

/* LIGHT-V2: sx-* (Warns / Strikes / Blacklist editor — SX-V1 inline styles) */
[data-theme="light"] .sx-shell { color: #0f172a; }
[data-theme="light"] .sx-head {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.06), rgba(111, 224, 255, 0.02)) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .sx-head-title { color: #0f172a !important; }
[data-theme="light"] .sx-head-sub { color: #475569 !important; }
[data-theme="light"] .sx-search {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}
[data-theme="light"] .sx-search:focus {
    border-color: #5865F2 !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.14) !important;
}
[data-theme="light"] .sx-btn.ghost {
    background: transparent !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: #475569 !important;
}
[data-theme="light"] .sx-btn.ghost:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}
[data-theme="light"] .sx-stat {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="light"] .sx-stat-lbl { color: rgba(15, 23, 42, 0.45) !important; }
[data-theme="light"] .sx-stat-num { color: #0f172a !important; }
[data-theme="light"] .sx-stat-sub { color: #475569 !important; }
[data-theme="light"] .sx-filters {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .sx-chip {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #475569 !important;
}
[data-theme="light"] .sx-chip:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}
[data-theme="light"] .sx-empty {
    background: #f8fafc !important;
    border: 1px dashed rgba(15, 23, 42, 0.12) !important;
}
[data-theme="light"] .sx-empty-t { color: #0f172a !important; }
[data-theme="light"] .sx-empty-s { color: #475569 !important; }
[data-theme="light"] .sx-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .sx-card:hover {
    border-color: rgba(88, 101, 242, 0.30) !important;
}
[data-theme="light"] .sx-card-head:hover { background: #f8fafc !important; }
[data-theme="light"] .sx-card-name { color: #0f172a !important; }
[data-theme="light"] .sx-card-id { color: #64748b !important; }
[data-theme="light"] .sx-card-chevron { color: #64748b; }
[data-theme="light"] .sx-card.open .sx-card-chevron { color: #5865F2; }
[data-theme="light"] .sx-card-body {
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .sx-entry {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .sx-entry:hover {
    border-color: rgba(15, 23, 42, 0.12) !important;
}
[data-theme="light"] .sx-entry-num { color: #64748b !important; }
[data-theme="light"] .sx-entry-reason { color: #0f172a !important; }
[data-theme="light"] .sx-entry-meta { color: #475569 !important; }
[data-theme="light"] .sx-entry-icon-btn {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #475569 !important;
}
[data-theme="light"] .sx-entry-icon-btn:hover {
    background: rgba(88, 101, 242, 0.08) !important;
    color: #4338ca !important;
    border-color: rgba(88, 101, 242, 0.30) !important;
}
[data-theme="light"] .sx-entry-evidence {
    border-top: 1px dashed rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .sx-emodal .row {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .sx-emodal .row label { color: #475569 !important; }
[data-theme="light"] .sx-emodal .row input,
[data-theme="light"] .sx-emodal .row textarea,
[data-theme="light"] .sx-emodal .row select {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
}
[data-theme="light"] .sx-emodal .row input:focus,
[data-theme="light"] .sx-emodal .row textarea:focus,
[data-theme="light"] .sx-emodal .row select:focus {
    border-color: #5865F2 !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.14) !important;
}
[data-theme="light"] .sx-emodal .sev-btn {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #475569 !important;
}
[data-theme="light"] .sx-emodal .sev-btn:hover { color: #0f172a !important; }
[data-theme="light"] .sx-modal-foot {
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
}

/* LIGHT-V2 END */

/* ============================================================
   LIGHT-V3 FIX (2026-05-21)
   Bug: primary/danger/success buttons en modo claro estaban INVISIBLES
   (white-on-white) porque .btn-ios neutro cargaba DESPUES de
   .btn-ios-primary con mismo specificity + !important — la cascada
   hacia ganar el gris transparente sobre el gradiente azul.
   Fix: bump specificity con button.X.Y / a.X y mover al final.
   ============================================================ */

/* Primary buttons — gradiente azul + texto blanco */
[data-theme="light"] button.btn-ios.btn-ios-primary,
[data-theme="light"] button.btn-ios-primary,
[data-theme="light"] a.btn-ios.btn-ios-primary,
[data-theme="light"] a.btn-ios-primary,
[data-theme="light"] .btn-ios.btn-ios-primary {
    background: linear-gradient(135deg, #5865F2 0%, #4F46E5 100%) !important;
    background-color: #5865F2 !important;
    color: #ffffff !important;
    border: 1px solid rgba(79, 70, 229, 0.40) !important;
    box-shadow: 0 4px 14px -2px rgba(88, 101, 242, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
[data-theme="light"] button.btn-ios.btn-ios-primary:hover,
[data-theme="light"] button.btn-ios-primary:hover,
[data-theme="light"] a.btn-ios.btn-ios-primary:hover,
[data-theme="light"] a.btn-ios-primary:hover,
[data-theme="light"] .btn-ios.btn-ios-primary:hover {
    background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%) !important;
    color: #ffffff !important;
    border-color: rgba(67, 56, 202, 0.55) !important;
    box-shadow: 0 6px 18px -2px rgba(88, 101, 242, 0.42),
                inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    transform: translateY(-1px);
}
[data-theme="light"] button.btn-ios.btn-ios-primary:active,
[data-theme="light"] button.btn-ios-primary:active,
[data-theme="light"] a.btn-ios.btn-ios-primary:active,
[data-theme="light"] a.btn-ios-primary:active {
    background: linear-gradient(135deg, #4338CA 0%, #3730A3 100%) !important;
    transform: translateY(0);
    box-shadow: 0 2px 8px -1px rgba(88, 101, 242, 0.30),
                inset 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}

/* Danger buttons — rojo solido + texto blanco */
[data-theme="light"] button.btn-ios.btn-ios-danger,
[data-theme="light"] button.btn-ios-danger,
[data-theme="light"] a.btn-ios.btn-ios-danger,
[data-theme="light"] a.btn-ios-danger,
[data-theme="light"] .btn-ios.btn-ios-danger {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
    background-color: #DC2626 !important;
    color: #ffffff !important;
    border: 1px solid rgba(185, 28, 28, 0.45) !important;
    box-shadow: 0 4px 14px -2px rgba(220, 38, 38, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
[data-theme="light"] button.btn-ios.btn-ios-danger:hover,
[data-theme="light"] button.btn-ios-danger:hover,
[data-theme="light"] a.btn-ios.btn-ios-danger:hover,
[data-theme="light"] a.btn-ios-danger:hover {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
    color: #ffffff !important;
    border-color: rgba(153, 27, 27, 0.60) !important;
    transform: translateY(-1px);
}

/* Success buttons — verde solido + texto blanco */
[data-theme="light"] button.btn-ios.btn-ios-success,
[data-theme="light"] button.btn-ios-success,
[data-theme="light"] a.btn-ios.btn-ios-success,
[data-theme="light"] a.btn-ios-success,
[data-theme="light"] .btn-ios.btn-ios-success {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    background-color: #059669 !important;
    color: #ffffff !important;
    border: 1px solid rgba(5, 150, 105, 0.45) !important;
    box-shadow: 0 4px 14px -2px rgba(16, 185, 129, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
[data-theme="light"] button.btn-ios.btn-ios-success:hover,
[data-theme="light"] button.btn-ios-success:hover,
[data-theme="light"] a.btn-ios.btn-ios-success:hover,
[data-theme="light"] a.btn-ios-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Pro-btn variants (usados en headers de seccion) */
[data-theme="light"] button.pro-btn.pro-btn-primary,
[data-theme="light"] a.pro-btn.pro-btn-primary,
[data-theme="light"] .pro-btn.pro-btn-primary {
    background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(55, 48, 163, 0.45) !important;
    box-shadow: 0 4px 14px -2px rgba(55, 48, 163, 0.35) !important;
}
[data-theme="light"] button.pro-btn.pro-btn-primary:hover,
[data-theme="light"] a.pro-btn.pro-btn-primary:hover {
    background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}
[data-theme="light"] button.pro-btn.pro-btn-danger,
[data-theme="light"] a.pro-btn.pro-btn-danger {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(185, 28, 28, 0.45) !important;
}

/* btn-primary clasico (usado por modales / forms) */
[data-theme="light"] button.btn-primary,
[data-theme="light"] .btn-primary {
    background: linear-gradient(135deg, #5865F2 0%, #4F46E5 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(79, 70, 229, 0.40) !important;
    box-shadow: 0 4px 14px -2px rgba(88, 101, 242, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
[data-theme="light"] button.btn-primary:hover,
[data-theme="light"] .btn-primary:hover {
    background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Disabled state — overrides primarios para deshabilitados */
[data-theme="light"] button.btn-ios.btn-ios-primary:disabled,
[data-theme="light"] button.btn-ios-primary:disabled,
[data-theme="light"] button.btn-ios.btn-ios-danger:disabled,
[data-theme="light"] button.btn-ios-danger:disabled,
[data-theme="light"] button.btn-ios.btn-ios-success:disabled,
[data-theme="light"] button.btn-ios-success:disabled {
    background: #e2e8f0 !important;
    color: #94a3b8 !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none !important;
}

/* LIGHT-V3 END */

/* ============================================================
   LIGHT-V4 FIX (2026-05-21)
   Setup del Servidor — los cards inyectaban inline <style> con
   rgba(20,22,30,...) hardcodeado, sin variant light. Overrides
   apuntan a las clases .setup-* con !important.
   ============================================================ */

[data-theme="light"] .setup-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 6px 24px -8px rgba(15, 23, 42, 0.08),
                0 1px 0 rgba(255, 255, 255, 1) inset !important;
}
[data-theme="light"] .setup-card__head {
    border-bottom: 1px dashed rgba(15, 23, 42, 0.10) !important;
}
[data-theme="light"] .setup-card__title {
    color: #0f172a !important;
    text-shadow: none !important;
}
[data-theme="light"] .setup-card__sub {
    color: #64748b !important;
}
[data-theme="light"] .setup-row + .setup-row {
    border-top: 1px dashed rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .setup-row__name {
    color: #0f172a !important;
}
[data-theme="light"] .setup-row__desc {
    color: #64748b !important;
}

/* Toggle switch */
[data-theme="light"] .setup-toggle {
    background: rgba(15, 23, 42, 0.10) !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
}
[data-theme="light"] .setup-toggle::after {
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18) !important;
}
[data-theme="light"] .setup-toggle.on {
    background: linear-gradient(135deg, #5865F2 0%, #4F46E5 100%) !important;
    border-color: rgba(79, 70, 229, 0.55) !important;
}

/* Dropdown trigger */
[data-theme="light"] .setup-dropdown__trigger {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="light"] .setup-dropdown__trigger:hover {
    background: #f1f5f9 !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
}
[data-theme="light"] .setup-dropdown.open .setup-dropdown__trigger {
    background: rgba(88, 101, 242, 0.06) !important;
    border-color: #5865F2 !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.10) !important;
}
[data-theme="light"] .setup-dropdown__arrow {
    color: #64748b !important;
    opacity: 0.8 !important;
}

/* Dropdown panel */
[data-theme="light"] .setup-dropdown__panel {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.20) !important;
}
[data-theme="light"] .setup-dropdown__search {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #0f172a !important;
}
[data-theme="light"] .setup-dropdown__search:focus {
    border-color: #5865F2 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.10) !important;
}
[data-theme="light"] .setup-dropdown__search::placeholder {
    color: #94a3b8 !important;
}
[data-theme="light"] .setup-dropdown__items::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18) !important;
}
[data-theme="light"] .setup-dropdown__item {
    color: #0f172a !important;
}
[data-theme="light"] .setup-dropdown__item:hover {
    background: #f1f5f9 !important;
}
[data-theme="light"] .setup-dropdown__item--active {
    background: rgba(88, 101, 242, 0.10) !important;
    color: #4338ca !important;
}
[data-theme="light"] .setup-role-meta {
    color: #94a3b8 !important;
}

/* Inputs + lang pills */
[data-theme="light"] .setup-input {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
}
[data-theme="light"] .setup-input:focus {
    border-color: #5865F2 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.10) !important;
}
[data-theme="light"] .setup-input::placeholder {
    color: #94a3b8 !important;
}
[data-theme="light"] .setup-lang-pill {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #475569 !important;
}
[data-theme="light"] .setup-lang-pill:hover {
    background: #f1f5f9 !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
    color: #0f172a !important;
}
[data-theme="light"] .setup-lang-pill.active {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.10) 0%, rgba(88, 101, 242, 0.04) 100%) !important;
    border-color: #5865F2 !important;
    color: #4338ca !important;
    box-shadow: 0 2px 8px -2px rgba(88, 101, 242, 0.15) !important;
}

/* Pro-toolbar (header del setup) */
[data-theme="light"] .pro-toolbar {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 6px 24px -8px rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .pro-toolbar-title > div:last-child > div:first-child {
    color: #0f172a !important;
}
[data-theme="light"] .pro-toolbar code {
    background: rgba(88, 101, 242, 0.08) !important;
    color: #4338ca !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(88, 101, 242, 0.18) !important;
}

/* Labels uppercase dentro de setup */
[data-theme="light"] .setup-card label {
    color: #64748b !important;
}

/* LIGHT-V4 END */

/* ============================================================
   LIGHT-V5 FIX (2026-05-21)
   1) Modal "Editar miembro" (ow-editor) — bordes/corners en light
   2) Banner + avatar + tabs + inputs en light theme
   3) Discord btn polish en light
   4) Modal-header light variant (modal-card.exclusive)
   ============================================================ */

/* === Modal exclusive en light (ONE WAY CONTROL CENTER) === */
[data-theme="light"] .modal-card.exclusive {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.18) !important;
    /* CRITICAL: overflow:hidden para que la banner (square) NO overflowee
       las rounded corners del modal. Sin esto, el banner del usuario se
       ve cuadrado en las esquinas top-left/top-right del modal. */
    overflow: hidden !important;
}
/* También para dark mode — mismo problema visual */
.modal-card.exclusive {
    overflow: hidden;
}
[data-theme="light"] .modal-card.exclusive .modal-header {
    background: #f8fafc !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
}
[data-theme="light"] .modal-card.exclusive .modal-header h3,
[data-theme="light"] .modal-card.exclusive .modal-header .modal-title,
[data-theme="light"] .modal-card.exclusive .modal-header span {
    color: #0f172a !important;
}
[data-theme="light"] .modal-card.exclusive .modal-close {
    color: #64748b !important;
}
[data-theme="light"] .modal-card.exclusive .modal-close:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #dc2626 !important;
}
[data-theme="light"] .modal-card.exclusive .modal-body {
    background: #ffffff !important;
    padding: 0 !important; /* killing padding — el ow-editor adentro maneja el espacio */
}

/* === OW-EDITOR (Editar miembro) light === */
[data-theme="light"] .ow-editor {
    background: #ffffff !important;
    border-radius: 0 !important; /* killing inner radius — flush con modal */
    overflow: hidden !important;
}
[data-theme="light"] .ow-banner {
    /* Si no hay banner image, mostrar gradiente índigo SUAVE en vez del oscuro */
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #a5b4fc 100%);
}
[data-theme="light"] .ow-banner[style*="background-image"] {
    background: inherit; /* respeta el inline si HAY banner image */
}
[data-theme="light"] .ow-banner-fade {
    /* Gradient hacia el blanco del editor */
    background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%) !important;
}
[data-theme="light"] .ow-avatar {
    border: 5px solid #ffffff !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18) !important;
}
[data-theme="light"] .ow-status-dot {
    border: 4px solid #ffffff !important;
}
[data-theme="light"] .ow-name {
    color: #0f172a !important;
}
[data-theme="light"] .ow-uid {
    color: #64748b !important;
}
[data-theme="light"] .ow-badge.success {
    background: rgba(16, 185, 129, 0.10) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.30) !important;
}
[data-theme="light"] .ow-badge.danger {
    background: rgba(245, 158, 11, 0.10) !important;
    color: #b45309 !important;
    border: 1px solid rgba(245, 158, 11, 0.30) !important;
}

/* Tabs */
[data-theme="light"] .ow-tabs {
    border-bottom: 2px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .ow-tab {
    color: #64748b !important;
}
[data-theme="light"] .ow-tab:hover {
    color: #0f172a !important;
}
[data-theme="light"] .ow-tab.active {
    color: #4338ca !important;
    border-bottom-color: #5865F2 !important;
}
/* LIGHT-FIX 2026-05-30: el .ow-tab.active de One Way · Staff es una PÍLDORA sólida
   (background:var(--primary)). Las reglas de arriba sólo cambian el color del texto
   a indigo, dejando indigo-sobre-indigo ilegible. Scopeamos a .ow-staff para forzar
   texto blanco + fondo indigo (patrón ow-btn-primary), sin tocar las tabs underline
   del editor de perfil (#ow-tabs) que sí quieren texto indigo sobre fondo transparente. */
[data-theme="light"] .ow-staff .ow-tabs .ow-tab.active,
[data-theme="light"] .ow-staff-header .ow-tab.active {
    background: #4f46e5 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.30) !important;
}
[data-theme="light"] .ow-tab-count {
    background: rgba(239, 68, 68, 0.10) !important;
    color: #dc2626 !important;
}

/* Inputs & selects */
[data-theme="light"] .ow-label {
    color: #64748b !important;
}
[data-theme="light"] .ow-input {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
}
[data-theme="light"] .ow-input::placeholder {
    color: #94a3b8 !important;
}
[data-theme="light"] .ow-input:focus {
    border-color: #5865F2 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.10) !important;
}
[data-theme="light"] .ow-select {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
}
[data-theme="light"] .ow-select:hover {
    border-color: rgba(15, 23, 42, 0.20) !important;
}
[data-theme="light"] .ow-select.open {
    border-color: #5865F2 !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.10) !important;
}
[data-theme="light"] .ow-select-arrow {
    color: #64748b !important;
}
[data-theme="light"] .ow-select-dropdown {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.20) !important;
}
[data-theme="light"] .ow-select-opt {
    color: #475569 !important;
}
[data-theme="light"] .ow-select-opt:hover {
    background: rgba(88, 101, 242, 0.06) !important;
    color: #0f172a !important;
}
[data-theme="light"] .ow-select-opt.active {
    background: rgba(88, 101, 242, 0.10) !important;
    color: #4338ca !important;
}

/* Section title + toggle buttons */
[data-theme="light"] .ow-section-title {
    color: #64748b !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .ow-toggle-btn {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #475569 !important;
}
[data-theme="light"] .ow-toggle-btn.active {
    background: rgba(88, 101, 242, 0.08) !important;
    border-color: #5865F2 !important;
    color: #4338ca !important;
}

/* Quick action buttons */
[data-theme="light"] .ow-qbtn {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #475569 !important;
}
[data-theme="light"] .ow-qbtn.warn { color: #b45309 !important; border-color: rgba(245, 158, 11, 0.30) !important; }
[data-theme="light"] .ow-qbtn.warn:hover { background: rgba(245, 158, 11, 0.08) !important; }
[data-theme="light"] .ow-qbtn.danger { color: #dc2626 !important; border-color: rgba(239, 68, 68, 0.30) !important; }
[data-theme="light"] .ow-qbtn.danger:hover { background: rgba(239, 68, 68, 0.08) !important; }
[data-theme="light"] .ow-qbtn.info { color: #1e40af !important; border-color: rgba(59, 130, 246, 0.30) !important; }
[data-theme="light"] .ow-qbtn.info:hover { background: rgba(59, 130, 246, 0.08) !important; }
[data-theme="light"] .ow-qbtn.success { color: #047857 !important; border-color: rgba(16, 185, 129, 0.30) !important; }
[data-theme="light"] .ow-qbtn.success:hover { background: rgba(16, 185, 129, 0.08) !important; }

/* Warn cards + strike dots */
[data-theme="light"] .ow-warn-card {
    background: #f8fafc !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .ow-warn-meta {
    color: #4338ca !important;
}
[data-theme="light"] .ow-warn-text {
    color: #0f172a !important;
}
[data-theme="light"] .ow-empty-mini {
    color: #94a3b8 !important;
}
[data-theme="light"] .ow-strike-dot {
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #94a3b8 !important;
}
[data-theme="light"] .ow-strike-dot.active {
    background: rgba(239, 68, 68, 0.10) !important;
    border-color: rgba(239, 68, 68, 0.40) !important;
    color: #dc2626 !important;
}
[data-theme="light"] .ow-add-btn {
    background: #5865F2 !important;
    color: #ffffff !important;
}

/* Save bar (gradiente igual queda bien) */
[data-theme="light"] .ow-save-bar {
    background: #f8fafc !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}

/* === Discord btn — light polish === */
[data-theme="light"] .ow-discord-btn {
    background: linear-gradient(135deg, #5865F2 0%, #4F46E5 100%);
    box-shadow: 0 4px 14px -2px rgba(88, 101, 242, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.20);
    border: 1px solid rgba(79, 70, 229, 0.30);
}
[data-theme="light"] .ow-discord-btn:hover {
    background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
    box-shadow: 0 8px 22px -4px rgba(88, 101, 242, 0.40),
                inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

/* LIGHT-V5 END */

/* ============================================================
   LIGHT-V6 FIX (2026-05-21) — buttons primarios menos saturados
   Ricardo: el indigo/violet (#5865F2 → #4F46E5) pesaba mucho sobre
   blanco. Cambio a un azul iOS más limpio (#3B82F6 → #2563EB) y
   sombras 2× más sutiles. Discord btn también desaturado.
   Aplico al FINAL para ganar la cascada sobre LIGHT-V3/V5.
   ============================================================ */

/* btn-ios-primary y variants — clean iOS blue, no violet */
[data-theme="light"] button.btn-ios.btn-ios-primary,
[data-theme="light"] button.btn-ios-primary,
[data-theme="light"] a.btn-ios.btn-ios-primary,
[data-theme="light"] a.btn-ios-primary,
[data-theme="light"] .btn-ios.btn-ios-primary,
[data-theme="light"] button.btn-primary,
[data-theme="light"] .btn-primary {
    background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%) !important;
    background-color: #3730a3 !important;
    color: #ffffff !important;
    border: 1px solid rgba(29, 78, 216, 0.30) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
                0 2px 8px -2px rgba(37, 99, 235, 0.20),
                inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
[data-theme="light"] button.btn-ios.btn-ios-primary:hover,
[data-theme="light"] button.btn-ios-primary:hover,
[data-theme="light"] a.btn-ios.btn-ios-primary:hover,
[data-theme="light"] a.btn-ios-primary:hover,
[data-theme="light"] .btn-ios.btn-ios-primary:hover,
[data-theme="light"] button.btn-primary:hover,
[data-theme="light"] .btn-primary:hover {
    background: linear-gradient(135deg, #3730a3 0%, #312e81 100%) !important;
    color: #ffffff !important;
    border-color: rgba(30, 64, 175, 0.45) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
                0 4px 12px -2px rgba(37, 99, 235, 0.30),
                inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    transform: translateY(-1px);
}
[data-theme="light"] button.btn-ios.btn-ios-primary:active,
[data-theme="light"] button.btn-ios-primary:active,
[data-theme="light"] a.btn-ios.btn-ios-primary:active,
[data-theme="light"] a.btn-ios-primary:active,
[data-theme="light"] button.btn-primary:active {
    background: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%) !important;
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.20),
                inset 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}

/* Pro-btn-primary variant */
[data-theme="light"] button.pro-btn.pro-btn-primary,
[data-theme="light"] a.pro-btn.pro-btn-primary,
[data-theme="light"] .pro-btn.pro-btn-primary {
    background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(55, 48, 163, 0.45) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
                0 4px 14px -2px rgba(55, 48, 163, 0.35) !important;
}
[data-theme="light"] button.pro-btn.pro-btn-primary:hover,
[data-theme="light"] a.pro-btn.pro-btn-primary:hover {
    background: linear-gradient(135deg, #3730a3 0%, #312e81 100%) !important;
}

/* ally-btn-primary (modal Nueva alianza, header de Alianzas) */
[data-theme="light"] .ally-shell .ally-btn-primary,
[data-theme="light"] button.ally-btn-primary {
    background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(29, 78, 216, 0.30) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
                0 2px 8px -2px rgba(37, 99, 235, 0.20) !important;
}
[data-theme="light"] .ally-shell .ally-btn-primary:hover,
[data-theme="light"] button.ally-btn-primary:hover {
    background: linear-gradient(135deg, #3730a3 0%, #312e81 100%) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
                0 4px 12px -2px rgba(37, 99, 235, 0.30) !important;
}

/* ow-add-btn (botón + verde de agregar warn) */
[data-theme="light"] .ow-add-btn {
    background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
                0 2px 8px -2px rgba(37, 99, 235, 0.20) !important;
}

/* ow-save-btn (GUARDAR CAMBIOS) */
[data-theme="light"] .ow-save-btn {
    background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
                0 4px 14px -3px rgba(37, 99, 235, 0.25) !important;
}
[data-theme="light"] .ow-save-btn:hover {
    background: linear-gradient(135deg, #3730a3 0%, #312e81 100%) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
                0 6px 18px -3px rgba(37, 99, 235, 0.35) !important;
}

/* Discord btn — outline style en light (blanco + texto Discord-purple)
   Mucho menos heavy que el solid purple sobre fondo claro. */
[data-theme="light"] .ow-discord-btn {
    background: #ffffff !important;
    color: #5865F2 !important;
    border: 1px solid rgba(88, 101, 242, 0.35) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05),
                0 2px 6px -2px rgba(88, 101, 242, 0.12) !important;
}
[data-theme="light"] .ow-discord-btn:hover {
    background: rgba(88, 101, 242, 0.06) !important;
    color: #4F46E5 !important;
    border-color: rgba(88, 101, 242, 0.55) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05),
                0 4px 10px -2px rgba(88, 101, 242, 0.18) !important;
    transform: translateY(-1px);
}
[data-theme="light"] .ow-discord-btn svg {
    color: #5865F2 !important;
}
[data-theme="light"] .ow-discord-btn:hover svg {
    color: #4F46E5 !important;
}

/* LIGHT-V6 END */

/* ════════════════════════════════════════════════════════════
   MODAL-POLISH-V103 — Cohesive modal styling (Mercado, Aportes,
   Tops, Profile editor). Tightens inputs, section headers,
   buttons, spacing. Works in both light and dark themes.
   ════════════════════════════════════════════════════════════ */

/* Generic modal card sizing tweaks for breathing room */
.modal-card,
.modal-content {
    max-width: 560px;
    width: 92%;
    padding: 0;
}

.modal-card.wide,
.modal-content.modern-modal {
    max-width: 720px;
}

.modal-card .modal-header,
.modal-content .modal-header {
    padding: 20px 26px;
}

.modal-card .modal-body,
.modal-content .modal-body {
    padding: 24px 26px 26px;
}

/* Section labels inside modals (GENERAL, MULTIMEDIA & CONTACTO, etc.) */
.modal-card h3.section-header,
.modal-card .section-header,
.modal-body h3.section-header,
.modal-body .section-header,
.modal-card [class*="section-title"],
.modal-body [class*="section-title"] {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase;
    margin: 22px 0 10px;
    padding-bottom: 6px;
}

/* DARK MODE polish (default theme) */
.modal-card input[type="text"],
.modal-card input[type="number"],
.modal-card input[type="url"],
.modal-card input[type="email"],
.modal-card select,
.modal-card textarea,
.modal-content input[type="text"],
.modal-content input[type="number"],
.modal-content input[type="url"],
.modal-content input[type="email"],
.modal-content select,
.modal-content textarea {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 0.92rem;
    width: 100%;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    font-family: var(--font-sans);
}

.modal-card input[type="text"]:focus,
.modal-card input[type="number"]:focus,
.modal-card input[type="url"]:focus,
.modal-card select:focus,
.modal-card textarea:focus,
.modal-content input[type="text"]:focus,
.modal-content input[type="number"]:focus,
.modal-content input[type="url"]:focus,
.modal-content select:focus,
.modal-content textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(15, 23, 42, 0.55);
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.18);
}

.modal-card input::placeholder,
.modal-card textarea::placeholder,
.modal-content input::placeholder,
.modal-content textarea::placeholder {
    color: rgba(148, 163, 184, 0.7);
}

/* Field labels above inputs (TÍTULO DEL PERFIL, etc.) */
.modal-card label,
.modal-content label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* Primary action button inside modals */
.modal-card button[type="submit"],
.modal-content button[type="submit"],
.modal-card .btn-primary,
.modal-content .btn-primary {
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 700;
    border: none;
    background: linear-gradient(135deg, #5865F2, #4752C4);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(88, 101, 242, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.modal-card button[type="submit"]:hover,
.modal-content button[type="submit"]:hover,
.modal-card .btn-primary:hover,
.modal-content .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(88, 101, 242, 0.4);
    filter: brightness(1.05);
}

/* LIGHT MODE: harder borders, white surfaces, navy text */
[data-theme="light"] .modal-card,
[data-theme="light"] .modal-content {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18) !important;
}

[data-theme="light"] .modal-card .modal-header,
[data-theme="light"] .modal-content .modal-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .modal-card .modal-title,
[data-theme="light"] .modal-content .modal-title {
    color: #0f172a !important;
}

[data-theme="light"] .modal-card .modal-body,
[data-theme="light"] .modal-content .modal-body {
    color: #334155 !important;
}

[data-theme="light"] .modal-card .section-header,
[data-theme="light"] .modal-body .section-header,
[data-theme="light"] .modal-card [class*="section-title"],
[data-theme="light"] .modal-body [class*="section-title"] {
    color: #4338ca !important;
    border-bottom: 1px solid #e2e8f0;
}

[data-theme="light"] .modal-card label,
[data-theme="light"] .modal-content label {
    color: #475569 !important;
}

[data-theme="light"] .modal-card input[type="text"],
[data-theme="light"] .modal-card input[type="number"],
[data-theme="light"] .modal-card input[type="url"],
[data-theme="light"] .modal-card input[type="email"],
[data-theme="light"] .modal-card select,
[data-theme="light"] .modal-card textarea,
[data-theme="light"] .modal-content input[type="text"],
[data-theme="light"] .modal-content input[type="number"],
[data-theme="light"] .modal-content input[type="url"],
[data-theme="light"] .modal-content input[type="email"],
[data-theme="light"] .modal-content select,
[data-theme="light"] .modal-content textarea {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .modal-card input:focus,
[data-theme="light"] .modal-card select:focus,
[data-theme="light"] .modal-card textarea:focus,
[data-theme="light"] .modal-content input:focus,
[data-theme="light"] .modal-content select:focus,
[data-theme="light"] .modal-content textarea:focus {
    border-color: #5865F2 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.16) !important;
}

[data-theme="light"] .modal-card input::placeholder,
[data-theme="light"] .modal-card textarea::placeholder,
[data-theme="light"] .modal-content input::placeholder,
[data-theme="light"] .modal-content textarea::placeholder {
    color: #94a3b8 !important;
}

/* Chip-style tag buttons (PvP, PvE, IGL, etc. in profile editor) */
[data-theme="light"] .modal-card .tag-chip,
[data-theme="light"] .modal-card [class*="chip"]:not(.modal-card .lb-chip):not(.modal-card .stat-chip),
[data-theme="light"] .modal-body .tag-chip {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

[data-theme="light"] .modal-card .tag-chip:hover,
[data-theme="light"] .modal-card [class*="chip"]:not(.lb-chip):hover {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
}

[data-theme="light"] .modal-card .tag-chip.active,
[data-theme="light"] .modal-card [class*="chip"].active {
    background: rgba(88, 101, 242, 0.12) !important;
    border-color: #5865F2 !important;
    color: #4338ca !important;
}

/* Secondary "Cancelar" button polish */
[data-theme="light"] .modal-card .btn-secondary,
[data-theme="light"] .modal-card button.btn-cancel,
[data-theme="light"] .modal-content .btn-secondary,
[data-theme="light"] .modal-content button.btn-cancel {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

[data-theme="light"] .modal-card .btn-secondary:hover,
[data-theme="light"] .modal-card button.btn-cancel:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* MODAL-POLISH-V103 END */

/* ════════════════════════════════════════════════════════════════════
   OW-LOGS Fase E · sección "One Way · Staff" (class prefix ow-)
   Token-driven (var(--*)) → light/dark automático. Mobile-first responsive.
   ════════════════════════════════════════════════════════════════════ */
.ow-staff { display: flex; flex-direction: column; gap: 16px; }

.ow-staff-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 16px 18px; border-radius: 16px;
    background: var(--bg-surface); border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.ow-staff-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ow-staff-id-icon {
    width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
    background: rgba(var(--primary-rgb), 0.14); border: 1px solid rgba(var(--primary-rgb), 0.3);
}
.ow-staff-id-title { font-weight: 800; color: var(--text-main); font-size: 1.05rem; letter-spacing: -0.01em; }
.ow-staff-id-sub { font-size: 0.78rem; color: var(--text-muted); }

.ow-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-input); border: 1px solid var(--border); }
.ow-tab {
    border: 0; background: transparent; color: var(--text-muted);
    padding: 7px 14px; border-radius: 9px; font-weight: 700; font-size: 0.82rem;
    cursor: pointer; transition: var(--transition-fast); font-family: var(--font-sans);
}
.ow-tab:hover { color: var(--text-main); }
.ow-tab.active { background: var(--primary); color: #fff; box-shadow: 0 2px 8px var(--primary-glow); }

/* ── filtros del viewer ── */
.ow-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ow-toggles { display: inline-flex; gap: 6px; }
.ow-toggle {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 7px 11px; border-radius: 10px; font-size: 0.78rem; font-weight: 700;
    color: var(--text-muted); background: var(--bg-input); border: 1px solid var(--border);
    transition: var(--transition-fast); user-select: none;
}
.ow-toggle input { accent-color: var(--primary); cursor: pointer; }
.ow-toggle.on { color: var(--text-main); border-color: rgba(var(--primary-rgb), 0.5); background: rgba(var(--primary-rgb), 0.12); }
.ow-input {
    background: var(--bg-input); border: 1px solid var(--border); color: var(--text-main);
    border-radius: 10px; padding: 8px 12px; font-size: 0.82rem; font-family: var(--font-sans);
    min-width: 150px; flex: 1 1 auto; transition: var(--transition-fast);
}
.ow-input:focus { outline: none; border-color: rgba(var(--primary-rgb), 0.6); box-shadow: 0 0 0 3px var(--primary-glow); }
.ow-input.ow-date { flex: 0 0 auto; min-width: 130px; color-scheme: dark; }
[data-theme="light"] .ow-input.ow-date { color-scheme: light; }

.ow-btn {
    border: 1px solid var(--border); background: var(--bg-input); color: var(--text-main);
    border-radius: 10px; padding: 8px 14px; font-weight: 700; font-size: 0.8rem;
    cursor: pointer; transition: var(--transition-fast); font-family: var(--font-sans);
    flex: 0 0 auto;
}
.ow-btn:hover { border-color: var(--border-hover); }
.ow-btn-primary { background: var(--primary); color: #fff; border-color: transparent; }
.ow-btn-primary:hover { background: var(--primary-hover); }
/* SPEC §4: en modo claro dashboard-skin.css fuerza --primary:#5B8CFF (azul claro),
   y color:#fff queda ilegible. Forzamos indigo accesible (contraste AA) solo en claro.
   Especificidad de [data-theme="light"] gana sin tocar el valor global de --primary. */
[data-theme="light"] .ow-btn-primary { background: #4f46e5; color: #fff; border-color: transparent; }
[data-theme="light"] .ow-btn-primary:hover { background: #4338ca; }
.ow-btn-danger { background: var(--danger); color: #fff; border-color: transparent; }
.ow-btn-danger:hover { filter: brightness(0.92); }
.ow-btn-ghost { background: transparent; }
.ow-btn-sm { padding: 5px 10px; font-size: 0.72rem; }

.ow-logs-meta { font-size: 0.76rem; color: var(--text-muted); margin-bottom: 10px; }
.ow-scope { font-family: var(--font-mono); opacity: 0.7; }

/* ── feed de logs ── */
.ow-feed { display: flex; flex-direction: column; gap: 8px; }
.ow-feed-item {
    padding: 12px 14px; border-radius: 13px; cursor: pointer;
    background: var(--bg-surface); border: 1px solid var(--border); border-left: 4px solid var(--border-hover);
    transition: var(--transition-fast);
}
.ow-feed-item:hover { border-color: var(--border-hover); transform: translateX(2px); }
.ow-feed-item--ow { border-left-color: var(--primary); }
.ow-feed-item--err { border-left-color: var(--danger); }
.ow-feed-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ow-feed-act { font-weight: 800; color: var(--text-main); font-size: 0.86rem; }
.ow-feed-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }
.ow-feed-tgt { font-size: 0.72rem; opacity: 0.75; background: var(--bg-input); padding: 1px 6px; border-radius: 5px; }
.ow-feed-caret { margin-left: auto; font-size: 0.72rem; color: var(--text-muted); }
.ow-feed-detail {
    margin-top: 10px; padding: 10px 12px; border-radius: 8px;
    background: rgba(0,0,0,0.28); border: 1px solid var(--border);
    font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-mono);
    max-height: 300px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
[data-theme="light"] .ow-feed-detail { background: #f1f5f9; }

/* ── AUDIT-HUMANIZE 2026-06-12: feed legible + detalle estructurado ── */
.ow-feed-ic { font-size: 1rem; line-height: 1; flex: 0 0 auto; }
.ow-feed-raw { font-family: var(--font-mono); font-size: 0.6rem; opacity: 0.45; }
.ow-detail2 { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.ow-d-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.ow-d-cell { display: flex; flex-direction: column; gap: 3px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 9px; padding: 7px 11px; min-width: 0; }
.ow-d-k { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 800; }
.ow-d-v { font-size: 0.78rem; color: var(--text-main); word-break: break-word; line-height: 1.4; }
.ow-d-v code, .ow-d-ck { font-family: var(--font-mono); font-size: 0.7rem; }
.ow-d-v a { color: var(--primary); }
[data-theme="light"] .ow-d-v a, [data-theme="light"] .ow-d-ev a { color: #4338ca; }
.ow-d-res--ok { color: var(--success, #22c55e); font-weight: 800; }
.ow-d-res--err { color: var(--danger); font-weight: 800; }
.ow-d-changes { background: var(--bg-input); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; }
.ow-d-changes-h { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 800; margin-bottom: 7px; }
.ow-d-change { display: grid; grid-template-columns: minmax(70px, 130px) 1fr auto 1fr; gap: 8px; align-items: center; font-size: 0.74rem; padding: 3px 0; }
.ow-d-ck { font-weight: 700; color: var(--text-muted); }
.ow-d-cb { color: var(--danger); text-decoration: line-through; opacity: 0.8; word-break: break-word; }
.ow-d-arrow { color: var(--text-muted); font-weight: 800; }
.ow-d-ca { color: var(--success, #22c55e); word-break: break-word; }
.ow-d-ev a { color: var(--primary); font-size: 0.74rem; word-break: break-all; }
.ow-d-null { opacity: 0.45; }
.ow-d-err { color: var(--danger); font-size: 0.76rem; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.22); border-radius: 9px; padding: 8px 11px; }
.ow-d-json summary { cursor: pointer; font-size: 0.68rem; color: var(--text-muted); font-weight: 700; user-select: none; }
.ow-d-json summary:hover { color: var(--text-main); }
.ow-d-json pre { margin-top: 7px; padding: 10px 12px; border-radius: 8px; background: rgba(0,0,0,0.28); border: 1px solid var(--border); font-size: 0.65rem; color: var(--text-muted); font-family: var(--font-mono); max-height: 280px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
[data-theme="light"] .ow-d-json pre { background: #f1f5f9; }
@media (max-width: 600px) { .ow-d-change { grid-template-columns: 1fr; gap: 2px; } .ow-d-arrow { display: none; } }

.ow-badge {
    font-size: 0.62rem; font-weight: 800; padding: 2px 7px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.ow-badge-ow { background: rgba(var(--primary-rgb), 0.18); color: var(--primary); }
[data-theme="light"] .ow-badge-ow { color: #3730a3; }
.ow-badge-cat { background: var(--bg-input); color: var(--text-muted); }
.ow-badge-err { background: rgba(239,68,68,0.15); color: var(--danger); }

.ow-empty, .ow-locked, .ow-pending-loading {
    padding: 26px 18px; text-align: center; color: var(--text-muted);
    border: 1px dashed var(--border); border-radius: 14px; font-size: 0.85rem;
}

/* ── acciones OW ── */
.ow-actions { display: flex; flex-direction: column; gap: 14px; }
.ow-card {
    padding: 16px 18px; border-radius: 16px;
    background: var(--bg-surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.ow-card--danger { border-color: rgba(239,68,68,0.25); }
.ow-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.ow-card-icon {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
    background: var(--bg-input); border: 1px solid var(--border);
}
.ow-card-title { font-weight: 800; color: var(--text-main); font-size: 0.95rem; }
.ow-card-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; margin-top: 2px; }
.ow-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.ow-pending { display: flex; flex-direction: column; gap: 8px; }
.ow-pending-item {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: 11px; background: var(--bg-input); border: 1px solid var(--border);
}
.ow-pending-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.ow-pending-user, .ow-pending-guild { font-size: 0.74rem; font-family: var(--font-mono); background: var(--bg-surface); padding: 2px 7px; border-radius: 6px; color: var(--text-main); }
.ow-pending-reason { font-size: 0.74rem; color: var(--text-muted); }
.ow-pending-meta { font-size: 0.7rem; color: var(--text-muted); }

/* ════════════════════════════════════════════════════════════════════
   SPEC-OWSTAFF-CONTROL · Overview KPIs + barras CSS + User Lookup
   Token-driven (var(--*)) → light/dark automático. Mobile-first.
   ════════════════════════════════════════════════════════════════════ */
.ow-stats-grid {
    display: grid; gap: 12px;
    /* auto-FIT (no auto-fill): con pocas tarjetas (p.ej. 3 KPIs) colapsa las
       pistas vacías y las estira para LLENAR el ancho en PC, en vez de dejar
       medio panel vacío. Sigue siendo responsive (envuelve bajo 180px). */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
/* owstaff · Resumen: las 8 tarjetas KPI en 4×2 simétrico (evita el 6+2 que
   dejaba un hueco grande a la derecha). Scoped al grid del Resumen — el único
   .ow-stats-grid seguido de .ow-ov-cols — para NO tocar la grilla de 3 KPIs de
   "Actividad del Staff" (donde auto-fit SÍ debe estirar). En móvil (≤720px)
   manda la regla auto-fill de más abajo. */
@media (min-width: 721px) {
    .ow-stats-grid:has(+ .ow-ov-cols) { grid-template-columns: repeat(4, 1fr); }
}
.ow-stat {
    position: relative; padding: 16px 16px 14px; border-radius: 16px;
    background: var(--bg-surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    transition: var(--transition-fast); overflow: hidden;
}
/* #39: One Way · Staff — layout más rico. 2 columnas (gráfica | accesos rápidos)
   en PC, apila en pantallas chicas. Todo theme-aware (var()). */
.ow-ov-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }
@media (max-width: 920px) { .ow-ov-cols { grid-template-columns: 1fr; } }
.ow-qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.ow-qa-btn {
    display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 8px;
    border-radius: 14px; border: 1px solid var(--border); background: var(--bg-input);
    color: var(--text-main); font-weight: 700; font-size: 0.8rem; cursor: pointer;
    transition: var(--transition-fast); font-family: var(--font-sans);
}
.ow-qa-btn:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.ow-qa-ic { font-size: 1.5rem; line-height: 1; }
.ow-stat:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.ow-stat--danger { border-color: rgba(239,68,68,0.28); }
.ow-stat--danger::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
    background: var(--danger); border-radius: 16px 0 0 16px;
}
.ow-stat-icon { font-size: 1.25rem; line-height: 1; margin-bottom: 8px; }
.ow-stat-num { font-size: 1.7rem; font-weight: 900; color: var(--text-main); letter-spacing: -0.02em; line-height: 1; }
.ow-stat-label { font-size: 0.82rem; font-weight: 700; color: var(--text-main); margin-top: 6px; }
.ow-stat-sub { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }

/* ── barras CSS (actividad OW por categoría, sin libs externas) ── */
.ow-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ow-bar-row { display: flex; align-items: center; gap: 10px; }
.ow-bar-label { flex: 0 0 90px; font-size: 0.74rem; font-weight: 700; color: var(--text-muted); font-family: var(--font-mono); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-bar-track { flex: 1 1 auto; height: 10px; border-radius: 6px; background: var(--bg-input); border: 1px solid var(--border); overflow: hidden; }
.ow-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--primary), rgba(var(--primary-rgb), 0.55)); transition: width .4s cubic-bezier(0.34,1.56,0.64,1); }
.ow-bar-val { flex: 0 0 auto; font-size: 0.74rem; font-weight: 800; color: var(--text-main); min-width: 34px; text-align: right; }

/* ── User Lookup ── */
.ow-lookup { margin-top: 12px; }
.ow-lookup:empty { display: none; }
.ow-lookup-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ow-lookup-av { width: 46px; height: 46px; border-radius: 13px; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; }
.ow-lookup-av--ph { display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--bg-input); }
.ow-lookup-name { font-weight: 800; color: var(--text-main); font-size: 0.95rem; }
.ow-lookup-uid { font-size: 0.74rem; font-family: var(--font-mono); color: var(--text-muted); }
.ow-lookup-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ow-lookup-block { padding: 10px 12px; border-radius: 11px; background: var(--bg-input); border: 1px solid var(--border); }
.ow-lookup-block-title { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 800; margin-bottom: 6px; }
.ow-lookup-block .ow-badge { margin: 2px 2px 0 0; display: inline-block; }
.ow-lookup-muted { font-size: 0.78rem; color: var(--text-muted); opacity: 0.8; }

/* ── responsive / mobile ── */
@media (max-width: 720px) {
    .ow-staff-header { flex-direction: column; align-items: stretch; }
    .ow-tabs { width: 100%; }
    .ow-tab { flex: 1 1 0; text-align: center; }
    .ow-filters, .ow-form { flex-direction: column; align-items: stretch; }
    .ow-input, .ow-btn { width: 100%; min-width: 0; }
    .ow-sel-mount { width: 100%; min-width: 0 !important; flex: 1 1 auto !important; }
    .ow-toggles { width: 100%; }
    .ow-toggle { flex: 1 1 0; justify-content: center; }
    .ow-pending-item { flex-direction: column; align-items: stretch; }
    .ow-pending-item .ow-btn { width: 100%; }
    .ow-stats-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .ow-bar-label { flex-basis: 64px; }
}
/* OW-LOGS Fase E END */

/* ════════════════════════════════════════════════════════════════
   §5 · SISTEMA DE NIVELES (Levels)  — ADITIVO, light/dark, contraste AA
   .ow-actor-avatar (logs) · .ow-lvl-badge (Lv N) · .ow-niv-* (sección Niveles)
   ════════════════════════════════════════════════════════════════ */

/* ── Avatar del actor en los logs (junto al nombre + badge de nivel) ── */
.ow-actor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}
.ow-actor-avatar {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--bg-input);
    flex-shrink: 0;
    vertical-align: middle;
}
.ow-actor-name { font-weight: 700; color: var(--text-main); }

/* ── Badge compacto de nivel "Lv N" ──
   Dark : fondo accent translúcido + texto accent (verde sobre verde oscuro = AA ok).
   Light: fondo indigo translúcido + texto #4f46e5 (NUNCA blanco sobre azul claro). */
.ow-lvl-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: middle;
    background: rgba(16, 185, 129, 0.15);          /* accent translúcido */
    color: var(--accent);
    border: 1px solid rgba(16, 185, 129, 0.30);
}
.ow-lvl-badge::before { content: ""; }
.ow-lvl-badge--sm { font-size: 0.6rem; padding: 0 6px; }

[data-theme="light"] .ow-lvl-badge {
    /* indigo translúcido + texto indigo oscuro -> AA sobre superficies claras */
    background: rgba(79, 70, 229, 0.12);
    color: #4f46e5;
    border: 1px solid rgba(79, 70, 229, 0.28);
}

/* Escalado opcional por nivel (clases adicionales que app.js puede añadir) */
.ow-lvl-badge.is-prestige {
    background: rgba(245, 158, 11, 0.18);
    color: var(--warning);
    border-color: rgba(245, 158, 11, 0.38);
}
[data-theme="light"] .ow-lvl-badge.is-prestige {
    background: rgba(217, 119, 6, 0.14);
    color: #92400e; /* review: #b45309 daba 4.33:1 (<AA); #92400e = 6.11:1 */
    border-color: rgba(217, 119, 6, 0.34);
}

/* ════════════ Sección "Niveles" (página) ════════════ */
.ow-niv { display: flex; flex-direction: column; gap: 14px; }

/* sub-tabs Miembros / Staff (reusa el look de .ow-tabs pero con namespace propio) */
.ow-niv-tabs { display: inline-flex; gap: 6px; padding: 4px; border-radius: 12px; background: var(--bg-input); border: 1px solid var(--border); }
.ow-niv-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.84rem;
    padding: 7px 16px;
    border-radius: 9px;
    cursor: pointer;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ow-niv-tab:hover { color: var(--text-main); }
.ow-niv-tab.active {
    background: rgba(var(--primary-rgb), 0.18);
    color: var(--text-main);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
/* En claro var(--primary) resuelve a #5B8CFF (skin) → 2.7:1 sobre blanco. Usamos
   el indigo oscuro #4f46e5 para el tab activo (AA) + borde accent para destacarlo. */
[data-theme="light"] .ow-niv-tab.active { background: var(--bg-surface); color: #4f46e5; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border:1px solid rgba(79,70,229,0.35); }
/* La barra de progreso: en claro el fill azul claro casi no se ve sobre el track
   blanco → fill indigo oscuro para que el progreso sea visible. */
[data-theme="light"] .ow-niv-fill { background: linear-gradient(90deg, #4f46e5, #6366f1); }
[data-theme="light"] .ow-niv-track, [data-theme="light"] .ow-niv-bar { background: #eef0f6; }

/* KPIs opcionales arriba de la lista */
.ow-niv-kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.ow-niv-kpi { padding: 12px 14px; border-radius: 12px; background: var(--bg-input); border: 1px solid var(--border); text-align: center; }
.ow-niv-kpi-val { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 800; color: var(--text-main); line-height: 1.1; }
.ow-niv-kpi-lbl { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 800; margin-top: 4px; }

/* lista / ranking */
.ow-niv-list { display: flex; flex-direction: column; gap: 8px; }
.ow-niv-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 13px;
    background: var(--member-row-bg);
    border: 1px solid var(--border);
    transition: var(--transition-fast);
}
.ow-niv-row:hover { background: var(--member-row-bg-hover); border-color: var(--border-hover); }

/* posición / medalla */
.ow-niv-pos {
    flex: 0 0 34px;
    text-align: center;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.ow-niv-pos--1 { color: #fbbf24; }
.ow-niv-pos--2 { color: #cbd5e1; }
.ow-niv-pos--3 { color: #d97706; }
[data-theme="light"] .ow-niv-pos--2 { color: #94a3b8; }

/* NIV-TOP3-PREMIUM 2026-06-12: el podio del ranking de niveles, consistente
   con el leaderboard. Tintes oro/plata/bronce + aro de avatar + medalla grande. */
.ow-niv-row--top .ow-niv-pos { font-size: 1.32rem; }
.ow-niv-row--top .ow-niv-av { width: 46px; height: 46px; }
.ow-niv-row--1 { background: linear-gradient(90deg, rgba(251,191,36,0.11), var(--member-row-bg) 52%); border-color: rgba(251,191,36,0.36); box-shadow: 0 0 0 1px rgba(251,191,36,0.12), 0 10px 26px -16px rgba(251,191,36,0.45); }
.ow-niv-row--2 { background: linear-gradient(90deg, rgba(203,213,225,0.11), var(--member-row-bg) 52%); border-color: rgba(203,213,225,0.32); }
.ow-niv-row--3 { background: linear-gradient(90deg, rgba(217,119,66,0.11), var(--member-row-bg) 52%); border-color: rgba(217,119,66,0.32); }
.ow-niv-row--1 .ow-niv-av { border-color: rgba(251,191,36,0.55); box-shadow: 0 0 0 2px rgba(251,191,36,0.22); }
.ow-niv-row--2 .ow-niv-av { border-color: rgba(203,213,225,0.55); box-shadow: 0 0 0 2px rgba(203,213,225,0.18); }
.ow-niv-row--3 .ow-niv-av { border-color: rgba(217,119,66,0.55); box-shadow: 0 0 0 2px rgba(217,119,66,0.18); }
[data-theme="light"] .ow-niv-row--1 { background: linear-gradient(90deg, rgba(250,190,0,0.13), var(--member-row-bg) 52%); border-color: rgba(234,179,8,0.42); }
[data-theme="light"] .ow-niv-row--2 { background: linear-gradient(90deg, rgba(148,163,184,0.15), var(--member-row-bg) 52%); border-color: rgba(148,163,184,0.4); }
[data-theme="light"] .ow-niv-row--3 { background: linear-gradient(90deg, rgba(217,119,66,0.13), var(--member-row-bg) 52%); border-color: rgba(217,119,66,0.4); }

.ow-niv-av {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--bg-input);
    flex-shrink: 0;
}
.ow-niv-av--ph { display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }

/* bloque central: nombre + barra de progreso */
.ow-niv-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ow-niv-name-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ow-niv-name {
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* barra de progreso (progressPct) */
.ow-niv-progress { display: flex; align-items: center; gap: 8px; }
.ow-niv-track,
.ow-niv-bar { /* alias: el render usa .ow-niv-bar (review: unificar nombres) */
    flex: 1 1 auto;
    height: 8px;
    border-radius: 6px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    overflow: hidden;
}
.ow-niv-fill {
    display: block; /* es un <span>: sin esto el width:X% inline se ignora (barra vacía) */
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--primary), rgba(var(--primary-rgb), 0.55));
    transition: width .5s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 0;
}
.ow-niv-pct {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--text-muted);
    min-width: 36px;
    text-align: right;
}

/* métrica a la derecha (xp / tickets / comandos / mensajes) */
.ow-niv-metric { flex: 0 0 auto; text-align: right; }
.ow-niv-metric-val { font-family: var(--font-mono); font-weight: 800; font-size: 0.9rem; color: var(--text-main); }
.ow-niv-metric-lbl { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 800; }

/* estado vacío */
.ow-niv-empty {
    padding: 36px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
    border: 1px dashed var(--border);
    border-radius: 13px;
}

/* skeleton de carga */
.ow-niv-skel {
    height: 60px;
    border-radius: 13px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.ow-niv-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    animation: ow-niv-shimmer 1.4s infinite;
}
[data-theme="light"] .ow-niv-skel::after { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent); }
@keyframes ow-niv-shimmer { 100% { transform: translateX(100%); } }

@media (max-width: 720px) {
    .ow-niv-tabs { width: 100%; }
    .ow-niv-tab { flex: 1 1 0; justify-content: center; }
    .ow-niv-metric { display: none; }
    .ow-niv-av { width: 34px; height: 34px; }
}
/* §5 NIVELES END */

/* ════════════════════════════════════════════════════════════════════
   LOGIN-POLISH (2026-06-01): pulido aditivo de la pantalla de acceso.
   Todo va al final → last-wins sobre los bloques previos sin tocarlos.
   ADITIVO · defensivo · backward-compat. No cambia handlers ni markup.
   ──────────────────────────────────────────────────────────────────── */

/* (1) AUTOFILL FIX — el navegador pinta los inputs autocompletados con un
   fondo AMARILLO (-webkit-autofill). Lo neutralizamos con un box-shadow
   inset opaco del color del tema + text-fill + transición eterna para que
   el fondo no vuelva a aparecer. Scopeado a los inputs del login/panel
   para no alterar inputs de terceros. Cubre dark y light vía var(--*). */
.login-screen input:-webkit-autofill,
.login-screen input:-webkit-autofill:hover,
.login-screen input:-webkit-autofill:focus,
.login-screen input:-webkit-autofill:active,
.login-screen textarea:-webkit-autofill,
.login-screen select:-webkit-autofill,
.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:hover,
.input-group input:-webkit-autofill:focus,
.input-group input:-webkit-autofill:active,
.input-group textarea:-webkit-autofill,
.input-group select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input, var(--bg-surface, #1a1f2e)) inset !important;
    box-shadow: 0 0 0 1000px var(--bg-input, var(--bg-surface, #1a1f2e)) inset !important;
    -webkit-text-fill-color: var(--text-main) !important;
    caret-color: var(--text-main);
    border-color: var(--border) !important;
    border-radius: 12px;
    transition: background-color 9999s ease-in-out 0s !important;
}
/* En focus mantenemos el aro del tema (el box-shadow inset de arriba ya
   tapa el amarillo; aquí re-aplicamos el borde primario y el glow). */
.login-screen .input-group input:-webkit-autofill:focus,
.input-group input:-webkit-autofill:focus {
    border-color: var(--primary) !important;
}
/* Light: el inset usa --bg-input (#e2e8f0). Para que el campo se vea
   blanco como el resto en claro, forzamos blanco en el inset. */
[data-theme="light"] .login-screen input:-webkit-autofill,
[data-theme="light"] .login-screen input:-webkit-autofill:hover,
[data-theme="light"] .login-screen input:-webkit-autofill:focus,
[data-theme="light"] .login-screen input:-webkit-autofill:active,
[data-theme="light"] .input-group input:-webkit-autofill,
[data-theme="light"] .input-group input:-webkit-autofill:hover,
[data-theme="light"] .input-group input:-webkit-autofill:focus,
[data-theme="light"] .input-group input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #0f172a !important;
    caret-color: #0f172a;
}

/* (2) SEGMENTED TABS — emparejar los 3 segmentos (iguales, sin wrap,
   estado activo claro). El problema: "Tengo una clave" partía en 2 líneas
   por falta de white-space:nowrap y padding/letras anchas. */
.login-screen .auth-tabs {
    gap: 5px;
    padding: 5px;
    border-radius: 14px;
    background: var(--bg-input, rgba(0, 0, 0, 0.28));
}
.login-screen .auth-tab {
    flex: 1 1 0;
    width: 0;                 /* fuerza reparto equitativo del ancho */
    min-width: 0;
    white-space: nowrap;      /* labels cortos (Acceso/Clave/Vincular) → nunca cortan */
    overflow: visible;
    padding: 13px 12px;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.86rem, 1.4vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0;
    border-radius: 10px;
    transition: background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}
.login-screen .auth-tab.active {
    background: var(--bg-surface-hover);
    color: var(--text-main);
    box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border);
    font-weight: 700;
}
[data-theme="light"] .login-screen .auth-tabs {
    background: #f1f5f9;
}
[data-theme="light"] .login-screen .auth-tab.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

/* (3) PULIDO GENERAL de la tarjeta y sus piezas. */
/* Inputs del login: usar el token --bg-input (coherente con el resto). */
.login-screen .input-group input,
.login-screen .input-group select {
    background: var(--bg-input, rgba(0, 0, 0, 0.22));
}
.login-screen .input-group input:hover,
.login-screen .input-group select:hover {
    border-color: var(--border-hover);
}
.login-screen .input-group input:focus,
.login-screen .input-group select:focus {
    background: var(--bg-input, rgba(0, 0, 0, 0.22));
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

/* CTA "Vincular con Discord": hover/active suaves coherentes con btn-primary. */
.login-screen .auth-discord-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(88, 101, 242, 0.45) !important;
    background: #4f5bda !important;
}
.login-screen .auth-discord-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 14px rgba(88, 101, 242, 0.35) !important;
}

/* Divisor "O ENTRA CON TU CUENTA WEB": un pelín más de aire y centrado. */
.login-screen .auth-divider {
    margin: 18px 0 6px !important;
}

/* Botón principal "Acceder al panel": pulido del foco accesible. */
.login-screen .btn-primary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Tarjeta: micro-pulido del aro/sombra para que matchee la estética pro. */
.login-screen .login-card {
    box-shadow: var(--shadow-lg), 0 0 48px rgba(88, 101, 242, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .login-screen .login-card {
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.10), 0 0 32px rgba(88, 101, 242, 0.08);
}
/* LOGIN-POLISH END */

/* ════════════════════════════════════════════════════════════════════
   LOGIN-POLISH v2 (2026-06-01): pestañas estilo iOS (pill flotante SIN
   recuadro) + fondo con profundidad/glow de marca (antes plano/apagado).
   Bloque last-wins; solo override de propiedades puntuales, scopeado a
   .login-screen. No toca markup ni handlers.
   ════════════════════════════════════════════════════════════════════ */

/* (A) FONDO del login con profundidad + glow de marca One Way. */
.login-screen {
    background:
        radial-gradient(90% 58% at 50% -8%, rgba(88, 101, 242, 0.18), transparent 60%),
        radial-gradient(68% 48% at 100% 100%, rgba(139, 92, 246, 0.13), transparent 55%),
        var(--bg-base, #0a0e17);
}
[data-theme="light"] .login-screen {
    background:
        radial-gradient(60% 45% at 92% 100%, rgba(88, 101, 242, 0.10), transparent 60%),
        radial-gradient(95% 70% at 50% -12%, #ffffff 0%, #eef2fb 44%, #e3e8f4 100%);
}
/* Tarjeta: más contraste/elevación contra el fondo (que destaque, no se funda). */
[data-theme="light"] .login-screen .login-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14), 0 0 40px rgba(88, 101, 242, 0.07);
}

/* (B) SEGMENTED CONTROL: pill flotante, SIN borde/recuadro duro. */
.login-screen .auth-tabs {
    background: var(--bg-input, rgba(0, 0, 0, 0.30));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.login-screen .auth-tab { color: var(--text-muted); font-weight: 600; }
.login-screen .auth-tab:hover:not(.active) {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}
.login-screen .auth-tab.active {
    background: var(--bg-surface);
    color: var(--text-main);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);   /* pill suave, sin inset border */
    font-weight: 700;
}
[data-theme="light"] .login-screen .auth-tabs {
    background: #eceff5;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}
[data-theme="light"] .login-screen .auth-tab { color: #64748b; }
[data-theme="light"] .login-screen .auth-tab:hover:not(.active) {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.04);
}
[data-theme="light"] .login-screen .auth-tab.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14), 0 1px 2px rgba(15, 23, 42, 0.08);
}
/* LOGIN-POLISH v2 END */

/* ════════════════════════════════════════════════════════════════════
   LOGIN-POLISH v3 (2026-06-01): separar las pestañas de forma EVIDENTE.
   Antes parecían texto corrido; ahora son 3 CELDAS distintas (cada una
   con su borde/fondo + separación), la activa con tinte y anillo azul.
   Last-wins, scopeado a .login-screen.
   ════════════════════════════════════════════════════════════════════ */
.login-screen .auth-tabs {
    background: transparent;     /* fuera el track que las unía */
    box-shadow: none;
    gap: 8px;
    padding: 0;
}
.login-screen .auth-tab {
    flex: 1 1 0;
    padding: 11px 4px;
    font-size: clamp(0.74rem, 1.6vw, 0.84rem);
    background: var(--bg-input, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-muted);
    box-shadow: none;
}
.login-screen .auth-tab:hover:not(.active) {
    background: var(--bg-surface-hover);
    border-color: var(--border-hover);
    color: var(--text-main);
}
.login-screen .auth-tab.active {
    background: rgba(88, 101, 242, 0.16);
    border-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 0 0 1px var(--primary), 0 6px 16px rgba(88, 101, 242, 0.22);
    font-weight: 700;
}
[data-theme="light"] .login-screen .auth-tab {
    background: #f1f4fa;
    border: 1px solid rgba(15, 23, 42, 0.10);
    color: #64748b;
}
[data-theme="light"] .login-screen .auth-tab:hover:not(.active) {
    background: #e9edf6;
    border-color: rgba(15, 23, 42, 0.18);
    color: #0f172a;
}
[data-theme="light"] .login-screen .auth-tab.active {
    background: #e7ecfe;
    border-color: var(--primary);
    color: #1e3a8a;
    box-shadow: 0 0 0 1px var(--primary), 0 6px 16px rgba(88, 101, 242, 0.18);
}
/* LOGIN-POLISH v3 END */

/* ════════════════════════════════════════════════════════════════════
   LOGIN-POLISH v4 (2026-06-01): autofill OPACO + cross-browser (Firefox/Zen
   usa :autofill, no :-webkit-autofill → por eso seguía olivo en oscuro),
   borde de tab activo más suave (sin doble línea dura) y fade al cambiar de
   pestaña (antes saltaba brusco). Cada pseudo en SU regla (un pseudo
   desconocido no invalida a los demás). Last-wins, scopeado a .login-screen.
   ════════════════════════════════════════════════════════════════════ */

/* (1a) Estándar :autofill — Firefox / Zen. Oscuro: opaco. */
.login-screen input:autofill {
    box-shadow: 0 0 0 1000px #161b27 inset !important;
    -webkit-text-fill-color: var(--text-main, #f1f5f9) !important;
    caret-color: var(--text-main, #f1f5f9);
    -webkit-background-clip: text;
}
[data-theme="light"] .login-screen input:autofill {
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #0f172a !important;
    caret-color: #0f172a;
}
/* (1b) WebKit/Chrome :-webkit-autofill — color OPACO (antes var(--bg-input) translúcido → olivo). */
.login-screen input:-webkit-autofill,
.login-screen input:-webkit-autofill:hover,
.login-screen input:-webkit-autofill:focus,
.login-screen input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #161b27 inset !important;
    -webkit-text-fill-color: var(--text-main, #f1f5f9) !important;
    caret-color: var(--text-main, #f1f5f9);
}
[data-theme="light"] .login-screen input:-webkit-autofill,
[data-theme="light"] .login-screen input:-webkit-autofill:hover,
[data-theme="light"] .login-screen input:-webkit-autofill:focus,
[data-theme="light"] .login-screen input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #0f172a !important;
}

/* (2) Borde de la pestaña activa más suave + transición de borde incluida. */
.login-screen .auth-tab {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.16s ease;
}
.login-screen .auth-tab.active {
    border-color: rgba(88, 101, 242, 0.85);
    box-shadow: 0 4px 14px rgba(88, 101, 242, 0.18);   /* glow suave, sin ring 1px duro */
}
[data-theme="light"] .login-screen .auth-tab.active {
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(88, 101, 242, 0.15);
}
.login-screen .auth-tab:active { transform: scale(0.97); }

/* (3) Cambio de pestaña: el formulario entra con fade suave (antes saltaba). */
@keyframes authFormIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
#login-form, #key-form, #register-form {
    animation: authFormIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* LOGIN-POLISH v4 END */

/* ════════════════════════════════════════════════════════════════════
   LOGIN-POLISH v5 (2026-06-01): en OSCURO los bordes de las celdas se veían
   como líneas "blancas" raras. Separamos por RELLENO (no por borde): borde
   transparente en inactivas, fill sutil; activa con tinte azul + borde azul
   suave. Inputs con borde sutil (sin blanco duro). Last-wins.
   ════════════════════════════════════════════════════════════════════ */
.login-screen .auth-tab {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.05);
}
.login-screen .auth-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.09);
    border-color: transparent;
}
.login-screen .auth-tab.active {
    background: rgba(88, 101, 242, 0.16);
    border-color: rgba(88, 101, 242, 0.55);
    box-shadow: 0 4px 14px rgba(88, 101, 242, 0.18);
}
.login-screen .input-group input,
.login-screen .input-group select {
    border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="light"] .login-screen .auth-tab {
    border-color: rgba(15, 23, 42, 0.08);
    background: #f1f4fa;
}
[data-theme="light"] .login-screen .auth-tab:hover:not(.active) {
    background: #e9edf6;
    border-color: rgba(15, 23, 42, 0.14);
}
[data-theme="light"] .login-screen .auth-tab.active {
    border-color: var(--primary);
    background: #e7ecfe;
}
[data-theme="light"] .login-screen .input-group input,
[data-theme="light"] .login-screen .input-group select {
    border-color: rgba(15, 23, 42, 0.12);
}
/* LOGIN-POLISH v5 END */

/* ════════════════════════════════════════════════════════════════════
   LOGIN-POLISH v6 (2026-06-01): la tarjeta se CORTABA arriba en pantallas
   bajas. justify-content:center en un contenedor con overflow recorta el
   inicio al desbordar (no se puede scrollear hacia arriba). Fix canónico:
   alinear al inicio + centrar con márgenes auto → centra cuando entra,
   scrollea desde arriba cuando la tarjeta es más alta que el viewport.
   ════════════════════════════════════════════════════════════════════ */
.login-screen {
    justify-content: flex-start;
}
.login-card {
    margin-top: auto;
    margin-bottom: auto;
}
/* En alturas muy chicas, sin márgenes auto (que pegue arriba y scrollee). */
@media (max-height: 740px) {
    .login-card { margin-top: 0; margin-bottom: 24px; }
}
/* LOGIN-POLISH v6 END */

/* ════════════════════════════════════════════════════════════════════
   LOGIN-POLISH v7 (2026-06-01) — DEFINITIVO. Reemplaza visualmente los
   intentos previos (last-wins): segmented control estilo iOS = track sutil
   + pill ACTIVA elevada NEUTRA (sin azul, sin bordes por celda → adiós
   "bordes raros"). Inputs con borde sutil acorde al tema. Más aire arriba.
   ════════════════════════════════════════════════════════════════════ */
/* Track */
.login-screen .auth-tabs {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    gap: 4px;
    padding: 5px;
    border-radius: 14px;
}
/* Celdas: SIN borde, sin fill propio, texto apagado */
.login-screen .auth-tab {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-muted, #94a3b8);
    border-radius: 10px;
    font-weight: 600;
}
.login-screen .auth-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main, #f1f5f9);
}
/* Activa: pill elevada NEUTRA (sin azul, sin borde) */
.login-screen .auth-tab.active {
    background: rgba(255, 255, 255, 0.13);
    color: var(--text-main, #f1f5f9);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    font-weight: 800;
}
/* Inputs: borde sutil (no blanco duro) */
.login-screen .input-group input,
.login-screen .input-group select {
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.login-screen .input-group input:focus,
.login-screen .input-group select:focus {
    border-color: var(--primary, #5b8cff);
    box-shadow: 0 0 0 3px var(--primary-glow, rgba(88, 101, 242, 0.20));
}
/* Light mode */
[data-theme="light"] .login-screen .auth-tabs {
    background: #eceff5;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}
[data-theme="light"] .login-screen .auth-tab { color: #64748b; }
[data-theme="light"] .login-screen .auth-tab:hover:not(.active) {
    background: rgba(15, 23, 42, 0.04);
    color: #0f172a;
}
[data-theme="light"] .login-screen .auth-tab.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}
[data-theme="light"] .login-screen .input-group input,
[data-theme="light"] .login-screen .input-group select {
    border-color: rgba(15, 23, 42, 0.12);
}
/* Más aire arriba: el logo nunca pegado al navbar */
.login-screen { padding-top: clamp(28px, 6vmin, 64px); }
/* LOGIN-POLISH v7 END */

/* ════════════════════════════════════════════════════════════════════
   LIGHT-MODE-FIXES 2026-06-11 — superficies oscuras hardcodeadas que en
   modo claro quedaban muddy o con texto invisible (auditoría multi-agente).
   Todo additivo + !important: no afecta al modo oscuro. Foco: Tickets.
   ════════════════════════════════════════════════════════════════════ */

/* (1) ALTO — burbuja de mensaje ENTRANTE del chat de tickets: era
   rgba(255,255,255,0.06) (blanco translúcido) sobre stream #f8fafc =
   blanco-sobre-blanco, la caja del mensaje desaparecía. */
[data-theme="light"] .wa-msg-left .wa-bubble {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,0.08) !important;
    box-shadow: 0 2px 8px rgba(15,23,42,0.06) !important;
    color: #0f172a !important;
}

/* (2) MEDIO — embed dentro de un mensaje de ticket: era rgba(0,0,0,0.2)
   = caja gris-sucia sobre la burbuja clara. */
[data-theme="light"] .wa-embed {
    background: rgba(15,23,42,0.04) !important;
}

/* (3) MEDIO — header del panel central del chat de tickets: inline
   rgba(0,0,0,0.2) = franja gris muddy sobre la tarjeta blanca. */
[data-theme="light"] #tk-chat-header {
    background: rgba(241,245,251,0.6) !important;
    border-bottom: 1px solid rgba(15,23,42,0.06) !important;
}

/* (4) ALTO — cabecera de identidad del usuario en el Control Center de
   tickets (panel derecho). El nombre iba color:#fff = invisible sobre el
   panel blanco; el degradado terminaba en rgba(0,0,0,0.2) = muddy; el
   ID-pill rgba(255,255,255,0.08) = imperceptible. */
[data-theme="light"] #tk-quick-panel > div:first-child {
    background: linear-gradient(180deg, rgba(88,101,242,0.10) 0%, rgba(88,101,242,0.02) 100%) !important;
    border: 1px solid rgba(88,101,242,0.20) !important;
}
[data-theme="light"] #tk-quick-panel > div:first-child > div[style*="color:#fff"] {
    color: #0f172a !important;
}
[data-theme="light"] #tk-quick-panel > div:first-child span[style*="rgba(255,255,255,0.08)"] {
    background: rgba(15,23,42,0.06) !important;
    color: #475569 !important;
}

/* (5) MEDIO — panel "Avanzado" interno de cada categoría de tickets
   (tab Config): inline rgba(0,0,0,0.28) = rectángulo gris medio muddy. */
[data-theme="light"] .tk-cat-card > div[style*="rgba(0,0,0,0.28)"] {
    background: rgba(15,23,42,0.04) !important;
    border-color: rgba(15,23,42,0.08) !important;
}
[data-theme="light"] .tk-cat-card:hover > div[style*="rgba(0,0,0,0.28)"] {
    background: rgba(15,23,42,0.05) !important;
}

/* (6) BAJO — helper emptyState: el fondo ya conmutaba (LIGHT-V2 cubre
   rgba(0,0,0,0.18)), pero el borde dashed blanco al 0.08 quedaba sin
   override (las reglas previas solo cubrían 0.06) → caja sin contorno. */
[data-theme="light"] [style*="border:2px dashed rgba(255,255,255,0.08)"],
[data-theme="light"] [style*="border: 2px dashed rgba(255,255,255,0.08)"] {
    border-color: rgba(15,23,42,0.12) !important;
}
/* LIGHT-MODE-FIXES 2026-06-11 END */

/* ════════════════════════════════════════════════════════════════════
   LOGIN ANIM v1 (2026-06-12): todo SMOOTH — entrada escalonada del
   contenido, transición suave al cambiar de pestaña (el form aparece con
   fade+slide en vez de aparecer de golpe), hovers suaves. reduce-motion OK.
   ════════════════════════════════════════════════════════════════════ */
@keyframes lgFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lgFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Entrada escalonada del panel de marca */
.login-brandside .login-logo-wrap { animation: lgFadeUp .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: .08s; }
.login-bs-title   { animation: lgFadeUp .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: .14s; }
.login-bs-tagline { animation: lgFadeUp .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: .20s; }
.login-bs-features li { animation: lgFadeUp .55s cubic-bezier(.2,.8,.2,1) both; }
.login-bs-features li:nth-child(1) { animation-delay: .26s; }
.login-bs-features li:nth-child(2) { animation-delay: .33s; }
.login-bs-features li:nth-child(3) { animation-delay: .40s; }
.login-bs-foot { animation: lgFadeIn .7s ease both; animation-delay: .46s; }

/* Entrada escalonada del panel de auth */
.login-cardhead { animation: lgFadeUp .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: .16s; }
.login-card .auth-tabs { animation: lgFadeUp .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: .24s; }

/* Cambio de pestaña: el form aparece con fade+slide (no de golpe) */
.auth-form { animation: lgFadeUp .3s cubic-bezier(.2,.8,.2,1) both; }
#auth-discord-cta { animation: lgFadeUp .3s cubic-bezier(.2,.8,.2,1) both; }

/* Tabs: transición e hover suaves */
.login-screen .auth-tab { transition: color .2s ease, background .25s ease, box-shadow .25s ease, transform .15s ease; }
.login-screen .auth-tab:hover:not(.active) { transform: translateY(-1px); }

/* Features: hover suave + lift del icono */
.login-bs-features li { transition: transform .2s ease; }
.login-bs-features li:hover { transform: translateX(3px); }
.login-bs-ic { transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.login-bs-features li:hover .login-bs-ic { transform: scale(1.08) rotate(-3deg); box-shadow: 0 8px 20px -8px rgba(88,101,242,0.6); }

/* Inputs: focus suave */
.login-screen .input-group input,
.login-screen .input-group select { transition: border-color .2s ease, box-shadow .25s ease, background .2s ease; }

/* Botones: hover suave */
.auth-discord-btn { transition: transform .16s ease, box-shadow .22s ease, filter .2s ease !important; }
.auth-discord-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 26px -8px rgba(88,101,242,0.55) !important; }
.login-screen .btn-primary { transition: transform .16s ease, box-shadow .22s ease, filter .2s ease !important; }

/* Logo: el aro de gradiente respira suave */
.login-logo-ring { transition: filter .3s ease; }
.login-logo-wrap:hover .login-logo-ring { filter: brightness(1.12); }

@media (prefers-reduced-motion: reduce) {
  .login-brandside *, .login-cardhead, .login-card .auth-tabs, .auth-form, #auth-discord-cta { animation: none !important; }
  .login-logo-glow { animation: none !important; }
}
/* LOGIN ANIM v1 END */

/* ════════════════════════════════════════════════════════════════════
   LOGIN BORDERS v4 (2026-06-12): CERO líneas blancas en oscuro. El card se
   define por fondo glass + sombra (no por bordes claros). El divisor pasa a
   una sombra oscura sutil (recede). Inputs/tabs con borde casi negro.
   ════════════════════════════════════════════════════════════════════ */
.login-stage { border: 0 !important; }
.login-stage::before { display: none !important; }
/* divisor entre paneles: groove oscuro sutil, no línea clara */
.login-brandside { border-right: 0 !important; box-shadow: inset -1px 0 0 rgba(0,0,0,0.28); }
@media (max-width: 760px) {
    .login-brandside { box-shadow: inset 0 -1px 0 rgba(0,0,0,0.28); }
}
/* inputs / tabs: borde casi imperceptible en oscuro, definidos por su relleno */
.login-screen .input-group input,
.login-screen .input-group select {
    border: 1px solid rgba(255,255,255,0.045) !important;
    background: rgba(0,0,0,0.28) !important;
}
.login-screen .input-group input:focus,
.login-screen .input-group select:focus {
    border-color: rgba(88,101,242,0.7) !important;
    background: rgba(0,0,0,0.36) !important;
}
.login-screen .auth-tabs { border-color: rgba(255,255,255,0.045) !important; background: rgba(0,0,0,0.22) !important; }

/* ── Modo claro: bordes oscuros sutiles (no afecta el problema de oscuro) ── */
[data-theme="light"] .login-stage { border: 1px solid rgba(15,23,42,0.08) !important; }
[data-theme="light"] .login-brandside { box-shadow: inset -1px 0 0 rgba(15,23,42,0.06); }
[data-theme="light"] .login-screen .input-group input,
[data-theme="light"] .login-screen .input-group select {
    border-color: rgba(15,23,42,0.12) !important; background: #ffffff !important;
}
[data-theme="light"] .login-screen .auth-tabs { border-color: rgba(15,23,42,0.10) !important; background: rgba(15,23,42,0.03) !important; }
/* LOGIN BORDERS v4 END */

/* ════════════════════════════════════════════════════════════════════
   GUÍA 2026-06-12 — manual interactivo (sección "Guía" del dashboard).
   Mobile-first, claro/oscuro, tarjetas expandibles.
   ════════════════════════════════════════════════════════════════════ */
.gd-shell { display: flex; flex-direction: column; gap: 18px; padding: 2px 0 28px; font-family: 'Geist','Inter',system-ui,sans-serif; }
.gd-loading { padding: 48px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
.gd-hero { display: flex; gap: 16px; align-items: center; padding: 20px 22px; border-radius: 16px;
    background: linear-gradient(135deg, rgba(88,101,242,0.12), rgba(111,224,255,0.04)); border: 1px solid rgba(88,101,242,0.18); }
.gd-hero-ic { font-size: 2.1rem; line-height: 1; }
.gd-hero-title { margin: 0 0 4px; font-size: 1.25rem; font-weight: 800; color: var(--text-main); letter-spacing: -0.01em; }
.gd-hero-sub { margin: 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }
.gd-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; position: sticky; top: 0; z-index: 5;
    padding: 10px 0; background: linear-gradient(180deg, var(--bg-base, #0a0e17) 75%, transparent); }
.gd-search { flex: 1 1 260px; min-width: 0; padding: 11px 15px; border-radius: 12px; font-size: 0.9rem;
    background: var(--bg-input, rgba(0,0,0,0.28)); border: 1px solid var(--border); color: var(--text-main);
    outline: none; transition: border-color .15s ease, box-shadow .15s ease; font-family: inherit; }
.gd-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(88,101,242,0.18); }
.gd-tiers { display: flex; gap: 6px; flex-wrap: wrap; }
.gd-tier-btn { padding: 9px 13px; border-radius: 10px; font-size: 0.78rem; font-weight: 700; cursor: pointer;
    background: var(--bg-surface, rgba(255,255,255,0.03)); border: 1px solid var(--border); color: var(--text-muted);
    transition: all .15s ease; font-family: inherit; }
.gd-tier-btn b { font-weight: 800; opacity: 0.65; margin-left: 2px; }
.gd-tier-btn:hover { color: var(--text-main); border-color: var(--border-hover); }
.gd-tier-btn.active { background: rgba(88,101,242,0.16); border-color: rgba(88,101,242,0.45); color: var(--text-main); }
.gd-cat { margin-top: 6px; }
.gd-cat-head { display: flex; gap: 9px; align-items: center; margin: 14px 2px 10px; }
.gd-cat-ic { font-size: 1.1rem; }
.gd-cat-title { margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--text-main); }
.gd-cat-count { font-size: 0.68rem; font-weight: 800; color: var(--text-muted); background: var(--bg-input); padding: 2px 8px; border-radius: 7px; }
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.gd-card { padding: 13px 15px; border-radius: 14px; cursor: pointer; min-width: 0;
    background: var(--bg-surface, rgba(255,255,255,0.03)); border: 1px solid var(--border);
    transition: border-color .15s ease, transform .15s ease, box-shadow .2s ease; }
.gd-card:hover { border-color: rgba(88,101,242,0.4); transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(0,0,0,0.4); }
.gd-card-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gd-card-title { font-weight: 800; font-size: 0.92rem; color: var(--text-main); font-family: var(--font-mono); }
.gd-card[id*='-dashboard'] .gd-card-title { font-family: inherit; }
.gd-tier { font-size: 0.6rem; font-weight: 800; padding: 2px 7px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.gd-tier--leader { background: rgba(250,204,21,0.14); color: #fbbf24; }
.gd-tier--staff { background: rgba(88,101,242,0.16); color: #8da2ff; }
.gd-tier--user { background: rgba(148,163,184,0.14); color: var(--text-muted); }
.gd-prem { font-size: 0.6rem; font-weight: 800; padding: 2px 7px; border-radius: 6px; background: rgba(250,204,21,0.12); color: #fbbf24; }
.gd-caret { margin-left: auto; font-size: 0.72rem; color: var(--text-muted); transition: transform .2s ease; }
.gd-card.gd-open .gd-caret { transform: rotate(180deg); }
.gd-card-desc { margin-top: 7px; font-size: 0.79rem; color: var(--text-muted); line-height: 1.5; }
.gd-card-body { display: none; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border); flex-direction: column; gap: 10px; }
.gd-card.gd-open .gd-card-body { display: flex; animation: gdIn .22s ease; }
@keyframes gdIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.gd-row { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gd-k { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 800; }
.gd-syntax, .gd-ex { display: block; padding: 7px 10px; border-radius: 8px; font-size: 0.74rem; font-family: var(--font-mono);
    background: var(--bg-input, rgba(0,0,0,0.28)); border: 1px solid var(--border); color: var(--text-main);
    white-space: pre-wrap; word-break: break-word; }
.gd-examples { display: flex; flex-direction: column; gap: 5px; }
.gd-ex { color: var(--text-muted); }
.gd-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.gd-chip { font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 7px; background: var(--bg-input); color: var(--text-muted); font-family: var(--font-mono); }
.gd-chip--rel { background: rgba(88,101,242,0.1); color: #8da2ff; }
.gd-empty { padding: 34px 18px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 14px; font-size: 0.86rem; }
/* claro */
[data-theme="light"] .gd-hero { background: linear-gradient(135deg, rgba(88,101,242,0.08), rgba(88,101,242,0.02)); border-color: rgba(88,101,242,0.16); }
[data-theme="light"] .gd-controls { background: linear-gradient(180deg, var(--bg-base, #f6f8fc) 75%, transparent); }
[data-theme="light"] .gd-search { background: #ffffff; border-color: rgba(15,23,42,0.12); }
[data-theme="light"] .gd-card { background: #ffffff; border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .gd-syntax, [data-theme="light"] .gd-ex, [data-theme="light"] .gd-chip, [data-theme="light"] .gd-cat-count { background: #f1f5f9; border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .gd-tier--leader { color: #92600a; }
[data-theme="light"] .gd-tier--staff { color: #4250c8; }
[data-theme="light"] .gd-chip--rel { color: #4250c8; }
[data-theme="light"] .gd-prem { color: #92600a; }
/* móvil */
@media (max-width: 640px) {
    .gd-grid { grid-template-columns: 1fr; }
    .gd-hero { padding: 16px; gap: 12px; }
    .gd-hero-title { font-size: 1.05rem; }
    .gd-controls { position: static; }
    .gd-search { flex-basis: 100%; }
}
/* GUÍA END */

/* ════════════════════════════════════════════════════════════════════
   SPINNERS-OFF 2026-06-12 — matar los steppers nativos del browser en
   TODOS los input[type=number] del dashboard (se veían feos en oscuro).
   El Setup les agrega steppers propios − / + (su-stepper).
   ════════════════════════════════════════════════════════════════════ */
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; appearance: textfield; }

/* ════════════════════════════════════════════════════════════════════
   SOCIAL-LAYOUT 2026-06-12 — Social & Comunidad full-bleed (aprovechar el
   espacio) + navbar con busqueda + mensajes propios + acciones.
   ════════════════════════════════════════════════════════════════════ */
.main-content.chat-mode { padding: 0 14px 12px !important; max-width: none !important; }
.main-content.chat-mode .content-header { padding: 12px 22px 6px !important; margin-bottom: 8px !important; }
.main-content.chat-mode .content-body { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; max-width: none !important; }
.main-content.chat-mode .chat-layout-v2 { flex: 1 1 auto; height: auto !important; max-height: none !important; min-height: 0; }
.chat-navbar { display: flex; align-items: center; gap: 12px; }
.chat-navbar #chat-search-count { white-space: nowrap; }
.msg-v2.msg-v2-own { background: rgba(88,101,242,0.06); border-left: 2px solid var(--primary); }
.msg-v2-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .12s ease; }
.msg-v2:hover .msg-v2-actions { opacity: 1; }
.msg-v2-actions button { background: none; border: none; cursor: pointer; font-size: 0.95rem; padding: 2px 4px; border-radius: 7px; line-height: 1; }
.msg-v2-actions button:hover { background: var(--bg-input); }
@media (max-width: 768px) {
    .main-content.chat-mode { padding: 64px 6px 8px !important; }
    .chat-navbar #chat-search { width: 130px; }
}


/* ════════════════════════════════════════════════════════════════
   LIGHT-MODE BLUE-LEGIBILITY FIXES (móvil) — 2026-06-18
   Botones/pills/chips azules cuyo texto era azul-claro (#A5B4FC /
   #A9B4FF) sobre fondo azul-claro = ilegibles en modo claro.
   Verificado: .pro-chip.primary YA está cubierto (style.css:6492),
   .am-pill / .ar2-pill ya arreglados. Esto cubre el resto.
   ──────────────────────────────────────────────────────────────── */

/* 1) Botón base .sx-btn — azul activo → texto blanco.
   app.js:22006 base: color #A5B4FC sobre rgba(91,140,255,.10-.18).
   Solo .sx-btn.ghost tenía override (style.css:8019). */
[data-theme="light"] .sx-btn {
    background: linear-gradient(135deg, #5865F2, #4f46e5) !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(88, 101, 242, 0.20) !important;
}
[data-theme="light"] .sx-btn:hover {
    background: linear-gradient(135deg, #4f46e5, #4338ca) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(88, 101, 242, 0.28) !important;
}
/* re-respetar variantes danger/warn como sólidas legibles */
[data-theme="light"] .sx-btn.danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.22) !important;
}
[data-theme="light"] .sx-btn.danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: #ffffff !important;
}
[data-theme="light"] .sx-btn.warn {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.22) !important;
}
[data-theme="light"] .sx-btn.warn:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: #ffffff !important;
}
/* .sx-btn.ghost ya tiene override (8019/8024); lo reafirmamos para
   que el nuevo .sx-btn sólido no lo pise por orden de cascada */
[data-theme="light"] .sx-btn.ghost {
    background: transparent !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #475569 !important;
    box-shadow: none !important;
}
[data-theme="light"] .sx-btn.ghost:hover {
    background: rgba(15, 23, 42, 0.04) !important;
    color: #0f172a !important;
    box-shadow: none !important;
}

/* 2) Chips de filtro activos .sx-chip.active (+ sev) — app.js:22033-36.
   En claro conservaban color lavanda/verde/ámbar/rojo claros sobre
   .sx-filters casi blanco. Inactivo ya cubierto (style.css:8040). */
[data-theme="light"] .sx-chip.active {
    background: rgba(88, 101, 242, 0.12) !important;
    border: 1px solid rgba(88, 101, 242, 0.40) !important;
    color: #4338ca !important;
}
[data-theme="light"] .sx-chip.sev-low.active {
    background: rgba(16, 185, 129, 0.14) !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    color: #047857 !important;
}
[data-theme="light"] .sx-chip.sev-med.active {
    background: rgba(245, 158, 11, 0.16) !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
    color: #b45309 !important;
}
[data-theme="light"] .sx-chip.sev-high.active {
    background: rgba(239, 68, 68, 0.14) !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
    color: #b91c1c !important;
}

/* 3) Pill de evidencia .sx-evid-pill — app.js:22090.
   color #A5B4FC sobre rgba(91,140,255,.08), texto 11px, sin override. */
[data-theme="light"] .sx-evid-pill {
    background: rgba(88, 101, 242, 0.10) !important;
    border: 1px solid rgba(88, 101, 242, 0.25) !important;
    color: #4338ca !important;
}
[data-theme="light"] .sx-evid-pill:hover {
    background: rgba(88, 101, 242, 0.16) !important;
}

/* 4) Chips del generador de roles .gr-chip — app.js:5337.
   color #A9B4FF sobre rgba(88,101,242,.1), sin override claro. */
[data-theme="light"] .gr-chip {
    background: rgba(88, 101, 242, 0.10) !important;
    border: 1px solid rgba(88, 101, 242, 0.30) !important;
    color: #3730a3 !important;
}
[data-theme="light"] .gr-chip:hover {
    background: rgba(88, 101, 242, 0.18) !important;
    border-color: rgba(88, 101, 242, 0.50) !important;
    color: #312e81 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   LIGHT-MODE BLUE-LEGIBILITY — CONSOLIDADO FINAL (2026-06-18)
   ────────────────────────────────────────────────────────────────────────
   CAUSA RAIZ: en modo claro dashboard-skin.css:30 fuerza --primary:#5B8CFF
   (azul CLARO rgb 91,140,255). Texto blanco sobre ese azul = ~2.3:1 = ilegible.
   Los parches previos usaron #5865F2 (3.9:1) o #2563EB (3.7:1) = SIGUEN bajo
   WCAG AA (4.5:1). Este bloque baja TODOS los estados activos/primarios a
   azul OSCURO #3730a3 (8.6:1) / #4338ca (7.9:1) con #fff, con !important para
   vencer las reglas base var(--primary) y los estilos inline.
   Todo bajo [data-theme="light"] => NO toca modo oscuro.
   Appendear al FINAL de style.css (gana por orden de cascada).
   ════════════════════════════════════════════════════════════════════════ */

/* ──────────────── 1. PILLS / TOGGLES ACTIVOS (AutoMod, Anti-Raid v2) ──────────────── */
[data-theme="light"] .am-pill.active {
    background: #3730a3 !important;
    color: #ffffff !important;
    border-color: #3730a3 !important;
}
[data-theme="light"] .ar2-pill.active {
    background: #3730a3 !important;
    color: #ffffff !important;
    border-color: #3730a3 !important;
}
/* el selector Local/Global (estilo INLINE en app.js:8076-8077) */
[data-theme="light"] .ow-pill-opt.is-active {
    background: linear-gradient(135deg, #3730a3, #4338ca) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px -4px rgba(55,48,163,0.5),
                inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
[data-theme="light"] .ow-pill-opt:not(.is-active) {
    color: #475569 !important;
}

/* ──────────────── 2. TABS ACTIVAS (iOS, pro, OW) ──────────────── */
[data-theme="light"] .apple-tab.active {
    background: #3730a3 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(55,48,163,0.30) !important;
}
[data-theme="light"] .pro-tab.active {
    background: linear-gradient(135deg, #4338ca, #3730a3) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(55,48,163,0.30) !important;
}
/* tab OW: texto azul sobre fondo claro -> azul oscuro para AA */
[data-theme="light"] .ow-tab.active {
    color: #3730a3 !important;
    border-bottom-color: #3730a3 !important;
}

/* ──────────────── 3. FILTROS / CHIPS ACTIVOS (Red de Clanes, top-right) ──────────────── */
[data-theme="light"] .pro-filter-chip.active {
    background: linear-gradient(135deg, #4338ca, #3730a3) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(55,48,163,0.30) !important;
}

/* ──────────────── 4. BOTONES PRIMARIOS (globales + por sección) ──────────────── */
[data-theme="light"] button.btn-primary,
[data-theme="light"] .btn-primary {
    background: linear-gradient(180deg, #4338ca 0%, #3730a3 100%) !important;
    background-image: linear-gradient(180deg, #4338ca 0%, #3730a3 100%) !important;
    background-color: #3730a3 !important;
    color: #ffffff !important;
}
[data-theme="light"] button.btn-primary:hover,
[data-theme="light"] .btn-primary:hover {
    background: linear-gradient(180deg, #3730a3 0%, #312e81 100%) !important;
    background-image: linear-gradient(180deg, #3730a3 0%, #312e81 100%) !important;
    color: #ffffff !important;
}
[data-theme="light"] .ow-btn-primary {
    background: #4338ca !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
[data-theme="light"] .ow-btn-primary:hover {
    background: #3730a3 !important;
}
[data-theme="light"] .pf-btn-primary {
    background: #4338ca !important;
    border-color: #4338ca !important;
    color: #ffffff !important;
}
[data-theme="light"] .su-btn-primary {
    background: linear-gradient(135deg, #4338ca, #3730a3) !important;
    color: #ffffff !important;
}
[data-theme="light"] .tn-btn-primary {
    background: linear-gradient(135deg, #4338ca, #0e7490) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px -8px rgba(67,56,202,0.40) !important;
}

/* ──────────────── 5. BOTONES AGREGAR / GUARDAR / ENVIAR ──────────────── */
[data-theme="light"] .ow-add-btn {
    background: #4338ca !important;
    color: #ffffff !important;
}
[data-theme="light"] .ow-add-btn:hover {
    background: #3730a3 !important;
}
[data-theme="light"] .ow-save-btn {
    background: linear-gradient(135deg, #4338ca, #6d28d9) !important;
    color: #ffffff !important;
}
[data-theme="light"] .chat-btn-send {
    background: linear-gradient(135deg, #4338ca, #3730a3) !important;
    background-image: linear-gradient(135deg, #4338ca, #3730a3) !important;
    color: #ffffff !important;
}
[data-theme="light"] .btn-send-v2 {
    background: #4338ca !important;
    color: #ffffff !important;
}

/* ──────────────── 6. CHAT DE TICKETS — burbuja saliente ──────────────── */
[data-theme="light"] .wa-msg-right .wa-bubble {
    background: #4338ca !important;
    color: #ffffff !important;
}

/* ──────────────── 7. MENCIONES DISCORD (hover) ──────────────── */
[data-theme="light"] .discord-mention:hover {
    background: #4338ca !important;
    color: #ffffff !important;
}

/* ──────────────── 8. BADGES ──────────────── */
[data-theme="light"] .banner-admin-badge {
    background: #3730a3 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}
/* Badge "VS" de torneos (gradiente #5b8cff literal) */
[data-theme="light"] .tn-arena-vs-badge {
    background: linear-gradient(135deg, #4338ca, #be185d) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(67,56,202,0.30) !important;
}
/* Badge "HUB" inline (app.js:2487, sin clase) — caza por atributo style.
   RECOMENDADO: añadir class="hub-badge" al span y usar .hub-badge abajo. */
[data-theme="light"] .hub-badge,
[data-theme="light"] .guild-item span[style*="var(--primary)"],
[data-theme="light"] span[style*="background:var(--primary)"][style*="color:#fff"],
[data-theme="light"] span[style*="background: var(--primary)"][style*="color:#fff"] {
    background: #3730a3 !important;
    color: #ffffff !important;
}

/* ──────────────── 9. CENTRO DE EMERGENCIA (estilos inline) ──────────────── */
[data-theme="light"] #owem-pulse {
    background: linear-gradient(135deg, #4338ca, #3730a3) !important;
    color: #ffffff !important;
}
[data-theme="light"] #owem-restart {
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    color: #ffffff !important;
}
[data-theme="light"] #owem-emerchip {
    background: rgba(220,38,38,0.12) !important;
    color: #b91c1c !important;
}

/* ──────────────── 10. SCROLLBAR AZUL DEL BORDE DERECHO (Dimensión C) ──────────────── */
/* Firefox (scrollbar-color: var(--primary) => azul claro) */
[data-theme="light"] .main-content {
    scrollbar-color: rgba(15, 23, 42, 0.22) transparent !important;
}
[data-theme="light"] .chat-messages-v3 {
    scrollbar-color: rgba(15, 23, 42, 0.22) transparent !important;
}
/* WebKit thumb del contenido (repintado a #5865F2->#06b6d4) */
[data-theme="light"] .main-content::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.16) !important;
    border-radius: 10px !important;
}
[data-theme="light"] .main-content:hover::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.28) !important;
}
[data-theme="light"] .chat-messages-v3::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.16) !important;
    border-radius: 10px !important;
}
/* ════════════════════ FIN LIGHT-MODE BLUE-LEGIBILITY CONSOLIDADO ════════════════════ */

/* COMUNIDAD/Oficial badge (.pro-clan-status) — MODO CLARO: pill clara frosted en vez
   del "blob negro" (2026-06-18). En oscuro queda igual (dark glass). Sobre banners
   de cualquier color: bg blanco translúcido + texto slate + sombra para definir. */
[data-theme="light"] .pro-clan-status {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    color: #1e293b !important;
    text-shadow: none !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.20) !important;
}

/* ═══ OVERNIGHT FIX 2026-06-19: legibilidad modo OSCURO ═══
   .btn-ios-primary / .ow-btn-primary usaban var(--primary)=#5B8CFF con texto blanco
   (WCAG 3.16:1 → ilegible). Indigo accesible (#4f46e5→#3730a3, ~6-10:1). Scoped a dark
   (light tiene sus propios overrides). !important pisa también los estilos inline. */
[data-theme="dark"] .btn-ios-primary,
[data-theme="dark"] button.btn-ios-primary,
[data-theme="dark"] .ow-btn-primary,
[data-theme="dark"] button.ow-btn-primary {
  background: linear-gradient(135deg, #4f46e5, #3730a3) !important;
  color: #ffffff !important;
  border: none !important;
}