/* =============================================================================
   codes_v2_0 — app.css
   Tema: Matrix (dark #0D0D0D / green #00C853)
   Fonts: Rajdhani (UI) + JetBrains Mono (code/codes)
   ============================================================================= */

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

/* =============================================================================
   1. DESIGN TOKENS
   ============================================================================= */

:root {
    /* Colors — base */
    --primary: #00C853;
    --primary-rgb: 0, 200, 83;
    --primary-dark: #00A844;
    --primary-light: #33D468;
    --primary-dim: rgba(0, 200, 83, .20);
    --primary-glow: rgba(0, 200, 83, .38);

    --danger: #F44336;
    --danger-dim: rgba(244, 67, 54, 0.12);
    --warning: #FF9800;
    --warning-dim: rgba(255, 152, 0, 0.12);
    --info: #29B6F6;
    --info-dim: rgba(41, 182, 246, 0.12);
    --success: #00C853;
    --success-dim: rgba(0, 200, 83, .13);
    --purple: #a78bfa;
    --pink:   #f472b6;

    /* Backgrounds */
    --bg-base: #0D0D0D;
    --bg-surface: #141414;
    --bg-elevated: #1A1A1A;
    --bg-overlay: #212121;
    --bg-sidebar: #0F0F0F;
    --bg-hover: rgba(255, 255, 255, 0.04);
    --bg-active: color-mix(in srgb, var(--primary) 8%, transparent);

    /* Text */
    --text-primary: #E8E8E8;
    --text-secondary: #9E9E9E;
    --text-muted: #616161;
    --text-inverse: #0D0D0D;
    --text-accent: #00C853;

    /* Borders */
    --border: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.14);
    --border-strong: rgba(255, 255, 255, 0.22);
    --border-accent: color-mix(in srgb, var(--primary) 35%, transparent);

    /* Typography */
    --font-ui: 'Rajdhani', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* Spacing */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 16px color-mix(in srgb, var(--primary) 20%, transparent);

    /* Transitions */
    --transition: 150ms ease;
    --transition-md: 250ms ease;
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --sidebar-width: 240px;
    --sidebar-collapsed: 64px;
    --topbar-height: 60px;
    --content-max-width: 1400px;

    /* Z-index */
    --z-sidebar: 100;
    --z-topbar: 200;
    --z-dropdown: 300;
    --z-modal: 400;
    --z-toast: 500;
}

/* Light mode override */
[data-mode="light"] {
    --bg-base: #F5F5F5;
    --bg-surface: #FFFFFF;
    --bg-elevated: #FAFAFA;
    --bg-overlay: #F0F0F0;
    --bg-sidebar: #FFFFFF;
    --bg-hover: rgba(0, 0, 0, 0.04);
    --bg-active: color-mix(in srgb, var(--primary) 8%, transparent);

    --text-primary: #1A1A1A;
    --text-secondary: #374151;
    --text-muted: #6B7280;
    --text-inverse: #FFFFFF;

    --border: rgba(0, 0, 0, 0.1);
    --border-medium: rgba(0, 0, 0, 0.16);
    --border-strong: rgba(0, 0, 0, 0.24);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
}

[data-mode="light"] .sidebar {
    --text-primary: #1A1A1A;
    --text-secondary: #374151;
    --text-muted: #6B7280;
    --bg-hover: rgba(0, 0, 0, 0.04);
    --bg-active: color-mix(in srgb, var(--primary) 8%, transparent);
    --border: rgba(0, 0, 0, 0.10);
    --border-medium: rgba(0, 0, 0, 0.16);
}

[data-mode="light"] .sidebar-logo-name,
[data-mode="light"] .sidebar-item,
[data-mode="light"] .sidebar-group-toggle {
    color: var(--text-secondary);
}

[data-mode="light"] .sidebar-logo-subtitle,
[data-mode="light"] .sidebar-section-label,
[data-mode="light"] .sidebar-sub-item,
[data-mode="light"] .sidebar-version,
[data-mode="light"] .sidebar-collapse-btn {
    color: var(--text-muted);
}

[data-mode="light"] .sidebar-item:hover,
[data-mode="light"] .sidebar-group-toggle:hover,
[data-mode="light"] .sidebar-sub-item:hover,
[data-mode="light"] .sidebar-collapse-btn:hover {
    color: var(--text-primary);
}

/* Theme: Cyber � cyan/violet on deep navy */
[data-theme="cyber"] {
    --primary: #00d4ff;
    --primary-rgb: 0, 212, 255;
    --primary-dark: #00a7cc;
    --primary-light: #33ddff;
    --primary-dim: rgba(0, 212, 255, .18);
    --primary-glow: rgba(0, 212, 255, .35);
    --border-accent: rgba(0, 212, 255, .30);
    --text-accent: #00d4ff;

    --bg-base: #0a0e1a;
    --bg-surface: #0f1628;
    --bg-elevated: #131d35;
    --bg-overlay: #1a2540;
    --bg-sidebar: #090d1a;
    --bg-hover: rgba(0, 212, 255, .08);
    --bg-active: rgba(0, 212, 255, .10);

    --text-primary: #edf2f7;
    --text-secondary: #a8b8cc;
    --text-muted: #7d8ca0;
    --text-inverse: #06101f;

    --border: rgba(0, 212, 255, .12);
    --border-medium: rgba(0, 212, 255, .20);
    --border-strong: rgba(0, 212, 255, .34);

    --success: #10b981;
    --success-dim: rgba(16, 185, 129, .14);
    --danger: #ef4444;
    --danger-dim: rgba(239, 68, 68, .14);
    --warning: #f59e0b;
    --warning-dim: rgba(245, 158, 11, .14);
    --info: #7c3aed;
    --info-dim: rgba(124, 58, 237, .14);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .52);
    --shadow-lg: 0 10px 34px rgba(0, 0, 0, .60);
}

[data-theme="cyber"]::-webkit-scrollbar-thumb,
[data-theme="cyber"] ::-webkit-scrollbar-thumb {
    background: #7c3aed;
}

[data-theme="cyber"][data-mode="light"] {
    --primary: #0099bb;
    --primary-rgb: 0, 153, 187;
    --primary-dark: #007f9c;
    --primary-light: #00b8d9;
    --primary-dim: rgba(0, 153, 187, .10);
    --primary-glow: rgba(0, 153, 187, .16);
    --border-accent: rgba(0, 153, 187, .28);
    --text-accent: #0099bb;

    --bg-base: #f0f4f8;
    --bg-surface: #ffffff;
    --bg-elevated: #e8eef5;
    --bg-overlay: #dce6ef;
    --bg-sidebar: #ffffff;
    --bg-hover: rgba(0, 153, 187, .07);
    --bg-active: rgba(0, 153, 187, .10);

    --text-primary: #0a1628;
    --text-secondary: #2a3a50;
    --text-muted: #5a6a80;
    --text-inverse: #ffffff;

    --border: #c8d8e8;
    --border-medium: #b8cbe0;
    --border-strong: #8fa8c4;

    --success: #059669;
    --success-dim: rgba(5, 150, 105, .10);
    --danger: #dc2626;
    --danger-dim: rgba(220, 38, 38, .10);
    --warning: #d97706;
    --warning-dim: rgba(217, 119, 6, .10);
    --info: #6d28d9;
    --info-dim: rgba(109, 40, 217, .10);

    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08);
    --shadow-md: 0 4px 14px rgba(15, 23, 42, .10);
    --shadow-lg: 0 10px 34px rgba(15, 23, 42, .14);
}

[data-theme="cyber"][data-mode="light"] .sidebar {
    --text-primary: #0a1628;
    --text-secondary: #2a3a50;
    --text-muted: #5a6a80;
    --bg-hover: rgba(0, 153, 187, .07);
    --bg-active: rgba(0, 153, 187, .10);
    --border: #c8d8e8;
    --border-medium: #b8cbe0;
}

[data-theme="cyber"] .topbar-logo-icon,
[data-theme="cyber"] .sidebar-logo-icon {
    box-shadow: 0 0 18px var(--primary-glow);
}

/* Theme: Matoxi � light workspace with fixed navy sidebar */
[data-theme="matoxi"] {
    --primary: #2563eb;
    --primary-rgb: 37, 99, 235;
    --primary-dark: #1d4ed8;
    --primary-light: #3b82f6;
    --primary-dim: rgba(37, 99, 235, .18);
    --primary-glow: rgba(37, 99, 235, .30);
    --border-accent: rgba(37, 99, 235, .28);
    --text-accent: #1d4ed8;

    --bg-base: #f4f6fb;
    --bg-surface: #ffffff;
    --bg-elevated: #eef1f8;
    --bg-overlay: #e6ebf5;
    --bg-sidebar: #16213e;
    --bg-hover: #e6ebf5;
    --bg-active: rgba(37, 99, 235, .10);

    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-inverse: #ffffff;

    --border: #dde3ef;
    --border-medium: #c8d3e6;
    --border-strong: #9fb0c8;
    --success: #198754;
    --success-dim: rgba(25, 135, 84, .11);
    --warning: #d97706;
    --warning-dim: rgba(217, 119, 6, .11);
    --danger: #dc3545;
    --danger-dim: rgba(220, 53, 69, .11);
    --info: #0284c7;
    --info-dim: rgba(2, 132, 199, .11);
    --shadow-sm: 0 1px 4px rgba(30, 41, 59, .08);
    --shadow-md: 0 4px 20px rgba(30, 41, 59, .10);
    --shadow-lg: 0 8px 36px rgba(30, 41, 59, .14);
}

[data-theme="matoxi"] body {
    background: #f4f6fb;
    color: #1e293b;
}

[data-theme="matoxi"] .card,
[data-theme="matoxi"] .ec-card,
[data-theme="matoxi"] .cfg-block,
[data-theme="matoxi"] .modal-content,
[data-theme="matoxi"] .dropdown-menu,
[data-theme="matoxi"] .notif-panel {
    background: #ffffff;
    border-color: #dde3ef;
    box-shadow: 0 2px 12px rgba(30, 41, 59, .07);
}

[data-theme="matoxi"] .topbar {
    background: #ffffff;
    border-bottom-color: #dde3ef;
    box-shadow: 0 1px 6px rgba(30, 41, 59, .06);
}

[data-theme="matoxi"] .sidebar {
    --text-primary: #f8fafc;
    --text-secondary: #dbe6f3;
    --text-muted: #8fa3c0;
    --bg-hover: rgba(255, 255, 255, .07);
    --bg-active: rgba(37, 99, 235, .18);
    --border: rgba(255, 255, 255, .08);
    --border-medium: rgba(255, 255, 255, .14);
    background: #16213e;
    border-right-color: #1e2d4a;
}

[data-theme="matoxi"] .sidebar-logo,
[data-theme="matoxi"] .sidebar-footer {
    border-color: #1e2d4a;
}

[data-theme="matoxi"] .sidebar-item,
[data-theme="matoxi"] .sidebar-group-toggle {
    color: #b8c8dc;
}

[data-theme="matoxi"] .sidebar-item i,
[data-theme="matoxi"] .sidebar-svg-icon,
[data-theme="matoxi"] .sidebar-group-toggle i {
    color: #8fa3c0;
}

[data-theme="matoxi"] .sidebar-item:hover,
[data-theme="matoxi"] .sidebar-group-toggle:hover {
    background: rgba(255, 255, 255, .07);
    color: #f8fafc;
}

[data-theme="matoxi"] .sidebar-item:hover i,
[data-theme="matoxi"] .sidebar-item:hover .sidebar-svg-icon,
[data-theme="matoxi"] .sidebar-group-toggle:hover i {
    color: #dbeafe;
}

[data-theme="matoxi"] .sidebar-item.active,
[data-theme="matoxi"] .sidebar-group-toggle.active {
    background: linear-gradient(90deg, var(--primary-dim) 0%, transparent 100%);
    color: #bfdbfe;
    border-left-color: var(--primary);
}

[data-theme="matoxi"] .sidebar-item.active i,
[data-theme="matoxi"] .sidebar-item.active .sidebar-svg-icon,
[data-theme="matoxi"] .sidebar-group-toggle.active i {
    color: #60a5fa;
}

[data-theme="matoxi"] .sidebar-section-label,
[data-theme="matoxi"] .sidebar-logo-subtitle,
[data-theme="matoxi"] .sidebar-version,
[data-theme="matoxi"] .sidebar-collapse-btn {
    color: #8fa3c0;
}

[data-theme="matoxi"] .sidebar-collapse-btn:hover {
    color: #f8fafc;
    background: rgba(255, 255, 255, .07);
}

[data-theme="matoxi"] .btn-primary {
    color: #fff;
    box-shadow: 0 2px 10px var(--border-accent);
}

[data-theme="matoxi"] .btn-primary:hover {
    color: #fff;
    box-shadow: 0 4px 18px var(--border-accent);
}

[data-theme="matoxi"] .btn-secondary {
    background: #ffffff;
    border-color: #dde3ef;
    color: #475569;
}

[data-theme="matoxi"] .btn-secondary:hover {
    background: #f0f4fb;
    border-color: #b8c5da;
    color: #1e293b;
}

[data-theme="matoxi"]::-webkit-scrollbar-track,
[data-theme="matoxi"] ::-webkit-scrollbar-track {
    background: #f4f6fb;
}

[data-theme="matoxi"]::-webkit-scrollbar-thumb,
[data-theme="matoxi"] ::-webkit-scrollbar-thumb {
    background: #c8d3e6;
}

[data-theme="matoxi"]::-webkit-scrollbar-thumb:hover,
[data-theme="matoxi"] ::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Theme: Minimalista � clean light workspace with slate sidebar */
[data-theme="minimalista"] {
    --primary: #2962FF;
    --primary-rgb: 41, 98, 255;
    --primary-dark: #1D4ED8;
    --primary-light: #5B86FF;
    --primary-dim: rgba(41, 98, 255, .18);
    --primary-glow: rgba(41, 98, 255, .28);
    --border-accent: rgba(41, 98, 255, .24);
    --text-accent: #1D4ED8;

    --bg-base: #F6F7FB;
    --bg-surface: #FFFFFF;
    --bg-elevated: #F9FAFB;
    --bg-overlay: #F3F4F6;
    --bg-sidebar: #111827;
    --bg-hover: #F3F4F6;
    --bg-active: rgba(41, 98, 255, .08);

    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6B7280;
    --text-inverse: #FFFFFF;

    --border: #E5E7EB;
    --border-medium: #D1D5DB;
    --border-strong: #9CA3AF;

    --success: #059669;
    --success-dim: #D1FAE5;
    --warning: #D97706;
    --warning-dim: #FEF3C7;
    --danger: #DC2626;
    --danger-dim: #FEE2E2;
    --info: #0891B2;
    --info-dim: #CFFAFE;

    --shadow-sm: 0 1px 2px rgba(17, 24, 39, .05);
    --shadow-md: 0 2px 8px rgba(17, 24, 39, .07);
    --shadow-lg: 0 8px 24px rgba(17, 24, 39, .10);
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
}

[data-theme="minimalista"][data-mode="dark"],
[data-theme="minimalista"][data-mode="light"] {
    --bg-base: #F6F7FB;
    --bg-surface: #FFFFFF;
    --bg-elevated: #F9FAFB;
    --bg-overlay: #F3F4F6;
    --bg-sidebar: #111827;
    --bg-hover: #F3F4F6;
    --bg-active: rgba(41, 98, 255, .08);
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6B7280;
    --text-inverse: #FFFFFF;
    --border: #E5E7EB;
    --border-medium: #D1D5DB;
    --border-strong: #9CA3AF;
}

[data-theme="minimalista"] body {
    background: #F6F7FB;
    color: #111827;
}

[data-theme="minimalista"] .topbar {
    background: #FFFFFF;
    border-bottom-color: #E5E7EB;
    box-shadow: 0 1px 0 rgba(17, 24, 39, .04);
}

[data-theme="minimalista"] .topbar-logo-icon,
[data-theme="minimalista"] .sidebar-logo-icon {
    box-shadow: none;
}

[data-theme="minimalista"] .card,
[data-theme="minimalista"] .ec-card,
[data-theme="minimalista"] .cfg-block,
[data-theme="minimalista"] .modal-content,
[data-theme="minimalista"] .dropdown-menu,
[data-theme="minimalista"] .notif-panel,
[data-theme="minimalista"] .stat-card {
    background: #FFFFFF;
    border-color: #E5E7EB;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}

[data-theme="minimalista"] .sidebar {
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-muted: #9CA3AF;
    --bg-hover: rgba(255, 255, 255, .07);
    --bg-active: rgba(41, 98, 255, .18);
    --border: rgba(255, 255, 255, .08);
    --border-medium: rgba(255, 255, 255, .14);
    background: #111827;
    border-right-color: #1F2937;
}

[data-theme="minimalista"] .sidebar-logo,
[data-theme="minimalista"] .sidebar-footer {
    border-color: #1F2937;
}

[data-theme="minimalista"] .sidebar-logo-name {
    color: #F9FAFB;
}

[data-theme="minimalista"] .sidebar-logo-subtitle,
[data-theme="minimalista"] .sidebar-section-label,
[data-theme="minimalista"] .sidebar-version,
[data-theme="minimalista"] .sidebar-collapse-btn {
    color: #9CA3AF;
}

[data-theme="minimalista"] .sidebar-item,
[data-theme="minimalista"] .sidebar-group-toggle {
    color: #D1D5DB;
}

[data-theme="minimalista"] .sidebar-item i,
[data-theme="minimalista"] .sidebar-svg-icon,
[data-theme="minimalista"] .sidebar-group-toggle i {
    color: #9CA3AF;
}

[data-theme="minimalista"] .sidebar-item:hover,
[data-theme="minimalista"] .sidebar-group-toggle:hover {
    background: rgba(255, 255, 255, .07);
    color: #F9FAFB;
}

[data-theme="minimalista"] .sidebar-item:hover i,
[data-theme="minimalista"] .sidebar-item:hover .sidebar-svg-icon,
[data-theme="minimalista"] .sidebar-group-toggle:hover i {
    color: #E5E7EB;
}

[data-theme="minimalista"] .sidebar-item.active,
[data-theme="minimalista"] .sidebar-group-toggle.active {
    background: linear-gradient(90deg, var(--primary-dim) 0%, transparent 100%);
    color: #BFDBFE;
    border-left-color: var(--primary);
}

[data-theme="minimalista"] .sidebar-item.active i,
[data-theme="minimalista"] .sidebar-item.active .sidebar-svg-icon,
[data-theme="minimalista"] .sidebar-group-toggle.active i {
    color: #93C5FD;
}

[data-theme="minimalista"] .sidebar-collapse-btn:hover {
    color: #F9FAFB;
    background: rgba(255, 255, 255, .07);
}

[data-theme="minimalista"] .page-title,
[data-theme="minimalista"] .card-title {
    color: #111827;
}

[data-theme="minimalista"] .page-subtitle,
[data-theme="minimalista"] .card-subtitle {
    color: #6B7280;
}

[data-theme="minimalista"] .btn-primary {
    color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(41, 98, 255, .24);
}

[data-theme="minimalista"] .btn-primary:hover {
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(41, 98, 255, .24);
}

[data-theme="minimalista"] .btn-secondary {
    background: #FFFFFF;
    border-color: #D1D5DB;
    color: #374151;
}

[data-theme="minimalista"] .btn-secondary:hover {
    background: #F3F4F6;
    border-color: #9CA3AF;
    color: #111827;
}

[data-theme="minimalista"] .btn-ghost {
    color: #6B7280;
}

[data-theme="minimalista"] .btn-ghost:hover {
    background: var(--primary-dim);
    color: var(--primary-dark);
}

[data-theme="minimalista"] .badge-primary {
    background: rgba(41, 98, 255, .08);
    color: #1D4ED8;
    border-color: rgba(41, 98, 255, .24);
}

[data-theme="minimalista"] .badge-success {
    background: #D1FAE5;
    color: #065F46;
    border-color: #A7F3D0;
}

[data-theme="minimalista"] .badge-danger {
    background: #FEE2E2;
    color: #991B1B;
    border-color: #FECACA;
}

[data-theme="minimalista"] .badge-warning {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FCD34D;
}

[data-theme="minimalista"] .badge-info {
    background: #CFFAFE;
    color: #155E75;
    border-color: #A5F3FC;
}

[data-theme="minimalista"] .form-control,
[data-theme="minimalista"] .form-input,
[data-theme="minimalista"] .form-select,
[data-theme="minimalista"] .form-textarea {
    background: #FFFFFF;
    border-color: #D1D5DB;
    color: #111827;
}

[data-theme="minimalista"] .form-control:focus,
[data-theme="minimalista"] .form-input:focus,
[data-theme="minimalista"] .form-select:focus,
[data-theme="minimalista"] .form-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(41, 98, 255, .10);
}

