/* ============================================================
   VILA SECA — ESTILOS GLOBAIS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  --ink:    #0d0d0d;
  --cream:  #f4efe4;
  --yellow: #f0c030;
  --red:    #d4241a;
  --green:  #19a34a;
  --orange: #e07b10;
  --muted:  #6b6460;
  --border: #ddd8cf;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Syne', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* NAV */
nav {
  background: var(--ink);
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px solid var(--yellow);
}
.nav-brand { cursor: pointer; text-decoration: none; }
.nav-brand-top  { font-family:'Space Mono',monospace; font-size:.52rem; letter-spacing:3px; color:var(--yellow); text-transform:uppercase; display:block; }
.nav-brand-main { font-family:'Bebas Neue',cursive; font-size:1.25rem; color:white; letter-spacing:2px; }
.nav-links { display:flex; gap:.6rem; align-items:center; }
.nav-btn { background:none; border:1.5px solid #3a3a3a; color:#aaa; padding:.4rem 1rem; font-family:'Space Mono',monospace; font-size:.62rem; cursor:pointer; transition:all .18s; letter-spacing:1px; text-transform:uppercase; text-decoration:none; display:inline-flex; align-items:center; }
.nav-btn:hover { border-color:var(--yellow); color:var(--yellow); }
.nav-btn.cta { background:var(--yellow); color:var(--ink); border-color:var(--yellow); font-weight:700; }
.nav-btn.cta:hover { background:#d9ac20; }
.nav-btn.active { border-color:var(--yellow); color:var(--yellow); }

/* LOADING */
.loading-overlay { position:fixed; inset:0; background:rgba(13,13,13,.85); z-index:500; display:none; align-items:center; justify-content:center; flex-direction:column; gap:1rem; }
.loading-overlay.show { display:flex; }
.spinner { width:48px; height:48px; border:4px solid #333; border-top-color:var(--yellow); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { font-family:'Space Mono',monospace; font-size:.75rem; color:#aaa; letter-spacing:2px; }

/* TOAST */
.toast { position:fixed; bottom:2rem; right:2rem; background:var(--ink); color:white; padding:1rem 1.5rem; font-family:'Space Mono',monospace; font-size:.72rem; z-index:9999; transform:translateY(80px); opacity:0; transition:all .3s cubic-bezier(.34,1.56,.64,1); border-left:4px solid var(--yellow); max-width:320px; pointer-events:none; line-height:1.5; }
.toast.show { transform:translateY(0); opacity:1; }
.toast.ok   { border-left-color:var(--green); }
.toast.err  { border-left-color:var(--red); }
.toast.warn { border-left-color:var(--orange); }

/* BUTTONS */
.btn-primary { background:var(--yellow); color:var(--ink); border:none; padding:1rem 2rem; font-family:'Bebas Neue',cursive; font-size:1.3rem; letter-spacing:3px; cursor:pointer; transition:all .18s; display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; }
.btn-primary:hover { background:#d9ac20; transform:translateY(-2px); box-shadow:0 8px 25px rgba(240,192,48,.35); }
.btn-ghost { background:none; border:1.5px solid #444; color:#aaa; padding:1rem 1.5rem; font-family:'Space Mono',monospace; font-size:.68rem; cursor:pointer; letter-spacing:2px; transition:all .18s; text-transform:uppercase; text-decoration:none; display:inline-flex; align-items:center; }
.btn-ghost:hover { border-color:white; color:white; }
.submit-btn { width:100%; background:var(--yellow); color:var(--ink); border:none; padding:1.1rem; font-family:'Bebas Neue',cursive; font-size:1.35rem; letter-spacing:3px; cursor:pointer; transition:all .18s; margin-top:.8rem; }
.submit-btn:hover { background:#d9ac20; transform:translateY(-2px); }
.submit-btn:disabled { background:#ccc; color:#888; cursor:not-allowed; transform:none; }
.submit-btn.grey { background:#ddd; color:#888; }
.submit-btn.grey:hover { transform:none; background:#ccc; }
.abtn { background:var(--ink); color:white; border:none; padding:.75rem 1.2rem; font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:1px; cursor:pointer; text-transform:uppercase; transition:background .15s; white-space:nowrap; }
.abtn:hover        { background:#333; }
.abtn.green        { background:var(--green); }
.abtn.green:hover  { background:#158a3e; }
.abtn.red          { background:var(--red); }
.abtn.red:hover    { background:#b01e15; }
.abtn.orange       { background:var(--orange); }
.abtn.orange:hover { background:#c56d0e; }
.abtn.yellow-btn   { background:var(--yellow); color:var(--ink); }
.abtn.yellow-btn:hover { background:#d9ac20; }

/* FORMS */
.field { margin-bottom:1.4rem; }
.field label { display:block; font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:.45rem; }
.field input, .field textarea, .field select { width:100%; padding:.8rem 1rem; border:1.5px solid var(--border); background:var(--cream); font-family:'Syne',sans-serif; font-size:.95rem; outline:none; transition:border-color .18s; }
.field input:focus, .field textarea:focus { border-color:var(--ink); background:white; }

/* BADGE / PILLS */
.badge-tag { display:inline-block; background:var(--ink); color:var(--yellow); font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:3px; text-transform:uppercase; padding:.3rem .8rem; margin-bottom:1.5rem; }
.pill { display:inline-block; padding:.2rem .6rem; font-family:'Space Mono',monospace; font-size:.55rem; letter-spacing:1px; text-transform:uppercase; border-radius:2px; }
.pill.valid      { background:#d4f5e2; color:#0a5c2a; }
.pill.used       { background:#f0f0f0; color:#555; }
.pill.pending    { background:#ffe8cc; color:#7a4000; border:1px solid #f0b060; }
.pill.presencial { background:#e8e0ff; color:#3a0a7a; }
.pill.cancelled  { background:#fde8e8; color:#8b1a1a; }

/* BOXES */
.warning-box { font-size:.72rem; color:#7a5a00; font-family:'Space Mono',monospace; padding:.8rem; background:#fff8e8; border:1px solid #f0d060; margin-bottom:.8rem; line-height:1.6; }
.info-box    { font-size:.72rem; color:#1a4a7a; font-family:'Space Mono',monospace; padding:.8rem; background:#e8f3ff; border:1px solid #90c0f0; margin-bottom:.8rem; line-height:1.6; }
.success-box { font-size:.72rem; color:#0a5c2a; font-family:'Space Mono',monospace; padding:.8rem; background:#d4f5e2; border:1px solid #70d090; margin-bottom:.8rem; line-height:1.6; }

/* STOCK BANNER */
.stock-banner { background:#111; padding:.75rem 2.5rem; display:flex; align-items:center; gap:2rem; border-bottom:1px solid #1e1e1e; }
.stock-banner-lbl { font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:2px; text-transform:uppercase; color:#666; white-space:nowrap; }
.stock-bar-wrap { flex:1; height:5px; background:#2a2a2a; border-radius:3px; }
.stock-bar-fill { height:100%; background:var(--yellow); border-radius:3px; transition:width .5s; }
.stock-nums { font-family:'Bebas Neue',cursive; font-size:1.1rem; color:var(--yellow); white-space:nowrap; }

/* PAGE HEADER */
.page-header { background:var(--ink); padding:2.5rem 5rem; border-bottom:3px solid var(--yellow); }
.page-header h1 { font-family:'Bebas Neue',cursive; font-size:2.5rem; color:white; letter-spacing:2px; }
.page-header p  { color:#888; font-size:.78rem; font-family:'Space Mono',monospace; letter-spacing:1px; margin-top:.3rem; }

/* TABLES */
.tbl-wrap { overflow-x:auto; max-height:380px; overflow-y:auto; }
table { width:100%; border-collapse:collapse; }
thead th { font-family:'Space Mono',monospace; font-size:.55rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); padding:.6rem .8rem; border-bottom:2px solid var(--border); text-align:left; position:sticky; top:0; background:white; }
tbody td { padding:.72rem .8rem; font-size:.82rem; border-bottom:1px solid #f0ece4; vertical-align:middle; }
tbody tr:hover td { background:#faf8f4; }
tbody tr.pr td { background:#fff8f0; }
tbody tr.pr:hover td { background:#fff0e0; }

/* QTY */
.qty-row { display:flex; align-items:center; gap:1rem; }
.qty-btn { width:42px; height:42px; border:1.5px solid var(--border); background:white; font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.qty-btn:hover { background:var(--ink); color:white; border-color:var(--ink); }
.qty-num { font-family:'Bebas Neue',cursive; font-size:2.5rem; min-width:40px; text-align:center; }
.qty-hint { font-family:'Space Mono',monospace; font-size:.6rem; color:var(--muted); }

/* ANIMATIONS */
@keyframes pop { 0%{transform:scale(0)} 70%{transform:scale(1.2)} 100%{transform:scale(1)} }
@keyframes pulse-ring { 0%,100%{box-shadow:0 0 0 0 rgba(224,123,16,.5)} 50%{box-shadow:0 0 0 16px rgba(224,123,16,0)} }
@keyframes pulse-bg { 0%,100%{opacity:1} 50%{opacity:.75} }
@keyframes fadein { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.fadein { animation:fadein .4s ease both; }

/* RESPONSIVE */
@media(max-width:768px) {
  nav { padding:0 1rem; }
  .page-header { padding:2rem 1.5rem; }
  .nav-brand-top { display:none; }
}