/* Estilos del panel (complementan el design system de web/ds/). */

/* Variables de respaldo por si el design system no las define */
:root {
  --font-display: var(--font-display, 'Space Grotesk', sans-serif);
  --font-body:    var(--font-body, 'Plus Jakarta Sans', sans-serif);
  --font-mono:    var(--font-mono, 'Space Mono', monospace);
  --shadow-md: 0 8px 28px -12px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.7);
  --glass: rgba(11,15,25,0.72);
  --blur: blur(10px);
  --glow-sm: 0 6px 20px -8px var(--accent-shadow, rgba(14,165,233,0.4));
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
input, button, select, textarea { font-family: inherit; outline: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.09); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }
::-webkit-scrollbar-track { background: transparent; }

.bn-svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bn-row:hover { background: rgba(255,255,255,0.03) !important; }
.bn-conv:hover { background: rgba(255,255,255,0.04) !important; }
.bn-press { transition: transform .12s var(--ease), background .15s, border-color .15s, box-shadow .15s; }
.bn-press:hover { transform: translateY(-1px); }
@keyframes bn-blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

#root, .app-shell { height: 100vh; width: 100%; overflow: hidden; position: relative; }