[data-theme="minimalista"] .table thead th,
[data-theme="minimalista"] table thead th {
    background: #F9FAFB;
    color: #374151;
    border-bottom-color: #E5E7EB;
}

[data-theme="minimalista"] .table tbody tr:hover,
[data-theme="minimalista"] table tbody tr:hover {
    background: #F9FAFB;
}

[data-theme="minimalista"]::-webkit-scrollbar-track,
[data-theme="minimalista"] ::-webkit-scrollbar-track {
    background: #F6F7FB;
}

[data-theme="minimalista"]::-webkit-scrollbar-thumb,
[data-theme="minimalista"] ::-webkit-scrollbar-thumb {
    background: #D1D5DB;
}

[data-theme="minimalista"]::-webkit-scrollbar-thumb:hover,
[data-theme="minimalista"] ::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* =============================================================================
   2. RESET
   ============================================================================= */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-ui);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-base);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--primary-light);
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

ul,
ol {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

/* =============================================================================
   3. SCROLLBAR
   ============================================================================= */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}

/* =============================================================================
   4. LAYOUT
   ============================================================================= */

.app-layout {
    display: flex;
    min-height: 100vh;
}

.app-content {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-width);
    margin-top: var(--topbar-height);
    padding-bottom: 44px;
    transition: margin-left var(--transition-md);
}

.app-content.sidebar-collapsed {
    margin-left: var(--sidebar-collapsed);
}

html.sidebar-precollapsed .sidebar {
    width: var(--sidebar-collapsed);
}

html.sidebar-precollapsed .topbar {
    left: var(--sidebar-collapsed);
}

html.sidebar-precollapsed .app-content {
    margin-left: var(--sidebar-collapsed);
}

html.sidebar-precollapsed .app-footer {
    left: var(--sidebar-collapsed);
}

html.sidebar-booting .sidebar,
html.sidebar-booting .topbar,
html.sidebar-booting .app-content,
html.sidebar-booting .app-footer {
    transition: none !important;
}

.page-container {
    padding: var(--sp-6);
    max-width: var(--content-max-width);
    margin: 0 auto;
    animation: fadeInUp .35s var(--ease-out) both;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-6);
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.page-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
}

.page-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--sp-1);
}

/* =============================================================================
   5. SIDEBAR
   ============================================================================= */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: linear-gradient(180deg, var(--bg-sidebar) 0%, color-mix(in srgb, var(--bg-sidebar) 85%, #000) 100%);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: var(--z-sidebar);
    transition: width var(--transition-md);
    overflow: hidden;
}

/* Decorative glow line on sidebar right edge */
.sidebar::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg,
        rgba(var(--primary-rgb, 0,200,83), .3) 0%,
        transparent 30%,
        transparent 70%,
        rgba(var(--primary-rgb, 0,200,83), .3) 100%);
    pointer-events: none;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed);
}

html.sidebar-precollapsed .sidebar-logo {
    justify-content: center;
    padding: var(--sp-4) 0;
    gap: 0;
}

html.sidebar-precollapsed .sidebar-logo-text {
    display: none;
}

html.sidebar-precollapsed .sidebar-section-label {
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
}

html.sidebar-precollapsed .sidebar-item {
    padding: var(--sp-3) 0;
    justify-content: center;
    gap: 0;
    border-left-color: transparent;
}

html.sidebar-precollapsed .sidebar-item i,
html.sidebar-precollapsed .sidebar-item .sidebar-svg-icon {
    width: auto;
    margin: 0;
}

html.sidebar-precollapsed .sidebar-item span,
html.sidebar-precollapsed .sidebar-item-badge {
    display: none;
}

html.sidebar-precollapsed .sidebar-footer {
    justify-content: center;
    padding: var(--sp-3);
}

html.sidebar-precollapsed .sidebar-version {
    display: none;
}

/* ── Collapsed state: hide text, center icons ── */
.sidebar.collapsed .sidebar-logo {
    justify-content: center;
    padding: var(--sp-4) 0;
    gap: 0;
}

.sidebar.collapsed .sidebar-logo-text {
    display: none;
}

.sidebar.collapsed .sidebar-section-label {
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
}

.sidebar.collapsed .sidebar-item {
    padding: var(--sp-3) 0;
    justify-content: center;
    gap: 0;
    border-left: none;
    border-right: 3px solid transparent;
}

.sidebar.collapsed .sidebar-item.active {
    border-right-color: var(--primary);
}

.sidebar.collapsed .sidebar-item.active::before {
    display: none;
}

.sidebar.collapsed .sidebar-item i,
.sidebar.collapsed .sidebar-item .sidebar-svg-icon {
    width: auto;
    margin: 0;
}

.sidebar.collapsed .sidebar-item span,
.sidebar.collapsed .sidebar-item-badge {
    display: none;
}

.sidebar.collapsed .sidebar-footer {
    justify-content: center;
    padding: var(--sp-3);
}

.sidebar.collapsed .sidebar-version {
    display: none;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    height: var(--topbar-height);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    white-space: nowrap;
}

.sidebar-logo-icon {
    width: 32px;
    height: 32px;
    background: var(--primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-inverse);
}

.sidebar-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    overflow: hidden;
}

.sidebar-logo-name {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-logo-subtitle {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-4) 0;
}

.sidebar-section {
    margin-bottom: var(--sp-4);
}

.sidebar-section-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    padding: 0 var(--sp-5) var(--sp-2);
    white-space: nowrap;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    position: relative;
    transition: color var(--transition), background var(--transition);
    white-space: nowrap;
    border-left: 3px solid transparent;
    font-size: var(--font-size-md);
    font-weight: 500;
}

.sidebar-item:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,.04);
    border-left-color: var(--primary-glow);
    text-decoration: none;
}

.sidebar-item:hover i,
.sidebar-item:hover .sidebar-svg-icon {
    opacity: .9;
    transform: scale(1.08);
}

.sidebar-item.active {
    color: var(--primary);
    background: linear-gradient(90deg, var(--primary-dim) 0%, transparent 80%);
    border-left-color: var(--primary);
    font-weight: 600;
}

.sidebar-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 65%;
    background: var(--primary);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 16px var(--primary), 0 0 6px var(--primary), 0 0 2px var(--primary);
}

.sidebar-item.active i,
.sidebar-item.active .sidebar-svg-icon { opacity: 1; color: var(--primary); }

.sidebar-item i {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    font-size: var(--font-size-lg);
    opacity: .65;
    transition: opacity .2s, transform .2s var(--ease-spring), color .2s;
}

.sidebar-item-badge {
    margin-left: auto;
    background: var(--primary);
    color: var(--text-inverse);
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    min-width: 18px;
    text-align: center;
}

/* Collapsible group (Configuración) */
.sidebar-group-toggle {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    color: var(--text-secondary);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    transition: color var(--transition), background var(--transition);
    white-space: nowrap;
    border-left: 2px solid transparent;
    font-size: var(--font-size-md);
    font-weight: 500;
    font-family: var(--font-ui);
}

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

.sidebar-group-toggle.active {
    color: var(--primary);
    background: var(--bg-active);
    border-left-color: var(--primary);
}

.sidebar-group-toggle i.group-icon {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    font-size: var(--font-size-lg);
}

.sidebar-group-arrow {
    margin-left: auto;
    font-size: var(--font-size-sm);
    transition: transform var(--transition-md);
    flex-shrink: 0;
}

.sidebar-group.open .sidebar-group-arrow {
    transform: rotate(180deg);
}

.sidebar-sub-nav {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--transition-md);
}

.sidebar-group.open .sidebar-sub-nav {
    max-height: 300px;
}

.sidebar-sub-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-5) var(--sp-2) calc(var(--sp-5) + 20px + var(--sp-3));
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: color var(--transition), background var(--transition);
    white-space: nowrap;
    border-left: 2px solid transparent;
}

.sidebar-sub-item::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
    transition: background var(--transition);
}

.sidebar-sub-item:hover {
    color: var(--text-secondary);
    background: var(--bg-hover);
    text-decoration: none;
}

.sidebar-sub-item.active {
    color: var(--primary);
    background: var(--bg-active);
    border-left-color: var(--primary);
}

.sidebar-sub-item.active::before {
    background: var(--primary);
}

/* Footer: version + collapse */
.sidebar-footer {
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-version {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.sidebar-collapse-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    transition: color var(--transition), background var(--transition);
    flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* =============================================================================
   6. TOPBAR
   ============================================================================= */

.topbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--topbar-height);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 var(--sp-6);
    gap: var(--sp-4);
    z-index: var(--z-topbar);
    transition: left var(--transition-md);
}

.topbar.sidebar-collapsed {
    left: var(--sidebar-collapsed);
}

.topbar-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--sp-2);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    transition: color var(--transition), background var(--transition);
}

.topbar-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.topbar-search {
    flex: 1;
    max-width: 400px;
    position: relative;
}

.topbar-search input {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-10);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    transition: border-color var(--transition);
}

.topbar-search input:focus {
    outline: none;
    border-color: var(--border-accent);
}

.topbar-search i {
    position: absolute;
    left: var(--sp-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.topbar-page-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-spacer {
    flex: 1;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.topbar-action-btn {
    position: relative;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--sp-2);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    transition: color var(--transition), background var(--transition);
}

.topbar-action-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.topbar-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-surface);
}

.topbar-badge.has-count {
    width: auto;
    height: 18px;
    min-width: 18px;
    top: 0px;
    right: 0px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition);
}

.topbar-user:hover {
    background: var(--bg-hover);
}

.topbar-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: var(--primary-dim);
    border: 1px solid var(--border-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-weight: 700;
    font-size: var(--font-size-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.topbar-avatar-img,
.topbar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.topbar-reseller-info {
    display: flex;
    flex-direction: column;
}

.topbar-reseller-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.topbar-reseller-role {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    line-height: 1.2;
}

/* =============================================================================
   7. CARDS
   ============================================================================= */

.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--border);
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.card-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: 2px;
}

.card-body {
    padding: var(--sp-6);
}

.card-body-sm {
    padding: var(--sp-4);
}

.card-footer {
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--border);
    background: var(--bg-elevated);
}


/* =============================================================================
   8. TABLES
   ============================================================================= */

.table-wrapper,
.table-responsive {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.table-wrapper > .table,
.table-responsive > .table {
    min-width: max-content;
}

#auditTable {
    min-width: 760px;
}

.table th {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    background: var(--bg-elevated);
}

.table td {
    padding: var(--sp-3) var(--sp-4);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.table tbody tr {
    transition: background var(--transition);
}

.table tbody tr:hover {
    background: var(--bg-hover);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table-mono {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
}

.table-secondary {
    color: var(--text-secondary);
}

/* =============================================================================
   9. FORMS
   ============================================================================= */

.form-group {
    margin-bottom: var(--sp-5);
}

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--sp-2);
}

.form-label.required::after {
    content: ' *';
    color: var(--danger);
}

.form-control {
    display: block;
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-size-md);
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-dim);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Aliases: form-input / form-select mirror form-control for v1_10-ported views */
.form-input,
.form-select {
    display: block;
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 9px var(--sp-3);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
    outline: none;
    line-height: 1.5;
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-input:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-dim);
}

.form-input:disabled,
.form-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239E9E9E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.form-control-mono {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    letter-spacing: 1px;
}

select.form-control {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239E9E9E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
    padding-right: var(--sp-10);
}

select option {
    background-color: var(--bg-surface, #141414);
    color: var(--text-primary, #e8e8e8);
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.form-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--sp-1);
}

.tbl-col-id {
    width: 52px;
    font-size: var(--font-size-xs);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    white-space: nowrap;
}

.pwd-reqs {
    list-style: none;
    padding: 0;
    margin: var(--sp-1) 0 0;
    display: none;
}
.pwd-reqs li {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    padding: 2px 0 2px 1.2rem;
    position: relative;
}
.pwd-reqs li::before {
    content: '✗';
    position: absolute;
    left: 0;
    color: var(--danger, #ef5350);
}
.pwd-reqs li.ok { color: var(--success, #00C853); }
.pwd-reqs li.ok::before { content: '✓'; color: var(--success, #00C853); }

.form-error {
    font-size: var(--font-size-xs);
    color: var(--danger);
    margin-top: var(--sp-1);
}

.form-control.is-invalid {
    border-color: var(--danger);
}

.form-control.is-valid {
    border-color: var(--success);
}

/* Checkbox / Radio */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    cursor: pointer;
}

.form-check-input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

.form-check-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    reseller-select: none;
}

/* Input group */
.input-group {
    display: flex;
    align-items: stretch;
}

.input-group .form-control {
    border-radius: 0;
    flex: 1;
}

.input-group .form-control:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group .form-control:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-overlay);
    border: 1px solid var(--border-medium);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.input-group-text:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    border-right: none;
}

.input-group-text:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-left: none;
}

/* =============================================================================
   10. BUTTONS
   ============================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: var(--font-size-md);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--transition);
    reseller-select: none;
    vertical-align: middle;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-sm {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: var(--sp-4) var(--sp-8);
    font-size: var(--font-size-lg);
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
}

.btn-icon.btn-sm {
    width: 28px;
    height: 28px;
}

.btn-full {
    width: 100%;
}

/* Variants */
.btn-primary {
    background: var(--primary);
    color: var(--text-inverse);
    border-color: var(--primary);
}

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

.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

.btn-secondary:hover {
    background: var(--bg-overlay);
    color: var(--text-primary);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--border-accent);
}

.btn-outline:hover {
    background: var(--primary-dim);
    color: var(--primary);
}

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

.btn-danger:hover {
    background: #d32f2f;
    border-color: #d32f2f;
    color: #fff;
}

.btn-danger-outline {
    background: transparent;
    color: var(--danger);
    border-color: var(--danger);
}

.btn-danger-outline:hover {
    background: var(--danger-dim);
    color: var(--danger);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Loading state */
.btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

.btn.loading::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    flex-shrink: 0;
}

/* =============================================================================
   11. BADGES
   ============================================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.badge-primary {
    background: var(--primary-dim);
    color: var(--primary);
    border: 1px solid var(--border-accent);
}

.badge-success {
    background: var(--success-dim);
    color: var(--success);
}

.badge-danger {
    background: var(--danger-dim);
    color: var(--danger);
}

.badge-warning {
    background: var(--warning-dim);
    color: var(--warning);
}

.badge-info {
    background: var(--info-dim);
    color: var(--info);
}

.badge-purple {
    background: rgba(99,102,241,.18);
    color: #6366f1;
    border: 1px solid rgba(99,102,241,.35);
}
.badge-blue {
    background: rgba(59,130,246,.18);
    color: #3b82f6;
    border: 1px solid rgba(59,130,246,.35);
}

.badge-muted {
    background: var(--bg-elevated);
    color: var(--text-muted);
}

/* Status dot */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.active {
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
}

.status-dot.inactive {
    background: var(--text-muted);
}

.status-dot.error {
    background: var(--danger);
}

.status-dot.warning {
    background: var(--warning);
}

/* =============================================================================
   12. ALERTS
   ============================================================================= */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius-md);
    border: 1px solid;
    font-size: var(--font-size-sm);
}

.alert i {
    flex-shrink: 0;
    font-size: var(--font-size-lg);
    margin-top: 1px;
}

.alert-success {
    background: var(--success-dim);
    border-color: var(--success);
    color: var(--success);
}

.alert-danger {
    background: var(--danger-dim);
    border-color: var(--danger);
    color: var(--danger);
}

.alert-warning {
    background: var(--warning-dim);
    border-color: var(--warning);
    color: var(--warning);
}

.alert-info {
    background: var(--info-dim);
    border-color: var(--info);
    color: var(--info);
}

.alert-text {
    color: var(--text-primary);
}

.alert-text strong {
    color: inherit;
}

.cfg-flash-alert {
    opacity: 1;
    transform: translateY(0);
    max-height: 140px;
    overflow: hidden;
    transition:
        opacity .45s ease,
        transform .45s ease,
        max-height .55s ease,
        margin .55s ease,
        padding .55s ease,
        border-color .45s ease;
}

.cfg-flash-alert.is-hiding {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
}

/* =============================================================================
   13. MODALS
   ============================================================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

.modal-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    transform: scale(0.96) translateY(8px);
    transition: transform var(--transition);
}

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

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--border);
}

.modal-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--sp-1);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xl);
    line-height: 1;
    transition: color var(--transition);
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: var(--sp-6);
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
}

/* =============================================================================
   14. DROPDOWNS
   ============================================================================= */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + var(--sp-2));
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    z-index: var(--z-dropdown);
    padding: var(--sp-1) 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity var(--transition), transform var(--transition);
}

.dropdown-menu.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition), background var(--transition);
    border: none;
    background: none;
    width: 100%;
}

.dropdown-item:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.dropdown-item.danger {
    color: var(--danger);
}

.dropdown-item.danger:hover {
    background: var(--danger-dim);
}

.dropdown-header {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
}

.dropdown-header-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.dropdown-header-role {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: var(--sp-1) 0;
}

/* =============================================================================
   15. NOTIFICATIONS PANEL
   ============================================================================= */

.notif-panel {
    position: absolute;
    top: calc(100% + var(--sp-2));
    right: 0;
    width: 340px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity var(--transition), transform var(--transition);
}

