/* ROOM 24.7 — Portal de Socios — estilos compartidos */
:root{
  --cream:#F5F0E4;
  --cream-2:#EDE6D6;
  --olive-900:#262B21;
  --olive-800:#333A2B;
  --olive-700:#454C3B;
  --olive-600:#5B6449;
  --glow:#E9F2D6;
  --gold:#C9A24D;
  --gold-2:#E0BE72;
  --ink:#22251E;
  --line: rgba(34,37,30,0.12);
  --line-dark: rgba(233,242,214,0.18);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --red:#B3492F;
  --green:#5C7A4A;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Inter', Arial, sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.5;
}
h1,h2,h3,h4{
  font-family:'Oswald', Arial, sans-serif;
  text-transform:uppercase;
  letter-spacing:0.01em;
  color:var(--olive-900);
}
a{color:var(--olive-800); text-decoration:none;}
.mono{font-family:'Space Mono', monospace;}

/* -------- Auth pages -------- */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(ellipse 90% 70% at 75% 15%, #4E5640 0%, var(--olive-700) 45%, var(--olive-900) 100%);
  padding:24px;
}
.auth-card{
  background:var(--cream);
  border-radius:var(--radius-lg);
  padding:40px 36px;
  width:100%;
  max-width:380px;
  box-shadow:0 30px 80px rgba(0,0,0,0.35);
}
.auth-card .eyebrow{
  font-family:'Space Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:6px;
}
.auth-card h1{font-size:24px; margin-bottom:24px;}
.field{margin-bottom:16px;}
.field label{
  display:block;
  font-family:'Space Mono', monospace;
  font-size:11px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--olive-600);
  margin-bottom:6px;
}
.field input{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:14.5px;
  background:#fff;
  font-family:'Inter', sans-serif;
}
.field input:focus{outline:none; border-color:var(--olive-700);}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:'Space Mono', monospace;
  font-size:13px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:12px 22px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  background:var(--olive-900);
  color:var(--cream);
  transition:transform .2s ease, background .2s ease;
}
.btn:hover{background:var(--olive-700); transform:translateY(-1px);}
.btn-gold{background:var(--gold); color:var(--olive-900);}
.btn-gold:hover{background:var(--gold-2);}
.btn-ghost{background:transparent; color:var(--olive-800); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--olive-800);}
.btn-danger{background:var(--red); color:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:8px 16px; font-size:11.5px;}
.error-msg{
  background:rgba(179,73,47,0.1);
  border:1px solid rgba(179,73,47,0.3);
  color:var(--red);
  padding:10px 14px;
  border-radius:var(--radius-sm);
  font-size:13px;
  margin-bottom:16px;
}
.success-msg{
  background:rgba(92,122,74,0.1);
  border:1px solid rgba(92,122,74,0.3);
  color:var(--green);
  padding:10px 14px;
  border-radius:var(--radius-sm);
  font-size:13px;
  margin-bottom:16px;
}

/* -------- App shell -------- */
.topbar{
  background:var(--olive-900);
  color:var(--cream);
  padding:16px 0;
}
.topbar .wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.topbar .brand{
  font-family:'Oswald', sans-serif;
  font-size:16px;
  letter-spacing:0.02em;
  text-transform:uppercase;
}
.topbar .brand small{
  display:block;
  font-family:'Space Mono', monospace;
  font-size:9.5px;
  color:rgba(245,240,228,0.55);
  text-transform:uppercase;
  margin-top:2px;
}
.topbar nav{display:flex; align-items:center; gap:20px;}
.topbar nav a{color:rgba(245,240,228,0.75); font-size:13.5px;}
.topbar nav a:hover{color:var(--glow);}
.topbar .logout{
  font-family:'Space Mono', monospace;
  font-size:11.5px;
  text-transform:uppercase;
  color:rgba(245,240,228,0.5);
  border:1px solid var(--line-dark);
  padding:7px 14px;
  border-radius:999px;
}
.topbar .logout:hover{color:var(--cream); border-color:var(--glow);}

main.container{
  max-width:1100px;
  margin:0 auto;
  padding:40px 24px 80px;
}
.page-head{margin-bottom:32px;}
.page-head h1{font-size:28px;}
.page-head p{color:var(--olive-600); margin-top:6px; font-size:14.5px;}

/* -------- Stat cards -------- */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-bottom:36px;
}
.stat-card{
  background:var(--olive-900);
  color:var(--cream);
  border-radius:var(--radius-md);
  padding:20px 22px;
}
.stat-card .lbl{
  font-family:'Space Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:rgba(245,240,228,0.55);
  margin-bottom:8px;
}
.stat-card .val{font-family:'Oswald', sans-serif; font-size:26px; color:var(--glow);}
.stat-card.gold .val{color:var(--gold-2);}

/* -------- Cards / panels -------- */
.panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:26px 28px;
  margin-bottom:28px;
}
.panel h2{font-size:18px; margin-bottom:18px;}
.panel-flex{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}

/* -------- Tables -------- */
table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{
  text-align:left;
  font-family:'Space Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--olive-600);
  padding:8px 10px;
  border-bottom:1px solid var(--line);
}
td{padding:10px 10px; border-bottom:1px solid var(--line);}
tr:last-child td{border-bottom:none;}
.tag{
  display:inline-block;
  font-family:'Space Mono', monospace;
  font-size:10.5px;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:999px;
  background:var(--cream-2);
  color:var(--olive-700);
}
.tag.ok{background:rgba(92,122,74,0.12); color:var(--green);}
.tag.pending{background:rgba(201,162,77,0.15); color:#8a6a1f;}

/* -------- Bar chart (simple, no JS lib) -------- */
.bar-chart{
  display:flex;
  align-items:flex-end;
  gap:4px;
  height:140px;
  padding-top:10px;
}
.bar-chart .bar{
  flex:1;
  background:var(--olive-700);
  border-radius:4px 4px 0 0;
  min-height:2px;
  position:relative;
}
.bar-chart .bar:hover{background:var(--gold);}
.bar-chart .bar .tip{
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  font-family:'Space Mono', monospace;
  font-size:10px;
  white-space:nowrap;
  color:var(--olive-800);
  opacity:0;
  transition:opacity .15s ease;
  margin-bottom:4px;
}
.bar-chart .bar:hover .tip{opacity:1;}

/* -------- Benefits -------- */
.benefits-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:16px;
}
.benefit-card{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:18px 20px;
  background:var(--cream-2);
}
.benefit-card.redeemed{opacity:0.55;}
.benefit-card h4{font-size:15px; text-transform:none; margin-bottom:6px; font-family:'Inter',sans-serif; font-weight:600;}
.benefit-card p{font-size:13px; color:var(--olive-700); margin-bottom:10px;}
.benefit-card .code{
  font-family:'Space Mono', monospace;
  font-size:12px;
  background:#fff;
  border:1px dashed var(--olive-600);
  padding:6px 10px;
  border-radius:6px;
  display:inline-block;
  margin-bottom:8px;
}

/* -------- Forms -------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-grid .field.full{grid-column:1/-1;}
select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:14.5px;
  background:#fff;
  font-family:'Inter', sans-serif;
}

/* -------- Misc -------- */
.muted{color:var(--olive-600); font-size:13px;}
.flex-between{display:flex; align-items:center; justify-content:space-between;}
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;}
.mb-16{margin-bottom:16px;}

@media (max-width:800px){
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .form-grid{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .stats-grid{grid-template-columns:1fr;}
  .topbar nav{display:none;}
}