/* ============================================================
   RIFAS JANICK — Sistema de diseño
   Paleta: violeta nocturno + violeta eléctrico + dorado ganador
   Display: Outfit · Texto: Inter
   ============================================================ */

:root {
  --night:      #160E2E;   /* fondo profundo */
  --night-2:    #1F1542;   /* superficie oscura */
  --surface:    #2A1B57;   /* tarjetas oscuras */
  --violet:     #7C4DFF;   /* primario */
  --violet-soft:#9D7BFF;
  --gold:       #FFC23C;   /* ganador / energía */
  --gold-deep:  #F5A623;
  --emerald:    #2FD3A5;   /* disponible */
  --rose:       #FF5C7A;   /* eliminado / al agua */
  --ink:        #1A1430;   /* texto sobre claro */
  --paper:      #F6F4FC;   /* fondo claro paneles */
  --paper-2:    #FFFFFF;
  --line:       #E4DEF4;
  --muted:      #8A82A6;
  --light:      #F5F2FF;

  --radio:      16px;
  --radio-sm:   10px;
  --sombra:     0 18px 40px -18px rgba(40, 12, 80, .45);
  --sombra-sm:  0 8px 20px -12px rgba(40, 12, 80, .35);
  --fuente:     'Inter', system-ui, -apple-system, sans-serif;
  --display:    'Outfit', 'Inter', sans-serif;
}

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

body {
  font-family: var(--fuente);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--violet); text-decoration: none; }
img { max-width: 100%; display: block; }

h1, h2, h3, .display { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; }

.contenedor { width: min(1140px, 92%); margin-inline: auto; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: .98rem;
  padding: .8rem 1.4rem; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--violet); color: #fff; box-shadow: 0 10px 22px -10px var(--violet); }
.btn-primary:hover { background: #6a3df0; }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #3a2600; }
.btn-ghost { background: transparent; border: 1.5px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--violet); color: var(--violet); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Header público ---------- */
.cab {
  position: sticky; top: 0; z-index: 30;
  background: rgba(22, 14, 46, .92); backdrop-filter: blur(10px);
  color: #fff;
}
.cab .contenedor { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }
.marca { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: #fff; display: flex; align-items: center; gap: .5rem; }
.marca .pip { width: 12px; height: 12px; border-radius: 4px; background: var(--gold); display: inline-block; transform: rotate(45deg); }

/* ---------- Hero público ---------- */
.hero {
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(124,77,255,.55), transparent 60%),
    radial-gradient(700px 380px at 0% 10%, rgba(255,194,60,.18), transparent 55%),
    var(--night);
  color: #fff; padding: 4.5rem 0 6rem; position: relative; overflow: hidden;
}
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.04; max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero p { color: #C8BEEA; max-width: 52ch; margin-top: 1.1rem; font-size: 1.08rem; }
.hero .eyebrow { font-family: var(--display); text-transform: uppercase; letter-spacing: .22em; font-size: .76rem; color: var(--gold); margin-bottom: 1rem; }

/* ---------- Grid de rifas ---------- */
.seccion { padding: 3.5rem 0; }
.seccion-tit { font-size: 1.6rem; margin-bottom: .3rem; }
.seccion-sub { color: var(--muted); margin-bottom: 2rem; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.5rem; }

.card-rifa {
  background: var(--paper-2); border-radius: var(--radio); overflow: hidden;
  box-shadow: var(--sombra); border: 1px solid var(--line);
  display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .2s ease;
}
.card-rifa:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -22px rgba(40,12,80,.5); }
.card-rifa .foto { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--surface), var(--violet)); position: relative; }
.card-rifa .foto img { width: 100%; height: 100%; object-fit: cover; }
.card-rifa .chip {
  position: absolute; top: .8rem; left: .8rem; background: var(--gold); color: #3a2600;
  font-family: var(--display); font-weight: 700; font-size: .8rem; padding: .3rem .7rem; border-radius: 999px;
}
.card-rifa .cuerpo { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.card-rifa h3 { font-size: 1.18rem; }
.card-rifa .motivo { color: var(--muted); font-size: .92rem; flex: 1; }
.card-rifa .pie { display: flex; align-items: center; justify-content: space-between; margin-top: .4rem; }
.card-rifa .precio { font-family: var(--display); font-weight: 800; font-size: 1.35rem; color: var(--violet); }
.card-rifa .precio small { font-size: .7rem; color: var(--muted); font-weight: 500; display: block; }

.barra-progreso { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.barra-progreso > span { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--violet-soft)); }
.progreso-txt { font-size: .8rem; color: var(--muted); }