.notif-panel.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
}

.notif-panel-title {
    font-size: var(--font-size-md);
    font-weight: 600;
}

.notif-list {
    max-height: 320px;
    overflow-y: auto;
    list-style: none;
}

.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-8) var(--sp-4);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.notif-empty i {
    font-size: 1.5rem;
}

.topbar-chevron {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    transition: transform var(--transition);
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--transition);
}

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

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

.notif-item.has-link .notif-item-arrow {
    align-self: center;
    color: var(--text-muted);
    font-size: 1.2rem;
    transition: transform var(--transition), color var(--transition);
}
.notif-item.has-link:hover .notif-item-arrow {
    color: var(--text-accent);
    transform: translateX(3px);
}

.notif-item.unread {
    background: var(--bg-active);
}

.notif-source-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
    background: color-mix(in srgb, var(--notif-color, var(--primary)) 12%, transparent);
    color: var(--notif-color, var(--primary));
    opacity: 0.45;
    transition: opacity var(--transition);
}

.notif-source-unread {
    opacity: 1;
}

.notif-item-body {
    flex: 1;
    min-width: 0;
}

.notif-item-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-item-msg {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.notif-item-meta {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.notif-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-8) var(--sp-4);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.notif-empty-icon {
    font-size: 1.5rem;
}

.notif-panel-footer {
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border);
    text-align: center;
}

/* =============================================================================
   16. TABS
   ============================================================================= */

.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-6);
}

.tab-item {
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition), border-color var(--transition);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    white-space: nowrap;
}

.tab-item:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.tab-item.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* =============================================================================
   17. PAGINATION
   ============================================================================= */

.pagination {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex-wrap: wrap;
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 var(--sp-2);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: all var(--transition);
    cursor: pointer;
}

.page-link:hover {
    border-color: var(--border-accent);
    color: var(--primary);
    background: var(--primary-dim);
}

.page-link.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-inverse);
}

.page-link.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* =============================================================================
   18. TOASTS
   ============================================================================= */

.toast-container {
    position: fixed;
    bottom: var(--sp-6);
    right: var(--sp-6);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 280px;
    max-width: 400px;
    pointer-events: auto;
    animation: toastIn 0.25s ease forwards;
}

.toast.removing {
    animation: toastOut 0.25s ease forwards;
}

.toast-icon {
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.toast-body {
    flex: 1;
    font-size: var(--font-size-sm);
}

.toast-title {
    font-weight: 600;
    color: var(--text-primary);
}

.toast-msg {
    color: var(--text-secondary);
    margin-top: 2px;
}

.toast.success {
    border-left: 3px solid var(--success);
    background: color-mix(in srgb, var(--primary) 30%, transparent);
}

.toast.error {
    border-left: 3px solid var(--danger);
    background: rgba(244, 67, 54, 0.3);
}

.toast.warning {
    border-left: 3px solid var(--warning);
    background: rgba(255, 152, 0, 0.3);
}

.toast.info {
    border-left: 3px solid var(--info);
    background: rgba(41, 182, 246, 0.3);
}

.toast.success .toast-icon {
    color: var(--success);
}

.toast.error .toast-icon {
    color: var(--danger);
}

.toast.warning .toast-icon {
    color: var(--warning);
}

.toast.info .toast-icon {
    color: var(--info);
}

/* Toast styles per theme */
[data-theme="cyber"] .toast.success {
    background: rgba(16, 185, 129, 0.3);
}

[data-theme="cyber"] .toast.error {
    background: rgba(239, 68, 68, 0.3);
}

[data-theme="cyber"] .toast.warning {
    background: rgba(245, 158, 11, 0.3);
}

[data-theme="cyber"] .toast.info {
    background: rgba(124, 58, 237, 0.3);
}

[data-theme="matoxi"] .toast.success {
    background: rgba(25, 135, 84, 0.3);
}

[data-theme="matoxi"] .toast.error {
    background: rgba(220, 53, 69, 0.3);
}

[data-theme="matoxi"] .toast.warning {
    background: rgba(217, 119, 6, 0.3);
}

[data-theme="matoxi"] .toast.info {
    background: rgba(2, 132, 199, 0.3);
}

[data-theme="minimalista"] .toast.success {
    background: rgba(5, 150, 105, 0.3);
}

[data-theme="minimalista"] .toast.error {
    background: rgba(220, 38, 38, 0.3);
}

[data-theme="minimalista"] .toast.warning {
    background: rgba(217, 119, 6, 0.3);
}

[data-theme="minimalista"] .toast.info {
    background: rgba(8, 145, 178, 0.3);
}

/* =============================================================================
   18b. TEMA: GLASS (Glassmorphism — fondo gradiente + blur)
   ============================================================================= */

[data-theme="glass"] {
    --primary: #6366f1;
    --primary-rgb: 99, 102, 241;
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --primary-dim: rgba(99, 102, 241, .18);
    --primary-glow: rgba(99, 102, 241, .30);
    --border-accent: rgba(99, 102, 241, .45);
    --text-accent: #a5b4fc;

    --bg-base: #0f0c29;
    --bg-surface: rgba(255, 255, 255, .07);
    --bg-elevated: rgba(255, 255, 255, .05);
    --bg-overlay: rgba(255, 255, 255, .04);
    --bg-sidebar: rgba(10, 8, 35, .88);
    --bg-hover: rgba(99, 102, 241, .12);
    --bg-active: rgba(99, 102, 241, .20);

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-inverse: #0f0c29;

    --border: rgba(255, 255, 255, .10);
    --border-medium: rgba(255, 255, 255, .15);
    --border-strong: rgba(255, 255, 255, .25);

    --success: #10b981;
    --success-dim: rgba(16, 185, 129, .18);
    --danger: #ef4444;
    --danger-dim: rgba(239, 68, 68, .18);
    --warning: #f59e0b;
    --warning-dim: rgba(245, 158, 11, .18);
    --info: #38bdf8;
    --info-dim: rgba(56, 189, 248, .18);

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, .50);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, .55);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, .65);
}

/* ── Fondo: pseudo-elemento fixed para no interferir con body background ─────── */
html[data-theme="glass"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at 15% 25%, rgba(99, 102, 241, .35) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 75%, rgba(139, 92, 246, .28) 0%, transparent 45%),
        radial-gradient(ellipse at 70% 10%, rgba(56, 189, 248, .18) 0%, transparent 40%),
        linear-gradient(135deg, #0f0c29 0%, #1a1040 50%, #0a0820 100%);
    pointer-events: none;
}

/* ── Topbar ─────────────────────────────────────────────────────────────────── */
[data-theme="glass"] .topbar {
    background: rgba(10, 8, 35, .75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: rgba(255, 255, 255, .08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05);
}

/* El footer fijo necesita el mismo frosted que el topbar; sin esto usaba el
   --bg-surface translúcido del tema glass y se transparentaba el contenido. */
[data-theme="glass"] .app-footer {
    background: rgba(10, 8, 35, .82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top-color: rgba(255, 255, 255, .08);
}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */
[data-theme="glass"] .sidebar {
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --bg-hover: rgba(99, 102, 241, .12);
    --bg-active: rgba(99, 102, 241, .22);
    --border: rgba(255, 255, 255, .08);
    --border-medium: rgba(255, 255, 255, .12);
    background: rgba(10, 8, 35, .88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right-color: rgba(255, 255, 255, .08);
}

[data-theme="glass"] .sidebar-logo,
[data-theme="glass"] .sidebar-footer {
    border-color: rgba(255, 255, 255, .08);
}

[data-theme="glass"] .sidebar-item,
[data-theme="glass"] .sidebar-group-toggle {
    color: #94a3b8;
}

[data-theme="glass"] .sidebar-item i,
[data-theme="glass"] .sidebar-svg-icon,
[data-theme="glass"] .sidebar-group-toggle i {
    color: #64748b;
}

[data-theme="glass"] .sidebar-item:hover,
[data-theme="glass"] .sidebar-group-toggle:hover {
    background: rgba(99, 102, 241, .12);
    color: #f1f5f9;
}

[data-theme="glass"] .sidebar-item:hover i,
[data-theme="glass"] .sidebar-item:hover .sidebar-svg-icon,
[data-theme="glass"] .sidebar-group-toggle:hover i {
    color: #a5b4fc;
}

[data-theme="glass"] .sidebar-item.active,
[data-theme="glass"] .sidebar-group-toggle.active {
    background: linear-gradient(90deg, var(--primary-dim) 0%, transparent 100%);
    color: #c7d2fe;
    border-left-color: #6366f1;
}

[data-theme="glass"] .sidebar-item.active i,
[data-theme="glass"] .sidebar-item.active .sidebar-svg-icon,
[data-theme="glass"] .sidebar-group-toggle.active i {
    color: #818cf8;
}

[data-theme="glass"] .sidebar-section-label,
[data-theme="glass"] .sidebar-logo-subtitle,
[data-theme="glass"] .sidebar-version,
[data-theme="glass"] .sidebar-collapse-btn {
    color: #475569;
}

/* ── Cards / superficies (blanco-glass sobre fondo oscuro-colorido) ─────────── */
[data-theme="glass"] .card,
[data-theme="glass"] .ec-card,
[data-theme="glass"] .cfg-block,
[data-theme="glass"] .stat-card,
[data-theme="glass"] .dashboard-card,
[data-theme="glass"] .import-card {
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .10);
}

[data-theme="glass"] .card-header,
[data-theme="glass"] .card-footer {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .08);
}

[data-theme="glass"] .table-wrapper {
    background: transparent;
}

/* ── Modales / dropdowns / notif ────────────────────────────────────────────── */
/* .modal, .cf-box y .client-modal-dialog usan var(--bg-surface), que en glass es
   rgba(255,255,255,.07) — casi transparente: el contenido de atrás se veía a
   través del modal. Fondo casi sólido para mantener la legibilidad. */
[data-theme="glass"] .modal,
[data-theme="glass"] .cf-box,
[data-theme="glass"] .client-modal-dialog,
[data-theme="glass"] .modal-content,
[data-theme="glass"] .dropdown-menu,
[data-theme="glass"] .notif-panel {
    background: rgba(18, 14, 48, .97);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 8px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}

[data-theme="glass"] .modal-header,
[data-theme="glass"] .modal-footer {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
}

/* ── Botones ────────────────────────────────────────────────────────────────── */
[data-theme="glass"] .btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-color: transparent;
    box-shadow: 0 2px 14px rgba(99, 102, 241, .45);
}

[data-theme="glass"] .btn-primary:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    box-shadow: 0 4px 22px rgba(99, 102, 241, .60);
    transform: translateY(-1px);
}

[data-theme="glass"] .btn-secondary,
[data-theme="glass"] .btn-ghost {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .14);
    color: var(--text-secondary);
}

[data-theme="glass"] .btn-secondary:hover,
[data-theme="glass"] .btn-ghost:hover {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .22);
    color: var(--text-primary);
}

[data-theme="glass"] .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(239, 68, 68, .35);
}

/* ── Formularios ────────────────────────────────────────────────────────────── */
[data-theme="glass"] .form-control,
[data-theme="glass"] .form-select {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .12);
    color: var(--text-primary);
}

[data-theme="glass"] select option {
    background-color: #0f0c29;
    color: #f1f5f9;
}

[data-theme="glass"] .form-control::placeholder {
    color: #475569;
}

[data-theme="glass"] .form-control:focus,
[data-theme="glass"] .form-select:focus {
    background: rgba(255, 255, 255, .11);
    border-color: rgba(99, 102, 241, .60);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .20);
    outline: none;
}

[data-theme="glass"] .form-control[readonly],
[data-theme="glass"] .form-control:disabled {
    background: rgba(255, 255, 255, .04);
    color: var(--text-muted);
    border-color: rgba(255, 255, 255, .07);
}

[data-theme="glass"] .input-group-text {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .12);
    color: var(--text-muted);
}

/* ── Tabla ──────────────────────────────────────────────────────────────────── */
[data-theme="glass"] .table thead th {
    background: rgba(255, 255, 255, .05);
    border-bottom-color: rgba(255, 255, 255, .10);
    color: var(--text-secondary);
}

[data-theme="glass"] .table tbody tr:hover {
    background: rgba(99, 102, 241, .10);
}

[data-theme="glass"] .table tbody td {
    border-bottom-color: rgba(255, 255, 255, .06);
}

/* ── Tabs ───────────────────────────────────────────────────────────────────── */
[data-theme="glass"] .tabs {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .10);
}

[data-theme="glass"] .tab-item {
    color: var(--text-muted);
}

[data-theme="glass"] .tab-item:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, .06);
}

[data-theme="glass"] .tab-item.active {
    color: #a5b4fc;
    border-bottom-color: #6366f1;
    background: rgba(99, 102, 241, .10);
}

/* ── Alertas / cfg-flash ────────────────────────────────────────────────────── */
[data-theme="glass"] .alert,
[data-theme="glass"] .cfg-flash-alert {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-md);
}

[data-theme="glass"] .alert-success,
[data-theme="glass"] .cfg-flash-alert.cfg-flash-success {
    background: rgba(16, 185, 129, .15);
    border-color: rgba(16, 185, 129, .30);
}

[data-theme="glass"] .alert-danger,
[data-theme="glass"] .cfg-flash-alert.cfg-flash-danger {
    background: rgba(239, 68, 68, .15);
    border-color: rgba(239, 68, 68, .30);
}

[data-theme="glass"] .alert-warning {
    background: rgba(245, 158, 11, .15);
    border-color: rgba(245, 158, 11, .30);
}

[data-theme="glass"] .alert-info {
    background: rgba(56, 189, 248, .15);
    border-color: rgba(56, 189, 248, .30);
}

/* ── Paginación ─────────────────────────────────────────────────────────────── */
[data-theme="glass"] .pagination-btn,
[data-theme="glass"] .page-link {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .12);
    color: var(--text-secondary);
}

[data-theme="glass"] .pagination-btn:hover,
[data-theme="glass"] .page-link:hover {
    background: rgba(99, 102, 241, .18);
    border-color: rgba(99, 102, 241, .40);
    color: #a5b4fc;
}

[data-theme="glass"] .pagination-btn--active,
[data-theme="glass"] .page-link.active {
    background: rgba(99, 102, 241, .35);
    border-color: rgba(99, 102, 241, .55);
    color: #c7d2fe;
}

/* ── Copy field / code block ────────────────────────────────────────────────── */
[data-theme="glass"] .copy-field,
[data-theme="glass"] .code-block {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .10);
}

[data-theme="glass"] .copy-field-btn {
    background: rgba(99, 102, 241, .18);
    border-color: rgba(99, 102, 241, .35);
    color: #a5b4fc;
}

[data-theme="glass"] .copy-field-btn:hover {
    background: rgba(99, 102, 241, .30);
}

/* ── Scrollbar ──────────────────────────────────────────────────────────────── */
[data-theme="glass"] ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .03);
}

[data-theme="glass"] ::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, .32);
    border-color: transparent;
}

[data-theme="glass"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, .52);
}

/* ── Toasts ─────────────────────────────────────────────────────────────────── */
[data-theme="glass"] .toast {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-md);
}

[data-theme="glass"] .toast.success {
    background: rgba(16, 185, 129, .20);
    border-color: rgba(16, 185, 129, .35);
}

[data-theme="glass"] .toast.error {
    background: rgba(239, 68, 68, .20);
    border-color: rgba(239, 68, 68, .35);
}

[data-theme="glass"] .toast.warning {
    background: rgba(245, 158, 11, .20);
    border-color: rgba(245, 158, 11, .35);
}

[data-theme="glass"] .toast.info {
    background: rgba(56, 189, 248, .20);
    border-color: rgba(56, 189, 248, .35);
}

/* ── Badges ─────────────────────────────────────────────────────────────────── */
[data-theme="glass"] .badge-success { background: rgba(16, 185, 129, .20); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, .30); }
[data-theme="glass"] .badge-danger  { background: rgba(239, 68, 68, .20);  color: #fca5a5; border: 1px solid rgba(239, 68, 68, .30); }
[data-theme="glass"] .badge-warning { background: rgba(245, 158, 11, .20); color: #fcd34d; border: 1px solid rgba(245, 158, 11, .30); }
[data-theme="glass"] .badge-info    { background: rgba(56, 189, 248, .20); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, .30); }
[data-theme="glass"] .badge-primary { background: rgba(99, 102, 241, .22); color: #c7d2fe; border: 1px solid rgba(99, 102, 241, .35); }
[data-theme="glass"] .badge-muted   { background: rgba(255, 255, 255, .08); color: #94a3b8; border: 1px solid rgba(255, 255, 255, .12); }

/* =============================================================================
   19. CODE / MONOSPACE
   ============================================================================= */

.code-block {
    background: var(--bg-overlay);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    overflow-x: auto;
    white-space: pre;
}

.code-value {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    background: var(--bg-overlay);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px var(--sp-2);
    color: var(--primary);
    letter-spacing: 1px;
}

/* Copy field */
.copy-field {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--bg-overlay);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
}

.copy-field-value {
    flex: 1;
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
    color: var(--primary);
    letter-spacing: 2px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.copy-field-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--sp-1);
    border-radius: var(--radius-sm);
    transition: color var(--transition);
    flex-shrink: 0;
}

.copy-field-btn:hover {
    color: var(--primary);
}

.copy-field-btn.copied {
    color: var(--success);
}

/* =============================================================================
   20. GRID UTILITIES
   ============================================================================= */

.grid {
    display: grid;
    gap: var(--sp-6);
}

/* minmax(0, 1fr) en vez de 1fr: permite que las columnas se encojan por debajo
   del ancho de su contenido. Sin esto, una cadena larga sin espacios (URL del
   cron, comando CLI) ensancha la columna y empuja las cajas fuera del bloque. */
.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

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

.items-start {
    align-items: flex-start;
}

.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: flex-end;
}

.gap-2 {
    gap: var(--sp-2);
}

.gap-3 {
    gap: var(--sp-3);
}

.gap-4 {
    gap: var(--sp-4);
}

.gap-6 {
    gap: var(--sp-6);
}

/* =============================================================================
   21. SPACING + TEXT UTILITIES
   ============================================================================= */

.mt-2 {
    margin-top: var(--sp-2);
}

.mt-4 {
    margin-top: var(--sp-4);
}

.mt-6 {
    margin-top: var(--sp-6);
}

.mb-4 {
    margin-bottom: var(--sp-4);
}

.mb-6 {
    margin-bottom: var(--sp-6);
}

.text-sm {
    font-size: var(--font-size-sm);
}

.text-xs {
    font-size: var(--font-size-xs);
}

.text-muted {
    color: var(--text-muted);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-accent {
    color: var(--primary);
}

.text-danger {
    color: var(--danger);
}

.text-success {
    color: var(--success);
}

.text-warning {
    color: var(--warning);
}

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

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

.font-mono {
    font-family: var(--font-mono);
}

.font-bold {
    font-weight: 700;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.truncate-sm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

.truncate-md {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.ml-1 {
    margin-left: var(--sp-1);
}

/* =============================================================================
   22. EMPTY STATE
   ============================================================================= */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-16) var(--sp-8);
    text-align: center;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: var(--sp-4);
    opacity: 0.4;
}

.empty-state--compact {
    padding: var(--sp-8) 0;
}

.empty-state-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--sp-2);
}

