/* RifaMusic Peru -- hoja de estilos del sitio publico y la PWA.
   Mismos tokens de marca que el prototipo "Palco Rifas": violeta neutro + acentos
   oro/magenta/teal (escenario nocturno + boleto de rifa). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,900;1,9..144,600&family=Manrope:wght@400;500;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:#F6F2F7; --surface:#FFFFFF; --surface-alt:#EFE6F1; --border:#E1D5E5;
  --ink:#221934; --ink-soft:#5B5170; --ink-faint:#6E627D;
  --gold:#D98A1F; --gold-bg:#FBEAD0; --gold-ink:#4A2E06;
  --magenta:#C2296A; --magenta-bg:#FADCE9;
  --teal:#087267; --teal-bg:#D9F0EC;
  --danger:#B3261E; --danger-bg:#FBE4E2;
  --shadow:0 1px 2px rgba(34,25,52,.06), 0 8px 24px -12px rgba(34,25,52,.18);
  --radius-s:10px; --radius-m:16px; --radius-l:26px; --max:1160px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1B1428; --surface:#241C34; --surface-alt:#2E2440; --border:#3B2F4E;
    --ink:#F3EEF7; --ink-soft:#C7BCD4; --ink-faint:#BAAEC9;
    --gold:#F0A83A; --gold-bg:#3A2A12; --gold-ink:#FBD9A0;
    --magenta:#EE6FA3; --magenta-bg:#3B1E2C;
    --teal:#3FCBBD; --teal-bg:#12332F;
    --danger:#F2897F; --danger-bg:#3A1815;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --bg:#1B1428; --surface:#241C34; --surface-alt:#2E2440; --border:#3B2F4E;
  --ink:#F3EEF7; --ink-soft:#C7BCD4; --ink-faint:#BAAEC9;
  --gold:#F0A83A; --gold-bg:#3A2A12; --gold-ink:#FBD9A0;
  --magenta:#EE6FA3; --magenta-bg:#3B1E2C;
  --teal:#3FCBBD; --teal-bg:#12332F;
  --danger:#F2897F; --danger-bg:#3A1815;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.55);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif; line-height:1.55;}
h1,h2,h3{font-family:'Fraunces',ui-serif,Georgia,serif; font-weight:900; letter-spacing:-.01em; margin:0; text-wrap:balance;}
.mono{font-family:'Space Mono',ui-monospace,SFMono-Regular,monospace;}
p{margin:0;}
a{color:inherit;}
img,svg{max-width:100%; display:block;}
input,select,textarea,button{font-family:inherit; font-size:15px;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
.eyebrow{font-family:'Space Mono',monospace; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--magenta);}
section{padding:72px 0;}
@media (max-width:720px){ section{padding:48px 0;} .wrap{padding:0 18px;} }

/* -------- botones / badges -------- */
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:999px; font-weight:800; font-size:14.5px;
  padding:12px 22px; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .15s,box-shadow .15s;}
