/* Exclusiones — sistema AIOS "Linear Dark v5" (clonado de aiplayers-aios/web/src/styles/design-system.css) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- tokens ---------- */
:root {
  --paper:#ffffff; --bone:#faf9f6; --mist:#f2f1ec;
  --line:rgba(17,17,19,0.08); --line-2:rgba(17,17,19,0.14);
  --ink:#171717; --ink-2:#55554f; --ink-3:#8a897f; --ink-4:#b4b2a8;
  --signal:#e07a0a; --signal-ink:#b45f04; --signal-wash:rgba(224,122,10,.10);
  --ok:#067a4e; --ok-wash:#e7f5ee;
  --warn:#b7791f; --warn-wash:#fbf3e0;
  --danger:#c81e3a; --danger-wash:#fdeaed;
  --sh-1:0 1px 2px rgba(22,22,26,.05); --sh-2:0 4px 16px rgba(22,22,26,.07); --sh-3:0 12px 40px rgba(22,22,26,.10);
  --r-sm:5px; --r-md:8px; --r-lg:12px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --font-display:'Montserrat',system-ui,sans-serif;
  --font-ui:'Montserrat',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
:root[data-theme="dark"] {
  --paper:#121215; --bone:#0a0a0b; --mist:#1a1a1e;
  --line:rgba(255,255,255,0.06); --line-2:rgba(255,255,255,0.11);
  --ink:#ededf0; --ink-2:#a8a8b0; --ink-3:#77777f; --ink-4:#4d4d54;
  --signal:#f18d04; --signal-ink:#f9a53a; --signal-wash:rgba(241,141,4,0.10);
  --ok:#34d399; --ok-wash:rgba(52,211,153,0.10);
  --warn:#fbbf24; --warn-wash:rgba(251,191,36,0.10);
  --danger:#f87171; --danger-wash:rgba(248,113,113,0.10);
  --sh-1:none; --sh-2:0 8px 24px rgba(0,0,0,.45); --sh-3:0 16px 48px rgba(0,0,0,.55);
}

/* ---------- base ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body {
  font-family:var(--font-ui); background:var(--bone); color:var(--ink);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
button { font-family:inherit; cursor:pointer;
  transition:color .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease),
             transform .15s var(--ease), opacity .15s var(--ease), box-shadow .15s var(--ease); }
button:active:not(:disabled) { transform:scale(0.97); }
button:disabled { opacity:.5; cursor:not-allowed; }
a { color:inherit; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:999px; border:3px solid var(--bone); }
::-webkit-scrollbar-track { background:transparent; }

/* ---------- helpers tipográficos ---------- */
.ds-label { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.ds-num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.ds-display { font-family:var(--font-display); font-weight:800; letter-spacing:-.025em; line-height:1; }

/* ---------- atmósfera ---------- */
.ds-grid { position:relative; }
.ds-grid::before {
  content:''; position:fixed; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:40px 40px; opacity:.5; pointer-events:none; z-index:0;
}
:root[data-theme="dark"] .ds-grid::before { opacity:.25; }
.brand-aurora::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 120% at 15% 20%, rgba(224,122,10,.08), transparent 45%),
             radial-gradient(120% 120% at 85% 30%, rgba(37,99,235,.05), transparent 50%);
}

/* ---------- header ---------- */
.hdr {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bone) 85%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.hdr-inner { max-width:1152px; margin:0 auto; padding:11px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hdr-brand { display:flex; align-items:center; gap:10px; }
.hdr-brand img { width:22px; height:22px; }
.chip {
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:var(--r-md);
  background:var(--paper); border:1px solid var(--line-2); color:var(--ink-2);
  font-size:12.5px; font-weight:500; text-decoration:none;
  transition:border-color .2s var(--ease), background .2s;
}
.chip:hover { border-color:var(--line-2); background:var(--mist); }
.hdr-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ---------- layout ---------- */
.main { position:relative; z-index:1; max-width:1152px; margin:0 auto; padding:24px 16px 48px; }

/* ---------- stats ---------- */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:16px; }
.stat-card { position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.stat-accent { height:3px; }
.stat-body { padding:14px 16px 15px; }
.stat-value { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:30px; font-weight:600; color:var(--ink); line-height:1; margin-top:8px; display:block; }

/* ---------- card principal ---------- */
.card { position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); }
.card-hd { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.card-title { font-weight:700; font-size:14.5px; letter-spacing:-.01em; }
.card-sub { font-size:12.5px; color:var(--ink-3); margin-top:2px; }

/* ---------- input ---------- */
.field { display:flex; align-items:center; position:relative; background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-md); }
.field:focus-within { border-color:var(--signal); box-shadow:0 0 0 3px var(--signal-wash); }
.field svg { position:absolute; left:12px; width:15px; height:15px; color:var(--ink-3); pointer-events:none; }
.field input { width:100%; background:transparent; border:none; outline:none; color:var(--ink); font-size:14px; font-family:var(--font-ui); padding:11px 12px 11px 38px; }
.field input::placeholder { color:var(--ink-4); }
.field--plain input { padding-left:12px; }