.empty-state-text {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    max-width: 360px;
    margin-bottom: var(--sp-6);
}

/* =============================================================================
   23. LOADING / SKELETON
   ============================================================================= */

.skeleton {
    background: linear-gradient(90deg,
            var(--bg-elevated) 25%,
            var(--bg-overlay) 50%,
            var(--bg-elevated) 75%);
    background-size: 200% 100%;
    animation: skeleton-load 1.4s ease infinite;
    border-radius: var(--radius-sm);
}

.spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-medium);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.spinner-sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.spinner-lg {
    width: 40px;
    height: 40px;
    border-width: 3px;
}

/* =============================================================================
   24. QUOTA BAR
   ============================================================================= */

.quota-bar {
    background: var(--bg-overlay);
    border-radius: var(--radius-full);
    height: 6px;
    overflow: hidden;
}

.quota-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius-full);
    transition: width var(--transition-md);
}

.quota-bar-fill.warning {
    background: var(--warning);
}

.quota-bar-fill.danger {
    background: var(--danger);
}

/* =============================================================================
   25. ANIMATIONS
   ============================================================================= */

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

@keyframes skeleton-load {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(20px);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

/* =============================================================================
   26. DASHBOARD
   ============================================================================= */

/* Stat card — column layout */
.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.stat-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-glow);
}

.stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}

.stat-card-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.stat-card-icon {
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.stat-card-icon.green {
    color: var(--success);
}

.stat-card-icon.blue {
    color: var(--info);
}

.stat-card-icon.yellow {
    color: var(--warning);
}

.stat-card-icon.red {
    color: var(--danger);
}

.stat-card-icon.purple {
    color: var(--purple);
}

.stat-card-icon.pink {
    color: var(--pink);
}

.stat-card-value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    font-family: var(--font-mono);
}

.stat-card-value.accent {
    color: var(--primary);
}

.stat-card-meta {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

/* Stats auto-fit grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-5);
}

/* Chart + Bot 2-col layout */
.dashboard-top {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--sp-6);
}

/* Chart */
.chart-wrapper {
    padding: var(--sp-6);
}

.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-2);
    height: 140px;
}

.chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chart-bar {
    width: 100%;
    background: var(--primary-dim);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    position: relative;
    min-height: 4px;
    transition: background var(--transition);
    cursor: default;
}

.chart-bar.today {
    background: var(--primary);
    border-color: var(--primary);
}

.chart-bar:hover {
    background: var(--primary);
}

.chart-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-overlay);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-primary);
    white-space: nowrap;
    z-index: 10;
}

.chart-bar:hover .chart-tooltip {
    display: block;
}

.chart-labels {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.chart-label {
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
}

.chart-label.today {
    color: var(--primary);
    font-weight: 600;
}

/* Bot panel */
.bot-status-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.bot-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bot-dot.running {
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
    animation: pulse 2s ease-in-out infinite;
}

.bot-dot.stopped {
    background: var(--text-muted);
}

.bot-indicator {
    font-size: var(--font-size-md);
    font-weight: 600;
    line-height: 1.2;
}

.bot-indicator.online {
    color: var(--success);
}

.bot-indicator.offline {
    color: var(--text-muted);
}

.bot-meta {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
    font-family: var(--font-mono);
}

.bot-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.bot-mini-stat {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
}

.bot-mini-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bot-mini-value {
    font-family: var(--font-mono);
    font-size: var(--font-size-md);
    font-weight: 700;
    margin-top: 2px;
    color: var(--text-primary);
}

/* Platform badge in table */
.platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-sm);
}

.platform-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pc, #888);
    flex-shrink: 0;
    display: inline-block;
}

/* Tabs bar (button version) */
.tabs-bar {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    padding: 0 var(--sp-6);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tabs-bar::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    padding: var(--sp-3) var(--sp-5);
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--transition), border-color var(--transition);
}

.tab-btn:hover {
    color: var(--text-primary);
}

.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Table empty cell */
.table-empty {
    padding: var(--sp-8) !important;
}

/* Card footer */
.card-footer {
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--border);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 4px var(--success);
    }

    50% {
        box-shadow: 0 0 12px var(--success);
    }
}


/* Hook/webhook diagnostics (movido desde el <style> de bot.php) */
.bot-hook-result {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bot-hook-result.is-ok  { color: var(--success, #00C853); }
.bot-hook-result.is-bad { color: var(--danger, #ef4444); }
.bot-hook-details {
    margin-top: 10px;
    padding: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.bot-hook-grid { display: grid; gap: 6px; }
.bot-hook-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px;
    font-size: 12px;
    align-items: start;
}
.bot-hook-label { color: var(--text-muted); font-weight: 600; }
.bot-hook-val {
    color: var(--text-primary);
    word-break: break-all;
    font-family: var(--font-mono);
}

/* =============================================================================
   27. USERS PAGE
   ============================================================================= */

/* Password input with eye toggle */
.pwd-wrap {
    position: relative;
}

.pwd-wrap .form-control {
    padding-right: 2.5rem;
}

.pwd-eye {
    position: absolute;
    right: var(--sp-3);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color var(--transition);
}

.pwd-eye:hover {
    color: var(--text-primary);
}

/* Modal size variants */
.modal-md {
    max-width: 560px;
    width: 100%;
}

/* Modal footer: primary button first */
.modal-footer-reverse {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--sp-3);
    justify-content: flex-start;
}

.btn-block-sm {
    flex: 1;
}

/* Super Admin badge in page title */
.badge-super {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: var(--sp-2);
    vertical-align: middle;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(99, 102, 241, .18);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, .35);
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* Search bar below card-header */
.resellers-search-bar {
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--border);
}

.resellers-search-wrap {
    position: relative;
    max-width: 380px;
}

.resellers-search-wrap .bi-search {
    position: absolute;
    left: var(--sp-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    pointer-events: none;
}

.resellers-search-wrap input {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    outline: none;
    padding: var(--sp-2) var(--sp-3) var(--sp-2) calc(var(--sp-3) * 2 + 1rem);
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.resellers-search-wrap input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.resellers-search-wrap input::placeholder {
    color: var(--text-muted);
}

/* Table: name bold */
.resellers-name {
    font-weight: 600;
    color: var(--text-heading);
}

/* Email + copy button inline */
.resellers-email-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Copy button */
.btn-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
    flex-shrink: 0;
}

.btn-copy:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Status pill badges */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-pill-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-pill-active {
    background: var(--success-bg, color-mix(in srgb, var(--primary) 12%, transparent));
    color: var(--success);
    border: 1px solid var(--success-bg, color-mix(in srgb, var(--primary) 12%, transparent));
}

.status-pill-active .status-pill-dot {
    background: var(--success);
}

.status-pill-pending {
    background: rgba(234, 179, 8, .12);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, .12);
}

.status-pill-pending .status-pill-dot {
    background: #eab308;
}

.status-pill-blocked {
    background: var(--danger-bg, rgba(239, 68, 68, .12));
    color: var(--danger);
    border: 1px solid var(--danger-bg, rgba(239, 68, 68, .12));
}

.status-pill-blocked .status-pill-dot {
    background: var(--danger);
}

/* Action icon buttons */
.table-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.tbl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition), opacity var(--transition);
    font-size: 13px;
}

.tbl-btn-warn {
    background: var(--warning-dim);
    color: var(--warning);
    border-color: var(--warning-dim);
}

.tbl-btn-warn:hover {
    background: rgba(255, 152, 0, .28);
}

.tbl-btn-success {
    background: var(--success-dim);
    color: var(--success);
    border-color: var(--success-dim);
}

.tbl-btn-success:hover {
    background: color-mix(in srgb, var(--primary) 28%, transparent);
}

.tbl-btn-edit {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    border-color: rgba(99, 102, 241, 0.12);
}

.tbl-btn-edit:hover {
    background: rgba(99, 102, 241, 0.25);
}

.tbl-btn-blue {
    background: var(--info-dim);
    color: var(--info);
    border-color: var(--info-dim);
}

.tbl-btn-blue:hover {
    background: rgba(41, 182, 246, .28);
}

.tbl-btn-danger {
    background: var(--danger-dim);
    color: var(--danger);
    border-color: var(--danger-dim);
}

.tbl-btn-danger:hover {
    background: rgba(244, 67, 54, .22);
}

.tbl-btn-detect {
    background: rgba(251, 140, 0, .12);
    color: #fb8c00;
    border-color: rgba(251, 140, 0, .12);
}
.tbl-btn-detect:hover {
    background: rgba(251, 140, 0, .25);
}

.plat-detect-dup-list {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .85rem;
}
.subject-tag-new {
    background: rgba(0, 200, 83, .12);
    color: var(--success);
    border-color: rgba(0, 200, 83, .25);
}

.plat-detect-section {
    margin-top: 14px;
}
.plat-detect-section-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.plat-detect-field-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.plat-detect-field-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    font-size: .85rem;
}
.plat-detect-field-label {
    font-weight: 700;
    color: var(--text-muted);
    min-width: 90px;
    flex-shrink: 0;
}
.plat-detect-field-val {
    color: var(--text-primary);
    word-break: break-all;
}

/* Table footer summary */
.resellers-table-footer {
    padding: var(--sp-2) var(--sp-5);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.resellers-table-footer strong {
    font-weight: 700;
    color: var(--text-primary);
}

.resellers-table-footer .text-success {
    color: var(--success) !important;
}

.resellers-table-footer .text-danger {
    color: var(--danger) !important;
}

.resellers-table-footer .text-primary {
    color: var(--primary) !important;
}

/* Role badge icons in page title */
.resellers-badge-icon {
    font-size: 9px;
}

.resellers-admin-badge {
    margin-left: 8px;
    vertical-align: middle;
    font-size: 11px;
}

/* Users table minimum width */
.resellers-table {
    min-width: 900px;
}

/* Empty state icon in table */
.resellers-empty-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: .5rem;
}

/* Filter count pushed to the right in footer */
.resellers-filter-count {
    margin-left: auto;
}

/* ── Import page ── */
.import-layout,
.import-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--sp-6);
    align-items: start;
}

.import-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: var(--sp-2);
}

.import-slugs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.import-req-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
}

.import-req-badge.req-yes {
    background: var(--danger-bg);
    border: 1px solid var(--danger-bg);
    color: var(--danger);
}

.import-req-badge.req-no {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.import-example-td {
    padding: 6px 14px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 11px;
}

.import-info-pill {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    font-size: var(--font-size-xs);
    color: var(--primary);
    margin-bottom: var(--sp-4);
}

.import-col-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
}

.import-req-yes,
.import-req-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
}

.import-req-yes {
    background: var(--danger-bg, rgba(239, 68, 68, .12));
    color: var(--danger);
    border: 1px solid var(--danger-bg, rgba(239, 68, 68, .12));
}

.import-req-no {
    background: var(--bg-elevated);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.import-example-block {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.import-example-header {
    padding: 6px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.import-example-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 11px;
}

.import-example-th {
    background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
    color: var(--primary) !important;
    font-weight: 700;
    white-space: nowrap;
}

.import-drop-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-10) var(--sp-5);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    margin-bottom: var(--sp-4);
}

.import-drop-zone:hover,
.import-drop-zone.drag-over {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.import-drop-zone.has-file {
    border-color: var(--primary);
}

.import-drop-icon {
    font-size: 2rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: var(--sp-3);
}

.import-drop-text {
    font-size: var(--font-size-xs);
    margin-bottom: var(--sp-1);
}

.import-drop-link {
    color: var(--primary);
    font-weight: 600;
}

.import-drop-hint {
    font-size: 11px;
    color: var(--text-muted);
}

.import-actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.import-info-warn {
    margin-top: var(--sp-3);
    background: rgba(255, 193, 7, .12);
    border-color: rgba(255, 193, 7, .4);
    color: #ffc107;
}

.import-dup-list {
    list-style: none;
    padding: 0;
    margin: var(--sp-2) 0 0;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-align: left;
    max-height: 120px;
    overflow-y: auto;
}

.import-dup-list li {
    padding: 2px 0;
}

.import-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.import-help-title-group {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.import-help-icon { font-size: 1.4rem; color: var(--text-accent); }
.import-help-subtitle { font-size: 11px; margin-top: 2px; }

.import-section-title {
    margin: var(--sp-4) 0 var(--sp-2);
    font-size: var(--font-size-sm);
}

.import-info-tip {
    background: rgba(33, 150, 243, .12);
    border-color: rgba(33, 150, 243, .35);
    color: #2196f3;
}

.import-help-sticky { position: sticky; top: var(--sp-4); }

.import-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border-medium);
    border-radius: 12px;
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.import-dropzone:hover,
.import-dropzone.is-drag {
    border-color: var(--text-accent);
    background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.import-dropzone-icon { font-size: 2.5rem; color: var(--text-accent); }
.import-dropzone-text { margin-top: 8px; }
.import-dropzone-hint { font-size: 11px; margin-top: 4px; color: var(--text-muted); }
.import-file-info { font-size: 12px; margin-top: 8px; color: var(--text-secondary); }

.import-result {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-top: var(--sp-4);
}

/* Secondary page-header (import sub-page within parent page) */
.import-sub-header {
    margin-top: 0;
}

.import-sub-title {
    font-size: 1.4rem;
}

/* Reference table wrapper margin and font size */
.import-ref-wrap {
    margin-bottom: var(--sp-4);
}

.import-ref-table {
    font-size: var(--font-size-xs);
}

/* Flex-fill button inside import-actions */
.import-btn-flex {
    flex: 1;
}

/* Last row in example table: no bottom border */
.import-td-last {
    border-bottom: none;
}

.import-result-ok {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--success);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}

.import-result-err {
    background: rgba(239, 68, 68, .1);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, .2);
}

.import-errors {
    margin: var(--sp-2) 0 0 0;
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    border-left: 2px solid var(--border);
    list-style: none;
}

.import-errors li {
    padding: 2px 0;
}

@media (max-width: 900px) {
    .import-layout {
        grid-template-columns: 1fr;
    }
}

/* Responsive: hide Plataformas, Activado, Último uso on sm */
@media (max-width: 768px) {

    #usersTable th:nth-child(6),
    #usersTable td:nth-child(6),
    #usersTable th:nth-child(7),
    #usersTable td:nth-child(7),
    #usersTable th:nth-child(8),
    #usersTable td:nth-child(8) {
        display: none;
    }

    .table-actions {
        gap: 4px;
    }

    .card-header > .flex,
    .card-header form.flex {
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
    }

    .card-header form.flex .resellers-search-wrap,
    .card-header form.flex .form-control {
        width: 100% !important;
    }

}

@media (max-width: 480px) {

    #usersTable th:nth-child(5),
    #usersTable td:nth-child(5) {
        display: none;
    }
}

/* =============================================================================
   28. SEARCH / CACHE PAGE
   ============================================================================= */

/* Layout */
.search-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--sp-6);
    align-items: start;
}

.search-sidebar {
    min-width: 0;
}

.search-main {
    min-width: 0;
}

/* Filter search input */
.search-input-wrap {
    position: relative;
}

.search-input-icon {
    position: absolute;
    left: var(--sp-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.search-input-padded {
    padding-left: calc(var(--sp-3) * 2 + 1rem);
}

/* Active filter badge */
.filter-active-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--font-size-xs);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
}

/* Code badge in table */
.code-badge {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    background: var(--bg-elevated);
    color: var(--primary);
    padding: 2px var(--sp-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    letter-spacing: .05em;
}

/* Maintenance rows */
.maint-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
}

.maint-row:last-child {
    border-bottom: none;
}

.maint-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.maint-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.maint-desc {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.maint-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

/* Small select */
.form-select-sm {
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--font-size-sm);
    height: auto;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--sp-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.pagination-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.pagination-btn.active {
    color: var(--primary);
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.pagination-info {
    white-space: nowrap;
}

/* Spin animation for sync button */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spin {
    display: inline-block;
    animation: spin .7s linear infinite;
}

/* Page header actions */
.page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* Mobile: sidebar hidden by default */
@media (max-width: 900px) {
    .search-layout {
        grid-template-columns: 1fr;
    }

    .search-sidebar {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 200;
        background: var(--bg-base);
        overflow-y: auto;
        padding: var(--sp-6);
    }

    .search-sidebar.open {
        display: block;
    }
}

/* =============================================================================
   29. CLIENTS PAGE
   ============================================================================= */

.client-url-card {
    margin-bottom: var(--sp-5);
}

.client-url-title {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--sp-1);
}

.client-url-desc {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: var(--sp-4);
}

.client-url-box {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-4);
}

