/* Página de pedidos — misma identidad que el sitio de Del Molino 89.3 FM
   (negro, rosa y violeta; Manrope para el texto y Oswald para los títulos). */
:root{
  --ink:#0b0a0f; --panel:#15131b; --panel2:#191721; --soft:#a8a3b2;
  --pink:#ff176b; --pink-fuerte:#e0105a; /* el rosa fuerte lleva texto blanco encima: contraste 4,8:1 */ --purple:#8e2bff;
  --line:rgba(255,255,255,.11); --ok:#38d996; --warn:#ffb020; --err:#ff7a90;
  --radio:18px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; color-scheme:dark}
body{
  margin:0; min-height:100vh; color:#fff; background:var(--ink);
  font:400 16px/1.5 'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  background-image:
    radial-gradient(60rem 30rem at 85% -5%, rgba(142,43,255,.20), transparent 60%),
    radial-gradient(40rem 24rem at -10% 15%, rgba(255,23,107,.12), transparent 60%);
  background-repeat:no-repeat;
}
.wrap{width:min(720px,100%); margin-inline:auto; padding-inline:16px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
a{color:inherit}
:focus-visible{outline:3px solid #fff; outline-offset:3px; border-radius:8px}

/* Cabecera */
.top{position:sticky; top:0; z-index:5; background:linear-gradient(180deg,rgba(7,6,10,.96),rgba(7,6,10,.82)); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px}
.marca{display:inline-flex; align-items:center; gap:.7rem; text-decoration:none}
.marca-icono{width:40px; height:40px; display:grid; place-items:center; border:3px solid var(--pink); border-radius:13px; transform:rotate(-8deg); box-shadow:0 0 20px rgba(255,23,107,.26)}
.marca-texto{display:flex; flex-direction:column; line-height:1.05}
.marca-texto strong{font:700 1.05rem 'Oswald',sans-serif; letter-spacing:.04em}
.marca-texto small{color:var(--pink); font-weight:800; letter-spacing:.14em; font-size:.72rem}
.volver{font-size:.85rem; font-weight:700; color:var(--soft); text-decoration:none}
.volver:hover{color:#fff}

/* Portada */
.hero{padding:22px 0 8px}
.logo-programa{display:block; width:min(340px,84%); height:auto; margin:0 0 10px -8px;
  filter:drop-shadow(0 8px 28px rgba(255,23,107,.30))}
.eyebrow{display:inline-block; color:var(--pink); font-size:.75rem; font-weight:800; letter-spacing:.16em}
h1{font:700 clamp(2.5rem,11vw,4rem)/.92 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:-.02em; margin:.5rem 0 1rem}
.grad{background:linear-gradient(115deg,var(--pink),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{color:#d9d5e0; font-size:1.05rem; max-width:34rem; margin:0 0 1.1rem}
.lead strong{color:#fff}
.estado{display:inline-flex; align-items:center; gap:.6rem; margin:0; padding:.45rem .9rem; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.04); font-weight:700; font-size:.9rem}
.punto{width:10px; height:10px; border-radius:50%; background:var(--soft); flex:none}
.estado.abierto .punto{background:var(--ok); box-shadow:0 0 0 0 rgba(56,217,150,.6); animation:pulso 1.8s infinite}
.estado.cerrado .punto{background:var(--warn)}
@keyframes pulso{70%{box-shadow:0 0 0 9px rgba(56,217,150,0)} 100%{box-shadow:0 0 0 0 rgba(56,217,150,0)}}

.aviso{margin:18px 0 0; padding:14px 16px; border:1px solid rgba(255,176,32,.4); background:rgba(255,176,32,.09); border-radius:14px; color:#ffe3ad}

/* Paneles */
.panel{margin:18px 0; padding:20px 16px; background:linear-gradient(145deg,var(--panel2),#100f15); border:1px solid var(--line); border-radius:var(--radio)}
.paso{display:flex; align-items:center; gap:.7rem; margin:0 0 16px; font:700 1.35rem 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.02em}
.num{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:linear-gradient(115deg,var(--pink-fuerte),var(--purple)); font:800 .95rem 'Manrope',sans-serif}

.hero-links{margin:12px 2px 0; font-size:.9rem}
.hero-links .link{color:var(--soft); font-weight:700}
.hero-links .link:hover{color:#fff}

/* La lista de hoy */
.cola-titulo{display:flex; align-items:baseline; gap:.6rem; margin:0 0 12px; font:700 1.35rem 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.02em}
.cola-cuenta{color:var(--soft); font:600 .9rem 'Manrope',sans-serif; text-transform:none; letter-spacing:0}
.cola-lista{list-style:none; margin:0 0 6px; padding:0; display:grid; gap:8px; counter-reset:pos}
.cola-lista li{counter-increment:pos; display:flex; align-items:center; gap:12px; padding:.7rem .9rem; background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:14px}
.cola-lista li::before{content:counter(pos); flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.08); font-weight:800; font-size:.85rem}
.cola-lista li:first-child::before{background:linear-gradient(115deg,var(--pink-fuerte),var(--purple))}
.cola-txt{display:flex; flex-direction:column; min-width:0; flex:1}
.cola-txt strong{overflow:hidden; text-overflow:ellipsis}
.cola-txt span{color:var(--soft); font-size:.86rem; overflow:hidden; text-overflow:ellipsis}
.cola-saludo{flex:none; padding:.2rem .6rem; border-radius:999px; border:1px solid rgba(56,217,150,.55); color:var(--ok); font-size:.75rem; font-weight:800}

/* Temas que ya pidió alguien hoy */
.tema:disabled{cursor:not-allowed}
.tema.tomado{opacity:.6; border-style:dashed}
.tema.tomado:hover{border-color:var(--line); background:rgba(255,255,255,.035)}
.tema-tomado{flex:none; padding:.2rem .6rem; border-radius:999px; background:rgba(255,255,255,.08); color:var(--soft); font-size:.75rem; font-weight:800}

/* Reglas */
.reglas summary{cursor:pointer; font:700 1.2rem 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.02em; list-style:none; display:flex; justify-content:space-between; align-items:center}
.reglas summary::-webkit-details-marker{display:none}
.reglas summary::after{content:"+"; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.08); font:800 1.1rem 'Manrope',sans-serif}
.reglas[open] summary::after{content:"–"}
.reglas ol{margin:14px 0 0; padding-left:1.3rem; display:grid; gap:10px; color:#d9d5e0}
.reglas li::marker{color:var(--pink); font-weight:800}
.reglas li strong{color:#fff}

/* Buscador y lista */
.buscador{position:relative}
.buscador svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--soft); pointer-events:none}
input[type=search],input[type=text]{
  width:100%; padding:.85rem 1rem; color:#fff; background:#0d0c12; border:1px solid var(--line); border-radius:14px;
  font:inherit; font-size:1rem; /* 16px: evita el zoom automático en iPhone */
}
.buscador input{padding-left:44px}
input::placeholder{color:#7d7888}
input:focus{outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,23,107,.22)}
.cuenta{margin:10px 2px 8px; color:var(--soft); font-size:.85rem}
.temas{list-style:none; margin:0; padding:0; display:grid; gap:8px; max-height:min(58vh,520px); overflow:auto; padding-right:2px; scrollbar-color:#4a4656 transparent; scrollbar-width:thin}
.tema{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left;
  padding:.8rem 1rem; color:#fff; background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:14px; cursor:pointer; font:inherit;
  transition:border-color .15s, background .15s, transform .15s;
}
.tema:hover{border-color:rgba(255,23,107,.6); background:rgba(255,23,107,.07)}
.tema:active{transform:scale(.99)}
.tema-txt{display:flex; flex-direction:column; min-width:0}
.tema-txt strong{font-weight:800; overflow:hidden; text-overflow:ellipsis}
.tema-txt span{color:var(--soft); font-size:.88rem; overflow:hidden; text-overflow:ellipsis}
.tema-mas{flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(115deg,var(--pink-fuerte),var(--purple)); font-weight:800}
body.cerrado .tema{opacity:.55; cursor:not-allowed}
body.cerrado .tema-mas{background:#3a3744}
.vacio{margin:12px 2px 0; color:var(--soft)}

/* Paso 2 */
.elegida{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; margin-bottom:16px; background:rgba(255,23,107,.08); border:1px solid rgba(255,23,107,.45); border-radius:14px}
.elegida small{display:block; color:var(--pink); font-weight:800; letter-spacing:.12em; font-size:.68rem; text-transform:uppercase}
.elegida strong{display:block; font-size:1.1rem; line-height:1.25}
.elegida span{color:var(--soft)}
.link{background:none; border:0; padding:.4rem .2rem; color:#fff; font:inherit; font-weight:800; text-decoration:underline; text-underline-offset:3px; cursor:pointer; flex:none}
.link.peligro{color:var(--err)}
.campos label{display:block; margin:14px 0 6px; font-weight:700; font-size:.92rem}
.opc{color:var(--soft); font-weight:600}

.saludo{margin-top:22px; padding-top:18px; border-top:1px solid var(--line)}
.saludo h3{margin:0 0 4px; font-size:1.05rem}
.ayuda{margin:0 0 14px; color:var(--soft); font-size:.9rem}
.grabador{display:flex; align-items:center; gap:16px}
.rec-btn{position:relative; flex:none; width:80px; height:80px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; color:#fff; cursor:pointer;
  background:linear-gradient(115deg,var(--pink-fuerte),var(--purple)); box-shadow:0 10px 30px rgba(255,23,107,.25)}
.rec-btn .ico{grid-area:1/1}
.rec-btn .ico-stop{display:none}
.anillo{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); pointer-events:none}
.anillo-fondo{fill:none; stroke:rgba(255,255,255,.18); stroke-width:4}
.anillo-prog{fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; stroke-dasharray:213.6; stroke-dashoffset:213.6; opacity:0}
.grabando .anillo-prog{opacity:1}
.grabando .rec-btn{animation:latido 1.2s ease-in-out infinite}
.grabando .ico-mic{display:none}
.grabando .ico-stop{display:block}
@keyframes latido{50%{transform:scale(1.04)}}
.rec-info{display:flex; flex-direction:column; gap:2px; min-width:0}
.rec-info strong{font-size:1.05rem}
.rec-info span{color:var(--soft); font-size:.9rem}
.grabando #recTitulo{color:#fff}
.nivel{display:none !important; gap:3px; align-items:flex-end; height:22px; margin-top:4px}
.grabando .nivel{display:flex !important}
.nivel i{width:5px; height:4px; border-radius:3px; background:var(--pink); transition:height .08s}
.error-rec,.error{margin:12px 0 0; padding:10px 14px; color:#ffd5dc; background:rgba(255,122,144,.1); border:1px solid rgba(255,122,144,.4); border-radius:12px; font-size:.92rem}
.vista{margin-top:16px}
.vista audio{width:100%; height:44px; color-scheme:dark}
.vista-botones{display:flex; gap:18px; margin:8px 0 2px}
.cupo-cerrado{margin:0 0 12px; padding:10px 14px; color:#ffe3ad; background:rgba(255,176,32,.09); border:1px solid rgba(255,176,32,.4); border-radius:12px; font-size:.92rem}
.saludo.sin-cupo .grabador, .saludo.sin-cupo .ayuda{display:none}
.prioridad{display:flex; align-items:center; gap:9px; margin:10px 0 0; color:var(--soft); font-weight:600; font-size:.9rem}
.prioridad::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--ok)}

.btn-pedir{
  display:block; width:100%; margin-top:22px; padding:1rem 1.2rem; border:0; border-radius:999px; color:#fff; cursor:pointer;
  font:800 1.1rem 'Manrope',sans-serif; background:linear-gradient(115deg,var(--pink-fuerte),var(--purple)); box-shadow:0 10px 30px rgba(255,23,107,.22);
  transition:transform .15s, box-shadow .15s, opacity .15s;
}
.btn-pedir:hover{box-shadow:0 14px 34px rgba(255,23,107,.34)}
.btn-pedir:active{transform:scale(.99)}
.btn-pedir:disabled{opacity:.55; cursor:not-allowed; box-shadow:none}
.btn-pedir.secundario{background:transparent; border:2px solid var(--line); box-shadow:none}
.btn-pedir.secundario:hover{border-color:var(--pink)}
.nota{margin:12px 2px 0; color:var(--soft); font-size:.85rem; text-align:center}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

/* Éxito */
.exito{text-align:center; padding:30px 18px}
.check{width:64px; height:64px; margin:0 auto 12px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(115deg,#1fbf85,#38d996); color:#06251a}
.exito h2{margin:0; font:700 2rem 'Oswald',sans-serif; text-transform:uppercase}
.exito-tema{margin:6px 0 14px; font-weight:800; font-size:1.1rem}
.exito-estado{display:inline-block; margin:0; padding:.55rem 1rem; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.05); font-weight:700; font-size:.92rem}
.exito-estado.ok{border-color:rgba(56,217,150,.6); color:var(--ok)}
.exito-estado.no{border-color:rgba(255,122,144,.6); color:var(--err)}

/* Pie */
.pie{margin-top:36px; border-top:1px solid var(--line); background:#09080c; color:var(--soft); font-size:.85rem}
.pie-in{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-block:20px}
.pie a{color:#fff; font-weight:700}

/* Incrustada en otra página (?embed=1): sin cabecera ni pie. Mantiene su fondo oscuro (el texto es blanco y
   se perdería sobre una página clara); con &fondo=transparente se deja transparente para páginas oscuras. */
body.embed{min-height:0}
body.embed.transparente{background:transparent}
body.embed .top, body.embed .pie{display:none}
body.embed .temas{max-height:520px}   /* en un marco, "vh" es el alto del propio marco: no usarlo */
body.embed .hero{padding-top:6px}

@media (min-width:640px){
  .panel{padding:26px 26px}
  .hero{padding-top:38px}
  .logo-programa{width:420px; margin-left:-12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}