/* ============================================================
   SORTEOS GRUPO OLAM — black & white, minimalist event app
   ============================================================ */

:root{
  --paper:        #f6f5f1;   /* warm off-white  */
  --paper-2:      #efeee8;
  --ink:          #0b0b0a;   /* near black      */
  --ink-2:        #2a2a27;
  --line:         #d9d8d1;
  --line-2:       #c8c7bf;
  --muted:        #8a8a82;
  --stage:        #0a0a0a;   /* stage black     */
  --stage-2:      #141413;
  --stage-line:   #2a2a28;
  --white:        #f7f7f3;
  --white-dim:    #b4b4ad;
  --radius:       14px;
  --shadow:       0 1px 0 rgba(0,0,0,.04), 0 8px 30px -12px rgba(0,0,0,.18);
  --font:         "Archivo", system-ui, -apple-system, sans-serif;
  --mono:         "Space Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--font);
  background:var(--ink);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
#root{ height:100vh; width:100vw; }

button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea{ font-family:inherit; }
::selection{ background:var(--ink); color:var(--paper); }

/* ---------- App shell ---------- */
.app{ height:100vh; width:100vw; display:flex; flex-direction:column; }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:18px;
  flex-wrap:wrap;
  padding:14px 26px;
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.brand{ display:flex; align-items:center; gap:14px; min-width:0; flex:0 0 auto; }
.brand .logo-wrap{
  height:38px; width:120px; display:flex; align-items:center;
}
.brand image-slot[data-filled]{ filter:brightness(0); }  /* force any dropped logo to solid black */
.brand .wordmark{
  display:flex; flex-direction:column; line-height:1; gap:3px;
  border-left:1px solid var(--line-2); padding-left:14px;
}
.brand .wordmark .k{
  font-family:var(--mono); font-size:10px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--muted);
}
.brand .wordmark .t{
  font-size:18px; font-weight:800; letter-spacing:-.01em; text-transform:uppercase;
}
.topbar .spacer{ flex:1; }

.nav{ display:flex; gap:6px; background:var(--paper-2); padding:4px; border-radius:11px; border:1px solid var(--line); max-width:100%; }
.nav button{
  font-size:12.5px; font-weight:700; letter-spacing:.01em;
  padding:8px 16px; border-radius:8px; color:var(--ink-2);
  display:flex; align-items:center; gap:8px; transition:.15s;
}
.nav button .num{ font-family:var(--mono); font-size:10px; color:var(--muted); }
.nav button:hover{ color:var(--ink); }
.nav button.on{ background:var(--ink); color:var(--paper); box-shadow:var(--shadow); }
.nav button.on .num{ color:var(--paper); opacity:.6; }
.nav button:disabled{ opacity:.4; cursor:not-allowed; }

.pool-pill{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12px; color:var(--ink-2);
  padding:8px 14px; border:1px solid var(--line); border-radius:10px; background:var(--paper);
}
.pool-pill b{ font-size:14px; color:var(--ink); }
.pool-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--ink); }

.icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; background:var(--paper);
  transition:.15s;
}
.icon-btn:hover{ background:var(--paper-2); }
.icon-btn svg{ width:18px; height:18px; }

/* ============================================================
   SETUP VIEW
   ============================================================ */
.setup{ flex:1; min-height:0; background:var(--paper); display:flex; }
.setup .col{ flex:1; min-width:0; display:flex; flex-direction:column; padding:30px 34px; overflow-y:auto; }
.setup .col + .col{ border-left:1px solid var(--line); }

.col-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.col-head .label{
  font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:9px;
}
.col-head .label .n{
  width:22px; height:22px; border-radius:6px; background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
}
.col-head h2{ font-size:23px; font-weight:800; letter-spacing:-.02em; margin-top:9px; }
.col-head .sub{ font-size:13px; color:var(--muted); margin-top:3px; }
.col-head .count{
  font-family:var(--mono); font-size:13px; color:var(--ink);
  border:1px solid var(--line); border-radius:9px; padding:7px 12px; white-space:nowrap;
}
.col-head .count b{ font-size:16px; }

/* participants */
.seg{ display:flex; gap:6px; background:var(--paper-2); padding:4px; border-radius:10px; border:1px solid var(--line); margin-bottom:14px; width:fit-content; }
.seg button{ font-size:12px; font-weight:700; padding:7px 14px; border-radius:7px; color:var(--ink-2); display:flex; align-items:center; gap:7px; }
.seg button.on{ background:var(--paper); box-shadow:var(--shadow); color:var(--ink); }