.client-url-box .client-url-text {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-url-box .btn {
    flex-shrink: 0;
    margin-left: auto;
    white-space: nowrap;
}

.client-url-box-icon {
    color: var(--primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.client-url-text {
    font-size: var(--font-size-sm);
    color: var(--primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.client-code-cell {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.client-code-text {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    letter-spacing: .06em;
}

.client-etiqueta {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.client-notes {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.client-quota-usage {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.client-quota-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.client-unlimited-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    font-weight: 500;
}

.client-unlimited-label input[type="checkbox"] {
    accent-color: var(--primary);
    width: 15px;
    height: 15px;
}

@media (max-width: 768px) {

    #clientsTable th:nth-child(4),
    #clientsTable td:nth-child(4),
    #clientsTable th:nth-child(6),
    #clientsTable td:nth-child(6),
    #clientsTable th:nth-child(7),
    #clientsTable td:nth-child(7) {
        display: none;
    }
}

/* =============================================================================
   30. PLATFORMS PAGE
   ============================================================================= */

.platform-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
    gap: var(--sp-4);
    flex-wrap: wrap;
}

/* Filter tabs */
.platform-tabs {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
}

.platform-tab {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-ui);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--tab-color, #00C853), transparent 85%);
    border: 1px solid color-mix(in srgb, var(--tab-color, #00C853), transparent 73%);
    color: var(--tab-color, #00C853);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.platform-tab:hover {
    background: color-mix(in srgb, var(--tab-color, #00C853), transparent 75%);
}

.platform-tab.active {
    background: var(--tab-color, #00C853) !important;
    color: #fff !important;
    border-color: var(--tab-color, #00C853) !important;
}

/* Avatar */
.platform-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: .02em;
}

/* Drag handle */
.drag-handle {
    cursor: grab;
    color: var(--text-secondary);
    padding: 0 var(--sp-2);
    font-size: 1.1rem;
    opacity: 0;
    transition: opacity var(--transition);
    reseller-select: none;
    display: flex;
    align-items: center;
}

.drag-handle:active {
    cursor: grabbing;
}

#platformsTable tbody tr:hover .drag-handle {
    opacity: 1;
}

#platformsTable tbody tr .drag-handle {
    opacity: 0.25;
}

#platformsTable tbody tr.drag-over {
    background: color-mix(in srgb, var(--primary) 7%, transparent);
    outline: 1px dashed var(--primary);
}

#platformsTable tbody tr.dragging {
    opacity: .4;
}

/* Name / keywords */
.platform-name {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.platform-keywords {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

/* Slug */
.platform-slug {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--primary);
}

/* Category badges */
.platform-cat-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    white-space: nowrap;
}

.platform-cat-streaming,
.platform-cat-Streaming {
    background: rgba(29, 161, 242, .15);
    color: #29b6f6;
    border: 1px solid rgba(29, 161, 242, .25);
}

.platform-cat-musica,
.platform-cat-Musica,
.platform-cat-música {
    background: rgba(156, 39, 176, .15);
    color: #ce93d8;
    border: 1px solid rgba(156, 39, 176, .25);
}

.platform-cat-otro,
.platform-cat-Otro {
    background: rgba(120, 120, 120, .15);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    cursor: pointer;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 99px;
    transition: background var(--transition), border-color var(--transition);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--text-muted);
    border-radius: 50%;
    transition: transform var(--transition), background var(--transition);
}

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

.toggle-switch input:checked+.toggle-slider::before {
    transform: translateX(18px) translateY(-50%);
    background: #000;
}

/* Color picker swatches */
.color-swatches {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}

.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform var(--transition), border-color var(--transition);
    flex-shrink: 0;
}

.color-swatch:hover {
    transform: scale(1.15);
}

.color-swatch.selected {
    border-color: #fff;
    transform: scale(1.15);
}

.color-preview-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.color-preview-hex {
    display: none;
}

/* replaced by .color-hex-input */

.color-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, .2);
}

.color-hex-input {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    width: 88px;
    outline: none;
    transition: border-color var(--transition);
}

.color-hex-input:focus {
    border-color: var(--primary);
}

.badge-preview {
    display: inline-block;
    padding: 2px var(--sp-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: #fff;
}

/* Table column widths for drag handle and color avatar */
.plat-th-drag {
    width: 32px;
}

.plat-th-color {
    width: 48px;
}

/* Full-column form group inside modal grid */
.plat-full-col {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {

    #platformsTable th:nth-child(6),
    #platformsTable td:nth-child(6),
    #platformsTable th:nth-child(7),
    #platformsTable td:nth-child(7) {
        display: none;
    }

    .platform-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-top {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-md), width var(--transition-md);
    }

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

    .app-content {
        margin-left: 0 !important;
    }

    .topbar {
        left: 0 !important;
    }

    .app-footer {
        left: 0 !important;
        flex-wrap: wrap;
        gap: var(--sp-1);
        padding: var(--sp-2) var(--sp-4);
        text-align: center;
        justify-content: center;
    }

    .page-container {
        padding: var(--sp-4);
        padding-bottom: calc(var(--sp-12) + var(--sp-4));
        max-width: 100vw;
        /* auto en lugar de clip: si algo se desborda, se puede desplazar para
           verlo en vez de quedar cortado e inalcanzable. */
        overflow-x: auto;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .table-wrapper,
    .table-responsive {
        margin-inline: calc(var(--sp-4) * -1);
        padding-inline: var(--sp-4);
        scroll-padding-inline: var(--sp-4);
    }

    .table {
        font-size: var(--font-size-xs);
    }

    .table th,
    .table td {
        padding: var(--sp-3);
    }

    .card > .table-wrapper,
    .card > .table-responsive {
        margin-inline: 0;
        padding-inline: 0;
    }

    .cfg-tabs {
        padding: 0 0.25rem;
        margin-bottom: 1.25rem;
        border-radius: 0.75rem 0.75rem 0 0;
        scroll-padding-inline: 0.25rem;
    }

    .cfg-tabs .tab-item {
        padding: 0.875rem 0.95rem;
        font-size: 0.9rem;
    }

    .modal {
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .modal-overlay {
        align-items: flex-end;
    }

    .notif-panel {
        position: fixed;
        top: calc(var(--topbar-height, 56px) + var(--sp-2));
        left: var(--sp-4);
        right: var(--sp-4);
        width: auto;
        max-height: calc(100vh - var(--topbar-height, 56px) - var(--sp-4));
        overflow-y: auto;
    }

    .topbar-reseller-info {
        display: none;
    }

    .topbar-search {
        display: none;
    }

    .toast-container {
        left: var(--sp-4);
        right: var(--sp-4);
        bottom: var(--sp-4);
    }

    .toast {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-md: 0.9375rem;
    }

    .btn-lg {
        padding: var(--sp-3) var(--sp-5);
        font-size: var(--font-size-md);
    }
}

/* =============================================================================
   31. ALIAS PAGE
   ============================================================================= */

.alias-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.alias-tabs-wrap {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    min-width: 0;
    flex: 1;
}

.alias-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding-bottom: 2px;
}

.alias-tab {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.alias-tab:hover {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, .25);
}

.alias-tab.active {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
    color: var(--primary);
}

.alias-card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    min-width: 0;
}

.alias-search-bar {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
}

.alias-bulk-bar {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--danger-bg);
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.alias-bulk-count {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-primary);
}

.alias-bulk-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.alias-th-check,
.alias-td-check {
    width: 36px;
    padding-left: 16px !important;
}

.alias-checkbox {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--primary);
}

.alias-platform-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.alias-platform-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.alias-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.alias-count-user {
    background: rgba(99, 102, 241, .12);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, .3);
}

.alias-count-client {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--success);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}

.alias-detect-wrap {
    position: relative;
}

.alias-detect-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .4rem;
    font-size: .73rem;
    color: var(--primary);
    opacity: .85;
}

.alias-detect-badge i {
    font-size: .7rem;
}

.alias-ac-drop {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 300;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    max-height: 240px;
    overflow-y: auto;
}

/* Alias card title: prevent wrap when tabs overflow */
.alias-tabs-wrap .card-title {
    white-space: nowrap;
}

/* Read-only checkbox in alias table */
.alias-checkbox-ro {
    pointer-events: none;
}

/* Filter count pushed to the right in footer */
.alias-filter-count {
    margin-left: auto;
}

@media (max-width: 768px) {
    .alias-card-header {
        align-items: flex-start;
    }

    .alias-tabs-wrap,
    .alias-card-actions {
        width: 100%;
    }

    .alias-tabs-wrap {
        flex-wrap: wrap;
    }

    .alias-card-actions {
        justify-content: flex-start;
    }

    .alias-card-actions .btn {
        flex: 1 1 140px;
        min-width: 0;
    }

    #aliasTable {
        min-width: 720px;
    }
}

/* ── Subject tags ── */
.subject-tag-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-elevated);
    min-height: 52px;
}

.subject-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--sp-2);
}

.subject-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    color: var(--primary);
    font-size: 12px;
    font-weight: 500;
}

.subject-tag button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 15px;
    opacity: .6;
    transition: opacity .15s;
}

.subject-tag button:hover {
    opacity: 1;
}

.subject-input-row {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}

.subject-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 4px 0 !important;
    font-size: var(--font-size-xs);
    box-shadow: none !important;
}

.subject-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #000;
    border: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition), transform var(--transition);
}

.subject-add-btn:hover {
    background: #00e563;
    transform: scale(1.1);
}

/* =============================================================================
   CONFIRM DIALOG
   ============================================================================= */

.cf-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    transition: background var(--transition);
    padding: var(--sp-4);
}

.cf-overlay.cf-show {
    background: rgba(0, 0, 0, .6);
}

.cf-box {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 100%;
    max-width: 360px;
    padding: 36px 28px 28px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    transform: scale(.92) translateY(12px);
    opacity: 0;
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), opacity .2s;
}

.cf-overlay.cf-show .cf-box {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.cf-title {
    margin: 0 0 8px;
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text-primary);
}

.cf-desc {
    margin: 0 0 12px;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    line-height: 1.5;
}

.cf-note {
    margin: 0 0 20px;
    padding: .5rem .75rem;
    font-size: .75rem;
    color: var(--text-secondary);
    background: rgba(255,193,7,.07);
    border-left: 2px solid rgba(255,193,7,.5);
    border-radius: 4px;
    line-height: 1.5;
}

.cf-actions {
    display: flex;
    gap: 12px;
}

.cf-btn-cancel {
    flex: 1;
    padding: 10px;
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.cf-btn-cancel:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .25);
}

.cf-btn-confirm {
    flex: 1;
    padding: 10px;
    border-radius: var(--radius-lg);
    border: none;
    font-size: var(--font-size-sm);
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    transition: opacity var(--transition), transform var(--transition);
}

.cf-btn-confirm:hover {
    opacity: .88;
    transform: translateY(-1px);
}

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

.cf-btn-confirm.cf-type-danger {
    background: #dc2626;
}

.cf-btn-confirm.cf-type-warning,
.cf-btn-confirm.cf-type-block {
    background: #ca8a04;
    color: #fff;
}

.cf-btn-confirm.cf-type-info,
.cf-btn-confirm.cf-type-reset {
    background: #3b82f6;
}

.cf-btn-confirm.cf-type-success {
    background: var(--primary);
    color: #000;
}

.cf-btn-confirm.cf-type-edit {
    background: #6366f1;
}

/* =============================================================================
   IMAP page
   ============================================================================= */

/* Worker badge (header) */
.imap-worker-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    font-size: var(--font-size-xs);
}

.imap-worker-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #6b7280;
}

.imap-worker-offline .imap-worker-dot {
    background: #f59e0b;
}

.imap-worker-online .imap-worker-dot {
    background: var(--primary);
}

/* Collapsible add card */


/* Preset buttons */
.imap-preset-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.imap-preset-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid transparent;
    background: var(--bg-elevated);
    color: var(--text);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.imap-preset-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border);
}

.imap-preset-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* Add form grid */
.imap-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.imap-form-full {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .imap-form-grid {
        grid-template-columns: 1fr;
    }

    .imap-form-full {
        grid-column: 1;
    }
}

/* Icon inside input */
.imap-input-icon-wrap {
    position: relative;
}

.imap-input-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    font-size: 14px;
}

/* Eye button */
.imap-eye-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
    line-height: 1;
}

.imap-eye-btn:hover {
    color: var(--text);
}

/* Encryption row */
.imap-enc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-4);
}

/* Enc row sub-elements */
.imap-enc-label {
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.imap-enc-select {
    width: auto;
}

/* Preset icon provider colors */
.imap-preset-icon--gmail {
    background: #EA4335;
}

.imap-preset-icon--outlook {
    background: #0078D4;
}

.imap-preset-icon--yahoo {
    background: #6001D2;
}

.imap-preset-icon--custom {
    background: #6366f1;
}

/* Input with left icon — padding */
.imap-input-pl {
    padding-left: 36px;
}

.imap-input-plr {
    padding-left: 36px;
    padding-right: 42px;
}

/* Real-time status card */
.imap-rt-card {
    margin-bottom: var(--sp-5);
}

.imap-rt-card-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.imap-icon-primary {
    color: var(--primary);
}

.imap-rt-body {
    padding: var(--sp-4) var(--sp-5);
}

.imap-rt-panel-icon {
    color: var(--text-muted);
    font-size: 13px;
}

.imap-rt-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.imap-idle-count {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.imap-idle-label {
    font-size: 11px;
    color: var(--text-muted);
}

/* Push notification panel */
.imap-push-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.imap-push-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.imap-push-desc {
    font-size: 11px;
    color: var(--text-muted);
}

.imap-toggle-shrink {
    flex-shrink: 0;
}

/* Worker URL panel */
.imap-worker-url-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 8px;
}

.imap-worker-url-warn {
    font-size: var(--font-size-xs);
    color: var(--warning);
}

.imap-worker-url-warn a {
    color: var(--warning);
    font-weight: 600;
}

/* Search bar */
.imap-search-max {
    max-width: 380px;
}

.imap-filter-count {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Empty state */
.imap-empty-state {
    text-align: center;
    padding: var(--sp-10) 0;
    color: var(--text-muted);
}

.imap-empty-icon {
    font-size: 40px;
    opacity: .3;
    display: block;
    margin-bottom: var(--sp-3);
}

/* Table cell helpers */
.imap-table td.imap-col-sync {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.imap-table td.imap-col-active,
.imap-table td.imap-col-autoalias {
    text-align: center;
}

.imap-table th.imap-col-active,
.imap-table th.imap-col-autoalias {
    text-align: center;
}

.imap-font-mono-badge {
    font-family: var(--font-mono);
}

.imap-action-row {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

/* Table footer stats */
.imap-stat-sep {
    color: var(--border);
}

.imap-stat-total {
    color: var(--text);
}

.imap-stat-err {
    color: var(--danger);
}

/* Real-time status — 3-panel grid */
.imap-rt-grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

/* Real-time status — 2-panel grid */
.imap-rt-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}

@media (max-width: 860px) {
    .imap-rt-grid3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 540px) {

    .imap-rt-grid3,
    .imap-rt-grid2 {
        grid-template-columns: 1fr;
    }
}

.imap-rt-panel {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
}

.imap-rt-panel-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-3);
}

.imap-rt-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-muted);
    font-weight: 600;
}

.imap-rt-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6b7280;
    flex-shrink: 0;
    transition: background .4s;
}

.imap-rt-dot-warn {
    background: #f59e0b;
}

.imap-rt-dot-ok {
    background: var(--primary);
}

.imap-rt-dot-err {
    background: var(--danger);
}

.imap-rt-status {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text);
}

.imap-rt-detail {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Colored action buttons (table) */
.imap-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-size: 13px;
    transition: opacity .15s;
}

.imap-action-btn:hover {
    opacity: .8;
}

.imap-action-btn.loading {
    opacity: .5;
    pointer-events: none;
}

.imap-action-test {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}

.imap-action-sync {
    background: rgba(245, 158, 11, .12);
    color: #f59e0b;
}

.imap-action-edit {
    background: rgba(99, 102, 241, .12);
    color: #6366f1;
}

.imap-action-delete {
    background: rgba(239, 68, 68, .12);
    color: var(--danger);
}

/* Encryption badges */
.imap-badge-ssl {
    color: #00c853;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.imap-badge-tls {
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, .3);
    background: rgba(99, 102, 241, .1);
}

.imap-badge-none {
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, .3);
    background: rgba(107, 114, 128, .1);
}

/* Table */
.imap-table {
    table-layout: auto;
}

.imap-error-hint {
    color: var(--danger);
    margin-top: 2px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

/* Responsive column hiding */
@media (max-width: 1200px) {
    .imap-col-autoalias {
        display: none;
    }
}

@media (max-width: 1100px) {

    .imap-col-sync,
    .imap-col-folder {
        display: none;
    }
}

@media (max-width: 900px) {

    .imap-col-port,
    .imap-col-enc {
        display: none;
    }
}

@media (max-width: 700px) {
    .imap-col-server {
        display: none;
    }
}

/* cfg-row — fila de configuración con toggle */
.cfg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--border);
}
.cfg-row:last-child { border-bottom: none; }
.cfg-row--column {
    flex-direction: column;
    align-items: flex-start;
}
.cfg-row-info { display: flex; flex-direction: column; gap: 2px; }
.cfg-row-label { font-size: 14px; font-weight: 600; color: var(--text); }
.cfg-row-desc  { font-size: 12px; color: var(--text-muted); }

/* imap-token-wrap — input URL + botones */
.imap-token-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    margin-top: var(--sp-2);
}
.imap-token-input {
    flex: 1;
    min-width: 0;
    font-size: 12px;
}

/* cron guide */
.cfg-row--cron { gap: var(--sp-4); }

.cron-guide-block {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
}

/* Variante colapsable basada en <details> */
.cron-guide-details {
    padding: 0;
}
.cron-guide-details > .cron-guide-summary {
    list-style: none;
    cursor: pointer;
    padding: var(--sp-3) var(--sp-4);
    reseller-select: none;
    border-radius: var(--radius-md);
    transition: background .15s;
}
.cron-guide-details > .cron-guide-summary::-webkit-details-marker {
    display: none;
}
.cron-guide-details > .cron-guide-summary:hover {
    background: color-mix(in srgb, var(--text-accent) 4%, transparent);
}
.cron-guide-details > .cron-guide-summary > span {
    flex: 1;
}
.cron-guide-chevron {
    transition: transform .2s;
    color: var(--text-muted);
    font-size: 14px;
}
.cron-guide-details[open] > .cron-guide-summary > .cron-guide-chevron {
    transform: rotate(180deg);
}
.cron-guide-details[open] > .cron-guide-summary {
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.cron-guide-details > :not(.cron-guide-summary) {
    padding: var(--sp-4);
    padding-top: var(--sp-3);
}

.cron-guide-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--sp-3);
}

.cron-guide-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
}

/* pasos */
.cron-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.cron-steps li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}
.cron-step-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.cron-step-body {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}
.cron-step-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 4px;
}

/* comando curl */
.cron-cmd-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.cron-cmd {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    color: var(--text);
    /* Envolver el comando: nunca se sale del cuadro y el botón de copiar queda
       siempre dentro. Más responsivo que el scroll horizontal. Al copiar se obtiene
       el comando en una sola línea (textContent), aunque visualmente se vea envuelto. */
    white-space: pre-wrap;
    word-break: break-all;
    background: none;
    border: none;
    outline: none;
    user-select: all;
}
.cron-cmd-copy {
    flex-shrink: 0;
    padding: 2px 6px;
    font-size: 12px;
}

/* resultado del test */
.cron-test-result {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
}
.cron-test-ok  { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 25%, transparent); }
.cron-test-err { background: color-mix(in srgb, var(--danger)  12%, transparent); color: var(--danger);  border: 1px solid color-mix(in srgb, var(--danger)  25%, transparent); }
.cron-test-date { opacity: 0.7; margin-left: var(--sp-2); }

/* tip */
.cron-tip {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    width: 100%;
    background: color-mix(in srgb, var(--warning, #f59e0b) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 25%, transparent);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    font-size: 12px;
    color: var(--text);
    line-height: 1.5;
}
.cron-tip-icon {
    color: var(--warning, #f59e0b);
    font-size: 16px;
    margin-top: 1px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .imap-token-wrap { flex-wrap: wrap; }
    .imap-token-input { min-width: 100%; }
    /* Antes: .cron-cmd-wrap { overflow-x: scroll } desplazaba toda la fila y
       empujaba el botón de copiar fuera de pantalla. Ahora solo scrollea el
       <code> (regla base), dejando el botón siempre visible. */
}

/* reception mode selector */
.reception-mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    width: 100%;
    margin-top: var(--sp-2);
}
@media (max-width: 700px) {
    .reception-mode-grid { grid-template-columns: 1fr; }
}

.reception-mode-card {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    position: relative;
    background: var(--bg-surface);
}
.reception-mode-card:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 4%, var(--bg-surface));
}
.reception-mode-card--active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, var(--bg-surface));
}
.reception-mode-radio { display: none; }

