/* ============================================================
   Nextbots — Shared Styles
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #0A0B10;
  color: #ECEDF2;
  font-family: 'Hanken Grotesk', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* halo de fond subtil */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(88,101,242,0.10), transparent 70%),
    radial-gradient(700px 600px at 100% 0%, rgba(126,132,255,0.05), transparent 65%);
}
[data-theme="light"] body::before { opacity: 0; }
body > * { position: relative; z-index: 1; }
:focus-visible { outline: 2px solid rgba(126,132,255,0.7); outline-offset: 2px; border-radius: 6px; }
html { scroll-behavior: smooth; }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(88,101,242,0.55); background-clip: content-box; }
.nx-reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.nx-reveal.in { opacity: 1; transform: none; }
button { cursor: pointer; }
.btn-ghost:active, .btn-nav-primary:active, .btn-primary:active { transform: translateY(0); }

/* ── Light mode ── */
[data-theme="light"] body { background: #F2F3F7; color: #1A1B22; }
[data-theme="light"] .app-header { background: #FFFFFF; border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .sidebar { background: #FFFFFF; border-right-color: rgba(0,0,0,0.08); }
[data-theme="light"] .nav-item { color: #5A5E70; }
[data-theme="light"] .nav-item:hover, [data-theme="light"] .nav-item.active { background: rgba(88,101,242,0.1); color: #5865F2; }
[data-theme="light"] .app-main { background: #F2F3F7; }
[data-theme="light"] .stat-card,
[data-theme="light"] .content-card,
[data-theme="light"] .bot-panel-card,
[data-theme="light"] .ticket,
[data-theme="light"] .new-ticket-card { background: #FFFFFF; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .stat-lbl, [data-theme="light"] .stat-note { color: #9498A6; }
[data-theme="light"] .stat-val, [data-theme="light"] .panel-title { color: #1A1B22; }
[data-theme="light"] .form-input { background: #F2F3F7; border-color: rgba(0,0,0,0.12); color: #1A1B22; }
[data-theme="light"] .modal { background: #FFFFFF; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .modal-backdrop { background: rgba(0,0,0,0.4); }
[data-theme="light"] .app-logo span { color: #1A1B22; }
::selection { background: rgba(88,101,242,0.35); }
a { color: inherit; }
button { font-family: 'Hanken Grotesk', sans-serif; }

/* ── Animations ── */
@keyframes nxFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes nxPulse  { 0%,100%{opacity:.45;transform:scale(1)} 50%{opacity:.9;transform:scale(1.12)} }
@keyframes fadeIn   { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideIn  { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }

/* ============================================================
   MARKETING NAV
   ============================================================ */
.nav-root { position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(10,11,16,0.82);border-bottom:1px solid rgba(255,255,255,0.06); }
.nav-inner { max-width:1180px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;height:62px; }
.nav-logo { display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0; }
.nav-logo-name { font-family:'Sora',sans-serif;font-weight:700;font-size:19px;letter-spacing:-0.02em;color:#F4F5F8; }
.nav-links { display:flex;align-items:center;gap:28px; }
.nav-links a { position:relative;color:#B7BBC7;font-size:14.5px;font-weight:500;text-decoration:none;transition:color .15s;white-space:nowrap; }
.nav-links a::after { content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:#5865F2;transform:scaleX(0);transform-origin:left;transition:transform .24s ease; }
.nav-links a:hover, .nav-links a.active { color:#fff; }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }
.btn-primary svg, .btn-nav-primary svg { transition:transform .2s ease; }
.btn-primary:hover svg, .btn-nav-primary:hover svg { transform:translateX(2px); }
.app-avatar { transition:transform .15s ease; }
.app-avatar:hover { transform:scale(1.06); }
.nav-actions { display:flex;align-items:center;gap:10px;flex-shrink:0; }
.lang-switcher { display:flex;align-items:center;gap:3px;margin-left:6px; }
.lang-btn { background:none;border:1px solid rgba(255,255,255,0.12);border-radius:6px;padding:4px 7px;font-size:11px;color:#6B6F7D;cursor:pointer;font-family:'JetBrains Mono',monospace;letter-spacing:0.04em;transition:color .15s,border-color .15s,background .15s; }
.lang-btn:hover { color:#ECEDF2;border-color:rgba(255,255,255,0.25); }
.lang-btn.active { color:#F4F5F8;border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.06); }
.nav-hamburger { display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none; }
.nav-hamburger span { display:block;width:22px;height:2px;background:#ECEDF2;border-radius:2px;transition:all .2s; }
.mobile-nav-overlay { display:none;position:fixed;inset:0;z-index:49;background:rgba(10,11,16,0.95);backdrop-filter:blur(16px);flex-direction:column;padding:80px 32px 40px;gap:6px; }
.mobile-nav-overlay.open { display:flex; }
.mobile-nav-overlay a { font-size:22px;font-weight:600;color:#ECEDF2;text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.06); }
@media(max-width:768px) { .nav-links,.nav-actions{display:none} .nav-hamburger{display:flex} }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary { display:inline-flex;align-items:center;gap:8px;background:#5865F2;color:#fff;font-weight:600;font-size:15px;padding:12px 22px;border-radius:11px;border:none;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s,box-shadow .15s;box-shadow:0 8px 24px rgba(88,101,242,0.32); }
.btn-primary:hover { background:#6E78F5;transform:translateY(-2px);box-shadow:0 16px 36px rgba(88,101,242,0.5); }
.btn-primary:active { transform:translateY(0); }
.btn-primary--lg { font-size:16px;padding:15px 28px;border-radius:12px; }
.btn-primary--sm { font-size:13.5px;padding:9px 16px;border-radius:9px; }
.btn-ghost { display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.05);color:#ECEDF2;font-weight:600;font-size:15px;padding:12px 22px;border-radius:11px;border:1px solid rgba(255,255,255,0.13);cursor:pointer;text-decoration:none;transition:background .15s; }
.btn-ghost:hover { background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.22);transform:translateY(-1px); }
.btn-ghost--sm { font-size:13.5px;padding:9px 16px;border-radius:9px; }
.btn-nav-ghost { color:#ECEDF2;font-size:14.5px;font-weight:600;text-decoration:none;padding:9px 14px;border-radius:10px;transition:background .15s;white-space:nowrap; }
.btn-nav-ghost:hover { background:rgba(255,255,255,0.06); }
.btn-nav-primary { display:inline-flex;align-items:center;gap:8px;background:#5865F2;color:#fff;font-weight:600;font-size:14.5px;padding:10px 18px;border-radius:11px;border:none;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .15s,background .15s,box-shadow .15s;box-shadow:0 8px 22px rgba(88,101,242,0.30); }
.btn-nav-primary:hover { background:#6E78F5;transform:translateY(-1px); }

/* ============================================================
   BADGES
   ============================================================ */
.badge { font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap; }
.badge--green  { color:#3BA55D;background:rgba(59,165,93,0.14); }
.badge--red    { color:#ED6A6A;background:rgba(237,86,86,0.14); }
.badge--amber  { color:#E0A03C;background:rgba(224,160,60,0.14); }
.badge--blue   { color:#7E84FF;background:rgba(88,101,242,0.14); }
.badge--muted  { color:#C7CAD3;background:rgba(255,255,255,0.08); }

/* ============================================================
   APP SIDEBAR
   ============================================================ */
.sidebar { width:248px;flex-shrink:0;background:#0C0D13;border-right:1px solid rgba(255,255,255,0.06);display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh;overflow-y:auto;transition:transform .25s ease;z-index:40; }
.sidebar-nav { margin-top:26px;display:flex;flex-direction:column;gap:4px; }
.nav-item { display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;font-size:14.5px;font-weight:500;cursor:pointer;color:#9498A6;background:transparent;border:none;border-left:3px solid transparent;transition:all .15s;width:100%;text-align:left; }
.nav-item:hover { background:rgba(255,255,255,0.04);color:#ECEDF2; }
.nav-item.active { font-weight:600;color:#fff;background:rgba(88,101,242,0.14);border-left-color:#5865F2; }
.sidebar-footer { margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,0.06); }
.sidebar-section-title { font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.13em;color:#4e515e;text-transform:uppercase;padding:0 8px 6px; }
.sidebar-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:39;backdrop-filter:blur(4px); }
@media(max-width:860px) { .sidebar{position:fixed;top:56px;left:0;height:calc(100vh - 56px);transform:translateX(-100%)} .sidebar.open{transform:translateX(0)} .sidebar-overlay.open{display:block} }

/* ── Main content ── */
.panel { display:none;animation:fadeIn .2s ease; }
.panel.active { display:block; }

/* ============================================================
   FORMS
   ============================================================ */
.form-label { display:block;font-size:13px;color:#9498A6;margin-bottom:8px; }
.form-input { width:100%;background:#0E0F16;border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:11px 14px;color:#ECEDF2;font-family:'Hanken Grotesk',sans-serif;font-size:14px;outline:none;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease; }
.form-input:hover:not(:focus) { border-color:rgba(255,255,255,0.22); }
.form-input:focus { border-color:#5865F2;box-shadow:0 0 0 3px rgba(88,101,242,0.16);background:#0C0D14; }
.form-input::placeholder { color:#4a4d59; }
textarea.form-input { resize:vertical; }
select.form-input { -webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6F7D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:pointer; }
.form-group { margin-bottom:16px; }

/* ============================================================
   CARDS
   ============================================================ */
.card { background:#13141C;border:1px solid rgba(255,255,255,0.08);border-radius:18px;padding:22px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.card--accent { background:linear-gradient(135deg,rgba(88,101,242,0.12),rgba(88,101,242,0.02));border:1px solid rgba(88,101,242,0.35); }
.card-title { font-family:'Sora',sans-serif;font-weight:600;font-size:16px;color:#ECEDF2;margin:0 0 16px; }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap { background:#13141C;border:1px solid rgba(255,255,255,0.08);border-radius:18px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,0.28); }
@media(max-width:680px){ .table-wrap{ overflow-x:auto; } .data-table{ min-width:560px; } }
.data-table { width:100%;border-collapse:collapse; }
.data-table thead tr { background:rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.1); }
.data-table th { padding:13px 18px;text-align:left;font-family:'JetBrains Mono',monospace;font-size:11px;color:#7E84FF;text-transform:uppercase;letter-spacing:0.08em;font-weight:500;white-space:nowrap; }
.data-table .table-row { display:table-row;border-bottom:1px solid rgba(255,255,255,0.05);transition:background .1s; }
.data-table .table-row td { padding:13px 18px;font-size:13.5px;color:#C7CAD3;vertical-align:middle; }
.data-table .table-row:last-child { border-bottom:none; }
.data-table .table-row:hover { background:rgba(88,101,242,0.06); }
.data-table td.mono { font-family:'JetBrains Mono',monospace; }

/* ============================================================
   TOAST
   ============================================================ */
#toast-container { position:fixed;bottom:24px;right:24px;z-index:100;display:flex;flex-direction:column;gap:10px;pointer-events:none; }
.toast { display:flex;align-items:center;gap:10px;padding:13px 18px;border-radius:12px;font-size:14px;font-weight:500;color:#ECEDF2;box-shadow:0 8px 32px rgba(0,0,0,0.4);animation:fadeIn .25s ease;pointer-events:all; }
.toast--success { background:#13141C;border:1px solid rgba(59,165,93,0.4); }
.toast--error   { background:#13141C;border:1px solid rgba(237,86,86,0.4); }
.toast--info    { background:#13141C;border:1px solid rgba(88,101,242,0.4); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop { display:none;position:fixed;inset:0;z-index:80;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:20px; }
.modal-backdrop.open { display:flex; }
.modal { background:#13141C;border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:32px;width:100%;max-width:520px;animation:fadeIn .2s ease;max-height:90vh;overflow-y:auto; }
.modal-header { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px;position:relative; }
.modal-title { font-family:'Sora',sans-serif;font-weight:700;font-size:20px;color:#F4F5F8;margin:0 0 8px; }
.modal-close { position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:8px;border:none;cursor:pointer;background:rgba(255,255,255,0.06);color:#9498A6;font-size:18px;display:flex;align-items:center;justify-content:center;transition:background .15s; }
.modal-close:hover { background:rgba(255,255,255,0.12); }
.modal-footer { display:flex;justify-content:flex-end;gap:10px;margin-top:24px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { border-top:1px solid rgba(255,255,255,0.06);background:#08090D; }
.footer-grid { max-width:1180px;margin:0 auto;padding:52px 32px 30px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px; }
.footer-brand { display:flex;align-items:center;gap:10px;margin-bottom:14px; }
.footer-brand-name { font-family:'Sora',sans-serif;font-weight:700;font-size:17px;color:#F4F5F8; }
.footer-desc { font-size:13.5px;line-height:1.55;color:#6B6F7D;margin:0;max-width:260px; }
.footer-col-title { font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;color:#5b5f6c;text-transform:uppercase;margin-bottom:14px; }
.footer-links { display:flex;flex-direction:column;gap:10px; }
.footer-links a { font-size:14px;color:#9498A6;text-decoration:none;transition:color .15s; }
.footer-links a:hover { color:#ECEDF2; }
.footer-bottom { max-width:1180px;margin:0 auto;padding:18px 32px 40px;border-top:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px; }
.footer-copy { font-size:12.5px;color:#5b5f6c; }
.footer-admin { font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#7E84FF;text-decoration:none; }
@media(max-width:800px) { .footer-grid{grid-template-columns:1fr 1fr} }
@media(max-width:480px) { .footer-grid{grid-template-columns:1fr} }

/* ============================================================
   APP LAYOUT
   ============================================================ */
.app-header { position:sticky;top:0;z-index:50;height:56px;background:rgba(10,11,16,0.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;padding:0 22px 0 18px;gap:14px; }
.sidebar-toggle { background:none;border:none;cursor:pointer;color:#9498A6;padding:6px;border-radius:8px;display:flex;transition:background .15s,color .15s; }
.sidebar-toggle:hover { background:rgba(255,255,255,0.06);color:#ECEDF2; }
.app-logo { display:flex;align-items:center;gap:9px;text-decoration:none; }
.app-logo span { font-family:'Sora',sans-serif;font-weight:700;font-size:17px;color:#F4F5F8; }
.app-header-right { display:flex;align-items:center;gap:12px;margin-left:auto; }
.app-avatar { width:34px;height:34px;border-radius:50%;background:rgba(88,101,242,0.22);color:#7E84FF;font-family:'Sora',sans-serif;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.app-layout { display:flex;min-height:calc(100vh - 56px); }
.app-main { flex:1;min-width:0;padding:32px clamp(16px,4vw,44px);overflow-y:auto; }
.panel-header { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap; }
.panel-title { font-family:'Sora',sans-serif;font-weight:700;font-size:26px;color:#F4F5F8;margin:0;letter-spacing:-0.02em; }
.nav-icon { flex-shrink:0; }

/* ============================================================
   UTILS
   ============================================================ */
.eyebrow { font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.14em;color:#7E84FF;text-transform:uppercase;margin-bottom:14px; }
.mono { font-family:'JetBrains Mono',monospace; }
.text-muted  { color:#9498A6; }
.text-faint  { color:#6B6F7D; }
.text-purple { color:#7E84FF; }
.text-green  { color:#3BA55D; }
.text-red    { color:#ED6A6A; }
.text-amber  { color:#E0A03C; }
.sora { font-family:'Sora',sans-serif; }
.divider { height:1px;background:rgba(255,255,255,0.07);margin:0; }