/* Sistema visual del Club de Monetización — el mismo de la Bóveda.
   Lo comparten index.html (formularios) y panel.html (respuestas). */
/* ══════════ SISTEMA VISUAL DEL CLUB (el mismo de la Bóveda) ══════════ */
:root{
  --gold:#C9A040; --gold-light:#E8C060; --gold-xlight:#FFD97D; --gold-dark:#9B7520;
  --blue-deep:#05091a; --blue-dark:#080e22; --blue-mid:#0d1830; --blue-card:#0b1428;
  --blue-accent:#1e5ce8; --blue-glow:#2468ff;
  --white:#fff; --gray:#a8b8d0; --gray-2:#6b7c99; --line:rgba(120,150,200,.14);
  --green:#10b981; --red:#e5484d;
  --r:16px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  background:var(--blue-deep); color:var(--white);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip;
  touch-action:pan-y; min-height:100dvh; display:flex; flex-direction:column;
}
/* ⚠️ overflow-x:CLIP en el <body>, no hidden (15 oct 2026). Con hidden, como
   el <html> también lo lleva, el body se volvía una caja con scroll propio que
   nunca se mueve: la cabecera y el buscador «pegados» (sticky) se iban con la
   página. clip recorta igual sin ser caja de scroll (hidden queda de reserva
   para Safari viejo). */
/* ⚠️ Sin overscroll-behavior en el <body> (ni el -x): donde el body hace de
   contenedor, Chrome deja de pasarle el gesto a la página. El desborde de
   lado ya lo corta overflow-x:hidden. */
/* el mismo cielo de la Boveda: azul dominante, un rescoldo dorado y luz desde abajo.
   Es el fondo de TODO el dominio del Club; no se cambia en una sola pagina. */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 620px at 12% 2%,rgba(30,92,232,.26),rgba(30,92,232,0) 62%),
    radial-gradient(760px 560px at 92% 4%,rgba(201,160,64,.16),rgba(201,160,64,0) 60%),
    radial-gradient(1100px 700px at 50% 108%,rgba(36,104,255,.16),rgba(36,104,255,0) 66%)}
/* la trama fina que le quita el plano al fondo */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:3px 3px}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit}
::selection{background:rgba(201,160,64,.3)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(120,150,200,.2);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(120,150,200,.35)}
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.19em;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic.llena{fill:currentColor;stroke:none}
.ic.g{width:1.6em;height:1.6em}
button .ic,a .ic{pointer-events:none}
.spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.2);border-top-color:#1a1200;
  border-radius:50%;animation:sp .7s linear infinite;display:inline-block;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ══════════ CABECERA ══════════ */
header{position:sticky;top:0;z-index:60;background:rgba(5,9,26,.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:12px;padding:10px clamp(12px,3vw,24px);max-width:1180px;margin:0 auto;
  overflow:hidden}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;text-align:left;padding:2px;border-radius:12px;
  text-decoration:none;transition:transform .16s;cursor:pointer;background:none;border:0}
.brand:hover{transform:scale(1.03)}
.brand:active{transform:scale(.97)}
.brand img{height:32px}
.brand b{font-family:'Space Grotesk',sans-serif;font-size:14px;letter-spacing:.03em;line-height:1.15}
.brand b i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.2em;color:var(--gold);font-weight:500}
.hd-der{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0;flex-shrink:1}
.paso-chip{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:.08em;color:var(--gray-2);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;white-space:nowrap}
.paso-chip b{color:var(--gold)}
.prog{height:2px;background:rgba(255,255,255,.06)}
.prog i{display:block;height:100%;width:0;border-radius:2px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold-xlight),var(--gold-dark));
  box-shadow:0 0 12px rgba(201,160,64,.55);transition:width .55s cubic-bezier(.3,.9,.2,1)}
.prog i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),rgba(255,255,255,0));
  transform:translateX(-100%);animation:recorre 2.6s ease-in-out infinite}
@keyframes recorre{0%{transform:translateX(-100%)}60%,100%{transform:translateX(220%)}}

/* ══════════ ESTRUCTURA ══════════ */
main{position:relative;z-index:2;flex:1;width:100%;max-width:1180px;margin:0 auto;overflow-x:clip;
  padding:clamp(18px,3.4vw,38px) clamp(14px,3vw,24px) calc(40px + env(safe-area-inset-bottom))}