.names-area{
  flex:1; min-height:140px; width:100%; resize:none;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
  padding:16px 18px; font-size:15px; line-height:1.7; color:var(--ink);
}
.names-area:focus{ outline:none; border-color:var(--ink); }
.names-area::placeholder{ color:var(--muted); }

.dropzone{
  flex:1; min-height:200px; border:1.5px dashed var(--line-2); border-radius:var(--radius);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  text-align:center; color:var(--muted); transition:.15s; padding:30px; cursor:pointer;
}
.dropzone:hover,.dropzone.drag{ border-color:var(--ink); color:var(--ink-2); background:var(--paper-2); }
.dropzone svg{ width:34px; height:34px; opacity:.7; }
.dropzone .big{ font-size:15px; font-weight:700; color:var(--ink); }
.dropzone .small{ font-size:12.5px; }
.dropzone .formats{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; }

.hint{ font-size:12px; color:var(--muted); margin-top:12px; display:flex; align-items:center; gap:8px; }

/* prizes */
.prize-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.prize-card{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper);
  transition:.15s;
}
.prize-card:hover{ border-color:var(--line-2); }
.prize-card .idx{
  width:30px; height:30px; flex:0 0 auto; border-radius:8px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; font-weight:700;
}
.prize-card input.pname{
  flex:1; min-width:0; border:none; background:none; font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--ink);
  padding:4px 0;
}
.prize-card input.pname:focus{ outline:none; }
.qty{ display:flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.qty button{ width:30px; height:32px; font-size:17px; font-weight:700; color:var(--ink-2); display:flex; align-items:center; justify-content:center; }
.qty button:hover{ background:var(--paper-2); }
.qty .v{ width:34px; text-align:center; font-family:var(--mono); font-size:14px; font-weight:700; }
.qty .lab{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:0 10px 0 4px; }
.prize-card .del{ width:30px; height:30px; border-radius:8px; color:var(--muted); display:flex; align-items:center; justify-content:center; }
.prize-card .del:hover{ background:#f0e4e2; color:#9a3b2e; }
.prize-card .del svg{ width:15px; height:15px; }

.add-prize{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:13px; border:1.5px dashed var(--line-2); border-radius:var(--radius);
  font-size:13.5px; font-weight:700; color:var(--ink-2); transition:.15s;
}
.add-prize:hover{ border-color:var(--ink); color:var(--ink); background:var(--paper-2); }

.setup-foot{
  flex:0 0 auto; border-top:1px solid var(--line); background:var(--paper);
  padding:16px 34px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.setup-foot .summary{ font-size:13px; color:var(--muted); }
.setup-foot .summary b{ color:var(--ink); font-family:var(--mono); }

/* random option setup */
.options-setup{ flex:1; min-height:0; background:var(--paper); overflow:auto; }
.options-inner{ max-width:980px; margin:0 auto; padding:28px 34px; }
.options-card{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper);
  padding:16px;
}
.options-card-title{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:12px;
}
.options-area{
  width:100%;
  min-height:220px;
  resize:vertical;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper);
  padding:14px 16px;
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
}
.options-area:focus{ outline:none; border-color:var(--ink); }
.options-area::placeholder{ color:var(--muted); }
.options-foot{ border-top:1px solid var(--line); }

/* big primary button */
.btn-primary{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--ink); color:var(--paper); font-size:15px; font-weight:800; letter-spacing:.01em;
  padding:15px 26px; border-radius:12px; transition:.18s; box-shadow:var(--shadow);
}
.btn-primary:hover:not(:disabled){ transform:translateY(-1px); }
.btn-primary:active:not(:disabled){ transform:translateY(0); }
.btn-primary:disabled{ opacity:.35; cursor:not-allowed; }
.btn-primary .arr{ font-size:17px; }
.btn-ghost{
  display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; color:var(--ink-2);
  padding:13px 18px; border:1px solid var(--line); border-radius:11px; transition:.15s; background:var(--paper);
}
.btn-ghost:hover{ background:var(--paper-2); color:var(--ink); }

/* ============================================================
   STAGE VIEW  (dark)
   ============================================================ */