.reception-mode-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-top: 2px;
}
.reception-mode-icon--cron   { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.reception-mode-icon--worker { background: color-mix(in srgb, #f59e0b 12%, transparent); color: #f59e0b; }

.reception-mode-body { flex: 1; min-width: 0; }
.reception-mode-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.reception-mode-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: var(--sp-2);
}
.reception-mode-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.reception-mode-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
}
.reception-mode-tag--ok      { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.reception-mode-tag--warn    { background: color-mix(in srgb, var(--warning, #f59e0b) 12%, transparent); color: var(--warning, #f59e0b); }
.reception-mode-tag--primary { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }

.reception-mode-check {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--primary);
    opacity: 0;
    transition: opacity .15s;
}
.reception-mode-card--active .reception-mode-check { opacity: 1; }
.reception-mode-icon--ok { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); }

/* Sección avanzada IMAP */
.imap-advanced-toggle {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; margin-top: 12px;
    background: var(--bg-hover); border: 1px solid var(--border);
    border-radius: var(--radius); cursor: pointer;
    font-size: .85rem; color: var(--text-muted);
    transition: color .15s, border-color .15s;
    reseller-select: none;
}
.imap-advanced-toggle:hover { color: var(--text); border-color: var(--primary); }
.imap-advanced-toggle-icon { font-size: 1rem; color: var(--primary); }
.imap-advanced-chevron { margin-left: auto; font-size: .8rem; transition: transform .2s; }
.imap-advanced-section { margin-top: 12px; }
.imap-advanced-hint {
    font-size: .8rem; color: var(--text-muted);
    margin-bottom: 10px; padding: 8px 12px;
    background: color-mix(in srgb, var(--warning, #f59e0b) 10%, transparent);
    border-left: 3px solid var(--warning, #f59e0b);
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* ─── Health card de recepción IMAP ─── */
.health-card {
    border-left: 4px solid var(--border);
    transition: border-color .2s, background .2s;
}
.health-card-body {
    padding: var(--sp-4) var(--sp-5);
}
.health-status {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.health-status-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}
.health-status-text { flex: 1; min-width: 0; }
.health-status-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
}
.health-status-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.health-repair-btn { flex-shrink: 0; }
.health-triggers {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.health-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: .5;
}
.health-trigger.is-on {
    opacity: 1;
    color: var(--success, #00C853);
    font-weight: 600;
}

.health-card--healthy { border-left-color: var(--success, #00C853); }
.health-card--healthy .health-status-icon { color: var(--success, #00C853); }
.health-card--delayed { border-left-color: var(--warning, #f59e0b); background: color-mix(in srgb, var(--warning, #f59e0b) 5%, transparent); }
.health-card--delayed .health-status-icon { color: var(--warning, #f59e0b); }
.health-card--broken  { border-left-color: var(--danger, #ef4444); background: color-mix(in srgb, var(--danger, #ef4444) 7%, transparent); }
.health-card--broken .health-status-icon { color: var(--danger, #ef4444); }
.health-card--idle    { border-left-color: var(--info, #2196f3); }
.health-card--idle .health-status-icon { color: var(--info, #2196f3); }
.health-card--paused  { border-left-color: var(--text-muted); }
.health-card--paused .health-status-icon { color: var(--text-muted); }

/* Sección plegable (Cron/Worker) */
.cfg-collapsible[open] > summary > .cfg-collapse-chevron {
    transform: rotate(90deg);
}
.cfg-collapse-chevron {
    transition: transform .2s;
    color: var(--text-muted);
}

/* ─── Opciones avanzadas IMAP (details unificado) ─── */
.cfg-advanced {
    margin-top: var(--sp-5);
    border-top: 1px solid var(--border);
    padding-top: var(--sp-3);
}
.cfg-advanced > .cfg-advanced-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    list-style: none;
    reseller-select: none;
    border-radius: var(--radius-md);
    transition: background .15s;
    color: var(--text-primary);
    font-weight: 600;
}
.cfg-advanced > .cfg-advanced-summary::-webkit-details-marker { display: none; }
.cfg-advanced > .cfg-advanced-summary:hover { background: color-mix(in srgb, var(--text-accent) 5%, transparent); }
.cfg-advanced-chevron {
    margin-left: auto;
    transition: transform .2s;
    color: var(--text-muted);
}
.cfg-advanced[open] > .cfg-advanced-summary > .cfg-advanced-chevron { transform: rotate(180deg); }
.cfg-advanced-body {
    padding: var(--sp-4) var(--sp-3) 0;
    margin-top: var(--sp-2);
    border-top: 1px dashed var(--border);
}
.cfg-advanced-h {
    margin: 0 0 var(--sp-2);
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.cfg-advanced-h i { color: var(--text-accent); }

/* ─── Flujo de mantenimiento del buzón ─── */
.maint-flow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
}
.maint-step {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    transition: opacity .2s;
}
.maint-step-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.maint-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--text-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}
.maint-step-title { font-weight: 600; color: var(--text-primary); }
.maint-step-body {
    color: var(--text-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.maint-inline-input { width: 70px !important; display: inline-block !important; }
.maint-folder-input { width: 200px !important; display: inline-block !important; font-family: var(--font-mono); font-size: 12px !important; }
.maint-arrow {
    display: flex;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.1rem;
    padding: 4px 0;
}

/* Tabla log de rendimiento IMAP */
.imap-perf-table th, .imap-perf-table td { padding: 6px 12px; font-size: .8rem; }
.imap-perf-table .text-right { text-align: right; }
.imap-perf-table .text-center { text-align: center; }
.imap-perf-ms { color: var(--text); }
.imap-perf-new { color: var(--primary); font-weight: 600; }
.imap-perf-err { color: var(--danger); font-weight: 600; }

/* imap logs — tab badge */
.tab-badge { font-size: .65rem; padding: 1px 5px; margin-left: 4px; vertical-align: middle; }
/* reset button appearance for tab-item used as <button> */
button.tab-item { background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit; font-size: var(--font-size-sm); }

/* imap logs — error table */
.imap-error-table th, .imap-error-table td { padding: 6px 12px; font-size: .8rem; }
.imap-err-msg { max-width: 380px; word-break: break-word; }
.imap-err-row--resolved td { opacity: .6; }
.imap-err-row--active td { background: rgba(var(--danger-rgb, 220,53,69), .04); }

/* imap logs — empty states */
.imap-logs-empty { padding: 3rem; text-align: center; color: var(--text-muted); }
.imap-logs-empty-icon { font-size: 2rem; display: block; margin-bottom: .75rem; }
.imap-logs-perf-disabled { padding: 4rem 1rem; text-align: center; }

/* worker status badge (inline en título) */
.worker-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}
.worker-status-badge--online  { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.worker-status-badge--offline { background: color-mix(in srgb, var(--text-muted) 12%, transparent); color: var(--text-muted); border: 1px solid var(--border); }

.worker-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}
.worker-status-badge--online .worker-status-dot {
    animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

/* worker status row en sección worker */
.worker-status-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.worker-status-indicator {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 14px;
}
.worker-status-dot-lg {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}
.worker-status-indicator--online  strong { color: var(--success); }
.worker-status-indicator--online  .worker-status-dot-lg { background: var(--success); animation: pulse-dot 1.8s ease-in-out infinite; }
.worker-status-indicator--offline strong { color: var(--text-muted); }
.worker-status-detail { font-size: 12px; color: var(--text-muted); }

/* env block multiline */
/* El .env del worker es multilínea: preservar saltos Y envolver líneas largas
   para que se vean APP_URL y WORKER_SECRET completas (no cortadas). */
.worker-env-block .cron-cmd {
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: visible;
}

/* =============================================================================
   SYSTEM STATUS PAGE
   ============================================================================= */

.sys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--sp-5);
    align-items: start;
}

.sys-card-full {
    grid-column: 1 / -1;
}

.sys-card-full--mb {
    margin-bottom: var(--sp-5);
}

.sys-alert {
    margin-bottom: var(--sp-4);
}

.sys-text-xs {
    font-size: var(--font-size-xs);
}

.sys-card-body {
    display: flex;
    flex-direction: column;
}

/* Diagnostic rows */
.sys-check-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--font-size-xs);
}

.sys-check-row:last-child {
    border-bottom: none;
}

.sys-icon-ok {
    color: var(--success);
    font-size: 13px;
    flex-shrink: 0;
}

.sys-icon-err {
    color: var(--danger);
    font-size: 13px;
    flex-shrink: 0;
}

.sys-check-label {
    flex: 1;
    color: var(--text-primary);
}

.sys-check-detail {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    text-align: right;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* PHP info / DB table rows */
.sys-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--font-size-xs);
    gap: var(--sp-3);
}

.sys-info-row:last-child {
    border-bottom: none;
}

.sys-info-label {
    color: var(--text-secondary);
}

.sys-value-primary {
    font-family: var(--font-mono);
    color: var(--primary);
    font-size: 10px;
    text-align: right;
}

.sys-value-mono {
    font-family: var(--font-mono);
    color: var(--primary);
    font-size: 10px;
    text-align: right;
}

/* DB table rows */
.sys-table-name {
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

.sys-table-meta {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    flex-shrink: 0;
}

.sys-table-rows {
    color: var(--text-muted);
    font-size: 10px;
}

.sys-table-size {
    font-family: var(--font-mono);
    color: var(--primary);
    font-size: 10px;
}

/* Backup section */
.sys-backup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}

.sys-backup-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.sys-backup-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.sys-backup-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.sys-backup-icon-db {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}

.sys-backup-icon-zip {
    background: rgba(245, 158, 11, .12);
    color: #f59e0b;
}

.sys-backup-title {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.sys-backup-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.sys-backup-last {
    font-size: 11px;
    color: var(--text-muted);
}

.sys-backup-date {
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.sys-backup-btn {
    width: 100%;
    justify-content: center;
}

@media (max-width: 700px) {
    .sys-backup-grid {
        grid-template-columns: 1fr;
    }
}

.sys-clean-selectall {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}
.sys-clean-selectall input {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
}

.sys-clean-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.sys-clean-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.sys-clean-item:has(input:checked) {
    border-color: var(--danger, #dc3545);
    background: color-mix(in srgb, var(--danger, #dc3545) 8%, transparent);
}
.sys-clean-item input[type="checkbox"] {
    accent-color: var(--danger, #dc3545);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.sys-clean-info {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.sys-clean-icon {
    font-size: 1.2rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.sys-clean-label {
    font-size: .85rem;
    font-weight: 600;
}
.sys-clean-desc {
    font-size: .75rem;
    color: var(--text-muted);
}
.sys-clean-actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 480px) {
    .sys-check-detail {
        max-width: 120px;
    }
}

/* =============================================================================
   TOOLS PAGE
   ============================================================================= */

/* Card body flex layout for tools */
.tools-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

/* Tag chips (platform / country / special quick-pick) */
.tag-chip {
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
}

.tag-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.tag-chip.active {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

/* Field grids */
.tools-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}

.tools-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--sp-3);
}

/* Abbreviation editor panel */
.tools-abbr-editor {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    margin-bottom: var(--sp-2);
}

.tools-abbr-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: var(--sp-3);
}

.tools-abbr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.tools-abbr-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.tools-abbr-name {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    min-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tools-abbr-input {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    padding: 4px 8px !important;
    width: 80px !important;
}

.tools-abbr-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

/* Tab bar (Personalizado / Aleatorio) */
.tools-tab-bar {
    display: flex;
    gap: var(--sp-2);
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-4);
}

/* Order chips */
.tools-order-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: var(--sp-2);
    display: block;
}

.tools-order-label span {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.tools-order-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

.order-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: grab;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    reseller-select: none;
    transition: border-color .15s, color .15s;
}

.order-chip:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.order-chip.drag-over {
    border-color: var(--primary);
}

/* Mono inputs */
.tools-mono {
    font-family: var(--font-mono);
}

/* Tag rows below inputs */
.tools-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--sp-2);
}

.tools-count-field {
    max-width: 200px;
    margin-top: var(--sp-5);
    margin-bottom: var(--sp-4);
}

.tools-count-field .form-label {
    margin-bottom: var(--sp-2);
}

/* Preview bar */
.tools-preview-bar {
    display: none;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-4);
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    transition: border-color .2s;
    margin-top: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.tools-preview-bar.has-result {
    display: flex;
    border-color: var(--primary);
}

.tools-preview-result {
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    color: var(--primary);
    font-weight: 700;
    min-width: 0;
    word-break: break-all;
    flex: 1;
}

/* Generated result rows */
.tools-result-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.tools-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px 14px;
}

.tools-result-email {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--primary);
    font-weight: 700;
    min-width: 0;
    word-break: break-all;
}

.tools-result-pw {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: 700;
    min-width: 0;
    word-break: break-all;
    letter-spacing: 1px;
}

.tools-result-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Export bar */
.tools-export-bar {
    margin-top: var(--sp-3);
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
}

/* Section label (INCLUIR, etc.) */
.tools-section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: var(--sp-2);
    display: block;
}

/* Checkbox group */
.tools-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.tools-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.tools-checkbox-label input[type="checkbox"] {
    accent-color: var(--primary);
    width: 15px;
    height: 15px;
}

.tools-checkbox-hint {
    font-family: var(--font-mono);
    color: var(--text-muted);
}

/* Range slider hints */
.tools-slider-hints {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-top: 2px;
}

.tools-slider-hints .hint-center {
    color: var(--primary);
}

/* Full-width generate button */
.tools-btn-generate {
    width: 100%;
    margin-top: var(--sp-1);
    padding: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Range slider accent */
.tools-range {
    width: 100%;
    accent-color: var(--primary);
    cursor: pointer;
}

/* Optional label weight */
.tools-optional {
    font-weight: 400;
}

/* Custom domain input (hidden by default, JS-shown; adds spacing) */
.tools-domain-custom {
    display: none;
    margin-top: 6px;
}

/* Primary-colored inline label text */
.tools-primary-text {
    color: var(--primary);
}

/* Spacing utilities for tools sections */
.tools-mt-2 {
    margin-top: var(--sp-2);
}

.tools-mt-3 {
    margin-top: var(--sp-3);
}

.tools-mb-3 {
    margin-bottom: var(--sp-3);
}

.tools-mb-4 {
    margin-bottom: var(--sp-4);
}

/* Responsive */
@media (max-width: 600px) {
    .tools-grid-2 {
        grid-template-columns: 1fr;
    }

    .tools-grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 400px) {
    .tools-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   BOT TELEGRAM PAGE
   ============================================================================= */

/* Tab bar */
.bot-tabs-wrap {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-5);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.bot-tabs-wrap::-webkit-scrollbar { display: none; }

.bot-tab-list {
    display: contents;
}

.bot-tab {
    flex: 0 0 auto;
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: -1px;
    text-decoration: none;
    font-family: var(--font-ui);
}

.bot-tab:hover {
    color: var(--text-primary);
}

.bot-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.bot-tab-panel {
    display: none;
    padding: var(--sp-6);
}

.bot-tab-panel.active {
    display: block;
}

/* Two-column grid layouts */
.bot-tab-grid {
    display: grid;
    gap: var(--sp-6);
    align-items: start;
}

.bot-tab-grid.col-320 {
    grid-template-columns: 1fr 320px;
}

.bot-tab-grid.col-360 {
    grid-template-columns: 1fr 360px;
}

.bot-tab-grid.col-300 {
    grid-template-columns: 1fr 300px;
}

.bot-tab-grid.col-450 {
    grid-template-columns: 1fr 450px;
}

.bot-sticky {
    position: sticky;
    top: calc(var(--topbar-h, 60px) + var(--sp-4));
}

/* Status badge */
.bot-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.bot-running {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}

.bot-stopped {
    background: rgba(239, 68, 68, .12);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, .3);
}

/* Pulse dot */
.bot-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    animation: botPulse 1.6s ease-in-out infinite;
}

@keyframes botPulse {

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

    50% {
        opacity: .45;
        transform: scale(.7);
    }
}

.bot-stopped-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    flex-shrink: 0;
}

/* Bot info line */
.bot-info-name {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text-primary);
}

.bot-info-id {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* Stats grid */
.bot-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
    margin-top: var(--sp-5);
}

.bot-stat-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.bot-stat-key {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.bot-stat-val {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.bot-stat-val.ok {
    color: var(--primary);
}

.bot-stat-val.warn {
    color: #f59e0b;
}

.bot-stat-val.err {
    color: var(--danger);
}

/* Live log */
.bot-log-wrap {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: var(--sp-4);
}

.bot-log-body {
    height: 340px;
    overflow-y: auto;
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--font-mono);
    font-size: 12px;
}

.bot-log-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 0;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.6;
}
.bot-log-line-time {
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 36px;
}
.bot-log-line-icon {
    flex-shrink: 0;
    width: 12px;
    text-align: center;
}
.bot-log-line-msg {
    flex: 1;
    word-break: break-word;
}
.bot-log-line--ok    { color: var(--primary); }
.bot-log-line--auth  { color: var(--primary); }
.bot-log-line--warn  { color: #f59e0b; }
.bot-log-line--error { color: var(--danger); }
.bot-log-line--beat  { color: var(--text-muted); font-style: italic; }
.bot-log-line--start { color: #60a5fa; }

.bot-log-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 340px;
    gap: var(--sp-2);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    padding-top: var(--sp-16);
}

/* Steps guide */
.bot-steps {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.bot-step-row {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
}

.bot-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.bot-step-body {
    flex: 1;
    min-width: 0;
}

.bot-step-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.bot-step-desc {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    line-height: 1.5;
}

/* Code block */
.bot-code-block {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-10) var(--sp-3) var(--sp-4);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--primary);
    margin-top: var(--sp-2);
    word-break: break-all;
}

.bot-copy-btn {
    position: absolute;
    right: var(--sp-2);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: color var(--transition);
    display: flex;
    align-items: center;
}

.bot-copy-btn:hover {
    color: var(--text-primary);
}

/* Stop section */
.bot-stop-section {
    border: 1px solid rgba(239, 68, 68, .3);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    background: rgba(239, 68, 68, .04);
    margin-top: var(--sp-4);
}

.bot-stop-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--danger);
    margin-bottom: var(--sp-2);
}

/* Commands table */
.bot-cmd-table {
    width: 100%;
    border-collapse: collapse;
}

/* La regla global .table-wrapper > .table fuerza min-width:max-content, que en
   esta tabla informativa empuja la descripción fuera de pantalla. Aquí dejamos
   que la descripción envuelva (el comando sigue en una línea por su nowrap). */
.table-wrapper > .bot-cmd-table {
    min-width: 0;
}
.bot-cmd-table td:last-child {
    white-space: normal;
}

.bot-cmd-table th,
.bot-cmd-table td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: var(--font-size-sm);
}

.bot-cmd-table th {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
    background: var(--bg-elevated);
}

.bot-cmd-table tr:last-child td {
    border-bottom: none;
}

.bot-cmd-table td:first-child {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}

.bot-cmd-table td:last-child {
    color: var(--text-muted);
}

/* Sub-tabs inside Configuración */
.bot-subtab-wrap {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--sp-2);
    /* envolver las subpestañas (Webhook / Python / Bot Remoto) en vez de
       desplazarlas: en móvil quedaban cortadas a ambos lados. */
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.bot-subtab {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
}

.bot-subtab:hover {
    color: var(--text-primary);
    background: var(--bg-elevated);
}

.bot-subtab.active {
    color: var(--text-accent);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

.bot-subtab-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--success, #00c853);
    letter-spacing: .03em;
}

.bot-subtab-badge--dev {
    background: rgba(255, 167, 38, .15);
    color: var(--warning, #ffa726);
}

.bot-subtab-panel {
    display: none;
}

.bot-subtab-panel.active {
    display: block;
}

/* Webhook card */
.bot-webhook-card {
    margin-top: var(--sp-5);
}

.bot-webhook-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.bot-webhook-card-title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.bot-webhook-icon {
    font-size: 1.4rem;
    color: var(--text-accent);
}

.bot-webhook-subtitle {
    font-size: 11px;
    margin-top: 2px;
}

.bot-status-badge--sm {
    font-size: 11px;
}

.bot-webhook-warn {
    margin-bottom: var(--sp-4);
}

.bot-webhook-url-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bot-webhook-badge {
    font-size: 10px;
}

.bot-webhook-url-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.bot-webhook-url-input {
    flex: 1 1 220px;
    /* min-width:0 (no 280px): en pantallas angostas un mínimo fijo empuja el
       input fuera del bloque y desborda toda la página horizontalmente. */
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 12px;
}

.bot-webhook-steps {
    margin-top: var(--sp-5);
}

.bot-step-action-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.bot-webhook-tip {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: rgba(33, 150, 243, .12);
    border: 1px solid rgba(33, 150, 243, .35);
    color: #2196f3;
    border-radius: var(--radius-md);
    font-size: 13px;
}

.bot-webhook-details {
    margin-top: var(--sp-4);
}

.bot-webhook-details-summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13px;
}

.bot-webhook-details-body {
    padding: var(--sp-3) 0;
}

.bot-webhook-details-hint {
    font-size: 12px;
    margin-bottom: 8px;
}

.btn-danger-ghost {
    color: var(--danger);
}

.bot-hook-result--inline {
    margin-left: 8px;
}

/* Bot status card body */
.bot-status-card {
    margin-bottom: var(--sp-4);
}

.bot-status-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

.bot-status-card-left {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.bot-status-btn-row {
    display: flex;
    gap: var(--sp-2);
}

/* Bot log header */
.bot-log-header-btns {
    display: flex;
    gap: var(--sp-2);
}

.bot-log-btn {
    font-size: 11px;
    padding: 2px 8px;
}

.bot-log-btn-clear {
    color: var(--danger);
}

.bot-log-icon {
    font-size: 11px;
}

.bot-card-body-no-pt {
    padding-top: 0;
}

/* Bot token form */
.bot-token-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.bot-token-form-group {
    margin: 0;
}

.bot-token-input-wrap {
    position: relative;
}

.bot-token-input {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    padding-right: 40px;
}

.bot-token-eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    padding: 4px;
}

.bot-token-eye i {
    font-size: 15px;
}

.bot-token-hint {
    font-size: 11px;
    color: var(--primary);
    font-family: var(--font-mono);
    margin-top: 5px;
}

.bot-token-label-req {
    color: var(--danger);
}

.bot-token-format {
    font-family: var(--font-mono);
    color: var(--primary);
    font-size: var(--font-size-xs);
}

.bot-btn-full {
    width: 100%;
    justify-content: center;
    font-weight: 600;
}

/* Bot copy btn icon */
.bot-copy-icon {
    font-size: 13px;
}

/* Pending badge */
.bot-pending-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(234, 179, 8, .12);
    color: #f59e0b;
    border: 1px solid rgba(234, 179, 8, .3);
}

/* Responsive */
@media (max-width: 900px) {

    .bot-tab-grid.col-320,
    .bot-tab-grid.col-360,
    .bot-tab-grid.col-450,
    .bot-tab-grid.col-300 {
        grid-template-columns: 1fr;
    }

    .bot-sticky {
        position: static;
    }

    .bot-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .bot-stats-row {
        grid-template-columns: 1fr;
    }

    .bot-tabs-wrap {
        padding: 0 0.25rem;
        margin-bottom: 1.25rem;
        border-radius: 0.75rem 0.75rem 0 0;
        scroll-padding-inline: 0.25rem;
    }

    .bot-tab {
        padding: 0.875rem 0.95rem;
        font-size: 0.9rem;
    }

    /* Menos padding lateral en los paneles: con el del page-container sobraba
       espacio y los bloques quedaban estrujados contra los bordes. */
    .bot-tab-panel {
        padding: var(--sp-4) var(--sp-1);
    }
}

/* =============================================================================
   SETTINGS PAGE
   ============================================================================= */

/* Layout */
.cfg-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.cfg-block {
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
}

.cfg-block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    margin-bottom: var(--sp-4);
}

.cfg-block-title i {
    color: var(--primary);
}

.cfg-block-desc {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: var(--sp-4);
    margin-top: calc(-1 * var(--sp-2));
}

.cfg-divider {
    height: 1px;
    background: var(--border-medium);
    margin-bottom: var(--sp-5);
}

/* Grids */
.cfg-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}

.cfg-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--sp-4);
}

/* Footer rows */
.cfg-footer-right {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--sp-4);
}

.cfg-footer-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

/* Timezone clock */
.cfg-tz-live {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.cfg-tz-clock {
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--primary);
    font-weight: 600;
}

.cfg-tz-name {
    font-size: 11px;
    color: var(--text-muted);
}

/* Var chips */
.cfg-vars-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--sp-2);
}

.var-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.var-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--primary-dim);
    background: var(--primary-dim);
    color: var(--primary);
    font-size: 12px;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: background .15s, border-color .15s;
    reseller-select: none;
}

