:root {
  --bg: #0f172a;
  --bg2: #1e1b4b;
  --panel: rgba(30, 41, 59, 0.75);
  --texto: #f8fafc;
  --suave: #94a3b8;
  --acento: #6366f1;
  --acento2: #22d3ee;
  --ok: #34d399;
  --error: #f87171;
  --borde: rgba(148, 163, 184, 0.25);
  --radio: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--texto);
  background: radial-gradient(circle at 20% 0%, var(--bg2), var(--bg) 60%) fixed;
  -webkit-text-size-adjust: 100%;
}

button, input { font: inherit; color: inherit; }

button {
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  padding: 0.7em 1.1em;
  font-weight: 600;
  background: var(--acento);
  color: #fff;
  transition: filter 0.15s, transform 0.05s;
}
button:hover:not(:disabled) { filter: brightness(1.1); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.secundario { background: transparent; border: 1px solid var(--borde); }
button.peligro { background: #dc2626; }

input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--borde);
  background: rgba(15, 23, 42, 0.7);
  padding: 0.8em 1em;
  outline: none;
}
input:focus-visible { border-color: var(--acento2); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.25); }