/* ---------- filas ---------- */
.rows { padding:6px 0; }
.row { display:flex; align-items:center; gap:14px; padding:12px 18px; border-bottom:1px solid var(--line); transition:background .2s var(--ease); }
.row:last-child { border-bottom:none; }
.row:hover { background:var(--mist); }
.row-main { flex:1; min-width:0; }
.row-handle { font-family:var(--font-mono); font-size:13.5px; font-weight:600; color:var(--ink); }
.row-reason { font-size:12px; color:var(--ink-3); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-date { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:11px; color:var(--ink-3); }

/* ---------- badges ---------- */
.badge { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; margin-left:8px; }
.badge .dot { width:5px; height:5px; border-radius:999px; background:currentColor; }
.badge--ok { background:var(--ok-wash); color:var(--ok); border:1px solid color-mix(in srgb, var(--ok) 28%, transparent); }
.badge--neutral { background:var(--mist); color:var(--ink-2); border:1px solid var(--line-2); }

/* ---------- botones ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 15px; font-size:13.5px; font-weight:600; border-radius:var(--r-md); line-height:1; }
.btn--solid { background:var(--ink); color:var(--paper); border:1px solid var(--ink); }
.btn--outline { background:var(--paper); color:var(--ink); border:1px solid var(--line-2); }
.btn--ghost { background:transparent; color:var(--ink-2); border:1px solid transparent; }
.btn:hover:not(:disabled) { filter:brightness(0.97); }
.btn-trash { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:var(--r-sm); background:transparent; border:1px solid transparent; color:var(--ink-3); }
.btn-trash:hover { background:var(--danger-wash); color:var(--danger); border-color:color-mix(in srgb, var(--danger) 28%, transparent); }
.btn-ig { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:var(--r-sm); background:transparent; border:1px solid transparent; color:var(--ink-3); transition:color .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease); }
.btn-ig:hover { background:var(--signal-wash); color:var(--signal-ink); border-color:color-mix(in srgb, var(--signal) 30%, transparent); }

/* ---------- estados ---------- */
.state { padding:48px 18px; text-align:center; color:var(--ink-3); font-size:13px; }
.spinner { width:15px; height:15px; border:2px solid var(--line-2); border-top-color:var(--signal); border-radius:999px; display:inline-block; animation:ds-spin .7s linear infinite; vertical-align:-3px; margin-right:8px; }
@keyframes ds-spin { to { transform:rotate(360deg); } }

/* ---------- modales ---------- */
.overlay { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; padding:20px; }
.overlay.active { display:flex; animation:ds-fade .15s var(--ease) both; }
@keyframes ds-fade { from { opacity:0; } }
.modal { width:100%; max-width:392px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2); overflow:hidden; animation:ds-modal-in .2s var(--ease) both; }
@keyframes ds-modal-in { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
.modal-stripe { height:3px; background:var(--signal); }
.modal-body { padding:30px 32px 28px; }
.modal-title { font-size:24px; margin:10px 0 6px; }
.modal-desc { font-size:13px; color:var(--ink-3); margin-bottom:18px; }
.modal-form { display:flex; flex-direction:column; gap:15px; }
.form-group label { display:block; margin-bottom:6px; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:4px; }
.modal-actions .btn--solid.wide { width:100%; padding:12px 16px; }
.modal-foot { padding:13px 32px; border-top:1px solid var(--line); background:var(--bone); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; color:var(--ink-4); }
.modal-close { position:absolute; top:14px; right:14px; background:transparent; border:none; color:var(--ink-3); width:28px; height:28px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; }
.modal-close:hover { background:var(--mist); color:var(--ink); }

/* ---------- toast ---------- */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translate(-50%, 12px); opacity:0; z-index:200;
  display:flex; align-items:center; gap:10px; padding:11px 16px;
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-md); box-shadow:var(--sh-2);
  font-size:13px; color:var(--ink); transition:transform .2s var(--ease), opacity .2s var(--ease);
  pointer-events:none; max-width:90vw;
}
.toast.active { transform:translate(-50%, 0); opacity:1; }
.toast-icon { width:8px; height:8px; border-radius:999px; flex-shrink:0; }
.toast-icon.success { background:var(--ok); box-shadow:0 0 10px var(--ok-wash); }
.toast-icon.error { background:var(--danger); box-shadow:0 0 10px var(--danger-wash); }

/* ---------- stagger ---------- */
[data-stagger] > * { animation:ds-up .3s var(--ease) backwards; }
[data-stagger] > *:nth-child(1) { animation-delay:.03s; }
[data-stagger] > *:nth-child(2) { animation-delay:.06s; }
[data-stagger] > *:nth-child(3) { animation-delay:.09s; }
@keyframes ds-up { from { opacity:0; transform:translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}
@media (max-width:640px) {
  .hdr-inner { padding:10px 12px; }
  .main { padding:16px 10px 40px; }
  .row { padding:11px 12px; }
  .modal-body { padding:24px 20px 22px; }
  .modal-foot { padding:12px 20px; }
}