/* plentia — acceso: tarjeta oscura sobre el cuadro de Turner. Siempre oscuro, así que aquí se
   fijan los valores oscuros del pack de marca en vez de heredar los tokens del panel. El ámbar del
   pack no se usa aquí: es solo el botón principal del panel. */
:root{--bg:#0B1114;--panel:#121A1E;--text:#F2F2F0;--muted:#9AA5A8;--faint:#5F6B6F;
  --line:rgba(255,255,255,.08);--field:rgba(255,255,255,.06);
  --accent:#E8A54B;--on-accent:#1A1206;--neg:#FF6A5C;--pos:#3DDC84}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
html,body{min-height:100%}
body{background:var(--bg);color:var(--text);font-family:"Inter",system-ui,sans-serif;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0}
input{appearance:none;-webkit-appearance:none;outline:0!important;box-shadow:none!important}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:2px}
[hidden]{display:none!important}
/* linterna de puntos (igual que en la web) */
.spot{--mx:-999px;--my:-999px;--on:0;--r:110px;--dotc:rgba(255,255,255,.55);--glow:rgba(255,255,255,.06);position:relative}
.spot::before,.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--on);z-index:0}
.spot::before{background:radial-gradient(var(--r) circle at var(--mx) var(--my),var(--glow),transparent 70%)}
.spot::after{background-image:radial-gradient(circle,var(--dotc) .8px,transparent 1.1px);background-size:9px 9px;background-position:4px 4px;
  -webkit-mask:radial-gradient(var(--r) circle at var(--mx) var(--my),#000 0%,rgba(0,0,0,.6) 40%,transparent 100%);
          mask:radial-gradient(var(--r) circle at var(--mx) var(--my),#000 0%,rgba(0,0,0,.6) 40%,transparent 100%)}
.spot>*{position:relative;z-index:1}
/* 8.1 El wordmark de la tarjeta, grande: 44 px en escritorio y 36 en móvil. Antes eran 26. */
.wm{display:inline-flex;align-items:center;line-height:1;color:var(--text);margin-bottom:22px}
.wm svg{height:44px;width:auto;display:block}
/* ================= LOGIN ================= */
.login-screen{position:relative;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:center;overflow:hidden;padding:16px}
.scene{position:absolute;inset:0;width:100%;height:100%;display:block;background:#7d8d93}
.close{position:absolute;top:22px;right:22px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;color:#111}
.card{position:relative;width:425px;max-width:calc(100vw - 32px);border-radius:26px;overflow:hidden;
  background:rgba(14,14,14,.82);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.45)}
.card-in{padding:34px 76px 30px;display:flex;flex-direction:column;align-items:center}
.logo{width:54px;height:54px;border-radius:50%;background:#fff;display:grid;place-items:center;margin-bottom:28px}
.logo span{width:24px;height:24px;border-radius:7px;border:5px solid #000;border-right-width:10px}
h1{font-size:21px;font-weight:500;letter-spacing:-.025em;margin-bottom:10px}
.sub{font-size:13.5px;color:var(--muted);margin-bottom:26px;white-space:nowrap}
.oauth{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.oauth button{height:38px;border-radius:19px;background:var(--field);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:10px;font-size:13.5px;font-weight:500}
.oauth svg{width:17px;height:17px}
.or{color:var(--faint);font-size:12.5px;margin:14px 0}
.field{display:block;flex:none;width:100%;height:38px;border-radius:19px;margin-bottom:10px;
  border:1px solid transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.08)) border-box}
.field::before{background:radial-gradient(var(--r) circle at var(--mx) var(--my),var(--glow),transparent 70%),var(--field)}
.field:not(.lit)::before{background:var(--field)}
.field input{position:absolute;inset:0;width:100%;height:100%;padding:0 40px 0 16px;background:transparent;border:0;font-size:13.5px}
.field input::placeholder{color:var(--faint)}
.field:focus-within{background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(90deg,#e4e651,#d861d6,#5a7cff) border-box}
.eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:26px;height:26px;display:grid;place-items:center;color:#cfcfcb;z-index:2}
.eye svg{width:16px;height:16px}
.forgot{align-self:flex-end;font-size:12.5px;color:var(--muted);margin:2px 0 28px}

/* botón principal: anillo degradado completo orientado al cursor + halo suave */
.pw{--mx:-999px;--my:-999px;--on:0;--ang:0deg;position:relative;display:inline-block;border-radius:999px;padding:1.5px;isolation:isolate;box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.pw>*{position:relative;z-index:1;display:block}
.pw::before{z-index:0}
.topnav.dark .pw,.dark-sec .pw{box-shadow:0 0 0 3px rgba(255,255,255,.16)}
.mmenu .pw{box-shadow:0 0 0 3px rgba(255,255,255,.22)}
/* 3.4 del bloque 4: fuera el aro de degradado de colores que rodeaba el botón al acercar el
   ratón. Se retiran las dos capas enteras, no solo se apagan: la de abajo llevaba un filter, y un
   padre con filter rompe cualquier hijo en position:fixed (CLAUDE.md §16b). */
/* punto 1.2 del bloque 5: blancos con texto oscuro, como estaban antes del commit de marca */
.primary{position:relative;overflow:hidden;width:200px;height:42px;border-radius:21px;background:#fff;color:#000;font-size:15px;font-weight:500;display:block;transition:transform .15s}
.primary:active{transform:scale(.985)}
.link{margin-top:20px;font-size:13.5px;color:#d6d6d2}
.card-foot{border-top:1px solid var(--line);padding:18px;text-align:center;font-size:13.5px;color:var(--muted)}
.card-foot b{color:var(--text);font-weight:500}


/* autorrelleno de Safari y Chrome: nunca el rectángulo amarillo. El campo mantiene fondo, radio y color de texto
   en los tres estados (normal, autorrelleno y foco). La sombra interior del color del campo tapa el fondo del navegador. */
.field input:-webkit-autofill,.field input:-webkit-autofill:hover,.field input:-webkit-autofill:focus,.field input:autofill{
  -webkit-text-fill-color:var(--text);caret-color:var(--text);border-radius:19px;
  -webkit-box-shadow:0 0 0 1000px var(--panel) inset!important;box-shadow:0 0 0 1000px var(--panel) inset!important;
  transition:background-color 99999s ease-out 0s}
.field input{border-radius:19px}
.field,.field input{border-radius:19px!important}
/* vistas del login */
.view{display:none;width:100%;flex-direction:column;align-items:center}
.view.on{display:flex}
.card form{width:100%;display:flex;flex-direction:column;align-items:center}
.card .pw{align-self:center}
.oauth.one{grid-template-columns:1fr}
.card .info{font-size:14px;line-height:1.5;color:#d6d6d2;text-align:center;margin-bottom:22px}
.card .info b{color:#f2f2f0;font-weight:500}
.card-foot a{color:var(--text);font-weight:500}
.card-foot .sep{margin:0 6px;color:var(--faint)}
.back{margin-top:20px;font-size:13.5px;color:#d6d6d2}
.msg{width:100%;font-size:13px;line-height:1.45;border-radius:12px;padding:10px 14px;margin-bottom:12px;background:rgba(255,255,255,.06);color:#f2f2f0}
.msg.err{background:rgba(224,54,74,.18);color:#ffb3ba}
.msg.ok{background:rgba(61,220,132,.14);color:#9de8bd}
.primary:disabled{opacity:.6;cursor:default}
.eye svg{width:16px;height:16px}
.app-icon{display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@media (max-width:480px){.card-in{padding:30px 22px 26px}.sub{white-space:normal}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ===== 8. Acceso (punto 8 del bloque 4) ===== */
/* 8.2 la frase de la marca, donde antes estaba el titular */
.lema{font-size:16px;color:#cfd6d3;margin-bottom:26px}

/* 8.3 medidor de fuerza de la contraseña y aviso de que no coinciden */
.fuerza{display:flex;align-items:center;gap:5px;margin:-6px 0 14px}
.fuerza i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.14);transition:background .2s}
.fuerza span{flex:none;margin-left:6px;font-size:13px;color:var(--muted,#a3a3a0)}
.fuerza[data-n="1"] i:nth-child(-n+1),.fuerza[data-n="2"] i:nth-child(-n+2),
.fuerza[data-n="3"] i:nth-child(-n+3),.fuerza[data-n="4"] i:nth-child(-n+4){background:var(--pos)}
.fuerza[data-n="1"] i:nth-child(-n+1){background:var(--warn)}
.fuerza[data-n="2"] i:nth-child(-n+2){background:var(--warn)}
.fuerza.corta i{background:rgba(255,255,255,.14)}
.fuerza.corta span{color:var(--neg)}
.aviso-campo{font-size:13px;color:var(--neg);margin:-6px 0 12px}
.field input.mal{box-shadow:inset 0 0 0 1px var(--neg)}

/* 8.4 el campo del código de 6 cifras */
.field input.codigo{text-align:center;font-size:28px;letter-spacing:.32em;
  font-family:"Space Grotesk","Inter",sans-serif;font-variant-numeric:tabular-nums;padding-left:.32em}

@media (max-width:480px){
  .wm svg{height:36px}
  .lema{font-size:15px}
}

/* bloque 5b, punto 2.1: «Ver una demo» al pasar, verde de acción con blanco; al pulsar, más oscuro */
.card-foot a.ver-demo{border-radius:6px;padding:2px 6px;margin:-2px -6px;transition:background .15s,color .15s}
@media (hover:hover){.card-foot a.ver-demo:hover{background:#13804A;color:#fff}}
.card-foot a.ver-demo:active{background:#0F6A3D;color:#fff}