/* Sistema visual: "Midnight Luxe" — obsidiana, champán y marfil. */
:root {
  --bg: #0d0d12;
  --bg-2: #14141b;
  --card: #1b1b24;
  --card-2: #23232e;
  --line: #2f2f3c;
  --text: #faf8f5;
  --dim: #a6a3ad;
  --faint: #6f6c78;
  --accent: #c9a84c;
  --accent-ink: #15130c;
  --ok: #5fbf7f;
  --warn: #e0a43a;
  --bad: #e2645a;
  --info: #7aa7e0;
  --r-xl: 2rem;
  --r-lg: 1.4rem;
  --r-md: 1rem;
  --r-sm: 0.7rem;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
/* Textura de ruido global */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
.mono { font-family: var(--mono); font-feature-settings: 'tnum'; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 500; }
.dim { color: var(--dim); }
.faint { color: var(--faint); }
.hidden { display: none !important; }

/* ---------- Botones con capa deslizante ---------- */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.35s var(--ease), opacity 0.2s;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--text);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
@media (hover: hover) {
  .btn:hover { transform: scale(1.03); }
  .btn:hover::before { transform: translateY(0); }
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.35; pointer-events: none; }
.btn.block { width: 100%; }
.btn.ghost { background: var(--card-2); color: var(--text); }
.btn.ghost::before { background: var(--line); }
.btn.danger { background: var(--bad); color: #fff; }
.btn.ok { background: var(--ok); color: #08130c; }
.btn.sm { min-height: 2.5rem; padding: 0 1rem; font-size: 0.9rem; }
.btn.xl { min-height: 4rem; font-size: 1.15rem; }

.link { background: none; border: 0; color: var(--accent); padding: 0.4rem 0; font-weight: 600; }

/* ---------- Formularios ---------- */
label.f { display: block; font-size: 0.8rem; color: var(--dim); margin: 0.9rem 0 0.35rem; letter-spacing: 0.02em; }
input.i, select.i, textarea.i {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.7rem 1rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 1.05rem;
  outline: none;
  transition: border-color 0.2s;
}
input.i:focus, select.i:focus, textarea.i:focus { border-color: var(--accent); }
.row { display: flex; gap: 0.75rem; }
.row > * { flex: 1; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--card-2);
  color: var(--dim);
  white-space: nowrap;
}
.chip.ok { background: rgba(95, 191, 127, 0.14); color: #8fdca9; }
.chip.warn { background: rgba(224, 164, 58, 0.14); color: #f0c47a; }
.chip.bad { background: rgba(226, 100, 90, 0.14); color: #f0a29b; }
.chip.info { background: rgba(122, 167, 224, 0.14); color: #a9c6ee; }
.chip.gold { background: rgba(201, 168, 76, 0.15); color: var(--accent); }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  transform: translate(-50%, 150%);
  max-width: min(92vw, 30rem);
  padding: 0.9rem 1.3rem;
  border-radius: var(--r-md);
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  z-index: 1000;
  transition: transform 0.4s var(--ease), opacity 0.3s, visibility 0.3s;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast.err { background: var(--bad); color: #fff; }

.spinner {
  width: 2rem;
  height: 2rem;
  margin: 2rem auto;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 0.6s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}