/* ==========================================================
   SYMRO | dashboard.css
   Capa semántica + shell responsive
   PROTOCOLO: no reemplaza Tailwind; lo complementa
   ========================================================== */

:root {
  --symro-bg: #000000;
  --symro-base: #0a0a0a;
  --symro-surface: #121212;
  --symro-surface-hover: #1a1a1a;
  --symro-border: #27272a;
  --symro-border-soft: rgba(255,255,255,0.08);
  --symro-muted: #86868b;
  --symro-text: #ffffff;
  --symro-brand: #3b82f6;
  --symro-success: #22c55e;
  --symro-warning: #eab308;
  --symro-danger: #ef4444;
  --symro-radius-xl: 1.25rem;
  --symro-radius-2xl: 1.5rem;
  --symro-radius-3xl: 2rem;
  --symro-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--symro-bg);
  color: var(--symro-text);
  min-height: 100%;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}

body.symro-shell {
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.15), transparent 24%),
    radial-gradient(circle at bottom left, rgba(34,197,94,.09), transparent 28%),
    #000;
  overscroll-behavior: none;
}

a { color: inherit; }

.no-scrollbar::-webkit-scrollbar,
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.no-scrollbar,
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.fade-enter { opacity: 0; transform: translateY(8px); }
.fade-enter-active { opacity: 1; transform: translateY(0); transition: opacity .24s ease, transform .24s ease; }

@keyframes symroFadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
  animation: symroFadeInUp .28s ease both;
}

/* Compatibilidad legacy neutralizada.
   Las clases .symro-app / .symro-sidebar / .card se preservan en historial,
   pero ya no deben gobernar la shell estándar de SYMRO. */