.stage{ flex:1; min-height:0; background:var(--stage); color:var(--white); position:relative; display:flex; flex-direction:column; overflow:hidden; }
.stage::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.06), transparent 60%);
}

/* random option live draw: custom background image */
.stage.quick-stage{
  background-color:#090910;
  background-image:url("images/designer.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.stage.quick-stage::before{
  background:
    linear-gradient(180deg, rgba(4,4,8,.58) 0%, rgba(4,4,8,.72) 48%, rgba(4,4,8,.84) 100%),
    radial-gradient(110% 72% at 50% -10%, rgba(255,255,255,.08), transparent 58%);
}
.quick-tools{ display:flex; gap:10px; }
.quick-stage .stage-foot{
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:12px;
}
.quick-stage .draw-btn{ order:0; }
.quick-stage .draw-btn{ padding:12px 40px; }
.quick-stage .stage-tools.quick-tools{
  position:static;
  right:auto;
  bottom:auto;
  order:1;
  width:100%;
  justify-content:center;
}
.quick-stage .next-btn{
  padding:12px 20px;
  font-size:13px;
  font-weight:700;
  border-radius:12px;
}
.quick-stage .foot-meta{
  position:static;
  order:2;
  width:100%;
  justify-content:center;
}

/* prize rail */
.rail{
  flex:0 0 auto; display:flex; gap:10px; padding:18px 28px; overflow-x:auto; z-index:2;
  border-bottom:1px solid var(--stage-line);
}
.rail::-webkit-scrollbar{ height:0; }
.chip{
  flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:11px 16px;
  border:1px solid var(--stage-line); border-radius:12px; background:var(--stage-2); transition:.15s; cursor:pointer;
}
.chip:hover{ border-color:#3a3a37; }
.chip.on{ border-color:var(--white); background:#fff; color:var(--ink); }
.chip .ci{ font-family:var(--mono); font-size:11px; opacity:.55; }
.chip.on .ci{ opacity:.5; }
.chip .cn{ font-size:14px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.chip .cp{
  font-family:var(--mono); font-size:11px; padding:3px 8px; border-radius:20px;
  border:1px solid var(--stage-line); color:var(--white-dim);
}
.chip.on .cp{ border-color:rgba(0,0,0,.15); color:var(--ink); }
.chip.done .cp{ background:var(--white); color:var(--ink); border-color:var(--white); }
.chip.on.done .cp{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* center */
.stage-main{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 28px; z-index:2; position:relative; }
.prize-now{ text-align:center; margin-bottom:6px; }
.prize-now .pl{ font-family:var(--mono); font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--white-dim); }
.prize-now h1{ font-size:clamp(26px,3.6vw,46px); font-weight:800; letter-spacing:-.025em; margin-top:8px; }

.roller{
  width:min(1180px,92vw); margin:clamp(14px,3vh,40px) 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:clamp(140px,26vh,260px); position:relative;
}
.roller .winner-label{
  font-family:var(--mono); font-size:13px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--white-dim); margin-bottom:14px; transition:.2s;
}
.roller .name{
  font-size:clamp(48px,9vw,128px); font-weight:900; line-height:.94; letter-spacing:-.035em;
  text-transform:uppercase; text-align:center; text-wrap:balance;
  transition:filter .08s, opacity .08s;
}
.roller.rolling .name{ filter:blur(.4px); opacity:.86; }
.roller.idle .name{ opacity:.18; font-weight:800; }
.roller.revealed .name{ animation:pop .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pop{ 0%{ transform:scale(.84); opacity:0; } 60%{ transform:scale(1.04); } 100%{ transform:scale(1); opacity:1; } }
.roller .rule{ width:min(640px,80%); height:1px; background:linear-gradient(90deg,transparent,var(--stage-line),transparent); margin-top:clamp(14px,3vh,34px); }

/* drawn winners for current prize */
.drawn{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:min(1100px,92vw); margin-top:6px; min-height:0; }
.drawn .w{
  display:flex; align-items:center; gap:10px; padding:9px 15px; border:1px solid var(--stage-line);
  border-radius:30px; background:var(--stage-2); animation:rise .4s ease both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
.drawn .w .wn{ font-family:var(--mono); font-size:11px; color:var(--white-dim); }
.drawn .w .wname{ font-size:14px; font-weight:700; }

/* stage footer controls */
.stage-foot{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:16px;
  padding:22px 28px 30px; z-index:2; position:relative;
}
.draw-btn{
  display:inline-flex; align-items:center; gap:16px;
  background:var(--white); color:var(--ink); font-size:20px; font-weight:900; letter-spacing:.02em; text-transform:uppercase;
  padding:20px 48px; border-radius:16px; transition:.16s; box-shadow:0 10px 40px -12px rgba(255,255,255,.3);
}
.draw-btn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 16px 50px -14px rgba(255,255,255,.45); }
.draw-btn:active:not(:disabled){ transform:translateY(0); }
.draw-btn:disabled{ opacity:.4; cursor:not-allowed; }
.draw-btn .kbd{ font-family:var(--mono); font-size:11px; font-weight:700; border:1px solid rgba(0,0,0,.18); border-radius:6px; padding:3px 7px; letter-spacing:0; }
.draw-btn.rolling{ animation:pulseBtn 1s ease-in-out infinite; }
@keyframes pulseBtn{ 50%{ opacity:.78; } }

.next-btn{
  display:inline-flex; align-items:center; gap:12px; background:transparent; color:var(--white);
  border:1px solid var(--stage-line); font-size:15px; font-weight:800; padding:18px 30px; border-radius:14px; transition:.15s;
}
.next-btn:hover{ background:var(--stage-2); border-color:#3a3a37; }
.foot-meta{ position:absolute; left:28px; bottom:30px; font-family:var(--mono); font-size:12px; color:var(--white-dim); display:flex; align-items:center; gap:10px; }
.stage .icon-btn{ background:var(--stage-2); border-color:var(--stage-line); color:var(--white); }
.stage .icon-btn:hover{ background:#1d1d1b; }
.stage .stage-tools{ position:absolute; right:28px; bottom:30px; display:flex; gap:10px; z-index:3; }

.empty-pool{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(10,10,10,.82); z-index:5; }
.empty-pool .e1{ font-size:24px; font-weight:800; }
.empty-pool .e2{ font-size:14px; color:var(--white-dim); }

/* confetti canvas */
#confetti{ position:fixed; inset:0; pointer-events:none; z-index:60; }

/* ============================================================
   RESULTS VIEW
   ============================================================ */
.results{ flex:1; min-height:0; background:var(--paper); overflow-y:auto; }
.results-inner{ max-width:980px; margin:0 auto; padding:38px 34px 60px; }
.results-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; }
.results-head .label{ font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.results-head h2{ font-size:30px; font-weight:800; letter-spacing:-.02em; margin-top:8px; }
.results-actions{ display:flex; gap:10px; }

.res-prize{ margin-bottom:14px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper); }
.res-prize .rh{ display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid var(--line); background:var(--paper-2); }
.res-prize .rh .ri{ width:28px; height:28px; border-radius:7px; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; font-weight:700; }
.res-prize .rh h3{ font-size:18px; font-weight:800; letter-spacing:-.01em; flex:1; }
.res-prize .rh .rc{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.res-winners{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0; }
.res-winners .rw{ display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.res-winners .rw .rn{ font-family:var(--mono); font-size:11px; color:var(--muted); width:24px; }
.res-winners .rw .rname{ font-size:16px; font-weight:700; }
.res-winners .rw.pending{ color:var(--muted); }
.res-winners .rw.pending .rname{ font-weight:500; font-style:italic; }

.results-empty{ text-align:center; padding:90px 20px; color:var(--muted); }
.results-empty .big{ font-size:20px; font-weight:800; color:var(--ink-2); margin-bottom:8px; }

/* responsive */
@media (max-width:980px){
  .setup{ flex-direction:column; overflow-y:auto; }
  .setup .col + .col{ border-left:none; border-top:1px solid var(--line); }

  .quick-stage .stage-foot{ padding:18px 14px 24px; }
  .quick-stage .stage-tools.quick-tools{ width:100%; justify-content:center; }
  .quick-stage .next-btn{ padding:14px 16px; font-size:14px; }
  .quick-stage .draw-btn{ width:auto; max-width:min(92vw,560px); justify-content:center; }
}

@media (max-width:1360px){
  .topbar{ row-gap:10px; }
  .topbar .spacer{ display:none; }
  .nav{ order:3; width:100%; overflow-x:auto; }
  .nav button{ white-space:nowrap; }
  .pool-pill{ margin-left:auto; }
}