/* Estilos base y complementos Netxus */

:root {
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;

  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;

  --color-emerald-50: #ecfdf5;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
}

/* Clases auxiliares para Slate */
.bg-slate-50 { background-color: var(--color-slate-50); }
.bg-slate-100 { background-color: var(--color-slate-100); }
.bg-slate-800 { background-color: var(--color-slate-800); }
.bg-slate-900 { background-color: var(--color-slate-900); }

.text-slate-400 { color: var(--color-slate-400); }
.text-slate-500 { color: var(--color-slate-500); }
.text-slate-600 { color: var(--color-slate-600); }
.text-slate-700 { color: var(--color-slate-700); }
.text-slate-800 { color: var(--color-slate-800); }
.text-slate-900 { color: var(--color-slate-900); }

.border-slate-100 { border-color: var(--color-slate-100); }
.border-slate-200 { border-color: var(--color-slate-200); }
.border-slate-300 { border-color: var(--color-slate-300); }
.border-slate-800 { border-color: var(--color-slate-800); }

/* Clases auxiliares para Rose */
.bg-rose-50 { background-color: var(--color-rose-50); }
.bg-rose-100 { background-color: var(--color-rose-100); }
.text-rose-500 { color: var(--color-rose-500); }
.text-rose-600 { color: var(--color-rose-600); }
.text-rose-700 { color: var(--color-rose-700); }
.text-rose-800 { color: var(--color-rose-800); }
.border-rose-100 { border-color: var(--color-rose-100); }
.border-rose-200 { border-color: var(--color-rose-200); }

/* Modales y utilidades */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[x-cloak] {
  display: none !important;
}

/* Transiciones suaves */
* {
  box-sizing: border-box;
}

/* Scrollbar personalizado */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}