/* Página de whitelist: usa las variables y componentes de style.css */
.wl-col{max-width:760px;margin:0 auto}
.wl-cab{padding-top:56px;padding-bottom:8px;background:radial-gradient(700px 320px at 85% 0%,rgba(139,61,255,.2),rgba(11,7,19,0) 70%)}
.wl-cab h1{font-size:clamp(30px,4.4vw,46px);line-height:1.1}

/* Recorrido */
.ruta{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.ruta li{display:grid;gap:8px;padding-right:12px;color:var(--gris);font-size:14px;font-weight:600}
.ruta li::before{content:"";height:4px;border-radius:4px;background:var(--linea-2)}
.ruta li.hecho{color:var(--plata)}
.ruta li.hecho::before{background:linear-gradient(90deg,var(--violeta-2),var(--violeta))}
.ruta li.ahora{color:var(--plata)}
.ruta li.ahora::before{background:linear-gradient(90deg,var(--violeta) 0 50%,var(--linea-2) 50%)}

/* Usuario */
.yo{display:flex;align-items:center;gap:10px;padding:4px;border-radius:999px;border:1px solid var(--linea-2)}
.yo img{width:32px;height:32px;border-radius:50%}
.yo b{font-size:14px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yo button{background:none;border:0;color:var(--gris);font:600 13px var(--texto);cursor:pointer;padding:6px 10px}
.yo button:hover{color:var(--plata)}

/* Avisos */
#notice{margin-top:24px;border-radius:12px;padding:14px 18px;background:rgba(224,86,74,.1);border:1px solid rgba(224,86,74,.45);color:#F7C3BD}
#notice.ok{background:rgba(62,207,142,.1);border-color:rgba(62,207,142,.4);color:#BDF2D9}

/* Paneles */
.panel{margin-top:28px;border-radius:18px;border:1px solid var(--linea);background:linear-gradient(180deg,#160E26,var(--noche));padding:28px;box-shadow:0 30px 60px -40px rgba(0,0,0,.9)}
.panel h2{font-size:clamp(22px,2.6vw,27px)}
.panel p{color:#CFCADF;margin-top:10px}
.panel .gris,.gris{color:var(--gris);font-size:14px}
.panel--ko{border-color:rgba(224,86,74,.4)}
.acc{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
.lista{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.lista li{display:flex;gap:12px;color:#CFCADF}
.lista li::before{content:"";flex:0 0 6px;height:6px;margin-top:10px;border-radius:2px;background:var(--violeta);box-shadow:0 0 10px var(--violeta)}

/* Estados */
.est{display:flex;gap:20px;align-items:flex-start}
.ico{flex:0 0 56px;height:56px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1px solid var(--linea-2)}
.ico svg{width:26px;height:26px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ok .ico{border-color:rgba(62,207,142,.45)} .ok .ico svg{stroke:var(--ok)}
.wait .ico{border-color:rgba(240,178,50,.4)} .wait .ico svg{stroke:var(--aviso)}
.ko .ico{border-color:rgba(224,86,74,.45)} .ko .ico svg{stroke:var(--rust)}
.motivo{margin-top:16px;border-left:3px solid var(--rust);padding:12px 16px;border-radius:0 10px 10px 0;background:rgba(224,86,74,.07);color:var(--plata);white-space:pre-wrap}
.wl .connect{margin-top:20px;background:var(--noche);max-width:460px;display:flex}
.wl .connect span{flex:1}

/* Formulario */
.intentos{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--gris);font-size:14px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;border:1px solid var(--linea-2);font-weight:700;color:var(--plata);font-size:13px}
.bloque{margin-top:40px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--linea)}
.bloque h2{font-size:20px}
.bloque span{color:var(--gris);font-size:14px;font-weight:600}
.q{margin-top:14px;border-radius:14px;border:1px solid var(--linea);background:linear-gradient(180deg,var(--panel-a),var(--panel-b));padding:22px;transition:border-color .15s}
.q.err{border-color:var(--rust)}
.q fieldset{border:0;margin:0;padding:0;min-width:0}
.q legend,.q .t{display:block;float:left;width:100%;padding:0;font:600 17px/1.4 var(--display);color:var(--plata)}
.q .req{color:var(--violeta-2)}
.q .ayuda{clear:both;padding-top:4px;color:var(--gris);font-size:14px}
.q .falta{clear:both;display:none;margin-top:10px;color:#F3A59D;font-size:14px;font-weight:600}
.q.err .falta{display:block}
.ops{clear:both;padding-top:14px;display:grid;gap:8px}
.op{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--linea);border-radius:10px;cursor:pointer;color:#CFCADF;transition:border-color .15s,background .15s}
.op:hover{border-color:var(--linea-2)}
.op input{margin-top:4px;accent-color:var(--violeta);width:18px;height:18px;flex:none}
.op:has(input:checked){border-color:var(--violeta);background:rgba(139,61,255,.12);color:var(--plata)}
.q textarea,.q input[type=text],.q input[type=url],.q input[type=number]{clear:both;display:block;margin-top:14px;width:100%;background:var(--noche);border:1px solid var(--linea-2);border-radius:10px;padding:12px 14px;color:var(--plata);font:16px/1.55 var(--texto)}
.q textarea{min-height:140px;resize:vertical}
.q textarea:focus,.q input:focus{outline:2px solid var(--violeta);outline-offset:0;border-color:transparent}
.cuenta{margin-top:6px;text-align:right;color:var(--gris);font-size:12px;font-variant-numeric:tabular-nums}

/* Barra fija de progreso */
.envio{position:sticky;bottom:0;z-index:15;margin-top:32px;padding-bottom:env(safe-area-inset-bottom,0px);background:linear-gradient(0deg,var(--noche) 70%,rgba(11,7,19,0))}
.envio-in{display:flex;align-items:center;gap:18px;padding:16px 0}
.prog{flex:1;display:grid;gap:8px;min-width:0}
.prog b{font-size:14px;font-variant-numeric:tabular-nums}
.prog small{color:var(--gris);font-weight:500}
.barra{height:5px;border-radius:5px;background:var(--linea-2);overflow:hidden}
.barra i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--violeta-2),var(--violeta));transition:width .3s}

/* Revisión */
.resumen{margin-top:18px}
.res{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--linea)}
.res:last-child{border-bottom:0}
.res b{font:600 15px var(--display)}
.res span{grid-column:1;color:#CFCADF;font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
.res span.vacio{color:var(--gris);font-style:italic}
.res button{grid-row:1/3;grid-column:2;align-self:center;background:none;border:0;color:var(--violeta-2);font:700 14px var(--texto);cursor:pointer}

.wl + .pie{margin-top:72px}

@media (max-width:560px){
  .panel{padding:20px}
  .q{padding:16px}
  .est{flex-direction:column}
  .yo b{display:none}
  .envio-in{flex-wrap:wrap}
  .envio-in .btn{flex:1 1 100%}
  .ruta li{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.barra i{transition:none}}