.wrap{display:grid;grid-template-columns:238px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
@media(max-width:940px){.wrap{grid-template-columns:minmax(0,1fr);gap:16px}}

/* ── barra lateral de pasos (escritorio) ── */
.pasos-nav{position:sticky;top:86px;display:flex;flex-direction:column;gap:3px}
.pn{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:13px;text-align:left;
  color:var(--gray-2);font-size:13.5px;font-weight:500;transition:.18s;border:1px solid transparent;width:100%}
.pn .n{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:'Orbitron',sans-serif;font-size:11px;border:1px solid var(--line);color:var(--gray-2);transition:.2s}
.pn:hover{color:var(--gray)}
.pn.hecho{color:var(--gray)}
.pn.hecho .n{border-color:rgba(16,185,129,.45);color:var(--green)}
.pn.hecho .n .ic{animation:giraCheck .42s cubic-bezier(.2,1.4,.4,1)}
@keyframes giraCheck{from{opacity:0;transform:rotate(-120deg) scale(.5)}to{opacity:1;transform:none}}
.pn.on .n{animation:saltaN .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes saltaN{from{transform:scale(.6)}to{transform:scale(1)}}
.pn.on{color:#fff;background:rgba(255,255,255,.045);border-color:rgba(201,160,64,.28)}
.pn.on .n{background:linear-gradient(135deg,var(--gold-xlight),var(--gold));border-color:transparent;color:#1a1200;font-weight:700}
.pn .ic{width:15px;height:15px}
@media(max-width:940px){
  .pasos-nav{position:static;flex-direction:row;gap:7px;overflow-x:auto;padding-bottom:2px;
    scrollbar-width:none;-ms-overflow-style:none}
  .pasos-nav::-webkit-scrollbar{display:none}
  .pn{width:auto;flex:none;padding:7px 12px;border-radius:999px;font-size:12.5px;white-space:nowrap;
    border-color:var(--line)}
  .pn .n{width:20px;height:20px;font-size:10px}
  .pn .tx{display:none}
  .pn.on .tx{display:inline}
}

/* ── tarjeta ── */
.card{min-width:0;background:linear-gradient(168deg,#0d1830,#080e22);
  border:1px solid var(--line);border-radius:20px;padding:clamp(20px,3.2vw,34px);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.card.entra{animation:sube .38s cubic-bezier(.2,.8,.2,1)}
.card.der{animation:entraDer .42s cubic-bezier(.2,.8,.2,1)}
.card.izq{animation:entraIzq .42s cubic-bezier(.2,.8,.2,1)}
@keyframes sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes entraDer{from{opacity:0;transform:translate3d(30px,10px,0)}to{opacity:1;transform:none}}
@keyframes entraIzq{from{opacity:0;transform:translate3d(-30px,10px,0)}to{opacity:1;transform:none}}
.cab{display:flex;gap:14px;align-items:flex-start;margin-bottom:6px}
.cab .cir{width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;
  color:var(--gold);background:rgba(201,160,64,.1);border:1px solid rgba(201,160,64,.25);
  animation:latido 3.4s ease-in-out infinite}
@keyframes latido{
  0%,100%{box-shadow:0 0 0 0 rgba(201,160,64,.22)}
  50%{box-shadow:0 0 22px 3px rgba(201,160,64,.16)}
}
.cab .cir .ic{width:21px;height:21px}
.kick{font-family:'Space Grotesk',sans-serif;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:5px}
h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(23px,3.2vw,30px);line-height:1.2;letter-spacing:-.2px}
.sub{color:var(--gray);font-size:15.5px;margin-top:8px;max-width:62ch;line-height:1.6}

/* ── campos ── */
.campos{display:flex;flex-direction:column;gap:24px;margin-top:26px}
#campos.cascada .campo{animation:sube .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
#campos.cascada .op{animation:asoma .34s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
@keyframes asoma{from{opacity:0;transform:translate3d(0,9px,0) scale(.985)}to{opacity:1;transform:none}}
.lab{display:block;font-size:18px;font-weight:700;margin-bottom:5px;line-height:1.35;letter-spacing:-.1px}
.lab .req{color:var(--gold);margin-left:4px}
.ayuda{color:var(--gray-2);font-size:14px;margin-bottom:13px;line-height:1.55}
.dosc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(max-width:620px){.dosc{grid-template-columns:1fr;gap:24px}}
input[type=text],input[type=email],input[type=url],input[type=password],select,textarea{
  width:100%;padding:15px 16px;border-radius:13px;font-size:16px;
  background:#101b33;border:1px solid var(--line);outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s}
input::placeholder,textarea::placeholder{color:var(--gray-2)}
input:focus,select:focus,textarea:focus{
  border-color:var(--blue-accent);background:rgba(30,92,232,.1);box-shadow:0 0 0 4px rgba(30,92,232,.14)}
textarea{min-height:132px;resize:vertical;line-height:1.6}
select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gray) 50%),linear-gradient(135deg,var(--gray) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;background-size:6px 6px;background-repeat:no-repeat;
  padding-right:42px}
select option{background:var(--blue-mid);color:#fff}
.malo{border-color:rgba(229,72,77,.6) !important;box-shadow:0 0 0 4px rgba(229,72,77,.12) !important}
.cuenta{font-size:12px;color:var(--gray-2);text-align:right;margin-top:6px;transition:color .2s;min-height:16px;
  font-variant-numeric:tabular-nums}
.cuenta.ok{color:var(--green)}
.cuenta.corto{color:var(--gold-light)}
.err{display:none;color:#ff8f93;font-size:13px;font-weight:500;margin-top:8px}
.err.on{display:flex;align-items:center;gap:6px;animation:tiembla .38s cubic-bezier(.36,.07,.19,.97)}
@keyframes tiembla{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(3px)}50%{transform:translateX(-3px)}}
.err .ic{width:14px;height:14px}

/* varias páginas o canales por red */
.redes-links{display:flex;flex-direction:column;gap:18px}
.red-bloque{padding:15px;border-radius:16px;background:#0c1529;border:1px solid var(--line)}
.red-tit{display:flex;align-items:center;gap:9px;margin-bottom:11px;font-size:14px;color:var(--gray)}
.red-tit .ic{width:18px;height:18px;color:var(--gold-light)}
.red-tit b{color:#fff;font-weight:600}
.red-n{margin-left:auto;font-size:11.5px;color:var(--gray-2)}
.fila-link{margin-bottom:8px;animation:asoma .3s cubic-bezier(.2,.8,.2,1)}
.fila-link:last-of-type{margin-bottom:0}
.fila-link input{padding-right:42px}
.lk-quita{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:28px;height:28px;
  border-radius:50%;display:grid;place-items:center;color:var(--gray-2);transition:.18s}
.lk-quita:hover{color:#ff8f93;background:rgba(229,72,77,.12)}
.lk-quita .ic{width:13px;height:13px}
.lk-mas{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:9px 14px;border-radius:12px;
  font-size:13px;font-weight:600;color:var(--gold-light);
  background:rgba(201,160,64,.08);border:1px dashed rgba(201,160,64,.4);
  transition:background .2s,border-color .2s,transform .14s}
.lk-mas:hover{background:rgba(201,160,64,.16);border-color:var(--gold);transform:translateY(-1px)}
.lk-mas:active{transform:scale(.97)}
.lk-mas .ic{width:14px;height:14px;stroke-width:2.4}

/* campo con icono de red al frente */
.con-ico{position:relative}
.con-ico .mk{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;
  width:18px;height:18px;opacity:.85}
.con-ico input{padding-left:44px}

/* ── opciones ── */
.opts{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(min(228px,100%),1fr))}
.opts.ancho{grid-template-columns:minmax(0,1fr)}
.opts.corto{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.op{display:flex;align-items:center;gap:13px;padding:15px 16px;border-radius:14px;text-align:left;
  background:#101b33;border:1px solid var(--line);color:var(--gray);
  font-size:14.5px;font-weight:500;
  transition:color .2s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease,transform .14s cubic-bezier(.2,.8,.2,1)}
.op:hover{color:#fff;background:#17243f;border-color:rgba(120,150,200,.3);transform:translateY(-1px)}
.op:active{transform:scale(.985)}
.op .bx{width:24px;height:24px;flex:none;border-radius:8px;border:2px solid rgba(140,170,215,.45);
  display:grid;place-items:center;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease}
.op.radio .bx{border-radius:50%}
.op .bx .ic{width:13px;height:13px;opacity:0;color:#1a1200;stroke-width:2.8;
  transform:scale(.7);transition:opacity .16s ease,transform .18s cubic-bezier(.2,.9,.3,1)}
.op.on .bx .ic{opacity:1;transform:none}
.op .mk{width:19px;height:19px;flex:none;opacity:.7;transition:opacity .18s}
.op{position:relative;overflow:hidden}
.op.on{color:#fff;background:linear-gradient(135deg,#3b2f13,#241c0b);
  border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(201,160,64,.35),0 6px 20px -10px rgba(201,160,64,.5)}
/* marcar NO anima nada: el color y el borde cambian con una transición suave.
   (antes había un pulso + destello y se leía como un parpadeo) */
.op.on .bx{background:linear-gradient(135deg,var(--gold-xlight),var(--gold));border-color:var(--gold);
  box-shadow:0 0 14px rgba(201,160,64,.45)}
.op.on .bx .ic{opacity:1}
.op.on .mk{opacity:1;color:var(--gold-light)}
.op .tx{flex:1;min-width:0}
.op .tx small{display:block;font-size:12px;color:var(--gray-2);font-weight:400;margin-top:1px}
.op.on .tx small{color:rgba(255,255,255,.6)}

/* ── escala del 0 al 10 ── */
.escala{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:6px;position:relative}
/* cada número se colorea según su valor: rojo abajo, ámbar en medio, verde arriba */
.escala .num{position:relative;overflow:hidden}
.escala .num::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .25s;
  background:linear-gradient(135deg,var(--tono,#C9A040),var(--tono2,#E8C060))}
.escala .num .n{position:relative;z-index:2;display:block}
.escala .num::before{z-index:0}
.escala .num:hover{transform:translateY(-3px) scale(1.04);border-color:var(--tono,var(--gold))}
.escala .num.on{color:#fff;border-color:transparent;transform:translateY(-4px) scale(1.09);
  box-shadow:0 10px 26px -8px var(--tono,rgba(201,160,64,.6));font-size:18px;z-index:2;
  text-shadow:0 1px 3px rgba(0,0,0,.6);font-weight:800}
.escala .num.on::before{opacity:1}
.escala .num.on::after{content:"";position:absolute;inset:-6px;border-radius:16px;z-index:0;
  border:2px solid var(--tono,var(--gold));opacity:.45;animation:aroNum .9s ease-out}
@keyframes aroNum{from{transform:scale(.7);opacity:.9}to{transform:scale(1.25);opacity:0}}
/* los que quedan por debajo del elegido se tiñen suave, como un termómetro */
.escala .num.bajo{border-color:var(--tono,rgba(201,160,64,.5));color:#eef3fc;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.escala .num.bajo::before{opacity:.22}
.escala-cara{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;
  min-height:26px;font-size:14px;font-weight:600;color:var(--gray);text-align:center}
.escala-cara b{font-family:'Space Grotesk',sans-serif;font-size:20px;color:var(--tono,var(--gold))}
.escala-cara span{animation:sube .35s cubic-bezier(.2,.8,.2,1)}
.escala .num{justify-content:center;padding:0;aspect-ratio:1;border-radius:11px;background:#101b33;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;text-align:center;
  display:grid;place-items:center}
.escala-lab{display:flex;justify-content:space-between;color:var(--gray-2);font-size:12px;margin-top:9px}
@media(max-width:560px){
  .escala{grid-template-columns:repeat(6,minmax(0,1fr))}
  .escala .num{font-size:14px}
}

/* ── el salto de un formulario al siguiente ── */
.sello-mini{width:56px;height:56px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  color:#1a1200;background:linear-gradient(135deg,var(--gold-xlight),var(--gold));
  box-shadow:0 0 34px rgba(201,160,64,.4);animation:pop .55s cubic-bezier(.2,1.5,.4,1) both}
.sello-mini .ic{width:28px;height:28px;stroke-width:2.6}

/* ── botones ── */
.nav{display:flex;align-items:center;gap:11px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;
  padding:14px 26px;border-radius:13px;font-weight:800;font-size:15px;color:#1a1200;
  background:linear-gradient(135deg,var(--gold-xlight),var(--gold));
  box-shadow:0 8px 26px rgba(201,160,64,.28);transition:transform .15s,box-shadow .15s,filter .2s}
.btn-gold::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),rgba(255,255,255,0));
  transform:skewX(-18deg);animation:barre 4.6s ease-in-out infinite}
@keyframes barre{0%{left:-45%}55%,100%{left:125%}}
.btn-gold .ic,.btn-gold .spin{position:relative;z-index:1}
.btn-gold .ic{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.chev{transform:rotate(-90deg)}
.btn-gold:hover .chev{transform:rotate(-90deg) translateY(3px)}
.btn-ghost:hover .ic{transform:translateX(-2px);transition:transform .2s}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 12px 32px rgba(201,160,64,.4)}
.btn-gold:active{transform:scale(.97)}
.btn-gold:disabled{opacity:.6;transform:none;cursor:wait}
.btn-ghost{display:inline-flex;align-items:center;gap:7px;padding:13px 18px;border-radius:13px;
  font-size:14px;font-weight:500;color:var(--gray);border:1px solid rgba(120,150,200,.16);
  transition:color .2s,border-color .2s,background .2s,transform .12s}
.btn-ghost:hover{color:#fff;border-color:rgba(120,150,200,.32);background:rgba(255,255,255,.045)}
.btn-ghost:active{transform:scale(.96)}
.btn-blue{display:inline-flex;align-items:center;gap:7px;padding:13px 22px;border-radius:13px;
  font-size:14.5px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--blue-glow),var(--blue-accent));
  box-shadow:0 4px 16px rgba(30,92,232,.3);transition:transform .14s,box-shadow .2s,filter .2s}
.btn-blue:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(30,92,232,.42);filter:brightness(1.06)}

/* ── las flechas, debajo de todo el formulario ── */
.flechas{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:nowrap;
  margin:18px auto 0;padding-bottom:calc(6px + env(safe-area-inset-bottom));max-width:100%;min-width:0}
/* en escritorio van bajo la tarjeta, no bajo la columna de los pasos */
@media(min-width:941px){ .flechas{grid-column:2} }
.fl{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:var(--gray);background:rgba(255,255,255,.05);border:1px solid var(--line);
  transition:color .2s,background .2s,border-color .2s,transform .14s cubic-bezier(.2,.8,.2,1)}
.fl:hover{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(120,150,200,.32);transform:translateY(-2px)}
.fl:active{transform:scale(.94)}
.fl:disabled{opacity:.3;pointer-events:none}
.fl .ic{width:20px;height:20px;stroke-width:2}
.fl.der{color:#1a1200;background:linear-gradient(135deg,var(--gold-xlight),var(--gold));border-color:transparent;
  box-shadow:0 6px 22px rgba(201,160,64,.3)}
.fl.der:hover{filter:brightness(1.05);box-shadow:0 10px 28px rgba(201,160,64,.42)}
.donde{font-family:'Orbitron',sans-serif;font-size:12px;color:var(--gray-2);letter-spacing:.06em;
  min-width:96px;text-align:center;font-variant-numeric:tabular-nums}
.flechas .enviar{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:auto;min-width:0;height:52px;padding:0 24px;border-radius:999px;
  font-weight:800;font-size:15px;white-space:nowrap;line-height:1}
.flechas .enviar .ic{width:17px;height:17px;flex:none}
@media(max-width:440px){
  .fl{width:48px;height:48px}
  .donde{font-size:11px;min-width:84px}
  .flechas .enviar{height:48px;padding:0 18px;font-size:14px}
  .flechas .enviar .ic{width:16px;height:16px}
}

/* ── registro (la puerta) ── */
.gate-form{display:flex;flex-direction:column;gap:10px;max-width:400px;margin:26px auto 0;text-align:left}
.gate-form .btn-gold{margin-top:4px;justify-content:center}
.gate-form .err{margin-top:0}
.yo{display:inline-flex;align-items:center;gap:7px;padding:3px 11px 3px 4px;border-radius:999px;
  border:1px solid rgba(120,150,200,.16)}
.yo .ini{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-size:11px;
  font-weight:800;color:#1a1200;background:linear-gradient(135deg,var(--gold-xlight),var(--gold))}
.yo b{font-size:12.5px;font-weight:600;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.salir{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--gray-2);transition:.18s}
.salir:hover{color:#fff;background:rgba(255,255,255,.07)}
.salir .ic{width:15px;height:15px}
#quien{display:flex;align-items:center;gap:2px;min-width:0}
@media(max-width:560px){.yo b{display:none}}
@media(max-width:440px){
  .hd{gap:8px}
  .brand img{height:28px}
  .brand b{font-size:12.5px}
  .paso-chip{font-size:10px;padding:4px 9px;letter-spacing:.04em}
  .yo{padding:2px 5px 2px 3px}
  .yo .ini{width:21px;height:21px;font-size:10px}
  .salir{width:28px;height:28px}
}

/* ── bienvenida ── */
.hero{text-align:center;max-width:640px;margin:clamp(10px,4vw,50px) auto 0}
.hero>*{animation:sube .55s cubic-bezier(.2,.8,.2,1) both}
.hero>*:nth-child(1){animation-delay:.02s}
.hero>*:nth-child(2){animation-delay:.10s}
.hero>*:nth-child(3){animation-delay:.16s}
.hero>*:nth-child(4){animation-delay:.22s}
.hero>*:nth-child(5){animation-delay:.28s}
.hero>*:nth-child(6){animation-delay:.34s}
.hero>*:nth-child(7){animation-delay:.40s}
.hero img{height:78px;margin:0 auto 22px;filter:drop-shadow(0 6px 26px rgba(201,160,64,.38));
  animation:sube .55s cubic-bezier(.2,.8,.2,1) both, flota 6s 1s ease-in-out infinite}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero .kick{margin-bottom:12px}
.hero h1{font-size:clamp(27px,6.2vw,42px);line-height:1.12}
.hero h1 span{color:var(--gold)}
.hero p b{color:#fff;font-weight:700}
.hero p{color:var(--gray);font-size:clamp(15px,2.2vw,16.5px);margin-top:14px;line-height:1.65}
.puntos{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:26px 0 30px}
.pt{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;font-size:12.5px;
  color:var(--gray);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.pt .ic{width:14px;height:14px;color:var(--gold)}
.pt{transition:transform .18s,border-color .18s,color .18s}
.pt:hover{transform:translateY(-2px);border-color:rgba(201,160,64,.4);color:#fff}
.hero .btn-gold{padding:16px 34px;font-size:16px}
.hero-foot{margin-top:20px;font-size:12.5px;color:var(--gray-2)}

/* ── final ── */
.fin{text-align:center;max-width:600px;margin:clamp(10px,4vw,40px) auto 0;animation:sube .45s cubic-bezier(.2,.8,.2,1)}
.fin .sello{width:88px;height:88px;margin:0 auto 24px;border-radius:50%;display:grid;place-items:center;
  color:#1a1200;background:linear-gradient(135deg,var(--gold-xlight),var(--gold));
  box-shadow:0 0 50px rgba(201,160,64,.45);animation:pop .6s cubic-bezier(.2,1.5,.4,1) both}
.fin .sello .ic{width:44px;height:44px;stroke-width:2.4}
@keyframes pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
.fin h1{font-size:clamp(24px,5vw,34px)}
.fin p{color:var(--gray);font-size:16px;margin-top:14px;line-height:1.65}
.fin .accs{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.fin h1,.fin p,.fin .accs{animation:sube .6s cubic-bezier(.2,.8,.2,1) both}
.fin h1{animation-delay:.18s}.fin p{animation-delay:.26s}.fin .accs{animation-delay:.34s}
.fin .sello::after{content:"";position:absolute;inset:-10px;border-radius:50%;
  border:1px solid rgba(201,160,64,.5);animation:aro 2.6s ease-out infinite}
.fin .sello{position:relative}
@keyframes aro{0%{opacity:.7;transform:scale(.9)}100%{opacity:0;transform:scale(1.5)}}
.video{position:relative;width:100%;max-width:520px;margin:26px auto 0;aspect-ratio:16/9;
  border-radius:18px;overflow:hidden;border:1px solid rgba(201,160,64,.3);
  box-shadow:0 24px 60px -26px rgba(0,0,0,.9),0 0 40px -18px rgba(201,160,64,.4);
  animation:sube .6s .42s cubic-bezier(.2,.8,.2,1) both;background:var(--blue-card)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#confeti{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
#confeti i{position:absolute;top:-14px;width:8px;height:13px;border-radius:2px;opacity:0;
  animation:cae linear forwards}
@keyframes cae{
  0%{opacity:0;transform:translate3d(0,-10px,0) rotate(0)}
  10%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--dx,20px),102vh,0) rotate(var(--giro,540deg))}
}

footer{position:relative;z-index:2;text-align:center;color:var(--gray-2);font-size:12px;
  padding:20px;border-top:1px solid rgba(120,150,200,.07)}
footer a{text-decoration:none}
footer a:hover{color:var(--gold-light)}
#ver-version{opacity:.55;font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.06em}

/* ══════════ PANEL DE RESPUESTAS ══════════ */
#admin{display:none;position:relative;z-index:2;width:100%;max-width:1500px;margin:0 auto;
  padding:clamp(16px,3vw,30px) clamp(12px,2.5vw,24px) 60px;flex:1}

/* ── puerta ── */
.pan-gate{max-width:380px;margin:clamp(20px,8vh,90px) auto 0;text-align:center;
  animation:sube .5s cubic-bezier(.2,.8,.2,1) both}
.pan-gate img{height:64px;margin:0 auto 20px;filter:drop-shadow(0 6px 24px rgba(201,160,64,.35))}
.pan-gate h2{font-family:'Space Grotesk',sans-serif;font-size:26px;margin-bottom:8px}
.pan-gate p{color:var(--gray);font-size:14px;margin-bottom:22px}
.pan-gate input{width:100%;text-align:center;letter-spacing:.06em;margin-bottom:10px}
.pan-gate .btn-gold{width:100%;justify-content:center}
.pan-gate .err{margin-top:12px}
.pan-gate .btn-gold,.pan-gate .btn-ghost{width:100%;justify-content:center}
.gate-o{display:flex;align-items:center;gap:12px;margin:4px 0 14px;color:var(--gray-2);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.gate-o::before,.gate-o::after{content:"";flex:1;height:1px;background:var(--line)}

/* ── cabecera del panel ── */
/* ⚠️ Los botones de la derecha NO se mueven al cambiar de pestaña. Con
   `flex-end` bajaban cuando el subtítulo ocupaba dos líneas, y cada pantalla
   los dejaba en un sitio distinto. Van anclados arriba, y el subtítulo se
   queda en una sola línea pase lo que pase. */
.pan-top{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.pan-top>div:first-child{min-width:0;flex:1}
.pan-top h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(20px,3vw,26px);line-height:1.15}
.pan-top .sub{color:var(--gray-2);font-size:13px;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pan-top .acc{margin-left:auto;display:flex;gap:8px;flex-wrap:nowrap;flex:none;align-items:center}
/* Envuelven en varias filas en vez de formar una tira que hay que arrastrar:
   el body usa touch-action:pan-y, así que un carrusel horizontal no se puede
   deslizar con el dedo y las pestañas del final quedaban inalcanzables. */
.pestanas{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:4px;margin-bottom:22px}
.pest{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  flex:none;
  font-size:13.5px;font-weight:500;color:var(--gray);white-space:nowrap;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  transition:color .18s,background .18s,border-color .18s,transform .14s}
.pest:hover{color:#fff;background:rgba(255,255,255,.08);transform:translateY(-1px)}
.pest.on{color:#1a1200;background:linear-gradient(135deg,var(--gold-xlight),var(--gold));
  border-color:transparent;box-shadow:0 4px 16px rgba(201,160,64,.28)}
.pest .n{font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.18)}
.pest.on .n{background:rgba(0,0,0,.22)}
.pest .ic{width:15px;height:15px}

.busca{position:relative;flex:1;min-width:200px;max-width:380px}
.busca input{width:100%;padding:10px 14px 10px 38px;border-radius:12px;font-size:13.5px}
.busca .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  color:var(--gray-2);pointer-events:none}

/* ── tarjetas de números ── */
/* Fichas de devolución */
.ficha.dv{text-align:left}
.dv-txt{font-size:13.2px;line-height:1.6;color:var(--gray);margin-top:9px}
.dv-txt b{color:var(--gold-light)}
.dv-img{max-width:100%;max-height:230px;border-radius:10px;margin-top:11px;border:1px solid var(--line)}
.dv-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.dv-acts button{padding:8px 15px;border-radius:9px;font:600 12.3px Inter,system-ui,sans-serif;
  cursor:pointer;border:1px solid rgba(90,200,140,.4);background:transparent;color:#8FE3B4;transition:.18s}
.dv-acts button:hover{border-color:#5AC88C}
.dv-acts button.no{border-color:rgba(230,120,110,.42);color:#F0A9A2}
.dv-acts button.no:hover{border-color:#D8544A}

/* Enlace del formulario de activación — vive en la vista para no volver a perderlo */
.lnk{display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin:4px 0 20px;
  border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  background:linear-gradient(160deg,#0d1830,#080e22)}
.lnk .et{font:700 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold);flex:none}
.lnk code{flex:1;min-width:230px;font:600 13.5px/1.4 ui-monospace,Menlo,monospace;
  color:var(--white);background:rgba(0,0,0,.3);border:1px solid var(--line);
  border-radius:9px;padding:9px 12px;overflow:auto;white-space:nowrap}
.lnk button,.lnk a.bt{flex:none;padding:9px 16px;border-radius:9px;
  font:600 13px Inter,system-ui,sans-serif;cursor:pointer;border:1px solid var(--line);
  background:transparent;color:var(--gold-light);text-decoration:none;transition:.18s}
.lnk button:hover,.lnk a.bt:hover{border-color:var(--gold);color:var(--white)}
.lnk button.ok{border-color:#5AC88C;color:#8FE3B4}
.lnk .ay{flex-basis:100%;margin:0;font-size:12.2px;color:var(--gray-2);line-height:1.55}
@media(max-width:620px){.lnk code{min-width:100%;order:2}}
.tot{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px;margin:4px 0 22px}
.kpi{display:flex;align-items:center;gap:12px;background:linear-gradient(160deg,#0d1830,#080e22);
  border:1px solid var(--line);border-radius:16px;padding:14px 16px;
  animation:sube .5s cubic-bezier(.2,.8,.2,1) both;transition:border-color .2s,transform .18s}
.kpi:hover{border-color:rgba(201,160,64,.35);transform:translateY(-2px)}
.kpi:nth-child(2){animation-delay:.06s}.kpi:nth-child(3){animation-delay:.12s}.kpi:nth-child(4){animation-delay:.18s}
.kpi .ico{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;
  color:var(--gold);background:rgba(201,160,64,.1);border:1px solid rgba(201,160,64,.22)}
.kpi .ico .ic{width:18px;height:18px}
.kpi b{display:block;font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1.1}
.kpi span{font-size:11.5px;color:var(--gray-2);display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── lista de respuestas ── */
.fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px}
.ficha{text-align:left;width:100%;background:linear-gradient(160deg,#0d1830,#080e22);
  border:1px solid var(--line);border-radius:16px;padding:15px 16px;
  animation:sube .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s);
  transition:border-color .2s,transform .16s,box-shadow .2s}
.ficha:hover{border-color:rgba(201,160,64,.45);transform:translateY(-2px);
  box-shadow:0 16px 40px -24px rgba(0,0,0,.9)}
.ficha .cab{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.ficha .ini{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-weight:800;color:#1a1200;background:linear-gradient(135deg,var(--gold-xlight),var(--gold))}
.ficha .quien{min-width:0;flex:1}
.ficha .quien b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ficha .quien span{display:block;font-size:12px;color:var(--gray-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ficha .cuando{font-size:11px;color:var(--gray-2);white-space:nowrap}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip-d{font-size:11px;padding:4px 9px;border-radius:999px;color:var(--gray);
  background:rgba(255,255,255,.05);border:1px solid rgba(120,150,200,.14)}
.chip-d.si{color:#34d399;background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.3)}
.chip-d.no{color:var(--gray-2)}
.chip-d.oro{color:var(--gold-light);background:rgba(201,160,64,.14);border-color:rgba(201,160,64,.3)}
.ficha .cita{margin-top:10px;font-size:12.5px;color:var(--gray);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  border-left:2px solid rgba(201,160,64,.4);padding-left:10px}

/* ── ficha completa ── */
/* ══ LA FICHA ES UNA VENTANA, NO UN CAJÓN LATERAL ══
   Pegada al lado derecho se leía mal y, al dar rueda fuera de ella, lo que se
   movía era el panel de detrás. Ahora es una ventana centrada, con su propio
   scroll, y mientras está abierta el fondo no se mueve (body.hoja-abierta). */
.hoja{position:fixed;inset:0;z-index:100;display:none}
.hoja.on{display:grid;place-items:center;padding:28px 20px}
.hoja .fondo{position:absolute;inset:0;background:rgba(3,6,16,.76);backdrop-filter:blur(7px);
  animation:aparece .22s ease}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.hoja .caja{position:relative;width:min(680px,100%);max-height:min(86vh,860px);overflow-y:auto;
  border-radius:20px;overscroll-behavior:contain;
  background:linear-gradient(180deg,#0b1428,#080e22);border:1px solid rgba(201,160,64,.2);
  box-shadow:0 40px 110px rgba(0,0,0,.72);animation:entraVentana .28s cubic-bezier(.2,.9,.3,1)}
@keyframes entraVentana{from{transform:translateY(14px) scale(.985);opacity:0}to{transform:none;opacity:1}}
/* ⚠️ La clase va en <html> Y en <body>: con ella solo en el body, la rueda
   fuera de la ventana seguía moviendo el documento, que es quien scrollea. */
html.hoja-abierta,body.hoja-abierta{overflow:hidden}
.hoja .caja::-webkit-scrollbar{width:10px}
.hoja .caja::-webkit-scrollbar-thumb{background:rgba(120,150,200,.22);border-radius:20px;
  border:3px solid transparent;background-clip:content-box}
.hoja .top{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;
  padding:16px 20px;background:rgba(11,20,40,.96);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);border-radius:20px 20px 0 0}
.hoja .top .ini{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-weight:800;color:#1a1200;background:linear-gradient(135deg,var(--gold-xlight),var(--gold))}
.hoja .top b{display:block;font-size:16px;font-family:'Space Grotesk',sans-serif}
.hoja .top span{font-size:12.5px;color:var(--gray-2)}
.hoja .cerrar{margin-left:auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:var(--gray);transition:.18s}
.hoja .cerrar:hover{color:#fff;background:rgba(255,255,255,.08)}
.hoja .cuerpo{padding:18px 20px 60px}
.grupo{margin-bottom:22px}
.grupo > h4{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.grupo > h4 .ic{width:15px;height:15px}
.rr{padding:11px 13px;border-radius:12px;background:rgba(255,255,255,.03);
  border:1px solid rgba(120,150,200,.1);margin-bottom:7px}
.rr .q{font-size:12px;color:var(--gray-2);margin-bottom:3px}
.rr .a{font-size:14px;color:#eaf0fa;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.rr .a a{color:var(--blue-glow);text-decoration:none}
.rr .a a:hover{text-decoration:underline}
.rr.largo .a{font-size:13.5px}

.vacio{text-align:center;color:var(--gray-2);padding:60px 20px;font-size:14.5px}
.vacio .big{font-size:44px;color:rgba(201,160,64,.35);margin-bottom:14px}
.vacio .big .ic{width:1em;height:1em;stroke-width:1.2}
.vacio b{display:block;color:var(--gray);font-size:16px;margin-bottom:6px;font-weight:600}

@media(max-width:820px){
  .pestanas{gap:6px;margin-bottom:18px}
  .pest{padding:8px 12px;font-size:12.5px;gap:6px}
  .pest .ic{width:14px;height:14px}
  .pest .n{padding:1px 6px}
}
@media(max-width:620px){
  .pan-top .acc{width:100%;margin-left:0;flex-wrap:wrap}
  .pan-top .acc button{flex:1;justify-content:center}
  .fichas{grid-template-columns:1fr}
  .hoja.on{padding:0}
  .hoja .caja{width:100%;max-height:100%;height:100%;border-radius:0;border:0}
  .hoja .top{border-radius:0}
}

/* ══════════ resumen / dashboard ══════════ */
.res-sec{margin-bottom:26px}
.res-sec > h3{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;
  font-size:15px;margin-bottom:4px}
.res-sec > h3 .ic{width:17px;height:17px;color:var(--gold)}
.res-sec > h3 .cuantos{margin-left:auto;font-family:Inter,sans-serif;font-size:11.5px;
  font-weight:400;color:var(--gray-2)}
.res-sec > p.de{font-size:12px;color:var(--gray-2);margin-bottom:12px}
.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:14px}
.caja-r{background:linear-gradient(160deg,#0d1830,#080e22);
  border:1px solid var(--line);border-radius:16px;padding:16px 18px;
  animation:sube .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
.caja-r > h4{font-size:13.5px;font-weight:600;margin-bottom:2px;line-height:1.35}
.caja-r > .q{font-size:11.5px;color:var(--gray-2);margin-bottom:12px}
.barra{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:12.5px}
.barra:last-child{margin-bottom:0}
.barra .et{flex:0 0 44%;color:var(--gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra .tr{flex:1;height:9px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.barra .tr i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));
  animation:crece .7s cubic-bezier(.2,.8,.2,1) both}
.barra.azul .tr i{background:linear-gradient(90deg,var(--blue-accent),var(--blue-glow))}
.barra.verde .tr i{background:linear-gradient(90deg,#0f8b63,#34d399)}
@keyframes crece{from{width:0 !important}}
.barra b{flex:none;font-family:'Space Grotesk',sans-serif;font-size:12.5px;color:#fff;
  min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
.barra b i{font-style:normal;color:var(--gray-2);font-size:11px;font-weight:400}
.nps-gran{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.nps-gran b{font-family:'Space Grotesk',sans-serif;font-size:38px;color:var(--gold)}
.nps-gran span{font-size:12.5px;color:var(--gray-2)}
.citas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:12px}
.cita-c{text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;transition:border-color .2s,transform .16s}
.cita-c:hover{border-color:rgba(201,160,64,.45);transform:translateY(-2px)}
.cita-c .txt{font-size:13px;color:#dbe4f2;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cita-c .pie{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:11.5px;color:var(--gray-2)}
.cita-c .pie b{color:var(--gray);font-weight:600}
.res-vacio{color:var(--gray-2);font-size:13px}

/* ══════════ vista previa del formulario (panel) ══════════ */
.previa{display:flex;flex-direction:column;gap:22px;margin-top:24px}
.previa-form{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#080e22}
.previa-form > header{display:flex;align-items:center;gap:12px;padding:17px 20px;
  background:linear-gradient(135deg,rgba(201,160,64,.14),rgba(30,92,232,.08));
  border-bottom:1px solid var(--line);position:static;backdrop-filter:none}
.previa-form > header .num{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;color:#1a1200;
  background:linear-gradient(135deg,var(--gold-xlight),var(--gold))}
.previa-form > header b{font-family:'Space Grotesk',sans-serif;font-size:16px}
.previa-form > header span{margin-left:auto;font-size:12px;color:var(--gray-2)}
.previa-paso{padding:20px;border-bottom:1px solid rgba(120,150,200,.08)}
.previa-paso:last-child{border-bottom:0}
.previa-paso > h4{font-size:15px;display:flex;align-items:center;gap:9px;margin-bottom:4px}
.previa-paso > h4 .ic{width:17px;height:17px;color:var(--gold)}
.previa-paso > p{font-size:12.5px;color:var(--gray-2);margin-bottom:14px;line-height:1.5}
.previa-q{padding:13px 15px;border-radius:12px;background:rgba(255,255,255,.03);
  border:1px solid rgba(120,150,200,.1);margin-bottom:10px}
.previa-q:last-child{margin-bottom:0}
.previa-q b{font-size:13.5px;font-weight:600;display:block;margin-bottom:2px}
.previa-q .meta{font-size:11px;color:var(--gray-2);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.previa-q .meta i{font-style:normal;padding:2px 7px;border-radius:999px;background:rgba(120,150,200,.14)}
.previa-q .meta i.req{background:rgba(201,160,64,.18);color:var(--gold-light)}
.previa-q .meta i.cond{background:rgba(30,92,232,.18);color:#7fa8ff}
.previa-op{display:flex;flex-wrap:wrap;gap:5px}
.previa-op span{font-size:11.5px;padding:4px 9px;border-radius:999px;color:var(--gray);
  background:rgba(255,255,255,.04);border:1px solid rgba(120,150,200,.12)}
.previa-op span.txt{font-style:italic;color:var(--gray-2);border-style:dashed}
.lanzar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 20px;border-radius:16px;
  margin:20px 0 4px;
  background:linear-gradient(135deg,rgba(201,160,64,.13),rgba(30,92,232,.08));
  border:1px solid rgba(201,160,64,.3)}
.lanzar .url{flex:1;min-width:220px;font-family:'Orbitron',sans-serif;font-size:13px;color:var(--gold-light);
  padding:11px 14px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid var(--line);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ══════════ Equipo del panel (invitaciones y acceso propio) ══════════ */
.gate-link{display:block;width:100%;margin-top:14px;padding:9px;font-size:12.5px;
  color:var(--gray-2);background:none;border:0;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;transition:color .16s}
.gate-link:hover{color:var(--white)}
.campo-inv{width:100%;background:#101b33;border:1px solid var(--line);border-radius:10px;
  padding:11px 12px;font-size:14px;color:var(--white);min-width:0}
.campo-inv:focus{outline:0;border-color:rgba(201,160,64,.55)}
.mini-act{border:1px solid var(--line);border-radius:9px;padding:7px 12px;font-size:12.5px;
  color:var(--gray);background:none;cursor:pointer;transition:all .16s;white-space:nowrap}
.mini-act:hover{border-color:rgba(201,160,64,.5);color:var(--white)}


/* ══════════ Buscador de la vista ══════════
   Vive encima de la lista, no en la cabecera: así se entiende a la primera
   qué se va a buscar, y el texto del campo lo dice según la pestaña. */
.barra-busca{position:relative;display:flex;align-items:center;margin:2px 0 18px}
.barra-busca .ic{position:absolute;left:15px;width:17px;height:17px;color:var(--gray-2);
  pointer-events:none}
.barra-busca input{width:100%;background:#101b33;border:1px solid var(--line);border-radius:13px;
  padding:14px 16px 14px 44px;font-size:14.5px;color:var(--white);
  transition:border-color .16s,box-shadow .16s,background .16s}
.barra-busca input::placeholder{color:#55668a}
.barra-busca input:focus{outline:0;background:#12203c;border-color:rgba(201,160,64,.55);
  box-shadow:0 0 0 3px rgba(201,160,64,.1)}

/* ── aire entre los bloques del panel ── */
.pan-top{margin-bottom:18px}
.pestanas{margin-bottom:22px}
.tot{margin:2px 0 24px!important}
.grupo{margin-bottom:26px}
.grupo + .grupo{padding-top:4px}
.fichas{margin-top:4px}


/* ══════════ Llamadas del equipo ══════════ */
.llam .video{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:#070d1a;border:1px solid var(--line)}
.llam .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
textarea.campo-inv{resize:vertical;min-height:70px;line-height:1.55;font-family:inherit}
.llam h4{display:block}

/* ══════════════════════════════════════════════════════════════════════════
   ENLACES PÚBLICOS — la pantalla desde la que Diego reparte

   Se escribió primero con las clases `.bloque` y `.tabla`, que NO existen en
   este panel: salía todo pelado y amontonado (el contador pegado al título,
   las tablas sin aire). Aquí va con lo suyo, prefijo `lk-`.
   ══════════════════════════════════════════════════════════════════════════ */

.lk-sec{margin:0 0 30px}
.lk-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.lk-h h3{font-family:'Space Grotesk',sans-serif;font-size:16.5px;font-weight:800;
  letter-spacing:-.02em;color:var(--white);margin:0}
.lk-n{padding:4px 11px;border-radius:30px;font-size:11.5px;font-weight:700;
  color:var(--gold-light,#e8c46a);background:rgba(201,160,64,.12);
  border:1px solid rgba(201,160,64,.3);white-space:nowrap}
.lk-h .lk-bt{margin-left:auto}
.lk-bt{padding:8px 14px;border-radius:10px;font-size:12.4px;font-weight:700;cursor:pointer;
  color:var(--gray);background:rgba(5,10,24,.7);border:1px solid rgba(120,150,200,.22);
  transition:border-color .15s,color .15s}
.lk-bt:hover{border-color:var(--gold);color:var(--white)}
.lk-ay{margin:-6px 0 16px;font-size:12.8px;line-height:1.65;color:var(--gray-2);max-width:760px}
.lk-vacio{padding:26px;border-radius:14px;text-align:center;font-size:13px;color:var(--gray-2);
  background:rgba(10,18,38,.5);border:1px dashed rgba(120,150,200,.2)}

/* ── la tarjeta de cada herramienta ── */
.rec{padding:18px;border-radius:16px;margin-bottom:12px;
  background:linear-gradient(150deg,rgba(13,24,52,.8),rgba(8,14,32,.7));
  border:1px solid rgba(120,150,200,.18)}
.rec-h{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.rec-h>div:first-child{flex:1;min-width:190px}
.rec-h b{display:block;font-family:'Space Grotesk',sans-serif;font-size:15.5px;
  font-weight:800;color:var(--white);line-height:1.3}
.rec-h span{display:block;margin-top:4px;font-size:12.6px;color:var(--gray-2);line-height:1.55}
.rec-n{flex:none;text-align:center;min-width:72px;padding:7px 12px;border-radius:12px;
  background:rgba(5,10,24,.6);border:1px solid rgba(120,150,200,.14)}
.rec-n b{font-family:'Space Grotesk',sans-serif;font-size:21px;line-height:1.1;
  color:var(--gold-light,#e8c46a)}
.rec-n span{display:block;margin-top:2px;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray-2)}

.rec-lk{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rec-lk code{flex:1;min-width:210px;padding:10px 13px;border-radius:10px;
  font:600 13px/1.4 ui-monospace,Menlo,monospace;color:var(--gold-xlight,#ffd97d);
  background:rgba(5,10,24,.85);border:1px solid rgba(120,150,200,.16);overflow-wrap:anywhere}
.rec-lk button,.rec-lk a.bt,.rec-eti button{flex:none;padding:10px 15px;border-radius:10px;
  font-size:12.6px;font-weight:700;text-decoration:none;color:var(--gray);cursor:pointer;
  background:rgba(5,10,24,.7);border:1px solid rgba(120,150,200,.22);
  transition:border-color .15s,color .15s}
.rec-lk button:hover,.rec-lk a.bt:hover,.rec-eti button:hover{border-color:var(--gold);color:var(--white)}
.rec-lk button.ok,.rec-eti button.ok{border-color:#5AC88C;color:#8FE3B4}

.rec-can{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px;align-items:center}
.rec-can .et{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-2);
  margin-right:2px}
.rec-can .can{padding:7px 13px;border-radius:30px;font-size:12px;font-weight:600;cursor:pointer;
  color:#b9c6dd;background:rgba(36,104,255,.1);border:1px solid rgba(36,104,255,.26);
  transition:color .15s,border-color .15s,background .15s}
.rec-can .can:hover{color:#fff;border-color:rgba(36,104,255,.6);background:rgba(36,104,255,.2)}
.rec-can .can.ok{border-color:#5AC88C;color:#8FE3B4;background:rgba(90,200,140,.12)}

.rec-eti{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.rec-eti input{flex:1;min-width:200px;padding:10px 13px;border-radius:10px;font-size:13px;
  color:var(--white);background:rgba(5,10,24,.85);border:1px solid rgba(120,150,200,.18);outline:none}
.rec-eti input:focus{border-color:var(--gold)}
.rec-eti input::placeholder{color:var(--gray-2);opacity:.7}

/* ── de dónde viene la gente: una fila por enlace, con su barra ── */
.lk-via{display:grid;gap:8px}
.lk-fila{display:grid;grid-template-columns:minmax(120px,1.4fr) 62px 62px minmax(90px,1fr) auto;
  align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  background:rgba(10,18,38,.55);border:1px solid rgba(120,150,200,.14)}
.lk-fila .de{font-weight:700;font-size:13.2px;color:var(--white);overflow-wrap:anywhere}
.lk-fila .nn{text-align:center}
.lk-fila .nn b{display:block;font-size:15px;color:var(--white);line-height:1.1}
.lk-fila .nn span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-2)}
.lk-barra{position:relative;height:7px;border-radius:30px;background:rgba(255,255,255,.08);
  overflow:hidden}
.lk-barra i{position:absolute;inset:0 auto 0 0;border-radius:30px;
  background:linear-gradient(90deg,#2468ff,#ffd97d)}
.lk-barra em{position:absolute;right:0;top:-18px;font-style:normal;font-size:11px;
  color:var(--gold-light,#e8c46a);font-weight:700}
.lk-fila .cuando{font-size:11.5px;color:var(--gray-2);white-space:nowrap;text-align:right}

/* ── quién dejó sus datos: fichas, no una tabla apretada ── */
.lk-gente{display:grid;gap:8px}
.lk-p{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:12px;
  background:rgba(10,18,38,.55);border:1px solid rgba(120,150,200,.14)}
.lk-ini{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:14px;color:#1a1200;
  background:linear-gradient(135deg,#f0d78f,#c9a040)}
.lk-p .qui{flex:1;min-width:0}
.lk-p .qui b{display:block;font-size:13.6px;color:var(--white);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-p .qui span{display:block;font-size:12.2px;color:var(--gray-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:52%}
.lk-chips i{font-style:normal;padding:4px 9px;border-radius:30px;font-size:11px;
  color:#b9c6dd;background:rgba(255,255,255,.05);border:1px solid rgba(120,150,200,.16);
  white-space:nowrap}
.lk-chips i.de{color:var(--gold-light,#e8c46a);background:rgba(201,160,64,.1);
  border-color:rgba(201,160,64,.26)}
.lk-p .cuando{flex:none;font-size:11.5px;color:var(--gray-2);white-space:nowrap}

@media(max-width:720px){
  .lk-fila{grid-template-columns:1fr auto auto;row-gap:9px}
  .lk-fila .lk-barra{grid-column:1/-1;margin-top:8px}
  .lk-fila .cuando{grid-column:1/-1;text-align:left}
  .lk-chips{max-width:100%;justify-content:flex-start}
  .lk-p{flex-wrap:wrap}
  .lk-p .cuando{width:100%;text-align:left}
  .rec-lk code{min-width:100%}
  .rec-n{min-width:0;flex:1}
}

/* ── la rejilla de herramientas: la primera pantalla de «Enlaces públicos» ──
   Una tarjeta por herramienta, con sus números. Entras en una y ves solo lo
   suyo: con todo en la misma lista los datos se revolvían. */
.lk-rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.lk-tj{display:flex;flex-direction:column;gap:10px;padding:17px;border-radius:16px;
  text-align:left;cursor:pointer;width:100%;
  background:linear-gradient(150deg,rgba(13,24,52,.8),rgba(8,14,32,.7));
  border:1px solid rgba(120,150,200,.18);
  transition:border-color .18s,transform .18s,box-shadow .18s}
.lk-tj:hover{border-color:rgba(201,160,64,.5);transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(0,0,0,.4)}
.lk-tj-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.lk-tj-h b{font-family:'Space Grotesk',sans-serif;font-size:15.5px;font-weight:800;
  color:var(--white);line-height:1.25}
.lk-tj-h i{font-style:normal;font:600 11.5px/1 ui-monospace,Menlo,monospace;
  color:var(--gold-light,#e8c46a);opacity:.8}
.lk-tj-d{font-size:12.4px;line-height:1.55;color:var(--gray-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lk-tj-n{display:flex;gap:8px;margin-top:2px}
.lk-tj-n>span{flex:1;padding:9px 6px;border-radius:11px;text-align:center;
  background:rgba(5,10,24,.6);border:1px solid rgba(120,150,200,.14)}
.lk-tj-n b{display:block;font-family:'Space Grotesk',sans-serif;font-size:19px;line-height:1.1;
  color:var(--white)}
.lk-tj-n>span:last-child b{color:var(--gold-light,#e8c46a)}
.lk-tj-n i{display:block;margin-top:2px;font-style:normal;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray-2)}
.lk-tj-p{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding-top:10px;border-top:1px solid rgba(120,150,200,.12);
  font-size:11.5px;color:var(--gray-2)}
.lk-tj-p em{font-style:normal;font-weight:700;color:var(--gold-light,#e8c46a)}

.lk-volver{display:inline-flex;align-items:center;gap:7px;margin-bottom:16px;
  padding:8px 14px;border-radius:10px;font-size:12.6px;font-weight:700;cursor:pointer;
  color:var(--gray);background:rgba(5,10,24,.7);border:1px solid rgba(120,150,200,.22);
  transition:border-color .15s,color .15s}
.lk-volver:hover{border-color:var(--gold);color:var(--white)}

/* la portada de la herramienta en su bloque: la misma del Arsenal */
.lk-tj-img{display:block;margin:-17px -17px 2px;height:120px;overflow:hidden;
  border-radius:16px 16px 0 0;background:#0a1226}
.lk-tj-img img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;
  transition:transform .3s,opacity .3s}
.lk-tj:hover .lk-tj-img img{transform:scale(1.04);opacity:1}

/* el pulso de «en vivo»: dice que los números se están actualizando solos */
.lk-vivo{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:30px;
  font-size:11px;font-weight:700;color:#8FE3B4;background:rgba(90,200,140,.1);
  border:1px solid rgba(90,200,140,.3);white-space:nowrap}
.lk-vivo i{width:6px;height:6px;border-radius:50%;background:#5AC88C;
  box-shadow:0 0 0 0 rgba(90,200,140,.6);animation:lkLate 2s ease-out infinite}
@keyframes lkLate{0%{box-shadow:0 0 0 0 rgba(90,200,140,.55)}
  70%{box-shadow:0 0 0 8px rgba(90,200,140,0)}100%{box-shadow:0 0 0 0 rgba(90,200,140,0)}}

/* ══ PANEL GLOBAL DE USUARIOS ══
   Una fila por persona, con su estado real: si activó, cómo entra y desde
   cuándo. Antes esto vivía repartido en listas que no se cruzaban. */
.bov-filtros{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.bov-f{padding:8px 14px;border-radius:30px;font-size:12.6px;font-weight:600;cursor:pointer;
  color:var(--gray-2);background:rgba(10,18,38,.6);border:1px solid rgba(120,150,200,.18);
  transition:color .15s,border-color .15s,background .15s}
/* solo con ratón: en el celular el :hover se queda pegado al filtro que estaba
   bajo el dedo y parecía que había dos filtros puestos */
@media(hover:hover){ .bov-f:hover{color:#fff;border-color:rgba(120,150,200,.4)} }
.bov-f.on{color:#1a1200;background:linear-gradient(135deg,#f0d78f,#c9a040);border-color:transparent}
.bov-f i{font-style:normal;opacity:.7;margin-left:3px}
.bov-f.on i{opacity:.85}

.bov-lista{display:grid;gap:8px}
/* ⚠️ REJILLA FIJA: las columnas miden lo mismo en todos los filtros, así nada
   se mueve de sitio al cambiar de pestaña. Orden: cara · quién · activación ·
   cómo entra · fechas · mandos · flecha. */
.bov-p{display:grid;align-items:center;gap:13px;padding:12px 14px;border-radius:13px;
  grid-template-columns:40px minmax(0,1fr) 104px 130px 128px 290px 22px;
  background:rgba(10,18,38,.55);border:1px solid rgba(120,150,200,.14)}
.bov-col{display:flex;justify-content:flex-start}
.bov-col .chip-d{white-space:nowrap}
.bov-cara{flex:none;width:40px;height:40px;border-radius:12px;object-fit:cover;display:block}
.bov-cara.ini{display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;
  font-weight:800;font-size:15px;color:#1a1200;background:linear-gradient(135deg,#f0d78f,#c9a040)}
.bov-qui{flex:1;min-width:150px}
.bov-qui b{display:block;font-size:13.8px;color:var(--white);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bov-qui span{display:block;font-size:12.2px;color:var(--gray-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bov-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:46%}
.bov-fechas{display:flex;flex-direction:column;gap:2px;text-align:right;
  font-size:11.2px;color:var(--gray-2);white-space:nowrap}
/* el folio siempre ocupa su línea, lleve texto o no: si no, las filas con
   folio son más altas que las demás */
.bov-fechas .folio{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;opacity:.75;
  min-height:14px}
/* en pantallas medianas la rejilla se estrecha por partes, sin descolocarse */
@media(max-width:1340px){
  .bov-p{grid-template-columns:40px minmax(0,1fr) 100px 124px 120px 250px 22px;gap:9px}
  .ba-rol{max-width:96px}
}
@media(max-width:1120px){
  .bov-p{grid-template-columns:40px minmax(0,1fr) 104px 124px 118px 22px;gap:10px}
  .bov-acc{grid-column:2 / -1;justify-content:flex-start;margin-top:4px}
}
@media(max-width:760px){
  .bov-p{grid-template-columns:40px minmax(0,1fr);gap:10px}
  .bov-col,.bov-fechas{grid-column:2 / -1;justify-content:flex-start;text-align:left}
  .bov-fechas{flex-direction:row;gap:10px;flex-wrap:wrap}
  .bov-fechas .folio{min-height:0}
  .bov-acc{grid-column:1 / -1}
}
/* el filtro de los usuarios de prueba: discreto, que no es gente de verdad */
.bov-f.gris{opacity:.6;font-style:italic}
.bov-f.gris.on{opacity:1;font-style:normal}

/* ══ el menú en dos niveles ══
   Arriba el bloque (acceso / formularios / bajas / fuera), debajo sus
   pantallas. Once botones seguidos no decían de qué iba cada uno. */
.bloques{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.blq{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:13px;
  font-size:13.6px;font-weight:700;cursor:pointer;color:var(--gray);
  background:rgba(10,18,38,.6);border:1px solid rgba(120,150,200,.18);
  transition:color .15s,border-color .15s,background .15s}
.blq:hover{color:#fff;border-color:rgba(120,150,200,.42)}
.blq.on{color:#1a1200;background:linear-gradient(135deg,#f0d78f,#c9a040);border-color:transparent}
.blq svg{width:17px;height:17px}
.pestanas:empty{display:none;margin:0}

/* ══════════════════════════════════════════════════════════════════════════
   LA FICHA DE UNA PERSONA  ·  se abre tocando su fila en la lista de usuarios
   ══════════════════════════════════════════════════════════════════════════ */
.bov-p{cursor:pointer;transition:border-color .15s,background .15s}
.bov-p:hover{border-color:rgba(201,160,64,.42);background:rgba(16,28,56,.75)}
.bov-p:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bov-fl{flex:none;display:grid;place-items:center;width:22px;color:var(--gray-2);
  transform:rotate(-90deg);transition:transform .15s,color .15s}
.bov-fl .ic{width:16px;height:16px}
.bov-p:hover .bov-fl{color:var(--gold-light);transform:rotate(-90deg) translateY(3px)}
@media(max-width:760px){ .bov-fl{display:none} }

.hoja .fu-cara{width:42px;height:42px;flex:none;border-radius:50%;object-fit:cover;display:block}
/* en qué situación está, de una frase, arriba del todo */
.fu-sit{margin:0 0 16px;padding:11px 14px;border-radius:12px;font-size:13.4px;font-weight:600;
  line-height:1.45;border:1px solid}
.fu-sit.si{color:#7ee2b8;background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3)}
.fu-sit.oro{color:#ffd97d;background:rgba(201,160,64,.1);border-color:rgba(201,160,64,.3)}
.fu-sit.no{color:#ff9a9e;background:rgba(255,70,70,.09);border-color:rgba(255,70,70,.28)}

/* dentro de la ventana los datos van densos: son muchos y de una línea */
.hoja .grupo .rr{padding:9px 12px;margin-bottom:6px;font-size:13.4px;color:#eaf0fa}
.hoja .grupo .rr b{display:block;font-size:11px;color:var(--gray-2);font-weight:500;margin-bottom:2px}
.hoja .grupo .rr .mono{font-family:ui-monospace,Menlo,monospace;font-size:12.4px;
  word-break:break-all;color:#cfdcf0}
.fu-nota{margin:0;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.6;
  color:var(--gray);background:rgba(255,255,255,.03);border:1px solid var(--line)}
.fu-nota b{color:#ffd97d}
.fu-btns{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.fu-btns>*{flex:1;min-width:140px;justify-content:center}

/* cada formulario que contestó: se toca y se abre su respuesta */
.fu-resp{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  padding:12px 14px;border-radius:12px;margin-bottom:8px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);transition:.15s}
.fu-resp:hover{border-color:rgba(201,160,64,.45);background:rgba(255,255,255,.055)}
.fu-resp span{flex:1;min-width:0}
.fu-resp b{display:block;font-size:13.4px;color:#eaf0fa;font-weight:600}
.fu-resp i{display:block;font-style:normal;font-size:11.5px;color:var(--gray-2);margin-top:2px}
.fu-resp .ic{width:16px;height:16px;color:var(--gray-2);transform:rotate(-90deg)}
.fu-resp.baja{border-color:rgba(255,70,70,.28)}
.fu-resp.baja b{color:#ff9a9e}

/* ══ SUBIR DEL TIRÓN ══
   Las listas son largas (400 personas) y volver arriba a rueda de ratón es
   un castigo. Aparece sola al bajar y se va cuando ya estás arriba. */
.arriba-ya{position:fixed;right:20px;bottom:24px;z-index:90;width:46px;height:46px;
  border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:#1a1200;background:linear-gradient(135deg,#f0d78f,#c9a040);
  border:0;box-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .2s,transform .2s,visibility .2s,filter .15s}
.arriba-ya.on{opacity:1;visibility:visible;transform:none}
.arriba-ya:hover{filter:brightness(1.07)}
.arriba-ya .ic{width:20px;height:20px;transform:rotate(180deg);stroke-width:2.4}
@media(max-width:760px){
  /* en el móvil, más arriba: abajo está la barra del navegador */
  .arriba-ya{right:14px;bottom:18px;width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){ .arriba-ya{transition:opacity .2s} }

/* ══ POSIBLES DUPLICADOS ══
   La misma persona, dos veces: activó con un correo y entró con otro. */
.bov-f.dup{border-color:rgba(201,160,64,.4);color:var(--gold-light)}
.bov-f.dup.on{color:#1a1200}
.dup-ay{display:flex;align-items:flex-start;gap:9px;margin:0 0 16px;padding:12px 14px;
  border-radius:12px;font-size:12.8px;line-height:1.55;color:var(--gray);
  background:rgba(201,160,64,.07);border:1px solid rgba(201,160,64,.26)}
.dup-ay .ic{width:16px;height:16px;flex:none;margin-top:1px;color:var(--gold-light)}
.dup-lista{display:grid;gap:12px}
.dup-caja{padding:13px;border-radius:14px;background:rgba(10,18,38,.55);
  border:1px solid rgba(201,160,64,.22)}
.dup-razon{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  margin-bottom:10px;font-weight:600}
.dup-p{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--line);transition:.15s}
.dup-p:hover{border-color:rgba(201,160,64,.45);background:rgba(255,255,255,.055)}
.dup-est{flex:none;display:flex;flex-direction:column;gap:2px;text-align:right;
  font-size:11.2px;color:var(--gray-2)}
.dup-y{display:block;margin:5px 0 5px 20px;font-size:11.5px;color:var(--gray-2);font-style:italic}
@media(max-width:620px){
  .dup-p{flex-wrap:wrap}
  .dup-est{flex-direction:row;gap:10px;text-align:left;width:100%}
}

/* la gestión dentro de la ficha: rol, expulsar y borrar */
.fu-rol{width:100%;margin-top:3px;padding:9px 11px;border-radius:10px;font-size:13.4px;
  color:#eaf0fa;background:rgba(10,18,38,.8);border:1px solid var(--line);cursor:pointer}
.fu-rol:focus{outline:none;border-color:rgba(201,160,64,.5)}
.mini-act.peligro{color:#ff9a9e;border-color:rgba(255,70,70,.3)}
.mini-act.peligro:hover{background:rgba(255,70,70,.1);border-color:rgba(255,70,70,.55)}

/* dar de alta a mano, encima de los filtros de usuarios */
.bov-alta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 14px}
.bov-alta-ay{font-size:11.8px;color:var(--gray-2)}

/* ══ LOS MANDOS DE CADA FILA ══ (los mismos que había en la Bóveda) */
.bov-acc{flex:none;display:flex;align-items:center;gap:7px}
.ba-b{padding:7px 12px;border-radius:9px;font-size:12.2px;font-weight:600;cursor:pointer;
  color:var(--gray);background:rgba(255,255,255,.04);border:1px solid var(--line);transition:.15s}
.ba-b:hover{color:#fff;border-color:rgba(201,160,64,.45);background:rgba(255,255,255,.07)}
.ba-rol{padding:7px 9px;border-radius:9px;font-size:12.2px;cursor:pointer;color:#cfdcf0;
  background:rgba(10,18,38,.85);border:1px solid var(--line)}
.ba-rol:focus{outline:none;border-color:rgba(201,160,64,.5)}
.ba-x{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;cursor:pointer;
  color:var(--gray-2);background:rgba(255,255,255,.04);border:1px solid var(--line);transition:.15s}
.ba-x:hover{color:#ff9a9e;border-color:rgba(255,70,70,.45);background:rgba(255,70,70,.1)}
.ba-x .ic{width:15px;height:15px}
.ba-b:disabled,.ba-x:disabled{opacity:.5;cursor:default}
@media(max-width:860px){
  .bov-acc{width:100%;justify-content:flex-start;margin-top:8px}
  .ba-b,.ba-rol{flex:1}
}

/* ══ VENTANAS PROPIAS ══ nada de las del navegador */
.vent{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px 18px}
.vent-fondo{position:absolute;inset:0;background:rgba(3,6,16,.78);backdrop-filter:blur(7px);
  animation:aparece .2s ease}
.vent-caja{position:relative;width:min(420px,100%);padding:24px;border-radius:18px;
  background:linear-gradient(180deg,#0d1830,#080e22);border:1px solid rgba(201,160,64,.26);
  box-shadow:0 34px 90px rgba(0,0,0,.7);animation:entraVentana .24s cubic-bezier(.2,.9,.3,1)}
.vent.peligro .vent-caja{border-color:rgba(255,70,70,.34)}
.vent-caja h3{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;
  line-height:1.3;margin-bottom:8px;color:#fff}
.vent-t{font-size:13.4px;line-height:1.6;color:var(--gray)}
.vent-t b{color:#ffd97d}
.vent.peligro .vent-t b{color:#ff9a9e}
.vent-c{display:block;margin-top:14px}
.vent-c span{display:block;font-size:11.5px;color:var(--gray-2);margin-bottom:5px}
.vent-c input{width:100%;padding:11px 13px;border-radius:11px;font-size:14px;color:#eaf0fa;
  background:rgba(5,9,26,.8);border:1px solid var(--line);font-family:inherit}
.vent-c input:focus{outline:none;border-color:rgba(201,160,64,.55)}
.vent-mal{margin-top:10px;font-size:12.4px;color:#ff9a9e}
.vent-btns{display:flex;gap:9px;margin-top:18px}
.vent-btns>*{flex:1;justify-content:center}
.vent-ok{padding:11px 16px;border-radius:11px;font-size:13.4px;font-weight:700;cursor:pointer;
  color:#1a1200;background:linear-gradient(135deg,#ffe3a0,#c9a040);border:0}
.vent-ok:hover{filter:brightness(1.06)}
.vent-ok.peligro{color:#fff;background:linear-gradient(135deg,#ff6b6b,#c92a2a)}

/* el hueco de los mandos cuando la persona aún no tiene cuenta en el Club:
   ocupa lo mismo, para que la columna de al lado no se mueva */
.bov-acc.vacia{display:flex;align-items:center;justify-content:center;
  font-size:11.6px;color:#44536e;font-style:italic;border:1px dashed rgba(120,150,200,.14);
  border-radius:9px;padding:7px 10px;min-height:32px}
@media(max-width:760px){ .bov-acc.vacia{justify-content:flex-start} }

/* ══ EL EQUIPO QUE ENTRA AL PANEL ══
   Mismas columnas que la lista de usuarios, más la foto con su punto de
   conectado: verde si está dentro ahora, amarillo si no. */
.eq-p{display:grid;align-items:center;gap:13px;padding:12px 14px;border-radius:13px;cursor:pointer;
  grid-template-columns:44px minmax(0,1fr) 132px 132px 200px 22px;
  background:rgba(10,18,38,.55);border:1px solid rgba(120,150,200,.14);transition:.15s}
.eq-p:hover{border-color:rgba(201,160,64,.42);background:rgba(16,28,56,.75)}
.eq-p:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.eq-p.dueno{cursor:default;border-color:rgba(201,160,64,.26)}
.eq-p.dueno:hover{background:rgba(10,18,38,.55)}
.eq-cara{position:relative;width:40px;height:40px;flex:none;display:block}
.eq-cara img,.eq-cara .ini{width:40px;height:40px;border-radius:12px;object-fit:cover;display:grid;
  place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:15px}
.eq-cara .ini{color:#1a1200;background:linear-gradient(135deg,#f0d78f,#c9a040)}
.eq-punto{position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:50%;
  border:2.5px solid #0a1226;display:block}
.eq-punto.on{background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:eqLate 2.4s ease-out infinite}
.eq-punto.off{background:#d6a829}
@keyframes eqLate{70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@media(max-width:1120px){
  .eq-p{grid-template-columns:44px minmax(0,1fr) 124px 124px 22px}
  .eq-p .bov-acc{grid-column:2 / -1;margin-top:4px}
}
@media(max-width:760px){
  .eq-p{grid-template-columns:44px minmax(0,1fr)}
  .eq-p .bov-col,.eq-p .bov-fechas{grid-column:2 / -1;justify-content:flex-start;text-align:left}
  .eq-p .bov-fechas{flex-direction:row;gap:10px;flex-wrap:wrap}
  .eq-p .bov-acc{grid-column:1 / -1}
}
@media(prefers-reduced-motion:reduce){ .eq-punto.on{animation:none} }

/* el enlace de vinculación ya mandado */
.ba-ya{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#7ee2b8;
  padding:7px 10px;border-radius:9px;background:rgba(16,185,129,.1);
  border:1px solid rgba(16,185,129,.26)}
.ba-ya .ic{width:14px;height:14px}

/* ══ EL INTERRUPTOR DE LAS HERRAMIENTAS ══
   Verde: puede usarlas. Gris: entra a la plataforma, pero no usa nada hasta
   que un admin lo encienda. */
.ba-sw{position:relative;width:38px;height:22px;border-radius:999px;cursor:pointer;flex:none;
  background:rgba(120,150,200,.18);border:1px solid rgba(120,150,200,.25);transition:.18s}
.ba-sw i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#8296b4;transition:.18s;display:block}
.ba-sw.on{background:rgba(16,185,129,.26);border-color:rgba(16,185,129,.5)}
.ba-sw.on i{left:18px;background:#22c55e}
.ba-sw:disabled{opacity:.5;cursor:default}
.fu-sw{display:flex;align-items:center;gap:10px;cursor:pointer;margin-top:4px}
.fu-sw input{position:absolute;opacity:0;width:0;height:0}
.fu-sw span{position:relative;width:38px;height:22px;border-radius:999px;flex:none;
  background:rgba(120,150,200,.18);border:1px solid rgba(120,150,200,.25);transition:.18s}
.fu-sw span::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#8296b4;transition:.18s}
.fu-sw input:checked + span{background:rgba(16,185,129,.26);border-color:rgba(16,185,129,.5)}
.fu-sw input:checked + span::after{left:18px;background:#22c55e}
.fu-sw i{font-style:normal;font-size:12.6px;color:var(--gray)}

/* ══ INVITAR A ENTRAR ══ el envío masivo, siempre a la vista */
.inv-caja{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 16px;
  padding:14px 18px;border-radius:14px;
  border:1px solid rgba(201,160,64,.3);
  background:linear-gradient(120deg,rgba(201,160,64,.1),rgba(11,20,40,.85) 60%)}
.inv-txt{flex:1;min-width:220px}
.inv-txt b{display:flex;align-items:center;gap:8px;font-size:14.4px;color:#fff;font-weight:700}
.inv-txt b .ic{width:16px;height:16px;color:var(--gold-light)}
.inv-txt span{display:block;font-size:12.4px;color:var(--gray-2);margin-top:3px}
.inv-txt em{font-style:normal;color:#ffd97d;font-weight:600}
.inv-caja .btn-gold{flex:none;padding:10px 18px;font-size:13.4px}
.inv-caja .ba-ya{flex:none}
@media(max-width:620px){ .inv-caja .btn-gold{width:100%;justify-content:center} }

/* ══ LOS NOMBRES DE LAS COLUMNAS ══
   Sin esto, el chip de los términos y el interruptor de las herramientas
   parecían decir lo mismo y se contradecían. */
.bov-cab{display:grid;align-items:center;gap:13px;padding:0 14px 7px;
  grid-template-columns:40px minmax(0,1fr) 104px 130px 128px 290px 22px}
.bov-cab span{font-family:'Space Grotesk',sans-serif;font-size:9.4px;letter-spacing:.13em;
  text-transform:uppercase;color:#53637f;font-weight:600}
@media(max-width:1340px){
  .bov-cab{grid-template-columns:40px minmax(0,1fr) 104px 130px 128px 250px 22px}
}
@media(max-width:1120px){ .bov-cab{display:none} }

/* ══════════════════════════════════════════════════════════════════════════
   LA BASE DE USUARIOS, CON LA CARA DEL CLUB  (15 oct 2026)
   Títulos de columna legibles y alineados con lo de debajo, el rol en un
   selector estrecho (antes se comía media fila), fotos redondas como en
   todo el Club y filas con el degradado y el filo dorado de la casa.
   Va al final a propósito: manda sobre la rejilla de arriba.
   ══════════════════════════════════════════════════════════════════════════ */
.bov-p,.bov-cab{grid-template-columns:44px minmax(0,1fr) 112px 136px 118px 190px 20px;gap:14px}
.bov-p{padding:13px 16px;border-radius:16px;
  background:linear-gradient(100deg,rgba(18,30,60,.8),rgba(9,16,34,.62) 62%);
  border:1px solid rgba(120,150,200,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.bov-p:hover{border-color:rgba(201,160,64,.5);box-shadow:0 12px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05);
  background:linear-gradient(100deg,rgba(28,42,80,.88),rgba(12,20,42,.72) 62%)}
.bov-p.dueno:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.bov-cara,.bov-cara.ini,.eq-cara img,.eq-cara .ini{width:44px;height:44px;border-radius:50%}
.eq-cara{width:44px;height:44px}
.bov-cara.ini,.eq-cara .ini{font-size:16px}
.bov-qui b{font-size:14.6px;letter-spacing:-.005em}
.bov-qui span{font-size:12.6px;margin-top:1px}
.bov-fechas{font-size:12px;gap:3px;color:#8fa1bf}
.bov-fechas .folio{font-size:10.8px;color:#c9a96a;opacity:.85}
.bov-col .chip-d{font-size:11.6px;padding:5px 11px}
/* la barra de títulos: dorada y a la altura de lo que nombra */
.bov-cab{padding:11px 16px;margin:0 0 10px;border-radius:13px;
  background:linear-gradient(100deg,rgba(201,160,64,.1),rgba(201,160,64,.03));
  border:1px solid rgba(201,160,64,.2)}
.bov-cab span{font-size:11px;letter-spacing:.14em;color:#d9b977;font-weight:700}
.bov-cab span:nth-child(5){text-align:right}
/* los mandos, compactos: interruptor · rol · eliminar */
.bov-acc{gap:8px}
.ba-rol{width:94px;max-width:94px;flex:none;padding:8px 9px;font-size:12.6px;font-weight:600;
  border-radius:10px;color:#e6edf8}
.ba-x{width:34px;height:34px;border-radius:10px}
@media(max-width:1340px){
  .bov-p,.bov-cab{grid-template-columns:44px minmax(0,1fr) 106px 128px 112px 186px 20px;gap:11px}
}
@media(max-width:1120px){
  .bov-p{grid-template-columns:44px minmax(0,1fr) 106px 128px 112px 20px}
}
@media(max-width:860px){
  .ba-rol{width:auto;max-width:none;flex:1}
}
@media(max-width:760px){
  .bov-p{grid-template-columns:44px minmax(0,1fr)}
}
/* aire entre las fechas (alineadas a la derecha) y los mandos */
@media(min-width:1121px){ .bov-p>.bov-acc,.bov-cab span:nth-child(6){margin-left:16px} }

/* ══════════════════════════════════════════════════════════════════════════
   15 oct (2) · EL BUSCADOR PEGADO A LA LISTA, LA FICHA DEL ALUMNO EN EL
   CELULAR Y «ACTIVAR CUENTA» CON SU NOMBRE
   Va al final a propósito: manda sobre los bloques de arriba.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── el buscador: debajo de los números y filtros, justo encima de la lista,
      y pegado bajo la cabecera mientras bajas por ella ── */
#outArriba:empty{display:none}

.barra-busca[hidden]{display:none!important}
.barra-busca{position:sticky;top:calc(var(--hd-alto,0px) + 8px);z-index:30;margin:0 0 16px}
.barra-busca::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:calc(-1 * clamp(12px,2.5vw,24px));right:calc(-1 * clamp(12px,2.5vw,24px));top:-9px;bottom:-9px;
  background:#05091a;border-bottom:1px solid rgba(201,160,64,.16);
  box-shadow:0 16px 26px -20px rgba(0,0,0,.95);opacity:0;transition:opacity .16s}
.barra-busca.pegada::before{opacity:1}
.barra-busca input{padding-right:86px}
.bb-x{position:absolute;right:46px;top:50%;transform:translateY(-50%);width:30px;height:30px;
  border-radius:9px;display:grid;place-items:center;cursor:pointer;color:var(--gray-2);
  background:rgba(255,255,255,.05);border:1px solid var(--line);transition:color .15s,border-color .15s}
.bb-x:hover{color:#fff;border-color:rgba(201,160,64,.45)}
.bb-x[hidden]{display:none}
.barra-busca .bb-x .ic{position:static;width:14px;height:14px;color:inherit}
.bb-tecla{position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;
  font:600 11.5px/1 ui-monospace,Menlo,monospace;color:#8fa1bf;padding:4px 8px;border-radius:7px;
  border:1px solid rgba(120,150,200,.28);background:rgba(255,255,255,.03)}
.barra-busca input:focus ~ .bb-tecla{opacity:0}
.barra-busca input:not(:placeholder-shown) ~ .bb-x{right:13px}
.barra-busca input:not(:placeholder-shown) ~ .bb-tecla{display:none}
@media (hover:none),(max-width:760px){
  .bb-tecla{display:none}
  .barra-busca input{padding-right:50px;font-size:16px}       /* 16px: el iPhone no hace zoom al tocarlo */
  .bb-x{right:10px!important}
}
/* lo que encontró, justo debajo del buscador */
#out > .bov-busca{margin:-4px 2px 12px;font-size:13px;color:var(--gray-2)}
#out > .bov-busca b{color:#fff;font-weight:700}
#out > .bov-busca:empty{display:none}
.bov-cab[hidden]{display:none!important}
/* ⚠️ v10.46: buscando, el filtro elegido SIGUE ENCENDIDO (se busca dentro de
   él). Antes se apagaban todos porque la búsqueda saltaba a todo el Club. */
/* «3 en Eliminados · verlos»: el otro sitio donde hay gente con ese texto */
#out > .bov-busca .bov-otro{background:none;border:0;padding:0;font:inherit;font-weight:600;
  color:var(--gold-light);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media(hover:hover){ #out > .bov-busca .bov-otro:hover{color:#fff} }
/* repintar (una letra, alguien nuevo) no vuelve a animar nada */
.quieto .kpi,.quieto .ficha,.quieto .bov-p{animation:none!important}

/* ── «Activar cuenta»: el interruptor con su nombre ── */
.ba-swl{display:inline-flex;align-items:center;gap:8px;cursor:pointer;flex:none;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.ba-swt{font-size:12px;font-weight:600;color:#8fa1bf;white-space:nowrap;transition:color .15s}
.ba-swl.on .ba-swt{color:#86efac}
.bov-acc.apagada .ba-swl{cursor:default;opacity:.55}
.ba-gest{display:contents}
/* el rol: un botón que abre el menú del Club (no la ruleta del sistema) */
.ba-rol{display:inline-flex;align-items:center;justify-content:space-between;gap:6px;
  text-align:left;font-family:inherit;line-height:1.2;white-space:nowrap;
  transition:border-color .15s,background .15s}
.ba-rol small{display:none}
.ba-rol span{overflow:hidden;text-overflow:ellipsis}
.ba-rol .ic{width:14px;height:14px;color:#d9b977;flex:none;transition:transform .18s}
.ba-rol[aria-expanded="true"]{border-color:rgba(201,160,64,.6)}
.ba-rol[aria-expanded="true"] .ic{transform:rotate(180deg)}
.ba-rol:disabled{opacity:.5;cursor:default}
@media(hover:hover){ .ba-rol:hover:not(:disabled){border-color:rgba(201,160,64,.45);background:rgba(16,28,56,.9)} }
.ba-x-t{display:none}
.bov-estado{display:contents}

/* la columna de mandos crece lo que mide el texto nuevo */
.bov-p,.bov-cab{grid-template-columns:44px minmax(0,1fr) 112px 136px 118px 300px 20px}
@media(max-width:1340px){
  .bov-p,.bov-cab{grid-template-columns:44px minmax(0,1fr) 104px 126px 110px 292px 20px}
}
.bov-acc>*,.ba-gest>*{flex:none}
.ba-x{flex:none}
@media(max-width:1120px){
  .bov-p{grid-template-columns:44px minmax(0,1fr) 106px 128px 112px 20px}
}

/* ── EN EL CELULAR: una tarjeta por persona ──
   Arriba: foto, nombre y correo; en la esquina, «Activar cuenta» con su
   interruptor. Debajo, cómo está (activada, cómo entra) y sus fechas. Al
   pie, su rol y eliminar, grandes para el dedo. */
@media(max-width:760px){
  .bov-p{grid-template-columns:44px minmax(0,1fr) auto;
    grid-template-areas:"cara nom sw" "cara mail mail" "est est est" "fec fec fec" "gest gest gest";
    column-gap:12px;row-gap:0;padding:14px 14px 12px;align-items:center}
  .bov-p>.bov-cara,.bov-p>.eq-cara{grid-area:cara;align-self:center}
  .bov-p .bov-qui{display:contents}
  .bov-p .bov-qui b{grid-area:nom;align-self:end;font-size:15px;line-height:1.3;
    white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow-wrap:anywhere}
  .bov-p .bov-qui span{grid-area:mail;align-self:start;font-size:12.6px;margin-top:2px;min-width:0}
  .bov-p .bov-acc{display:contents}
  .bov-p .ba-swl{grid-area:sw;justify-self:end;align-self:center;gap:7px;padding:2px 0 2px 6px}
  .bov-p .ba-swt{font-size:11.5px}
  .bov-p .bov-estado{grid-area:est;display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
  .bov-p .bov-estado .bov-col{grid-column:auto}
  .bov-p .bov-fechas{grid-area:fec;display:flex;flex-direction:row;flex-wrap:wrap;gap:3px 14px;
    margin-top:9px;text-align:left;font-size:12px;white-space:normal}
  .bov-p .bov-fechas .folio:empty{display:none}
  .bov-p .ba-gest{grid-area:gest;display:flex;gap:8px;margin-top:12px;padding-top:12px;
    border-top:1px solid rgba(120,150,200,.12)}
  .bov-p .ba-rol{flex:1;width:auto;max-width:none;min-height:42px;padding:0 14px;
    font-size:14px;border-radius:12px;justify-content:flex-start;gap:8px}
  .bov-p .ba-rol small{display:inline;font-size:12px;font-weight:500;color:#8fa1bf}
  .bov-p .ba-rol span{flex:1}
  .bov-p .ba-x{width:auto;height:auto;min-width:42px;min-height:42px;padding:0 14px;gap:7px;
    display:inline-flex;align-items:center;justify-content:center;border-radius:12px;
    color:#f3a3a6;border-color:rgba(255,90,90,.26);background:rgba(255,70,70,.06)}
  .bov-p .ba-x .ic{width:16px;height:16px}
  .bov-p .ba-x-t{display:inline;font-size:13.5px;font-weight:600}
  .bov-p .ba-b{min-height:42px;border-radius:12px;padding:0 16px;font-size:13.5px}
  .bov-p .bov-acc.vacia{display:flex;grid-area:gest;margin-top:12px;justify-content:flex-start}
  /* los filtros, en una tira que se desliza: ya no ocupan tres renglones */
  .bov-filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
    margin:0 calc(-1 * clamp(12px,2.5vw,24px)) 14px;padding:2px clamp(12px,2.5vw,24px) 4px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent)}
  .bov-filtros::-webkit-scrollbar{display:none}
  .bov-f{flex:none;white-space:nowrap}
  /* los números: dos por fila y el texto entero (antes «ACTIVARON SU CUEN…») */
  .tot{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
  /* si quedan en número impar, el último ocupa la fila entera: sin hueco al lado */
  .tot>.kpi:last-child:nth-child(odd){grid-column:1 / -1}
  .kpi{padding:12px 13px;gap:10px;align-items:flex-start}
  .kpi .ico{width:34px;height:34px;border-radius:11px}
  .kpi b{font-size:21px}
  .kpi span{white-space:normal;overflow:visible;line-height:1.3;margin-top:2px}
  /* las tarjetas de las demás listas: nombre entero y la fecha corta a un lado */
  .ficha{padding:14px}
  .ficha .cab{gap:10px}
  .ficha .quien b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
  .ficha .cuando{align-self:flex-start;margin-top:2px}
  /* el menú: los cuatro bloques en una rejilla de 2×2, iguales, y las
     pantallas de cada bloque en una tira que se desliza (antes eran tres
     renglones de botones antes de llegar a la lista) */
  .bloques{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .blq{justify-content:center;text-align:center;min-width:0;min-height:50px;padding:10px;
    font-size:13.2px;line-height:1.2}
  .blq svg{flex:none}
  .pestanas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
    margin:0 calc(-1 * clamp(12px,2.5vw,24px)) 18px;padding:2px clamp(12px,2.5vw,24px) 6px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent)}
  .pestanas::-webkit-scrollbar{display:none}
  .pest{flex:none;white-space:nowrap}
  /* la caja de Google: los dos botones uno encima del otro, sin partir el texto */
  .bov-vinc{gap:12px}
  .bov-vinc .bts{flex-direction:column-reverse;width:100%}
  .bov-vinc .bts button{width:100%;white-space:nowrap}
}

/* el aviso del final de una lista por tandas: dice cuántas van; al acercarte
   se pinta la tanda siguiente (y se puede tocar por si acaso) */
.tanda-mas{display:block;width:100%;grid-column:1 / -1;margin:14px 0 4px;padding:13px 16px;
  border-radius:13px;border:1px dashed rgba(201,160,64,.3);background:rgba(201,160,64,.05);
  color:#d9b977;font:600 12.6px/1.3 Inter,sans-serif;text-align:center;cursor:pointer}
.tanda-mas:empty{display:none}
@media(hover:hover){ .tanda-mas:hover{background:rgba(201,160,64,.1)} }

/* la cabecera de la ficha va SIEMPRE encima de lo que pasa por debajo (el
   botón dorado de «Descargar en PDF» se le montaba al bajar) */
.hoja .top{z-index:20;background:#0b1428}

/* ── EN PANTALLAS TÁCTILES, MENOS PESO AL PINTAR ──
   Arrastrar rápido la barra de scroll del iPhone dejaba trozos en blanco:
   el teléfono no alcanzaba a pintar cada fila con sus sombras, el cristal
   desenfocado de la cabecera y las animaciones de entrada. Aquí se quitan
   (se ve igual) y el fondo de la página es el mismo azul que el de detrás. */
@media (hover:none) and (pointer:coarse){
  header{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#060b1d!important}
  .ficha,.kpi{animation:none!important;transition:none}
  .ficha:hover,.kpi:hover{transform:none;box-shadow:none}
  .bov-p,.bov-p:hover{transition:none;box-shadow:none}
  /* fondos lisos en vez de degradados: cada tarjeta se pinta mucho más rápido */
  .bov-p,.bov-p:hover{background:#0c1530}
  .ficha,.kpi{background:#0b1430}
  /* el dedo deja «pegado» el :hover en la última fila tocada: aquí no hay */
  .bov-p:hover{border-color:rgba(120,150,200,.13)}
  .bov-p:hover .bov-fl{transform:rotate(-90deg);color:var(--gray-2)}
  .barra-busca::before{transition:none}
}

/* ── «Tu equipo»: agregar admins buscándolos en el Club (16 oct 2026) ── */
.eq-ayuda{display:flex;align-items:center;gap:8px;margin:-4px 2px 14px;font-size:13px;color:var(--gray-2);line-height:1.45}
.eq-ayuda .ic{width:15px;height:15px;color:#d9b977;flex:none}
.eq-ayuda b{color:#f0d78f;font-weight:700}
.bov-p.eq-cand{cursor:default}
.ba-admin{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:10px;
  font:700 12.8px/1 Inter,-apple-system,sans-serif;color:#1a1200;border:0;cursor:pointer;white-space:nowrap;
  background:linear-gradient(135deg,#f0d78f,#c9a040);box-shadow:0 6px 18px -8px rgba(201,160,64,.7)}
.ba-admin .ic{width:15px;height:15px}
.ba-admin .spin{width:13px;height:13px}
.ba-admin:disabled{opacity:.7;cursor:default}
@media(hover:hover){ .ba-admin:hover:not(:disabled){filter:brightness(1.07)} }
@media(max-width:760px){
  .bov-p .ba-admin{flex:1;min-height:44px;border-radius:12px;font-size:14px}
  .bov-p.eq-cand .ba-ya{flex:1;justify-content:center;min-height:44px;border-radius:12px;font-size:13.5px}
}


/* ══════════════════════════════════════════════════════════════════════════
   CUENTA VERIFICADA · la palomita dorada  (16 oct 2026)
   Como la verificación de Instagram, en dorado: el sello con su palomita.
   Va en CSS puro (máscaras), sin imágenes ni ids repetidos en 400 filas.
   ══════════════════════════════════════════════════════════════════════════ */
.verif{display:inline-block;position:relative;flex:none;width:1.08em;height:1.08em;margin-left:.34em;vertical-align:-.17em;
  background:linear-gradient(135deg,#fff3c9 0%,#f3d98f 28%,#d9ae45 58%,#a8781c 100%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 12l-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69L23 12z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 12l-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69L23 12z'/%3E%3C/svg%3E") center/contain no-repeat}
.verif::after{content:"";position:absolute;inset:0;background:#1a1200;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.6 12.4l3 3 5.9-6.1' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.6 12.4l3 3 5.9-6.1' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* admins: azul del Club con la palomita blanca */
.verif.admin{background:linear-gradient(135deg,#bcd7ff 0%,#6aa8ff 30%,#2468ff 65%,#163fb8 100%)}
.verif.admin::after{background:#fff}
/* Diego: RGB, distinta a todas (y se mueve despacio) */
.verif.dueno{background:conic-gradient(from 210deg,#ff4d6d,#ffb347,#ffe66d,#4ade80,#38bdf8,#a78bfa,#ff4d6d);
  animation:verifRgb 7s linear infinite}
.verif.dueno::after{background:#fff}
@keyframes verifRgb{to{filter:hue-rotate(360deg)}}
@media(prefers-reduced-motion:reduce){ .verif.dueno{animation:none} }
/* gris y vacía: le falta algo o no está verificada */
.verif.gris{background:#5f6f8c;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 12l-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69L23 12z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M7.6 12.4l3 3 5.9-6.1' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 12l-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69L23 12z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M7.6 12.4l3 3 5.9-6.1' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.verif.gris::after{content:none}
.ficha .quien b{display:flex;align-items:center;min-width:0}
.ficha .quien b .nm{display:block;margin:0;color:inherit;font:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.inv-q b .nm,.dc-p b .nm{display:inline;color:inherit;font:inherit}
/* las invitaciones para vincular Gmail y su resultado */
.bov-vinc .tx span b{display:inline;font-size:inherit;color:#fff;font-weight:700}
.vinc-barra{display:block;height:5px;margin-top:8px;border-radius:9px;background:rgba(120,150,200,.16);overflow:hidden;max-width:420px}
.vinc-barra i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#f0d78f,#c9a040)}
.bov-vinc.abierta{flex-wrap:wrap}
.inv-lista{flex-basis:100%;margin-top:6px;border-top:1px solid rgba(120,150,200,.14);padding-top:12px}
.inv-tabs{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.inv-tabs button{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;cursor:pointer;
  font:600 12.6px/1 Inter,sans-serif;color:var(--gray-2);background:rgba(10,18,38,.6);border:1px solid rgba(120,150,200,.18)}
.inv-tabs button .ic{width:14px;height:14px}
.inv-tabs button i{font-style:normal;opacity:.75}
.inv-tabs button.on{color:#1a1200;background:linear-gradient(135deg,#f0d78f,#c9a040);border-color:transparent}
.inv-p{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding:9px 2px;border-bottom:1px solid rgba(120,150,200,.08)}
.inv-q{flex:1;min-width:200px}
.inv-q b{display:flex;align-items:center;font-size:13.4px;color:#fff}
.inv-q span{display:block;font-size:12px;color:var(--gray-2)}
.inv-f{font-size:12px;color:#8fa1bf}
.inv-vacio{font-size:13px;color:var(--gray-2);margin:6px 2px}
.bov-qui b{display:flex;align-items:center;min-width:0}
/* ⚠️ el nombre va en un <span> para que la palomita no se corte con los «…»:
   que NO herede el gris y la letra pequeña del correo (.bov-qui span) */
.bov-qui b .nm,.hoja .top b .nm{display:block;margin:0;color:inherit;font:inherit;letter-spacing:inherit;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hoja .top b{display:flex;align-items:center}
.kpi-verif .ico .verif{width:20px;height:20px;margin:0}
@media(max-width:760px){
  .bov-p .bov-qui b .nm{white-space:normal;overflow:visible}
}
/* «Correo externo vinculado»: configurado, en azul del Club (nunca gris) */
.chip-d.azul{color:#9cc0ff;background:rgba(36,104,255,.14);border-color:rgba(80,140,255,.36)}
/* la columna de cómo entra, a lo ancho del texto nuevo */
.bov-p,.bov-cab{grid-template-columns:44px minmax(0,1fr) 112px 186px 118px 300px 20px}
@media(max-width:1340px){
  .bov-p,.bov-cab{grid-template-columns:44px minmax(0,1fr) 104px 178px 110px 292px 20px}
}
@media(max-width:1120px){
  .bov-p{grid-template-columns:44px minmax(0,1fr) 106px 178px 112px 20px}
}
@media(max-width:760px){
  .bov-p{grid-template-columns:44px minmax(0,1fr) auto}
}
/* las tres cosas de la palomita, en la ficha */
.fu-tres{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 16px}
.fu-tres span{display:inline-flex;align-items:center;gap:6px;font-size:12.4px;font-weight:600;padding:5px 11px;border-radius:999px}
.fu-tres span .ic{width:13px;height:13px}
.fu-tres .si{color:#86efac;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3)}
.fu-tres .no{color:#8fa1bf;background:rgba(255,255,255,.04);border:1px solid rgba(120,150,200,.18)}
/* contacto de quien tiene dos cuentas */
.dup-contacto{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 18px;margin:0 0 8px;padding:12px 14px;
  border-radius:13px;background:rgba(201,160,64,.06);border:1px dashed rgba(201,160,64,.3)}
.dc-p{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.dc-p b{font-size:13px;color:#fff;margin-right:2px}
.dc-l{display:inline-flex;align-items:center;gap:6px;font-size:12.4px;color:#cfdcf0;text-decoration:none;
  padding:6px 10px;border-radius:9px;background:rgba(10,18,38,.7);border:1px solid rgba(120,150,200,.2);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-l .ic{width:14px;height:14px;flex:none;color:#d9b977}
.dc-l.wa .ic{color:#4ade80}
a.dc-l:hover{border-color:rgba(201,160,64,.5);color:#fff}
.dc-sin{font-size:12px;color:#6b7c99;font-style:italic}
.dc-copia{margin-left:auto;align-self:center;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;
  font:700 12.4px/1 Inter,sans-serif;color:#1a1200;background:linear-gradient(135deg,#f0d78f,#c9a040);border:0;cursor:pointer}
.dc-copia .ic{width:14px;height:14px}
/* un aviso pequeño abajo, que se va solo */
.aviso-breve{position:fixed;left:50%;bottom:24px;z-index:250;display:flex;align-items:center;gap:9px;max-width:min(560px,calc(100% - 32px));
  padding:12px 16px;border-radius:13px;background:#0d1830;border:1px solid rgba(16,185,129,.4);color:#e6edf8;font-size:13.4px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.22s}
.aviso-breve .ic{width:17px;height:17px;flex:none;color:#4ade80}
.aviso-breve b{color:#fff}
.aviso-breve.on{transform:translate(-50%,0);opacity:1}


/* ══════════════════════════════════════════════════════════════════════════
   AVISOS · lo que le llega a la campanita  (v10.48 · 16 oct 2026)
   Elegir a quién → escribir → ver cómo queda → mandar. En la compu, el
   formulario a la izquierda y la vista previa con el botón a la derecha; en el
   celular, uno debajo del otro. La campanita de la cabecera la monta
   club-cuenta.js: si no carga, su hueco no ocupa nada.
   ══════════════════════════════════════════════════════════════════════════ */
.hd-der [data-club-campana]:empty,.hd-der [data-club-campana][hidden],.hd-der.sin-panel [data-club-campana]{display:none!important}
.av{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start;margin:4px 0 22px}
.av-col{min-width:0;padding:20px;border-radius:var(--r);background:linear-gradient(160deg,#0d1830,#080e22);
  border:1px solid var(--line)}
.av-ayuda{display:flex;align-items:flex-start;gap:10px;margin:0 0 18px;padding:12px 14px;border-radius:13px;
  font-size:13px;line-height:1.5;color:var(--gray);background:rgba(201,160,64,.06);border:1px solid rgba(201,160,64,.22);
  text-wrap:pretty}
.av-ayuda .ic{width:18px;height:18px;color:#e8c46a;margin-top:1px}
.av-ayuda b{color:#f0d78f;font-weight:700}
.av-paso{display:flex;align-items:center;gap:9px;margin:18px 0 10px;font:700 14px/1.3 'Space Grotesk',Inter,sans-serif;color:#fff}
.av-col>.av-paso:first-of-type,.av-lado>.av-paso:first-child{margin-top:0}
.av-n{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;
  font:800 12px/1 Inter,sans-serif;color:#1a1200;background:linear-gradient(135deg,#f0d78f,#c9a040)}
.av-para{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.av-para button{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:9px;row-gap:2px;
  padding:12px 13px;border-radius:13px;text-align:left;cursor:pointer;font-family:inherit;color:var(--gray);
  background:rgba(5,9,26,.6);border:1px solid rgba(120,150,200,.18);transition:border-color .15s,background .15s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.av-para button .ic{grid-row:span 2;width:19px;height:19px;color:#8fa1bf}
.av-para button b{font-size:13.6px;color:#e6edf8;font-weight:700}
.av-para button span{font-size:11.8px;line-height:1.35;color:var(--gray-2);text-wrap:pretty}
.av-para button:hover{border-color:rgba(201,160,64,.4)}
.av-para button.on{border-color:rgba(201,160,64,.7);background:linear-gradient(160deg,rgba(201,160,64,.16),rgba(201,160,64,.04))}
.av-para button.on .ic{color:#e8c46a}
.av-para button.on b{color:#f3d998}
.av-persona{margin-top:10px}
.av-busca{display:flex;align-items:center;gap:9px;padding:0 13px;border-radius:12px;background:rgba(5,9,26,.8);
  border:1px solid var(--line)}
.av-busca:focus-within{border-color:rgba(201,160,64,.55)}
.av-busca .ic{width:16px;height:16px;color:#8fa1bf}
.av-busca input{flex:1;min-width:0;padding:12px 0;border:0;outline:0;background:none;color:#eaf0fa;font:inherit;font-size:16px}
.av-res{margin-top:8px;display:flex;flex-direction:column;gap:4px;max-height:300px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.av-res-v{font-size:12.6px;color:var(--gray-2);padding:4px 2px;display:flex;align-items:center;gap:8px;text-wrap:pretty}
.av-p,.av-elegida{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border-radius:12px;text-align:left;
  font-family:inherit;color:inherit;background:rgba(10,18,38,.55);border:1px solid rgba(120,150,200,.12)}
.av-p{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.av-p:hover,.av-p:focus-visible{border-color:rgba(201,160,64,.45);outline:0}
.av-elegida{border-color:rgba(201,160,64,.5);background:rgba(201,160,64,.07)}
.av-cara{width:34px;height:34px;flex:none;border-radius:50%;object-fit:cover;background:#13213f}
.av-cara.ini{display:inline-grid;place-items:center;font:700 14px/1 Inter,sans-serif;color:#f0d78f;
  background:linear-gradient(135deg,#1a2a52,#0f1a35);border:1px solid rgba(201,160,64,.3)}
.av-q{flex:1;min-width:0;display:block}
.av-q b{display:flex;align-items:center;min-width:0;font-size:13.6px;color:#fff}
.av-q b .nm{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;color:inherit;font:inherit}
.av-q>span{display:block;font-size:12px;color:var(--gray-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-c{display:block;margin-top:12px}
.av-c>span:first-child{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--gray-2);margin-bottom:6px}
.av-c>span:first-child i{font-style:normal;font-variant-numeric:tabular-nums;opacity:.8}
.av-c input,.av-c textarea{display:block;width:100%;padding:12px 13px;border-radius:12px;font:inherit;font-size:16px;
  line-height:1.45;color:#eaf0fa;background:rgba(5,9,26,.8);border:1px solid var(--line);resize:vertical}
.av-c textarea{min-height:86px}
.av-c input:focus,.av-c textarea:focus{outline:none;border-color:rgba(201,160,64,.55)}
.av-c input::placeholder,.av-c textarea::placeholder{color:#55657f}
.av-c select{width:100%;padding:12px 13px;border-radius:12px;font:inherit;font-size:15px;color:#eaf0fa;
  background:rgba(5,9,26,.8);border:1px solid var(--line)}
.av-c .cs-btn{padding:12px 13px;border-radius:12px;font-size:15px;color:#eaf0fa;background:rgba(5,9,26,.8);border:1px solid var(--line)}
/* la vista previa: la misma cara que la lista de la campanita */
.av-previa{border-radius:15px;overflow:hidden;background:#0a1328;border:1px solid rgba(201,160,64,.28);
  box-shadow:0 18px 44px rgba(0,0,0,.45)}
.avp-cab{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid rgba(120,150,200,.12);
  font-size:13.4px;color:#fff}
.avp-cab .ic{width:17px;height:17px;color:#e8c46a}
.avp-n{margin-left:auto;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;color:#1a1200;
  background:linear-gradient(135deg,#f0d78f,#c9a040)}
.avp-item{position:relative;display:flex;gap:11px;padding:14px;background:linear-gradient(90deg,rgba(201,160,64,.09),transparent)}
.avp-ico{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;
  background:rgba(201,160,64,.14);border:1px solid rgba(201,160,64,.32)}
.avp-ico .ic{width:17px;height:17px;color:#f0d78f}
.avp-tx{flex:1;min-width:0;padding-right:12px}
.avp-tx b{display:block;font-size:14px;line-height:1.35;color:#fff;overflow-wrap:anywhere;text-wrap:pretty}
.avp-tx b.vacio{color:#5f6f8c;font-weight:600}
.avp-tx p{margin-top:3px;font-size:13px;line-height:1.5;color:#b7c4da;white-space:pre-line;overflow-wrap:anywhere;text-wrap:pretty}
.avp-meta{display:block;margin-top:6px;font-size:11.5px;color:var(--gray-2)}
.avp-link{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:12.4px;font-weight:700;color:#f0d78f}
.avp-link .ic{width:13px;height:13px;transform:rotate(-90deg)}
.avp-punto{position:absolute;top:18px;right:14px;width:8px;height:8px;border-radius:50%;background:#e8c46a;
  box-shadow:0 0 0 3px rgba(232,196,106,.18)}
.av-quien{margin:14px 2px 12px;font-size:13px;color:var(--gray);line-height:1.5;text-wrap:pretty}
.av-quien b{color:#fff}
.av-manda{width:100%}
.av-manda:disabled{opacity:.55;cursor:default;box-shadow:none}
.av-manda:disabled::after{animation:none;display:none}
/* los ya mandados */
.av-env{margin:0 0 24px}
.av-env-cab{display:flex;align-items:center;gap:10px;margin:0 2px 10px}
.av-env-cab h3{display:flex;align-items:center;gap:8px;font:700 15px/1.3 'Space Grotesk',Inter,sans-serif;color:#fff}
.av-env-cab h3 .ic{width:16px;height:16px;color:#d9b977}
.av-env-cab span{font-size:12px;color:var(--gray-2)}
.av-env-v{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--gray-2);padding:6px 2px}
.av-env-lista{display:flex;flex-direction:column;gap:8px}
.av-env-p{padding:13px 15px;border-radius:14px;background:rgba(11,20,40,.7);border:1px solid var(--line)}
.av-env-top{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:6px}
.av-env-a{display:inline-flex;align-items:center;font-size:12.6px;color:#dbe5f5;min-width:0}
.av-env-a .nm{display:inline;color:inherit;font:inherit}
.av-env-f{margin-left:auto;font-size:11.8px;color:var(--gray-2)}
.av-env-p>b{display:block;font-size:14px;line-height:1.4;color:#fff;overflow-wrap:anywhere;text-wrap:pretty}
.av-env-p>p{margin-top:3px;font-size:13px;line-height:1.5;color:#b7c4da;white-space:pre-line;overflow-wrap:anywhere;text-wrap:pretty}
.av-env-m{display:block;margin-top:6px;font-size:11.8px;color:var(--gray-2)}
/* en la compu, la vista previa y el botón acompañan al formulario al bajar
   (sticky nativo: el scroll no se toca) */
@media(min-width:861px){
  .av-lado{position:sticky;top:96px}
}
@media(max-width:860px){
  .av{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .av-col{padding:16px}
  .av-para{grid-template-columns:minmax(0,1fr)}
  .av-env-f{margin-left:0;flex-basis:100%}
}
/* con «Avisos» el menú del celular tiene 5 bloques: el último, solo en su
   fila, ocupa todo el ancho (sin medio hueco vacío al lado) */
@media(max-width:760px){
  .bloques .blq:last-child:nth-child(odd){grid-column:1 / -1}
}

/* v10.48 · Ficha → Gestión → Herramienta: el menú y «Avisarle» en una fila
   (en móvil el botón baja debajo, a lo ancho). */
.fu-herr-fila{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:3px}
.fu-herr-fila>.cs,.fu-herr-fila>select{flex:1 1 200px;min-width:0}
.fu-herr-fila .fu-rol{margin-top:0}
.fu-herr-fila>.mini-act,.fu-herr-fila>.ba-ya{flex:0 0 auto;justify-content:center}
@media (max-width:480px){.fu-herr-fila>.mini-act,.fu-herr-fila>.ba-ya{flex:1 1 100%}}
.fu-herr-nota{display:block;margin-top:7px;font-style:normal;font-size:11.6px;line-height:1.45;
  color:var(--gray-2);text-wrap:pretty}