/* ---------- Página de rifa: cuadrícula de números ---------- */
.detalle { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 880px) { .detalle { grid-template-columns: 1fr; } }

.detalle .flyer { border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); aspect-ratio: 4/3; background: var(--surface); }
.detalle .flyer img { width: 100%; height: 100%; object-fit: cover; }

.panel { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radio); padding: 1.5rem; box-shadow: var(--sombra-sm); }
.panel + .panel { margin-top: 1.3rem; }

.numeros {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: .45rem; max-height: 420px; overflow-y: auto; padding: .4rem; margin-top: 1rem;
  border: 1px solid var(--line); border-radius: var(--radio-sm);
}
.num {
  font-family: var(--display); font-weight: 600; font-size: .85rem;
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1.5px solid var(--line); background: #fff; cursor: pointer;
  color: var(--ink); transition: all .1s ease; user-select: none;
}
.num:hover:not(.ocupado) { border-color: var(--emerald); color: var(--emerald); }
.num.sel { background: var(--violet); border-color: var(--violet); color: #fff; }
.num.ocupado { background: #F0EDF7; color: #C3BAD9; cursor: not-allowed; text-decoration: line-through; }

.resumen { display: flex; align-items: center; justify-content: space-between; margin: 1.1rem 0; padding: 1rem; background: var(--paper); border-radius: var(--radio-sm); }
.resumen .total { font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--violet); }

.campo { margin-bottom: 1rem; }
.campo label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .35rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .75rem .9rem; border: 1.5px solid var(--line); border-radius: var(--radio-sm);
  font-family: var(--fuente); font-size: .95rem; background: #fff;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,77,255,.15); }

/* ---------- Instrucciones de pago ---------- */
.pago-box { background: var(--night-2); color: #fff; border-radius: var(--radio); padding: 1.6rem; }
.pago-box h3 { color: var(--gold); margin-bottom: 1rem; }
.pago-fila { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .95rem; }
.pago-fila span:first-child { color: #B8AEDB; }
.qr-deuna { background: #fff; border-radius: var(--radio-sm); padding: .8rem; width: 220px; margin: 1rem auto 0; }

/* ---------- Avisos ---------- */
.aviso { padding: .9rem 1.1rem; border-radius: var(--radio-sm); margin-bottom: 1rem; font-size: .92rem; }
.aviso-ok { background: #E5FBF3; color: #0B7A5A; border: 1px solid #B7F0DD; }
.aviso-err { background: #FDECEF; color: #B5273F; border: 1px solid #F7C4cf; }
.aviso-info { background: #EEE9FC; color: #5B3FBF; border: 1px solid #D8CCF7; }

/* ---------- Footer ---------- */
.pie-sitio { background: var(--night); color: #9C92C0; padding: 2.5rem 0; margin-top: 3rem; text-align: center; font-size: .9rem; }

/* ============================================================
   PANEL ADMIN
   ============================================================ */
.admin-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side {
  background: var(--night); color: #C8BEEA; padding: 1.5rem 1rem; position: sticky; top: 0; height: 100vh;
}
.side .marca { color: #fff; margin-bottom: 2rem; font-size: 1.15rem; padding-left: .5rem; }
.side nav a {
  display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: var(--radio-sm);
  color: #BCB1DF; font-weight: 500; margin-bottom: .2rem; transition: background .15s ease, color .15s ease;
}
.side nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.side nav a.activo { background: var(--violet); color: #fff; }
.side .salir { margin-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1rem; }

.main { padding: 2rem 2.2rem; background: var(--paper); }
.main-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.8rem; }
.main-cab h1 { font-size: 1.7rem; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.1rem; margin-bottom: 2rem; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radio); padding: 1.3rem; box-shadow: var(--sombra-sm); }
.kpi .et { color: var(--muted); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.kpi .val { font-family: var(--display); font-weight: 800; font-size: 2rem; color: var(--ink); margin-top: .3rem; }
.kpi.acento .val { color: var(--violet); }
.kpi.exito .val { color: var(--emerald); }

.tarjeta { background: #fff; border: 1px solid var(--line); border-radius: var(--radio); box-shadow: var(--sombra-sm); overflow: hidden; }
.tarjeta-cab { padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.tarjeta-cab h2 { font-size: 1.15rem; }

table.tabla { width: 100%; border-collapse: collapse; }
table.tabla th, table.tabla td { padding: .8rem 1.4rem; text-align: left; font-size: .9rem; border-bottom: 1px solid var(--line); }
table.tabla th { background: var(--paper); color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: .74rem; letter-spacing: .05em; }
table.tabla tr:last-child td { border-bottom: 0; }

.tag { font-family: var(--display); font-weight: 600; font-size: .76rem; padding: .25rem .65rem; border-radius: 999px; display: inline-block; }
.tag-pend { background: #FFF3DA; color: #9A6B00; }
.tag-pag  { background: #E1F8F0; color: #0B7A5A; }
.tag-rech { background: #FDE7EB; color: #B5273F; }
.tag-activa { background: #EAE3FC; color: #5B3FBF; }
.tag-cerrada { background: #EEEAF5; color: #6B6388; }
.tag-sorteada { background: #FFF0C9; color: #946200; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } .admin-shell { grid-template-columns: 1fr; } .side { position: static; height: auto; } }

/* ============================================================
   SORTEO EN VIVO
   ============================================================ */
.sorteo-body { background: radial-gradient(1200px 600px at 50% -20%, #3a1d7a, var(--night)); color: #fff; min-height: 100vh; }
.sorteo-top { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 0; }
.sorteo-top .marca { color: #fff; }

.escenario { text-align: center; padding: 2rem 0 3rem; }
.escenario .rifa-tit { font-family: var(--display); font-size: clamp(1.4rem,3vw,2.2rem); color: var(--gold); }
.escenario .ronda { color: #C0B4EC; letter-spacing: .15em; text-transform: uppercase; font-size: .85rem; margin-top: .3rem; }

/* Reels tipo lotería */
.reels { display: inline-flex; gap: .6rem; margin: 2.2rem 0 1.5rem; padding: 1.4rem; border-radius: 24px;
  background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 2px rgba(255,194,60,.25), var(--sombra); }
.reel {
  width: clamp(70px, 12vw, 120px); height: clamp(96px, 16vw, 160px); overflow: hidden; border-radius: 16px;
  background: linear-gradient(180deg, #0e0823, #241046);
  box-shadow: inset 0 0 30px rgba(0,0,0,.6), inset 0 0 0 2px rgba(157,123,255,.4);
  position: relative;
}
.reel .tira { display: flex; flex-direction: column; will-change: transform; }
.reel .digito {
  height: clamp(96px, 16vw, 160px); display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 7vw, 6rem); color: #fff;
  text-shadow: 0 4px 16px rgba(124,77,255,.6);
}
.reel::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,8,35,.9), transparent 22%, transparent 78%, rgba(14,8,35,.9)); }

/* Resultado */
.resultado { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; }
.resultado .estado { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem,4vw,2.6rem); }
.resultado.alagua .estado { color: var(--rose); }
.resultado.ganador .estado { color: var(--gold); }
.resultado .comprador { font-size: 1.3rem; color: #fff; }
.resultado .comprador strong { color: var(--gold); }
.resultado .vacio { color: #9C92C0; }

.controles-sorteo { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

.historial { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; max-width: 760px; margin-inline: auto; }
.bolita { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: .9rem; }
.bolita.agua { background: rgba(255,92,122,.18); color: var(--rose); border: 1.5px solid var(--rose); }
.bolita.win { background: var(--gold); color: #3a2600; box-shadow: 0 0 24px rgba(255,194,60,.7); }

/* Config previa del sorteo */
.config-sorteo { max-width: 520px; margin: 2rem auto; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radio); padding: 1.6rem; }
.config-sorteo label { color: #C8BEEA; font-weight: 600; font-size: .9rem; display: block; margin-bottom: .4rem; }
.config-sorteo select, .config-sorteo input { width: 100%; padding: .75rem; border-radius: var(--radio-sm); border: 0; font-size: 1rem; margin-bottom: 1.1rem; }

/* Confeti */
.confeti { position: fixed; top: -10px; width: 10px; height: 16px; z-index: 999; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .reel .tira { transition: none !important; }
}