.btn:active{transform:translateY(1px);}
.btn-gold{background:var(--gold); color:var(--gold-ink); box-shadow:var(--shadow);}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--ink);}
.btn-ghost:hover{background:var(--surface-alt);}
.btn-sm{padding:9px 16px; font-size:13px;}
.btn-block{width:100%; justify-content:center;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.badge{display:inline-flex; align-items:center; gap:6px; font-family:'Space Mono',monospace; font-size:11px; font-weight:700;
  padding:5px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.05em;}
.badge-gold{background:var(--gold); color:var(--gold-ink);}
.badge-teal{background:var(--teal); color:#fff;}
.badge-magenta{background:var(--magenta); color:#fff;}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px;}
.pill-pending{background:var(--gold-bg); color:var(--gold-ink);}
.pill-confirmed{background:var(--teal-bg); color:var(--teal);}
.pill-cancelled{background:var(--danger-bg); color:var(--danger);}

/* -------- nav -------- */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(10px); background:color-mix(in srgb, var(--bg) 86%, transparent); border-bottom:1px solid var(--border);}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:74px; gap:24px;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:900; font-size:22px; text-decoration:none; color:var(--ink);}
.brand .dot{width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px var(--gold-bg);}
.navlinks{display:flex; gap:28px; font-size:14.5px; font-weight:700;}
.navlinks a{text-decoration:none; color:var(--ink-soft);}
.navlinks a:hover{color:var(--ink);}
@media (max-width:840px){ .navlinks{display:none;} }

/* -------- section heads -------- */
.shead{max-width:640px; margin-bottom:40px;}
.shead h2{font-size:clamp(24px,3.2vw,34px); margin-top:8px;}
.shead p{color:var(--ink-soft); margin-top:12px; font-size:16px;}

/* -------- cards / raffle grid -------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:920px){ .grid-3{grid-template-columns:1fr;} }
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media (max-width:960px){ .grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .grid-4{grid-template-columns:1fr;} }
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
@media (max-width:860px){ .grid-2{grid-template-columns:1fr; gap:32px;} }
.grid-2-lead{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
@media (max-width:860px){ .grid-2-lead{grid-template-columns:1fr;} }
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;}
.card-art{height:168px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.card-art img{width:100%; height:100%; object-fit:cover;}
.card-art svg{width:88px; height:88px;}
.card-body{padding:20px; display:flex; flex-direction:column; gap:12px; flex:1;}
.card-body h3{font-size:19px;}
.price{font-family:'Space Mono',monospace; font-weight:700; font-size:15px;}
.price span{color:var(--ink-faint); font-weight:400; font-size:12.5px;}
.progress{height:8px; border-radius:999px; background:var(--surface-alt); overflow:hidden;}
.progress i{display:block; height:100%; border-radius:999px; background:var(--teal);}
.prow{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-faint); font-family:'Space Mono',monospace;}
.card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:4px;}
.tag-corner{position:absolute; top:12px; left:12px; z-index:2;}

/* -------- forms -------- */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.field label{font-size:12.5px; font-weight:700; color:var(--ink-soft);}
.field input, .field select, .field textarea{
  border:1px solid var(--border); border-radius:var(--radius-s); padding:12px 14px; font-size:14.5px;
  background:var(--surface); color:var(--ink); width:100%;}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--magenta); outline-offset:1px;}
.field small{color:var(--ink-faint); font-size:12px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:560px){ .field-row{grid-template-columns:1fr;} }
.alert{border-radius:var(--radius-s); padding:14px 16px; font-size:13.5px; font-weight:600; margin-bottom:16px;}
.alert-ok{background:var(--teal-bg); color:var(--teal);}
.alert-error{background:var(--danger-bg); color:var(--danger);}

/* -------- checkout mock-like real UI -------- */
.paytabs{display:flex; gap:8px; margin:16px 0 18px; flex-wrap:wrap;}
.paytab{flex:1; min-width:80px; text-align:center; padding:10px 6px; border-radius:var(--radius-s); border:1px solid var(--border);
  font-size:12.5px; font-weight:800; cursor:pointer; background:var(--surface-alt); color:var(--ink-soft);}
.paytab.active{background:var(--magenta); color:#fff; border-color:var(--magenta);}
.pay-panel{border:1px dashed var(--border); border-radius:var(--radius-s); padding:18px; display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.qr{width:76px; height:76px; border-radius:10px; flex:none; background-color:var(--surface-alt); position:relative;}
.qr::before,.qr::after{content:"";position:absolute;width:20px;height:20px;border:4px solid var(--ink);border-radius:4px;top:6px;left:6px;}
.qr::after{left:auto; right:6px;}
.upload-drop{margin-top:14px; border:2px dashed var(--border); border-radius:var(--radius-s); padding:16px; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--ink-faint);}
.upload-drop svg{flex:none; color:var(--magenta);}
.upload-preview{max-width:160px; border-radius:var(--radius-s); margin-top:10px; border:1px solid var(--border);}

/* -------- tables (usar SIEMPRE dentro de .table-wrap para evitar desbordes) -------- */
.table-wrap{width:100%; overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface);}
table{border-collapse:collapse; width:100%; min-width:640px;}
table th, table td{text-align:left; padding:12px 16px; font-size:13.5px; border-bottom:1px solid var(--border); white-space:nowrap;}
table td.wrap-cell{white-space:normal; max-width:260px;}
table th{background:var(--surface-alt); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); position:sticky; top:0;}
table tr:last-child td{border-bottom:none;}

