/* Hosteate · páginas de acceso (login, registro, recuperar, nueva contraseña, verificación).
   Va ENCIMA de landing.css (tokens, botones, modo claro, cursor). Pantalla partida: formulario a la izquierda,
   escaparate animado del panel a la derecha; en móvil sólo el formulario. */

body.acceso{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.ac-form{position:relative;display:flex;flex-direction:column;padding:28px clamp(20px,5vw,72px);min-height:100svh}
.ac-cab{display:flex;align-items:center;gap:12px}
.ac-cab .logo{margin-right:auto}
.ac-cab .ayuda{font-size:13.5px;color:var(--t2);padding:0 8px}
.ac-cab .ayuda:hover{color:var(--t1)}
.ac-cuerpo{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:420px;margin:0 auto;padding:48px 0}
.ac-cuerpo .eti{margin-bottom:18px}
.ac-cuerpo h1{margin:0;font-size:clamp(30px,3vw,40px);font-weight:600;letter-spacing:-.04em;line-height:1.08}
.ac-cuerpo .sub{margin-top:12px;font-size:15.5px;color:var(--t2);max-width:none}
.ac-pie{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--t3)}
.ac-pie a:hover{color:var(--t1)}

/* entrada escalonada */
.ac-cuerpo>*{opacity:0;transform:translateY(12px);animation:entra .7s var(--ease) forwards;animation-delay:calc(var(--i,0)*60ms + 80ms)}

/* Google */
.social{margin-top:28px;width:100%;height:48px;border-radius:13px;border:1px solid var(--linea-2);background:var(--sup);display:flex;align-items:center;justify-content:center;gap:12px;font-size:15px;font-weight:500;transition:background .2s,border-color .2s,transform .15s}
.social:hover{background:var(--sup-2);border-color:rgba(124,147,255,.4)}
.social:active{transform:scale(.98)}
.social svg{width:19px;height:19px}
.legal{margin-top:10px;font-size:12.5px;color:var(--t3);text-align:center}
.legal a{color:var(--t2);text-decoration:underline;text-decoration-color:var(--linea-2);text-underline-offset:2px}
.o{margin:24px 0 20px;display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--t3)}
.o::before,.o::after{content:"";flex:1;height:1px;background:var(--linea)}