.var-chip:hover {
    background: color-mix(in srgb, var(--primary) 22%, transparent);
    border-color: var(--primary);
}

/* Textarea mono */
.cfg-textarea-mono {
    resize: vertical;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    line-height: 1.7;
}

/* Message preview */
.msg-preview-wrap {
    display: flex;
    gap: var(--sp-4);
}

.msg-preview-card {
    flex: 1;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.msg-preview-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
}

.msg-preview-header--wa {
    color: #25D366;
    background: rgba(37, 211, 102, .06);
    border-bottom: 1px solid rgba(37, 211, 102, .15);
}

.msg-preview-header--tg {
    color: #229ED9;
    background: rgba(34, 158, 217, .06);
    border-bottom: 1px solid rgba(34, 158, 217, .15);
}

.msg-preview-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
}

.msg-preview-body {
    padding: 14px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
    min-height: 80px;
}

.msg-var {
    color: var(--primary);
    font-weight: 600;
}

/* Notif role rows */
.cfg-notif-role-wrap {
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.cfg-notif-role-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-medium);
}

.cfg-notif-role-grid {
    display: grid;
    grid-template-columns: 1fr 180px 160px;
}

.cfg-notif-cell {
    padding: 16px 20px;
}

.cfg-notif-types {
    border-right: 1px solid var(--border-medium);
}

.cfg-notif-action {
    border-right: 1px solid var(--border-medium);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cfg-notif-max {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cfg-notif-cell-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cfg-notif-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 7px;
    line-height: 1.4;
}

.cfg-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 13px;
    border-radius: 999px;
    border-width: 1px;
    border-style: solid;
    font-size: 12.5px;
    reseller-select: none;
}

/* Limpieza cards */
.cfg-limp-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.cfg-limp-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cfg-limp-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--primary-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
}

.cfg-limp-title {
    font-weight: 700;
    font-size: var(--font-size-sm);
}

.cfg-limp-sub {
    font-size: 13px;
    color: var(--text-muted);
}

.cfg-limp-days-input {
    background: var(--bg);
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: 700;
    width: 90px;
}

.cfg-limp-desc {
    margin-top: var(--sp-2);
    font-size: 13px;
    color: var(--text-muted);
}

.cfg-limp-purge-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-subtle);
}

.cfg-purge-result {
    font-size: 13px;
    font-weight: 600;
}
.cfg-purge-ok  { color: var(--success); }
.cfg-purge-err { color: var(--danger); }

.cfg-limp-role-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.cfg-limp-role-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Toggle switch */
.lmp-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

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

.lmp-slider {
    position: absolute;
    inset: 0;
    background: var(--border-medium);
    border-radius: 20px;
    transition: .2s;
    cursor: pointer;
}

.lmp-slider:before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: .2s;
}

.lmp-switch input:checked+.lmp-slider {
    background: var(--primary);
}

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

/* Logo upload */
.logo-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-6);
    width: 260px;
    min-height: 100px;
    border: 2px dashed var(--border-medium);
    border-radius: var(--radius-md);
    transition: border-color .2s;
    cursor: pointer;
}

.logo-upload-area.drag-over {
    border-color: var(--primary);
}

.logo-preview-img {
    max-height: 56px;
    max-width: 120px;
    object-fit: contain;
    display: block;
    border-radius: 6px;
}

.logo-remove-btn {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--danger);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.logo-upload-icon {
    width: 28px;
    height: 28px;
    cursor: pointer;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 1.5;
}

.logo-upload-text {
    cursor: pointer;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* Theme selector */
.cfg-themes-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 12px;
}

.cfg-theme-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
    font-family: var(--font-ui);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    transition: border-color .2s;
}

.cfg-theme-card:hover {
    border-color: var(--primary);
}

.cfg-theme-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
}

.cfg-theme-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cfg-theme-text strong {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.cfg-theme-text small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.25;
}

/* Color picker */
.cfg-color-input {
    width: 44px;
    height: 38px;
    padding: 2px 4px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-medium);
    background: var(--bg-elevated);
    cursor: pointer;
}

.cfg-color-preset {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .15s;
}

.cfg-color-preset:hover {
    border-color: rgba(255, 255, 255, .6);
}

/* Responsive */
@media (max-width: 900px) {
    .cfg-grid-2 {
        grid-template-columns: 1fr;
    }

    .cfg-grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    .cfg-themes-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cfg-notif-role-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cfg-notif-types {
        border-right: none;
        border-bottom: 1px solid var(--border-medium);
    }
}

@media (max-width: 600px) {
    .cfg-grid-3 {
        grid-template-columns: 1fr;
    }

    .cfg-themes-grid {
        grid-template-columns: 1fr;
    }

    .cfg-notif-role-grid {
        grid-template-columns: 1fr;
    }

    .cfg-notif-action {
        border-right: none;
        border-bottom: 1px solid var(--border-medium);
    }

    .msg-preview-wrap {
        flex-direction: column;
    }
}

/* Input with icon (WA/TG) */
.cfg-input-wrap {
    position: relative;
}

.cfg-input-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
    flex-shrink: 0;
}

.cfg-input-with-icon {
    padding-left: 36px !important;
}

/* Tab panel show/hide (used in settings and other pages) */
.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* Logo upload hover */
.logo-upload-area:hover {
    border-color: var(--primary);
}

/* Sidebar logo image */
/* Custom SVG icons inside sidebar items */
.sidebar-svg-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar-logo-img {
    max-width: 32px;
    max-height: 32px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-sm);
    display: block;
}

/* Topbar logo (shown when sidebar is collapsed) */
.topbar-logo {
    display: none;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.topbar.sidebar-collapsed .topbar-logo {
    display: flex;
}

.topbar-logo-icon {
    width: 28px;
    height: 28px;
    background: var(--primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-md);
    color: var(--text-inverse);
    flex-shrink: 0;
}

.topbar-logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    display: block;
}

.topbar-logo-icon:has(.topbar-logo-img) {
    background: transparent;
}

.sidebar-logo-icon:has(.sidebar-logo-img) {
    background: transparent;
}

/* App footer bar */
.app-footer {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding: var(--sp-2) var(--sp-6);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    border-top: 1px solid var(--border-medium);
    background: var(--bg-surface);
    transition: left var(--transition-md);
}

.app-footer-contact {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition);
}

.app-footer-contact:hover {
    color: var(--primary);
}

.app-footer-contact i {
    font-size: 13px;
}

.sidebar.collapsed~* .app-footer,
.app-footer.sidebar-collapsed {
    left: var(--sidebar-collapsed);
}

.app-footer-version {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    opacity: .6;
}

/* ─── Confirm dialog ─────────────────────────────────────────────────────── */

.cf-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

.cf-overlay.cf-show {
    opacity: 1;
    pointer-events: auto;
}

.cf-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
    transform: scale(0.96) translateY(8px);
    transition: transform var(--transition);
    overflow: hidden;
}

.cf-overlay.cf-show .cf-box {
    transform: scale(1) translateY(0);
}

.cf-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6) var(--sp-6) 0;
}

.cf-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.cf-icon-wrap.cf-type-danger .cf-icon {
    background: rgba(239, 68, 68, .12);
    color: var(--danger);
}

.cf-icon-wrap.cf-type-warning .cf-icon {
    background: rgba(245, 158, 11, .12);
    color: var(--warning);
}

.cf-icon-wrap.cf-type-success .cf-icon {
    background: rgba(34, 197, 94, .12);
    color: var(--success);
}

.cf-icon-wrap.cf-type-info .cf-icon {
    background: rgba(59, 130, 246, .12);
    color: var(--info);
}

.cf-icon-wrap.cf-type-edit .cf-icon {
    background: rgba(99, 102, 241, .12);
    color: #818cf8;
}

.cf-icon-wrap.cf-type-reset .cf-icon {
    background: rgba(14, 165, 233, .12);
    color: #38bdf8;
}

.cf-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    padding: var(--sp-4) var(--sp-6) var(--sp-2);
    margin: 0;
}

.cf-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
    padding: 0 var(--sp-6) var(--sp-3);
    margin: 0;
}

.cf-note {
    margin: 0 var(--sp-6) var(--sp-5);
    padding: .5rem .75rem;
    font-size: .75rem;
    color: var(--text-secondary);
    background: rgba(255,193,7,.07);
    border-left: 2px solid rgba(255,193,7,.5);
    border-radius: 4px;
    line-height: 1.5;
    text-align: left;
}

.cf-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-6) var(--sp-6);
}

.cf-btn-cancel {
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-medium);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-sm), color var(--transition-sm);
}

.cf-btn-cancel:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.cf-btn-confirm {
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--radius-md);
    border: none;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    transition: opacity var(--transition-sm);
}

.cf-btn-confirm:hover {
    opacity: .85;
}

.cf-btn-confirm.cf-type-danger {
    background: var(--danger);
}

.cf-btn-confirm.cf-type-warning {
    background: var(--warning);
    color: #000;
}

.cf-btn-confirm.cf-type-success {
    background: var(--success);
}

.cf-btn-confirm.cf-type-info {
    background: var(--info);
}

.cf-btn-confirm.cf-type-edit {
    background: #6366f1;
}

.cf-btn-confirm.cf-type-reset {
    background: #0ea5e9;
}

/* ─── Settings — supplemental classes ──────────────────────────────────────── */

/* Auto-zero margin for form-group inside cfg grids */
.cfg-grid-2 .form-group,
.cfg-grid-3 .form-group {
    margin: 0;
}

/* Flash / alert banner top spacing */
.cfg-flash {
    margin-bottom: var(--sp-4);
}

/* Settings-style tab bar used by settings/tools pages */
.cfg-tabs {
    display: flex;
    gap: 0;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
    padding: 0 0.5rem;
    margin-bottom: var(--sp-5);
}

.cfg-tabs .tab-item {
    flex: 0 0 auto;
    padding: 0.875rem 1.25rem;
    border-bottom-width: 3px;
    font-weight: 500;
    color: var(--text-secondary);
}

.cfg-tabs .tab-item.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Notif roles vertical list */
.cfg-notif-roles-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* Types checkbox row */
.cfg-notif-types-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Notif action select small font */
.cfg-notif-action select {
    font-size: 13px;
}

/* Notif max input */
.cfg-notif-max-input {
    width: 80px;
    text-align: center;
    font-family: var(--font-mono);
    margin-bottom: var(--sp-2);
}

/* Footer variant with top margin */
.cfg-footer-right--mt {
    margin-top: var(--sp-5);
}

.cfg-footer-between--mt {
    margin-top: var(--sp-5);
}

/* Card header horizontal layout (limpieza tab) */
.cfg-card-header-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.cfg-card-header-row .card-subtitle {
    margin: 0;
}

/* Limpieza — retention label */
.cfg-limp-label {
    font-size: 11px;
    letter-spacing: 1px;
}

.cfg-limp-label--mb {
    font-size: 11px;
    letter-spacing: 1px;
    margin-bottom: var(--sp-2);
}

/* Limpieza — days input row */
.cfg-days-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.cfg-days-unit {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* Limpieza — roles column */
.cfg-roles-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* TZ icon in live clock */
.cfg-tz-icon {
    color: var(--primary);
    font-size: 12px;
}

/* Readonly input appearance */
.cfg-readonly {
    opacity: .6;
    cursor: default;
}

/* Logo upload layout */
.cfg-logo-center {
    display: flex;
    justify-content: center;
}

.cfg-logo-wrap {
    position: relative;
    display: inline-block;
}

.cfg-upload-hint {
    font-size: 11px;
}

/* Appearance — color row */
.cfg-color-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.cfg-hex-input {
    font-family: var(--font-mono);
    width: 110px;
}

.cfg-presets-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Appearance — font size row */
.cfg-font-size-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.cfg-font-size-select {
    width: auto;
}

.cfg-font-sample {
    color: var(--text-muted);
}

/* Preview section spacing */
.cfg-preview-wrap {
    margin-top: var(--sp-4);
}

.cfg-footer-mt4 {
    margin-top: var(--sp-4);
}

/* Utility: hidden (used for forms that submit programmatically) */
.cfg-hidden {
    display: none;
}

/* =============================================================================
   NOTIFICATIONS PAGE
   ============================================================================= */

.notif-history-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.notif-history-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all var(--transition);
    background: color-mix(in srgb, var(--primary) 2%, transparent);
}

.notif-history-item:hover {
    background: color-mix(in srgb, var(--primary) 5%, transparent);
    border-color: var(--border-medium);
}

.notif-history-item.unread {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    border-color: var(--border-accent);
}

.notif-history-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-overlay);
    color: var(--notif-color, var(--primary));
    font-size: var(--font-size-lg);
}

.notif-history-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.notif-history-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-md);
    overflow-wrap: anywhere;
}

.notif-history-msg {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    overflow-wrap: anywhere;
}

.notif-history-meta {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-family: var(--font-mono);
}