/* -------- footer -------- */
footer{border-top:1px solid var(--border); padding:48px 0 30px;}
.pay-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px;}
.pay-badge{border:1px solid var(--border); border-radius:999px; padding:8px 16px; font-size:12.5px; font-weight:700; font-family:'Space Mono',monospace; color:var(--ink-soft);}
.legal{font-size:12.5px; color:var(--ink-faint); border-top:1px solid var(--border); padding-top:22px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;}

/* -------- misc utilities -------- */
.flex-between{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.stack{display:flex; flex-direction:column; gap:14px;}
.muted{color:var(--ink-soft);}
.center{text-align:center;}
.empty{padding:40px 20px; text-align:center; color:var(--ink-faint); font-size:14px;}

/* -------- portada de rifa: foto real o escena generada --------
   La escena SVG va a sangre (slice), no como un icono centrado: ese era el
   detalle que hacía que las tarjetas se leyeran como plantilla sin terminar. */
.card-art{background:#1B1428;}
.card-art .cover-art{width:100%; height:100%; display:block; object-fit:cover;}
.card-art img{width:100%; height:100%; object-fit:cover;}
.card-art-hero{height:280px; border-radius:var(--radius-m); margin-top:20px;}
@media (max-width:720px){ .card-art-hero{height:200px;} }

.raffle-card .card-art{height:196px;}
.raffle-card{transition:transform .18s ease, box-shadow .18s ease;}
.raffle-card:hover{transform:translateY(-3px); box-shadow:0 1px 2px rgba(34,25,52,.08), 0 20px 40px -18px rgba(34,25,52,.34);}
@media (prefers-reduced-motion: reduce){ .raffle-card, .raffle-card:hover{transition:none; transform:none;} }

/* Categoría grabada sobre la escena, no en el cuerpo: libera la tarjeta. */
.art-cat{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-family:'Space Mono',ui-monospace,monospace; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(246,241,250,.82);
  text-shadow:0 1px 8px rgba(0,0,0,.7);
}

/* -------- distintivos de estado sobre la portada -------- */
.chip{
  position:absolute; z-index:2; top:12px;
  font-family:'Space Mono',ui-monospace,monospace; font-size:10.5px; font-weight:700;
  letter-spacing:.04em; padding:5px 10px; border-radius:999px; white-space:nowrap;
  backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.16);
}
.chip{left:12px; background:rgba(21,15,34,.62); color:#F6F1FA;}
.chip-count{left:auto; right:12px;}

.chip-hot{background:rgba(179,38,30,.86); border-color:rgba(255,180,171,.4); color:#FFE7E4;}
.chip-out{background:rgba(21,15,34,.86); color:#9A8DAB;}
.chip-warm{background:rgba(217,138,31,.9); border-color:rgba(255,220,160,.4); color:#3A2506;}
.chip-live{background:rgba(194,41,106,.9); border-color:rgba(255,190,215,.4); color:#FFF;}
.chip-soon{background:rgba(18,137,126,.9); border-color:rgba(160,240,230,.35); color:#FFF;}
.chip-done{background:rgba(21,15,34,.78); color:#C9BBD8;}
.chip-calm{background:rgba(21,15,34,.62); color:#E4DCEC;}

/* El pulso solo aparece cuando el sorteo es inminente: si parpadea siempre,
   deja de significar algo. */
.chip-live{animation:chipPulse 1.9s ease-in-out infinite;}
@keyframes chipPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(194,41,106,.5);}
  50%    {box-shadow:0 0 0 7px rgba(194,41,106,0);}
}
@media (prefers-reduced-motion: reduce){ .chip-live{animation:none;} }

/* -------- retrato de artista: foto real o marcador con inicial -------- */
.artist-art{height:150px;}
/* Las fotos de artista son verticales y la tarjeta es horizontal: con el recorte
   centrado por defecto se pierde la cabeza y solo queda el torso. Anclar al 20%
   desde arriba conserva el rostro, que es lo que identifica al artista. */
.artist-art img{object-position:center 20%;}
.photo-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',ui-serif,Georgia,serif; font-weight:900; color:rgba(255,255,255,.9);
}
.artist-avatar{
  width:88px; height:88px; border-radius:50%; overflow:hidden; flex:none;
  border:2px solid var(--border); background:var(--surface-alt);
}
.artist-avatar img{width:100%; height:100%; object-fit:cover; object-position:center 15%;}
.artist-avatar .photo-fallback{border-radius:50%;}

/* -------- barra lateral del panel --------
   Tokens propios: la barra es un riel oscuro en ambos temas, así que no puede
   tomar su fondo de --ink (que es el color del TEXTO y se invierte en oscuro).
   Ese era el motivo de que en modo oscuro quedara texto claro sobre fondo claro. */
:root{
  --rail-bg:#221934;
  --rail-ink:#DDD3E8;
  --rail-ink-strong:#FFFFFF;
  --rail-ink-soft:#B7A9C7;
  --rail-ink-faint:#A294B3;
  --rail-active-bg:#C2296A;   /* fijo: con blanco da 4.9:1; el magenta de tema oscuro no llega */
  --rail-hover:rgba(255,255,255,.07);
  --rail-line:rgba(255,255,255,.10);
  --rail-edge:rgba(0,0,0,.28);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --rail-bg:#150F22;
    --rail-edge:rgba(255,255,255,.13);  /* en oscuro el riel casi iguala al fondo: el borde es lo que lo separa */
  }
}
:root[data-theme="dark"]{
  --rail-bg:#150F22;
  --rail-edge:rgba(255,255,255,.13);
}

/* -------- galería y reproductores del perfil de artista -------- */
.galeria{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px;}
.galeria-item{
  display:block; border-radius:var(--radius-m); overflow:hidden; background:#1B1428;
  border:1px solid var(--border); aspect-ratio:4/5; transition:transform .18s ease;
}
.galeria-item:hover{transform:translateY(-3px);}
.galeria-item img{width:100%; height:100%; object-fit:cover;}
.galeria-item:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ .galeria-item, .galeria-item:hover{transition:none; transform:none;} }

.video-player{
  width:100%; aspect-ratio:16/9; display:block; background:#0F0A18;
  border-bottom:1px solid var(--border);
}
.video-externo{
  height:150px; display:flex; align-items:center; justify-content:center; text-decoration:none;
  background:linear-gradient(135deg,#2A2040,#1B1428);
}
.video-externo .play{
  width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.92); color:#221934;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.3);
}

/* -------- cartel de próxima presentación -------- */
.cartel{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap; position:relative;
  padding:22px 24px; border-radius:var(--radius-l);
  background:linear-gradient(135deg, color-mix(in srgb, var(--gold) 16%, var(--surface)), var(--surface));
  border:1px solid color-mix(in srgb, var(--gold) 38%, var(--border));
  box-shadow:var(--shadow);
}
.cartel-fecha{
  flex:none; width:78px; text-align:center; padding:12px 6px; border-radius:var(--radius-m);
  background:var(--ink); color:var(--surface); line-height:1;
}
.cartel-fecha .dia{display:block; font-family:'Fraunces',ui-serif,Georgia,serif; font-size:32px; font-weight:900;}
.cartel-fecha .mes{
  display:block; margin-top:5px; font-family:'Space Mono',ui-monospace,monospace;
  font-size:11.5px; letter-spacing:.16em;
}
.cartel-cuerpo{flex:1; min-width:220px;}
.cartel-cuerpo h2{font-size:clamp(19px,2.5vw,25px); margin-top:5px; line-height:1.15;}
.cartel-lugar{margin-top:7px; font-size:15px; font-weight:700; color:var(--ink-soft);}
.cartel-hora{margin-top:3px; font-size:12.5px; color:var(--ink-faint);}
.cartel-chip{position:static; align-self:flex-start;}
.cartel-mas{
  margin-top:12px; padding-left:6px; display:flex; flex-direction:column; gap:6px;
  font-size:13.5px; color:var(--ink-soft);
}
@media (max-width:560px){
  .cartel{padding:18px; gap:14px;}
  .cartel-fecha{width:64px;}
}

/* Keep placeholder copy readable in both themes. */
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);opacity:1}

/* Gold buttons retain dark lettering on their bright fill in either theme. */
.btn-gold{color:#4a2e06}

.badge-gold{color:#4a2e06}.badge-teal{background:#d9f0ec;color:#075a52}.badge-magenta{background:#fadce9;color:#9a1f52}