/* campos */
.campos{display:grid;gap:14px}
.campo{display:block;position:relative}
.campo>span{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;font-weight:500;color:var(--t2);margin-bottom:7px}
.campo>span a{font-weight:400;font-size:13px;color:var(--azul-2)}
.entrada{position:relative;display:flex;align-items:center}
.entrada>svg{position:absolute;left:14px;top:50%;margin-top:-8.5px;width:17px;height:17px;color:var(--t3);pointer-events:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:color .2s}
.entrada input{width:100%;height:48px;padding:0 14px 0 42px;border-radius:13px;border:1px solid var(--linea-2);background:var(--sup);font-size:15.5px;outline:0;transition:border-color .2s,box-shadow .2s,background .2s}
.entrada input::placeholder{color:var(--t3)}
.entrada input:hover{border-color:rgba(124,147,255,.35)}
.entrada input:focus{border-color:rgba(124,147,255,.75);box-shadow:0 0 0 4px rgba(59,91,255,.16);background:var(--sup-2)}
.entrada:focus-within>svg{color:var(--azul-2)}
.entrada .ver{position:absolute;right:6px;height:36px;padding:0 11px;border:0;border-radius:9px;background:none;color:var(--t3);font-size:13px;font-weight:500;cursor:pointer}
.entrada .ver:hover{color:var(--t1);background:var(--sup-2)}
.entrada:has(.ver) input{padding-right:64px}
.campo.mal input{border-color:rgba(255,90,95,.7);box-shadow:0 0 0 4px rgba(255,90,95,.12)}
.campo .error{display:none;margin-top:6px;font-size:12.5px;color:#ff8f93}
.campo.mal .error{display:block}
.campo.bien .entrada::after{content:"";position:absolute;right:14px;width:18px;height:18px;border-radius:50%;background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px;animation:pop .35s cubic-bezier(.34,1.56,.64,1)}
.campo.bien .entrada:has(.ver)::after{right:66px}
@keyframes pop{from{transform:scale(0)}}
/* fuerza de la contraseña */
.fuerza{margin-top:9px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.fuerza i{height:4px;border-radius:9px;background:var(--linea-2);transition:background .3s}
.fuerza[data-n="1"] i:nth-child(-n+1){background:#ff5a5f}
.fuerza[data-n="2"] i:nth-child(-n+2){background:#f5a524}
.fuerza[data-n="3"] i:nth-child(-n+3){background:#7c93ff}
.fuerza[data-n="4"] i{background:var(--verde)}
.fuerza-t{margin-top:6px;font-size:12px;color:var(--t3);min-height:16px}

.fila{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:4px}
.marca{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--t2);user-select:none}
.marca input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:0;border-radius:6px;border:1.5px solid var(--linea-2);background:var(--sup);display:grid;place-items:center;transition:all .2s}
.marca input::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) scale(0);margin-top:-2px;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.marca input:checked{background:var(--azul);border-color:var(--azul)}
.marca input:checked::after{transform:rotate(-45deg) scale(1)}
.olvido{font-size:13.5px;color:var(--azul-2)}

/* verificación deslizable: el slider REAL de app/captcha.php (captcha.js). Hay que dejar el
   tirador encima del hueco discontinuo, que el servidor coloca en un sitio distinto cada vez. */
.captcha{margin:2px 0 0;user-select:none}
.captcha-pista{position:relative;height:52px;border-radius:14px;border:1px solid var(--linea-2);background:var(--sup);overflow:hidden;touch-action:none}
.captcha-relleno{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,rgba(59,91,255,.06),rgba(59,91,255,.28));border-radius:13px}
.captcha-hueco{position:absolute;top:5px;bottom:5px;width:44px;margin-left:4px;border-radius:11px;border:1.5px dashed rgba(124,147,255,.55);background:rgba(59,91,255,.08);animation:hueco 1.8s ease-in-out infinite}
@keyframes hueco{50%{border-color:rgba(124,147,255,.95)}}
.captcha-tirador{position:absolute;left:4px;top:4px;width:44px;height:42px;padding:0;border-radius:11px;border:0;display:grid;place-items:center;color:#fff;
  background:linear-gradient(180deg,#5672ff,#3b5bff);box-shadow:0 6px 16px -6px rgba(59,91,255,.9);cursor:grab;touch-action:none;z-index:2}
.captcha-tirador:active{cursor:grabbing}
.captcha-tirador svg{width:18px;height:18px;fill:none;stroke:currentColor}
.captcha-tirador .ic-ok{display:none}
.captcha:not(.arrastrando) .captcha-tirador{transition:transform .3s var(--ease),background .2s}
.captcha:not(.arrastrando) .captcha-relleno{transition:width .3s var(--ease)}
.captcha-lbl{position:absolute;inset:0;display:grid;place-items:center;padding-left:40px;font-size:14px;pointer-events:none;transition:opacity .2s;
  background:linear-gradient(100deg,var(--t3) 40%,var(--t1) 50%,var(--t3) 60%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:reflejo 2.6s linear infinite}
@keyframes reflejo{from{background-position:120% 0}to{background-position:-120% 0}}
.captcha.arrastrando .captcha-lbl{opacity:.25}
.captcha.ok .captcha-pista{border-color:rgba(52,199,89,.45)}
.captcha.ok .captcha-relleno{background:linear-gradient(90deg,rgba(52,199,89,.08),rgba(52,199,89,.22))}
.captcha.ok .captcha-hueco{border-style:solid;border-color:rgba(52,199,89,.5);animation:none}
.captcha.ok .captcha-tirador{background:var(--verde);box-shadow:0 6px 16px -6px rgba(52,199,89,.9);cursor:default}
.captcha.ok .captcha-tirador .ic-arrastra{display:none}.captcha.ok .captcha-tirador .ic-ok{display:block}
.captcha.ok .captcha-lbl{opacity:0}
.captcha.fail .captcha-pista,.captcha.falta .captcha-pista{animation:tiembla .35s}
.captcha.falta .captcha-pista{border-color:rgba(255,90,95,.6)}
.captcha-pie{display:flex;justify-content:flex-end;margin-top:7px}
.captcha-marca{display:flex;align-items:center;gap:7px;color:var(--t3)}
.captcha-marca .marca-icono{width:15px;height:14px;background:currentColor;-webkit-mask:url(../logo.svg) center/contain no-repeat;mask:url(../logo.svg) center/contain no-repeat}
.captcha-marca-txt{font:500 9.5px/1.3 var(--mono);letter-spacing:.06em;text-align:right}
.captcha-marca-txt i{display:block;font-style:normal;font-size:8px;text-transform:uppercase;letter-spacing:.12em;opacity:.75}
.captcha-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (prefers-reduced-motion:reduce){.captcha-hueco,.captcha-lbl{animation:none}.captcha-lbl{-webkit-text-fill-color:var(--t3)}}

.enviar{margin-top:6px;width:100%;height:50px;font-size:15.5px;border-radius:13px}
.enviar .rueda{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:gira .7s linear infinite}
.enviar.carga{pointer-events:none}
.enviar.carga .rueda{display:block}.enviar.carga .tx,.enviar.carga svg.fl{display:none}
@keyframes gira{to{transform:rotate(360deg)}}
.cifrado{margin-top:14px;display:flex;justify-content:center;align-items:center;gap:7px;font-size:12.5px;color:var(--t3)}
.cifrado svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cambio{margin-top:26px;padding-top:22px;border-top:1px solid var(--linea);text-align:center;font-size:14.5px;color:var(--t2)}
.cambio a{color:var(--t1);font-weight:500;margin-left:4px}
.cambio a:hover{color:var(--azul-2)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aviso-f{display:none;padding:12px 14px;border-radius:12px;font-size:14px;margin-bottom:6px}
.aviso-f.ve{display:flex;gap:10px;align-items:flex-start}
.aviso-f.mal{background:rgba(255,90,95,.08);border:1px solid rgba(255,90,95,.3);color:#ff8f93}
.aviso-f svg{width:17px;height:17px;flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* registro: pasos, selectores de idioma y ubicación */
.pasos-r{display:flex;gap:6px;margin-bottom:22px}
.pasos-r i{flex:1;height:4px;border-radius:9px;background:var(--linea-2);overflow:hidden;position:relative}
.pasos-r i.on::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--azul),var(--cian));animation:llena .6s var(--ease)}
@keyframes llena{from{transform:translateX(-100%)}}
.grupo>span{display:block;font-size:13.5px;font-weight:500;color:var(--t2);margin-bottom:8px}
.grupo small{display:block;margin-top:8px;font-size:12.5px;color:var(--t3)}
.ops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.op{position:relative;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:13px;border:1px solid var(--linea-2);background:var(--sup);transition:all .2s}
.op:hover{border-color:rgba(124,147,255,.4)}
.op input{position:absolute;opacity:0;pointer-events:none}
.op .pto{width:18px;height:18px;flex:none;border-radius:50%;border:1.5px solid var(--linea-2);display:grid;place-items:center;transition:all .2s}
.op .pto::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.op:has(input:checked){border-color:rgba(124,147,255,.7);background:rgba(59,91,255,.08);box-shadow:0 0 0 3px rgba(59,91,255,.1)}
.op:has(input:checked) .pto{background:var(--azul);border-color:var(--azul)}
.op:has(input:checked) .pto::after{transform:scale(1)}
.op:has(input:focus-visible){outline:2px solid var(--azul-2);outline-offset:2px}
.op b{font-weight:500;font-size:14.5px}
.op .ms{margin-left:auto;font:500 12px/1 var(--mono);color:var(--verde-t)}
.op .bandera{width:20px;height:14px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tipo-cliente{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* código de verificación */
.codigo{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:6px}
.codigo input{width:100%;aspect-ratio:1/1.12;border-radius:13px;border:1px solid var(--linea-2);background:var(--sup);text-align:center;font:600 24px/1 var(--mono);outline:0;caret-color:var(--azul);transition:border-color .2s,box-shadow .2s,transform .2s}
.codigo input:focus{border-color:rgba(124,147,255,.75);box-shadow:0 0 0 4px rgba(59,91,255,.16)}
.codigo input.lleno{border-color:rgba(124,147,255,.5);animation:pop .3s cubic-bezier(.34,1.56,.64,1)}
.codigo.ok input{border-color:rgba(52,199,89,.6);color:var(--verde-t)}
.codigo.mal{animation:tiembla .4s}
@keyframes tiembla{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.reenviar{margin-top:14px;font-size:13.5px;color:var(--t3);text-align:center}
.reenviar button{border:0;background:none;color:var(--azul-2);font-weight:500;cursor:pointer;padding:0}
.reenviar button:disabled{color:var(--t3)}

/* estado «enviado» (recuperar) */
.hecho-c{text-align:center}
.hecho-c .sobre{width:76px;height:76px;margin:0 auto 22px;border-radius:22px;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#5672ff,#3b5bff);box-shadow:0 20px 40px -14px rgba(59,91,255,.9);animation:pop .5s cubic-bezier(.34,1.56,.64,1)}
.hecho-c .sobre svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hecho-c .sub b{color:var(--t1);font-weight:500}
.pasos-l{margin-top:28px;display:grid;gap:10px;list-style:none;padding:0}
.pasos-l li{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;border:1px solid var(--linea);background:var(--sup);font-size:14.5px}
.pasos-l li em{font:500 12px/1 var(--mono);font-style:normal;color:var(--azul-2);width:20px}
.oculto{display:none!important}

/* ── escaparate (derecha): ventana del portal en perspectiva ──
   Paleta propia en variables --v-* para que el modo claro sea claro de verdad. */
.ac-vista{--v-fondo:#06060a;--v-sup:#0e0e14;--v-sup2:#14141c;--v-l:rgba(255,255,255,.07);--v-l2:rgba(255,255,255,.12);--v-t1:#f4f4f6;--v-t2:#a1a1aa;--v-t3:#62626b;
  position:relative;overflow:hidden;isolation:isolate;margin:12px 12px 12px 0;border-radius:28px;border:1px solid var(--linea);
  background:radial-gradient(70% 55% at 80% 10%,rgba(59,91,255,.42),transparent 65%),radial-gradient(60% 50% at 10% 100%,rgba(109,59,255,.22),transparent 60%),var(--v-fondo);
  display:flex;flex-direction:column;padding:clamp(32px,4vw,56px) 0 clamp(28px,3vw,40px) clamp(32px,4vw,56px)}
.ac-vista::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(var(--v-l) 1px,transparent 1px),linear-gradient(90deg,var(--v-l) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask:radial-gradient(70% 60% at 70% 45%,#000,transparent);mask:radial-gradient(70% 60% at 70% 45%,#000,transparent)}
.ac-vista::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;z-index:1;pointer-events:none;background:linear-gradient(transparent,var(--v-fondo) 85%)}
.lema-v{position:relative;z-index:2;max-width:520px;padding-right:32px}
.lema-v .eti{color:var(--v-t2)}
.lema-v h2{margin-top:16px;font-size:clamp(30px,2.9vw,42px);color:var(--v-t1)}
.lema-v h2 .tenue{color:var(--v-t3)}
.escenario{position:relative;flex:1;min-height:420px;margin-top:40px;perspective:1800px}
.ventana{position:absolute;left:0;top:56px;width:860px;transform-origin:0 0;transform:rotateX(10deg) rotateY(-14deg) rotateZ(2deg) translateZ(0);
  border-radius:16px;overflow:hidden;background:var(--v-sup);border:1px solid var(--v-l2);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 80px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4),0 0 120px -20px rgba(59,91,255,.35);
  font:13px/1.4 var(--sans);color:var(--v-t1);animation:ventanaE 1.2s var(--ease) .2s both}
@keyframes ventanaE{from{opacity:0;transform:rotateX(20deg) rotateY(-22deg) rotateZ(3deg) translate3d(60px,60px,-80px)}}
html.foto .ventana{animation:none}
.v-barra{height:38px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--v-l);background:var(--v-sup2)}
.v-barra>i{width:10px;height:10px;border-radius:50%;background:var(--v-l2)}
.v-url{margin:0 auto;display:flex;align-items:center;gap:6px;height:24px;padding:0 12px;border-radius:7px;background:var(--v-l);font:11.5px/1 var(--mono);color:var(--v-t2)}
.v-url svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}
.v-cuerpo{display:grid;grid-template-columns:180px 1fr;height:500px}
.v-lado{border-right:1px solid var(--v-l);padding:16px 12px;display:flex;flex-direction:column;gap:18px}
.v-logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;letter-spacing:-.03em;padding:0 6px}
.v-logo i{width:18px;height:17px;background:currentColor;-webkit-mask:url(../logo.svg) center/contain no-repeat;mask:url(../logo.svg) center/contain no-repeat}
.v-lado ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.v-lado li{display:flex;align-items:center;gap:10px;height:32px;padding:0 9px;border-radius:8px;color:var(--v-t2)}
.v-lado li svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v-lado li.on{background:var(--v-l);color:var(--v-t1)}
.v-lado li.on svg{color:#7c93ff}
.v-yo{margin-top:auto;display:flex;align-items:center;gap:9px;padding:8px;border-radius:10px;border:1px solid var(--v-l)}
.v-yo b{display:block;font-size:12.5px;font-weight:500}.v-yo small{font-size:11px;color:var(--v-t3)}
.v-av{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font:600 11px/1 var(--sans);color:#fff;background:linear-gradient(135deg,#7c93ff,#6d3bff)}
.v-main{padding:20px 22px;display:flex;flex-direction:column;gap:16px;min-width:0}
.v-hola{display:flex;justify-content:space-between;align-items:center}
.v-hola b{display:block;font-size:19px;font-weight:600;letter-spacing:-.025em}
.v-hola small{color:var(--v-t3);font-size:12.5px}
.v-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.v-kpis div{padding:13px 14px;border-radius:12px;background:var(--v-l);border:1px solid var(--v-l)}
.v-kpis span{display:block;font-size:11.5px;color:var(--v-t3)}
.v-kpis b{display:block;margin-top:4px;font-size:21px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.v-kpis small{font-size:11px;color:var(--v-t3)}
.v-dos{display:grid;grid-template-columns:1.45fr 1fr;gap:10px;flex:1;min-height:0}
.v-caja{border-radius:12px;border:1px solid var(--v-l);padding:12px 14px;overflow:hidden}
.v-tit{font-size:11.5px;font-weight:500;color:var(--v-t3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.v-fila{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--v-l)}
.v-fila:first-of-type{border-top:0}
.v-ic{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;background:rgba(59,91,255,.14);color:#9fb0ff}
.v-ic svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.v-ic.ok{background:rgba(52,199,89,.15);color:#7ee2a0}
.v-nom{flex:1;min-width:0}.v-nom b{display:block;font-size:12.5px;font-weight:500;white-space:nowrap}.v-nom small{font:11px/1.3 var(--mono);color:var(--v-t3)}
.v-spark{width:60px;height:16px}
.v-tag{font:500 10.5px/1 var(--mono);color:var(--v-t2);padding:4px 7px;border-radius:6px;background:var(--v-l)}
.v-dot{width:7px;height:7px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 3px rgba(52,199,89,.15)}
.v-act ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.v-act li{display:flex;gap:10px;align-items:flex-start;animation:actE .6s var(--ease) both}
.v-act li i{width:8px;height:8px;margin-top:4px;border-radius:50%;flex:none}
.v-act li i.az{background:#7c93ff;box-shadow:0 0 0 3px rgba(124,147,255,.18)}
.v-act li i.ve{background:var(--verde);box-shadow:0 0 0 3px rgba(52,199,89,.15)}
.v-act li b{display:block;font-size:12.5px;font-weight:500}.v-act li small{font-size:11px;color:var(--v-t3)}
@keyframes actE{from{opacity:0;transform:translateY(-8px)}}
.v-toast{position:absolute;z-index:3;left:40%;top:380px;display:flex;align-items:center;gap:11px;padding:12px 16px 12px 12px;border-radius:14px;
  background:color-mix(in srgb,var(--v-sup2) 90%,transparent);border:1px solid var(--v-l2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8);color:var(--v-t1);font-size:13px;opacity:0;transform:translateY(16px) scale(.96);transition:opacity .45s,transform .55s cubic-bezier(.34,1.56,.64,1)}
.v-toast.ve{opacity:1;transform:none}
.v-toast b{display:block;font-weight:600}.v-toast small{font-size:12px;color:var(--v-t3)}
.pie-v{position:relative;z-index:2;display:flex;gap:22px;flex-wrap:wrap;padding-right:32px;font-size:13px;color:var(--v-t2)}
.pie-v span{display:inline-flex;align-items:center;gap:8px}
.pie-v svg{width:15px;height:15px;fill:none;stroke:#7c93ff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html[data-tema="claro"] .ac-vista{--v-fondo:#f4f6fd;--v-sup:#ffffff;--v-sup2:#fafbff;--v-l:rgba(20,30,80,.07);--v-l2:rgba(20,30,80,.12);--v-t1:#0d0d0d;--v-t2:#5d5d66;--v-t3:#93939c;
  border-color:rgba(20,30,80,.08);background:radial-gradient(70% 55% at 80% 10%,rgba(59,91,255,.18),transparent 65%),radial-gradient(60% 50% at 10% 100%,rgba(109,59,255,.1),transparent 60%),var(--v-fondo)}
html[data-tema="claro"] .ventana{box-shadow:0 60px 120px -50px rgba(20,30,80,.45),0 0 0 1px rgba(20,30,80,.06),0 0 120px -30px rgba(59,91,255,.3)}
html[data-tema="claro"] .v-ic{background:rgba(59,91,255,.09);color:#3b5bff}
html[data-tema="claro"] .v-ic.ok{background:rgba(26,127,55,.1);color:#1a7f37}
html[data-tema="claro"] .v-lado li.on svg,html[data-tema="claro"] .pie-v svg{color:#3b5bff;stroke:#3b5bff}
html[data-tema="claro"] .v-toast{box-shadow:0 30px 60px -24px rgba(20,30,80,.35)}
html[data-tema="claro"] .ac-vista .chip.ok{color:#1a7f37;background:rgba(26,127,55,.08);border-color:rgba(26,127,55,.2)}
html[data-tema="claro"] .entrada input,html[data-tema="claro"] .social-btn,html[data-tema="claro"] .op,html[data-tema="claro"] .codigo input,html[data-tema="claro"] .captcha-pista{background:#fff}
html[data-tema="claro"] .entrada input:focus{background:#fff}
html[data-tema="claro"] .campo .error,html[data-tema="claro"] .aviso-f.mal{color:#cf222e}

@media (max-width:980px){
  body.acceso{grid-template-columns:1fr}
  .ac-vista{display:none}
}
@media (max-width:420px){.dos{grid-template-columns:1fr}.codigo{gap:6px}.codigo input{font-size:20px}}
html.foto .ac-cuerpo>*{animation:none;opacity:1;transform:none}

/* ── Web real (14-nov-2026): lo que la maqueta no tenía ─────────────────────────── */
/* Botones de Google / Apple de app/social.php (social_botones): mismo aspecto que el de la maqueta */
.ac-cuerpo .social{display:grid;gap:10px;margin-top:28px;height:auto;padding:0;border:0;border-radius:0;background:none;font-size:inherit;font-weight:inherit;transform:none}
.ac-cuerpo .social:hover{background:none}
.ac-cuerpo .social-btn{width:100%;height:48px;padding:0 16px;border-radius:13px;border:1px solid var(--linea-2);background:var(--sup);color:var(--t1);display:flex;align-items:center;justify-content:center;gap:12px;font-size:15px;font-weight:500;transition:background .2s,border-color .2s,transform .15s}
.ac-cuerpo .social-btn:hover{background:var(--sup-2);border-color:rgba(124,147,255,.4)}
.ac-cuerpo .social-btn:active{transform:scale(.98)}
.social-btn svg{width:19px;height:19px;flex:none}
.social-legal{margin:0;font-size:12.5px;color:var(--t3);text-align:center}
.social-legal a,.legal a{color:var(--t2);text-decoration:underline;text-decoration-color:var(--linea-2);text-underline-offset:2px}
.social-o{margin:14px 0 18px;display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--t3)}
.social-o::before,.social-o::after{content:"";flex:1;height:1px;background:var(--linea)}
/* Sin botones sociales (navegador de Instagram, Apple fuera de sus aparatos…) el formulario no se pega al subtítulo */
.ac-cuerpo>div:not(:has(*)){display:none}
.ac-cuerpo>div:not(:has(*))+form.campos{margin-top:28px}
.avisos{display:grid;gap:10px;margin-top:22px}
.avisos .reenviar-f .btn{width:100%}
/* avisos del servidor */
.aviso-f.ok{background:rgba(52,199,89,.08);border:1px solid rgba(52,199,89,.28);color:var(--verde-t)}
.aviso-f.info{background:rgba(59,91,255,.08);border:1px solid rgba(124,147,255,.3);color:var(--azul-3)}
.aviso-f span{flex:1;min-width:0}
.aviso-f a{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:500}
.aviso-f b{font-weight:600}
html[data-tema="claro"] .aviso-f.ok{color:#1a7f37}
html[data-tema="claro"] .aviso-f.info{color:#2840c8}
/* selectores del registro como fieldset (mismo POST de siempre) */
fieldset.grupo{margin:0;padding:0;border:0;min-width:0}
fieldset.grupo legend{padding:0;margin-bottom:8px;font-size:13.5px;font-weight:500;color:var(--t2)}
.op img{width:20px;height:14px;border-radius:2px;object-fit:cover;flex:none}
.op b{white-space:nowrap}
/* estados («hecho», «caducado»…) */
.hecho-c .eti{justify-content:center}
.hecho-c h1{margin-top:2px}
.hecho-c .sub{margin-left:auto;margin-right:auto}
.hecho-c .sobre.verde{background:linear-gradient(180deg,#43d36a,#26a548);box-shadow:0 20px 40px -14px rgba(52,199,89,.8)}
.hecho-c .sobre.rojo{background:linear-gradient(180deg,#ff7a7e,#e5484d);box-shadow:0 20px 40px -14px rgba(229,72,77,.75)}
.hecho-c .enviar.ancho,.enviar.ancho{margin-top:26px;display:flex}
.pasos-l li.hecho{color:var(--t2)}
.pasos-l li.hecho em{color:var(--verde-t)}
.pasos-l li.ahora{border-color:rgba(124,147,255,.45);background:rgba(59,91,255,.07)}
.reenviar a{color:var(--azul-2);font-weight:500}
.resalta{color:var(--t1);font-weight:500}
.enviar .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ac-cab .idioma a:not([href]){cursor:default}
/* Aviso de cookies (app/medicion.php) con la piel nueva. En escritorio a la izquierda, sobre el
   escaparate y no sobre el formulario (6-nov: tapaba «Crear cuenta y pagar»); en móvil se deja
   hueco debajo para que el botón siempre pueda quedar a la vista. */
.ck{background:var(--fondo-2)!important;border:1px solid var(--linea-2)!important;border-radius:16px!important;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)!important}
.ck-t{color:var(--t2)!important}.ck-t a{color:var(--azul-2)!important}
.ck .btn{height:40px;padding:0 18px;font-size:14px}
.ck .btn.azul{color:#fff;background:linear-gradient(180deg,#5672ff,#3b5bff)}
.ck .btn.fantasma{color:var(--t1);background:var(--sup);border:1px solid var(--linea-2)}
@media (min-width:981px){html body .ck{left:auto;right:24px;max-width:min(560px,44vw)}}
@media (max-width:980px){body:has(.ck:not([hidden])) .ac-form{padding-bottom:230px}}
@media (max-width:420px){.ac-cab .ayuda{display:none}.ops{grid-template-columns:1fr}}
.entrada .ver{top:50%;margin-top:-18px}
/* ubicación con su latencia: una por fila, que «Países Bajos 41 ms» no cabe en media columna */
.ops:has(.ms){grid-template-columns:1fr}
/* botones de Google/Apple del mismo ancho que los campos (salían metidos hacia dentro) */
.acc-form .social,.social{width:100%;margin-left:0;margin-right:0;display:grid;gap:10px}
.ac-cuerpo .social{grid-template-columns:minmax(0,1fr);justify-content:stretch}
.social .social-btn{width:100%;box-sizing:border-box}
/* el check de «bien» se iba a la esquina de arriba: en la web real .entrada es un <span> y el ::after no tenía posición vertical */
.campo.bien .entrada::after{top:50%;margin-top:-9px}