.notif-history-badge {
    flex-shrink: 0;
    background: var(--primary);
    color: var(--text-inverse);
    font-size: var(--font-size-xs);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-full);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .notif-history-item {
        gap: var(--sp-3);
        padding: var(--sp-3);
    }
    .notif-history-icon {
        width: 34px;
        height: 34px;
    }
    .notif-history-badge {
        padding: 2px 8px;
        letter-spacing: 0;
    }
}
/* ── Bulk action bar (search pages) ── */
.bulk-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    margin-bottom: 8px;
    background: var(--danger-bg, #fff1f0);
    border: 1px solid var(--danger, #e53e3e);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}
.bulk-count {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

/* === DASHBOARD ALERTS === */
.dash-alert {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-4);
    border: 1px solid transparent;
}
.dash-alert-danger {
    background: rgba(220, 53, 69, .10);
    border-color: rgba(220, 53, 69, .35);
}
.dash-alert-warn {
    background: rgba(255, 193, 7, .08);
    border-color: rgba(255, 193, 7, .30);
}
.dash-alert-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1;
}
.dash-alert-danger .dash-alert-icon { color: #dc3545; }
.dash-alert-warn   .dash-alert-icon { color: #ffc107; }
.dash-alert-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dash-alert-body strong {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-primary);
}
.dash-alert-body span {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.45;
}
.dash-alert-body code {
    font-family: var(--font-mono);
    font-size: .78rem;
    background: var(--bg-tertiary);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--primary);
}
.dash-alert-action {
    flex-shrink: 0;
    white-space: nowrap;
}

/* === IMAP PROBE (diagnóstico modal) === */
.imap-probe-section {
    margin-top: var(--sp-4);
    border-top: 1px solid var(--border);
    padding-top: var(--sp-4);
}
.imap-probe-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 600;
    font-size: .875rem;
    margin-bottom: var(--sp-3);
    color: var(--text);
}
.imap-probe-hint {
    font-weight: 400;
    font-size: .78rem;
    color: var(--text-muted);
}
.imap-probe-btn {
    width: 100%;
    justify-content: center;
}
.imap-probe-result {
    margin-top: var(--sp-3);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    font-size: .85rem;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.imap-probe-result i { font-size: 1rem; }
.imap-probe-result--ok {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    color: #4ade80;
}
.imap-probe-result--error {
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.3);
    color: #f87171;
}
.imap-probe-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-1);
    color: var(--text);
    font-size: .82rem;
}

/* === IMAP PRODUCTION BANNER === */
.imap-prod-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    background: rgba(33, 150, 243, .07);
    border: 1px solid rgba(33, 150, 243, .25);
    border-radius: var(--radius-lg);
}
.imap-prod-icon {
    font-size: 1.25rem;
    color: #2196f3;
    flex-shrink: 0;
    padding-top: 2px;
}
.imap-prod-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-width: 0;
}
.imap-prod-body strong {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-primary);
}
.imap-prod-body > span {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.45;
}
.imap-prod-cmd-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-3);
    min-width: 0;
}
.imap-prod-cmd {
    flex: 1;
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: transparent;
    min-width: 0;
}
.imap-prod-copy {
    flex-shrink: 0;
    padding: 2px 8px;
    height: 26px;
}

/* === SYNC INDICATOR (topbar) === */
.sync-indicator { position: relative; }
.sync-indicator-icon {
    font-size: 16px;
    color: var(--text-muted);
    transition: color .2s;
    display: block;
}

/* Girando — sync en progreso */
.sync-indicator--syncing .sync-indicator-icon {
    color: var(--primary);
    animation: spin .8s linear infinite;
}

/* Sano — última sync reciente */
.sync-indicator--healthy .sync-indicator-icon { color: var(--success); }

/* Retrasado */
.sync-indicator--delayed .sync-indicator-icon { color: var(--warning, #f59e0b); }

/* Sin sync reciente */
.sync-indicator--stale .sync-indicator-icon { color: var(--danger); }

/* Punto de estado sobre el ícono */
.sync-indicator::after {
    content: '';
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid var(--bg-topbar, var(--bg-card));
    opacity: 0;
    transition: opacity .2s, background .2s;
}
.sync-indicator--healthy::after  { background: var(--success);               opacity: 1; }
.sync-indicator--delayed::after  { background: var(--warning, #f59e0b);       opacity: 1; }
.sync-indicator--stale::after    { background: var(--danger);                 opacity: 1; }
.sync-indicator--syncing::after  { opacity: 0; }

/* Texto "Sincronizando..." — solo visible mientras hay una sync en curso */
.sync-indicator-label {
    display: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
    margin-left: 6px;
}
.sync-indicator--syncing .sync-indicator-label { display: inline-block; }
/* Puntos animados: ancho creciente sobre un "..." recortado (steps) */
.sync-indicator-label::after {
    content: '...';
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    width: 0;
    animation: sync-dots 1.2s steps(4, jump-none) infinite;
}
@keyframes sync-dots {
    to { width: 1.05em; }
}

/* === BOT REMOTE MODE === */

.bot-subtab--active-mode {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.bot-subtab-badge--remote {
    background: rgba(139, 92, 246, .15);
    color: #a78bfa;
}

.bot-remote-mode-opts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.bot-remote-mode-opt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.bot-remote-mode-opt input[type="radio"] {
    display: none;
}

.bot-remote-mode-opt.selected,
.bot-remote-mode-opt:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.bot-remote-mode-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.bot-remote-mode-title {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.bot-remote-mode-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.bot-remote-secret-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.bot-remote-secret-row .bot-webhook-url-input {
    flex: 1;
    min-width: 0;
}

.bot-remote-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bot-remote-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

.bot-remote-benefits li i {
    flex-shrink: 0;
    margin-top: 1px;
}

.bot-remote-endpoints-details {
    margin-top: 16px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.bot-remote-endpoints-summary {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    user-select: none;
}

.bot-remote-endpoints-summary::-webkit-details-marker { display: none; }

.bot-remote-endpoints-body {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bot-remote-ep-row {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 6px 8px;
    font-size: 11px;
    align-items: start;
}

.bot-remote-ep-method {
    font-weight: 700;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    text-align: center;
    align-self: center;
}

.bot-remote-ep-get  { background: rgba(59,130,246,.15); color: #60a5fa; }
.bot-remote-ep-post { background: color-mix(in srgb, var(--primary) 12%, transparent);   color: var(--primary); }

.bot-remote-ep-path {
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-size: 11px;
}

.bot-remote-ep-desc {
    grid-column: 2;
    color: var(--text-muted);
    font-size: 11px;
    margin-top: -2px;
}

.bot-remote-dl-card {
    margin-top: 24px;
}

.bot-remote-dl-steps {
    margin-bottom: 16px;
}

/* =============================================================================
   Correcciones responsive (móvil)
   Añadidas al final para sobrescribir reglas previas. Objetivo: que ninguna
   fila de botones, tabla o input quede cortada/inalcanzable en pantallas
   chicas, y que los botones tengan separación al envolver.
   ============================================================================= */
@media (max-width: 768px) {

    /* Filas de botones de acción/compartir: envolver en vez de salirse de la
       pantalla. Antes quedaban cortadas (p. ej. el botón de Telegram). */
    .ec-share,
    .ev-action-buttons,
    .ev-actions,
    .result-actions,
    .ev-badge-row,
    .re-share {
        flex-wrap: wrap;
        gap: var(--sp-3);
    }

    /* Botones de compartir cómodos al envolver (no minúsculos ni pegados). */
    .ec-share > *,
    .result-actions > * {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
    }

    /* Ningún input/select/textarea más ancho que su tarjeta. */
    .form-control,
    input,
    select,
    textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Scroll táctil fluido en todas las tablas. */
    .table-wrapper,
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

/* =============================================================================
   RESPONSIVE FIXES — mobile polish
   ============================================================================= */

/* 1. Badge: prevent .has-count display:flex from overriding [hidden] */
[hidden] { display: none !important; }

/* 2. Utility: hide native file input inside custom label triggers */
.hidden-input { display: none; }

/* 3. IMAP cron/webhook URL inputs — allow shrinking in flex containers */
.imap-token-wrap {
    overflow: hidden;
}
.imap-token-input {
    min-width: 0;
}

/* 4. Modal footer — stack buttons on very small screens */
@media (max-width: 480px) {
    .modal-footer-reverse {
        flex-direction: column-reverse;
        gap: var(--sp-2);
    }
    .modal-footer-reverse .btn-block-sm {
        width: 100%;
        justify-content: center;
    }
}

/* 6. Stat cards as links */
a.stat-card--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
a.stat-card--link:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

/* 7. Email view — long alias/email values wrap instead of overflowing */
.ev-data-row {
    overflow: hidden;
}
.ev-data-value {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-all;
}
.ev-data-value--mono {
    word-break: break-all;
}

/* =============================================================================
   VPS Bot Remoto — Rediseño completo de UI
   ============================================================================= */

/* ── Tarjeta contenedora principal ── */
.vps-setup-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 2px);
    overflow: hidden;
    margin-top: 24px;
}

/* ── Hero banner ── */
.vps-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary) 10%, var(--bg-card)) 0%,
        var(--bg-card) 100%);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.vps-hero--secondary {
    background: linear-gradient(135deg,
        color-mix(in srgb, #6366f1 8%, var(--bg-card)) 0%,
        var(--bg-card) 100%);
}

.vps-hero-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--primary);
    flex-shrink: 0;
}

.vps-hero-icon--secondary {
    background: rgba(99, 102, 241, .15);
    border-color: rgba(99, 102, 241, .3);
    color: #818cf8;
}

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

.vps-hero-title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.vps-hero-subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* ── Botón de descarga ── */
.vps-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s, transform .1s;
    text-decoration: none;
    flex-shrink: 0;
}
.vps-dl-btn code {
    background: rgba(255,255,255,.2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
}
.vps-dl-btn:hover {
    background: color-mix(in srgb, var(--primary) 80%, #000);
    transform: translateY(-1px);
}

/* ── Cuerpo del card ── */
.vps-body {
    padding: 24px;
}

/* ── Label de sección ── */
.vps-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
}

/* ── Timeline de pasos rápidos ── */
.vps-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vps-step {
    display: flex;
    gap: 16px;
    position: relative;
}

.vps-step-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.vps-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border: 2px solid color-mix(in srgb, var(--primary) 35%, transparent);
    color: var(--primary);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vps-step-line {
    width: 2px;
    flex: 1;
    min-height: 16px;
    background: var(--border);
    margin: 4px 0;
}

.vps-step-body {
    padding-bottom: 20px;
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}

.vps-step-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.vps-step-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ── Bloque de código mejorado ── */
.vps-code-block {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-input, #111);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 6px;
    font-size: 12.5px;
}

.vps-code-lang {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--primary);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 8px;
    height: 100%;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    min-height: 34px;
}

.vps-code-block code {
    font-family: var(--font-mono, monospace);
    color: var(--text-primary);
    flex: 1;
    padding: 7px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    background: transparent;
    font-size: 12px;
}

.vps-copy-btn {
    background: transparent;
    border: none;
    border-left: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0 10px;
    min-height: 34px;
    cursor: pointer;
    transition: color .15s, background .15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.vps-copy-btn:hover {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.vps-code-block--multiline {
    align-items: flex-start;
    flex-wrap: wrap;
}
.vps-code-block--multiline .vps-code-lang {
    min-height: auto;
    padding: 8px;
    align-self: flex-start;
}
.vps-code-block--multiline pre {
    margin: 0;
    padding: 10px 12px;
    font-family: var(--font-mono, monospace);
    font-size: 11.5px;
    color: var(--text-primary);
    flex: 1;
    line-height: 1.6;
    white-space: pre;
    overflow-x: auto;
    background: transparent;
}
.vps-copy-btn--top {
    align-self: flex-start;
    min-height: 36px;
    border-left: 1px solid var(--border);
    border-top: none;
}

/* ── Tip de producción ── */
.vps-tip {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: color-mix(in srgb, #f59e0b 8%, transparent);
    border: 1px solid rgba(245, 158, 11, .25);
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 20px;
    line-height: 1.5;
}
.vps-tip > .bi {
    color: #f59e0b;
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}
.vps-tip code {
    background: rgba(245,158,11,.12);
    color: #f59e0b;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11.5px;
}

/* ── Grid de instalación ── */
.vps-install-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 860px) {
    .vps-install-grid { grid-template-columns: 1fr; }
}

.vps-install-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Sección de instalación ── */
.vps-install-section {
    background: color-mix(in srgb, var(--bg-input, #111) 60%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

.vps-install-section--warning {
    border-color: rgba(245, 158, 11, .3);
    background: color-mix(in srgb, #f59e0b 5%, transparent);
}

.vps-install-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.vps-install-num {
    font-size: 16px;
    line-height: 1;
    color: var(--primary);
}

.vps-install-section--warning .vps-install-num {
    color: #f59e0b;
}

.vps-install-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
    margin-top: 4px;
}

.vps-install-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
    display: flex;
    align-items: flex-start;
    gap: 5px;
    line-height: 1.5;
}
.vps-install-hint .bi {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Lista de comandos útiles ── */
.vps-cmds-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vps-cmd-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vps-cmd-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── Responsive hero ── */
@media (max-width: 600px) {
    .vps-hero {
        flex-direction: column;
        align-items: flex-start;
    }
    .vps-dl-btn {
        width: 100%;
        justify-content: center;
    }
}


/* =============================================================================
   IMAP PAGE — clases migradas desde estilos inline (Golden Rule: no style=)
   Extraídas de Views/Admin/imap.php. Definidas al final para ganar en cascada
   sobre clases base compartidas cuando reemplazan un override inline previo.
   ============================================================================= */
.imap-flow-banner{display:flex;align-items:center;gap:var(--sp-2);padding:8px 14px;margin-bottom:var(--sp-3);background:color-mix(in srgb,var(--text-accent) 6%,transparent);border-left:3px solid var(--text-accent);border-radius:0 var(--radius) var(--radius) 0;font-size:13px;color:var(--text-secondary)}
.imap-flow-banner > i{color:var(--text-accent)}
.imap-hdr-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.imap-mb-4{margin-bottom:var(--sp-4)}
.imap-empty-lead{margin-bottom:var(--sp-2)}
.imap-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.imap-txt-primary{color:var(--primary)}
.imap-config-title{margin-bottom:var(--sp-4);font-size:1.25rem}
.imap-mode-stack{display:flex;flex-direction:column;gap:12px;margin-bottom:var(--sp-4)}
.imap-adv-details{border-radius:12px;border:1px solid var(--border-color);margin-bottom:var(--sp-4);overflow:hidden}
.imap-adv-summary{padding:15px 20px;user-select:none;display:flex;align-items:center;gap:10px;cursor:pointer}
.imap-adv-ico{color:var(--text-secondary)}
.imap-adv-title{font-weight:600}
.imap-adv-note{color:var(--text-secondary);font-size:12px}
.imap-ml-auto{margin-left:auto}
.imap-adv-body{padding:18px 20px;border-top:1px solid var(--border-color)}
.imap-items-start{align-items:start}
.imap-adv-card{border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.02)}
.imap-adv-card-hd{border-bottom:1px solid var(--border-color);padding:15px 20px}
.imap-adv-card-ttl{display:flex;align-items:center;gap:8px;font-size:1.05rem}
.imap-ico-primary{color:var(--primary)}
.imap-ico-warning{color:var(--warning)}
.imap-adv-card-bd{padding:20px}
.imap-opt-box{background:var(--bg-body);padding:16px;border-radius:10px;margin-bottom:16px;border:1px solid var(--border-color);transition:all .2s}
.imap-opt-box--rowflush{margin-bottom:0;display:flex;justify-content:space-between;align-items:center}
.imap-opt-h4{font-size:14px;margin-top:0;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.imap-opt-h4b{font-size:14px;margin:0 0 6px;font-weight:600}
.imap-opt-h4lbl{display:flex;align-items:center;gap:8px;font-weight:600}
.imap-opt-row{display:flex;gap:12px;align-items:center;justify-content:space-between}
.imap-lh14{line-height:1.4}
.imap-inline6{display:flex;align-items:center;gap:6px}
.imap-flex8{display:flex;align-items:center;gap:8px}
.imap-flex-10{display:flex;gap:10px;align-items:center}
.imap-flex1{flex:1}
.imap-num-55{width:55px;padding:2px 6px;height:26px;text-align:center}
.imap-num-70{width:70px;text-align:center;font-weight:bold}
.imap-num-80{width:80px;text-align:center;flex:none}
.imap-num-90{width:90px;text-align:center;flex:none}
.imap-inp-140{width:140px;padding:2px 8px;height:26px;font-size:11px}
.imap-maint-intro{margin-bottom:16px;line-height:1.4}
.imap-maint-step{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;background:rgba(0,0,0,0.02);padding:10px 12px;border-radius:8px}
.imap-maint-step--danger{margin-bottom:15px;border-left:2px solid var(--danger)}
.imap-step-title{font-weight:600;font-size:13px;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.imap-step-title--danger{color:var(--danger)}
.imap-step-badge{background:var(--primary);color:#fff;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px}
.imap-step-badge--danger{background:var(--danger)}
.imap-step-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.imap-ml-15{margin-left:15px}
.imap-eng-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;background:var(--bg-body);border-radius:10px;border:1px solid var(--border-color);margin-bottom:12px}
.imap-eng-row--wide{margin-bottom:16px}
.imap-eng-title{font-weight:600;font-size:14px}
.imap-eng-desc{color:var(--text-secondary);font-size:12px}
.imap-eng-unit{color:var(--text-secondary);font-weight:400}
.imap-dot-7{font-size:7px}
.imap-widget{background:var(--bg-body);border-radius:10px;border:1px solid var(--border-color);margin-bottom:15px;overflow:hidden}
.imap-widget--flush{margin-bottom:0}
.imap-widget-sum{padding:16px;user-select:none;transition:background .2s}
.imap-widget-head{display:flex;align-items:center;gap:14px}
.imap-widget-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.imap-widget-ico--blue{background:rgba(33,150,243,0.1);color:#2196f3}
.imap-widget-ico--green{background:rgba(76,175,80,0.1);color:#4caf50}
.imap-widget-ttl{font-weight:600;font-size:14px;margin-bottom:2px}
.imap-widget-body{padding:16px;border-top:1px solid var(--border-color);background:var(--bg-card)}
.imap-mb-15{margin-bottom:15px}
.imap-mt-8{margin-top:8px}
.imap-cronblk{background:var(--bg-body);padding:12px;border-radius:8px;margin-bottom:15px}
.imap-cronblk--flush{margin-bottom:0}
.imap-cron-lbl{font-size:12px;margin-bottom:8px}
.imap-cron-sum{font-size:12px;margin:0;cursor:pointer}
.imap-cron-steps{margin-top:15px;margin-bottom:0}
.imap-flex6{display:flex;gap:6px}
.imap-flex4-6{display:flex;gap:4px;margin:6px 0}
.imap-inp-grow{flex:1;padding:4px 8px;height:30px}
.imap-btn-30{height:30px;padding:0 10px}
.imap-btn-30b{height:30px;padding:0 8px}
.imap-btn-26{padding:2px 6px}
.imap-btn-tab{padding:2px 8px;font-size:10px}
.imap-pad6{padding:6px}
.imap-pad2{padding:2px}
.imap-worker-sb{margin-left:auto;margin-right:12px;padding:4px 8px;border-radius:12px;font-size:11px}
.imap-wsr{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.imap-wsi{margin:0;font-size:12px}
.imap-mt-3{margin-top:var(--sp-3)}