/* ─── SSSOUL · GLOBAL CSS ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#F8F7F5;
  --surface:#FFFFFF;
  --surface-2:#FAFAF8;
  --border:#E5E3DC;
  --border-strong:#C8C4BB;
  --text:#1A1A1A;
  --text-muted:#888880;
  --text-faint:#C0BDB5;
  --green:#16A34A;
  --green-bg:#F0FDF4;
  --amber:#B45309;
  --amber-bg:#FFFBEB;
  --red:#DC2626;
  --red-bg:#FEF2F2;
  --blue-bg:#EFF6FF;
  --blue-text:#1D4ED8;
  --purple-bg:#F5F3FF;
  --purple-text:#6D28D9;
  --teal-bg:#ECFDF5;
  --teal-text:#065F46;
  --gold-bg:#FFFBEB;
  --gold-text:#92400E;
  --pink-bg:#FFF1F2;
  --pink-text:#9F1239;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
}

body{
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
.font-syne{font-family:'Syne',sans-serif}
.font-mono{font-family:'DM Mono',monospace}

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 16px;border-radius:var(--radius-md);font-size:13px;
  font-family:'DM Sans',sans-serif;font-weight:500;cursor:pointer;
  border:none;transition:opacity .15s,background .15s;white-space:nowrap;
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--text);color:var(--bg)}
.btn-primary:hover:not(:disabled){opacity:.82}
.btn-secondary{background:none;border:1px solid var(--border);color:var(--text-muted)}
.btn-secondary:hover:not(:disabled){border-color:var(--border-strong);color:var(--text)}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-full{width:100%}

/* ─── FORM ───────────────────────────────────────────────────────────────── */
.fg{margin-bottom:15px}
.fl{
  display:block;font-size:11px;text-transform:uppercase;
  letter-spacing:.7px;color:var(--text-muted);margin-bottom:5px;
  font-family:'DM Mono',monospace;
}
.fi,.fs{
  width:100%;padding:9px 12px;border:1px solid var(--border);
  border-radius:var(--radius-md);font-size:13px;font-family:'DM Sans',sans-serif;
  background:var(--surface);color:var(--text);transition:border-color .15s;
}
.fi:focus,.fs:focus{outline:none;border-color:var(--border-strong)}
.fi::placeholder{color:var(--text-faint)}
.fhint{font-size:11px;color:var(--text-faint);margin-top:3px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fdiv{border:none;border-top:1px solid var(--border);margin:18px 0}
.fsec{
  font-size:11px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--text-faint);font-family:'DM Mono',monospace;margin-bottom:12px;
}

/* ─── TOAST ──────────────────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:22px;right:22px;
  background:#1A1A1A;color:white;
  padding:11px 18px;border-radius:var(--radius-md);
  font-size:13px;z-index:999;
  transform:translateY(70px);opacity:0;
  transition:all .28s ease;max-width:300px;
  font-family:'DM Sans',sans-serif;
}
.toast.show{transform:translateY(0);opacity:1}
.toast.ok{background:var(--green)}
.toast.err{background:var(--red)}

/* ─── BADGES ─────────────────────────────────────────────────────────────── */
.badge{
  display:inline-block;padding:2px 8px;border-radius:4px;
  font-size:11px;font-weight:500;font-family:'DM Mono',monospace;
}
.badge-cam{background:var(--blue-bg);color:var(--blue-text)}
.badge-hoo{background:var(--purple-bg);color:var(--purple-text)}
.badge-pan{background:var(--teal-bg);color:var(--teal-text)}
.badge-acc{background:var(--gold-bg);color:var(--gold-text)}
.badge-esp{background:var(--pink-bg);color:var(--pink-text)}
.badge-crop{background:var(--pink-bg);color:var(--pink-text)}
.badge-top{background:var(--gold-bg);color:var(--gold-text)}
.badge-spi{background:var(--teal-bg);color:var(--teal-text);border:1px solid var(--teal-text)}

.status-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 8px;border-radius:5px;font-size:11px;font-weight:500;
}
.status-disponible{background:var(--green-bg);color:var(--green)}
.status-reservado{background:var(--amber-bg);color:var(--amber)}
.status-agotado{background:#F5F5F4;color:var(--text-faint)}
.status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}