/* Acceso v3 — pantalla de iniciar sesión y de recuperar contraseña (una sola vista, dos modos).
   Consume tokens.css + base.css. No usa components.css: esta pantalla no lleva chrome y sus
   campos y botón tienen medidas propias (radio 12px, padding 15/16), distintas de las de .input
   y .btn-cta del sistema.
   Fuente visual: Login.dc.html:38-164 (los valores que el export resuelve en JS, en su
   renderVals, líneas 226-280).

   Cuatro notas de traducción del template a CSS:

   1. El único ancho que decide esta página es el del panel de marca: el dc-script lo resuelve con
      `matchMedia('(max-width:960px)')` (línea 184) y de ahí salen `cols` y `dispPanel` (231-232) y
      el logo de la cabecera del formulario (`dispLogoForm`, 247). Aquí es CSS puro: la base es el
      caso estrecho —una columna, sin panel, con logo en la cabecera— y una media query a partir de
      961 px abre la pantalla partida. Mismo resultado sin JS ni salto al cargar.
   2. `dcRise` del template (helmet, línea 34) es idéntico a `dcFadeUp` de base.css y `dcPop`
      (línea 35) ya está en base.css con los mismos valores, así que se reutilizan los dos. El
      único keyframe propio es `lgSpin` (línea 36), que no existe en el sistema.
   3. Los estados que el template calcula en JS —foco y error de cada campo (259-262), tipo del
      campo de contraseña y ojo activo (263-264), botón cargando (269-271) y aviso de enviado
      (250)— son aquí :focus, la clase .is-invalid y el atributo [hidden], que mueve
      modules/loginform.js.
   4. El bloque de «Continuar con Google» (110-120) no se copia: el propio export lo apaga y no
      hay backend para ese acceso. */

/* ---------- rejilla de la pantalla (Login.dc.html:38) ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr;background:var(--c-white)}

/* ---------- 1 · panel de marca (Login.dc.html:40-64) ---------- */
/* debajo de 961 px no existe, como el `dispPanel:'none'` del dc-script */
.auth-aside{display:none;position:relative;overflow:hidden;background:#0b1510}
.auth-aside__glow{position:absolute;inset:0;background:radial-gradient(760px 560px at 22% -8%,rgba(46,139,87,.5),transparent 62%),radial-gradient(680px 520px at 96% 14%,rgba(127,214,163,.22),transparent 60%),radial-gradient(900px 700px at 50% 118%,rgba(23,49,31,.9),transparent 70%)}
.auth-aside__art{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.auth-aside__img{position:absolute;left:50%;top:150px;width:min(860px,128%);height:auto;transform:translateX(-50%) perspective(1700px) rotateX(16deg) rotateY(-10deg) rotate(2deg);transform-origin:50% 0;opacity:.28;border-radius:var(--r-card);box-shadow:0 40px 90px rgba(0,0,0,.55)}
/* el degradado que funde la captura con el fondo antes de llegar al texto */
.auth-aside__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,21,16,.3) 0%,rgba(11,21,16,.42) 34%,rgba(11,21,16,.8) 58%,rgba(11,21,16,.96) 80%,#0b1510 100%);pointer-events:none}

.auth-aside__copy{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:340px clamp(24px,5vw,60px) 115px;box-sizing:border-box;gap:22px}
.auth-aside__title{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(29px,3.2vw,40px);font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--c-white);text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.auth-aside__lead{margin:0;font-size:clamp(15px,1.4vw,17.5px);line-height:1.6;color:rgba(255,255,255,.62);max-width:400px;text-wrap:pretty}

/* fila de confianza, anclada al pie del panel (Login.dc.html:54-63) */
.auth-trust{position:absolute;left:0;right:0;bottom:0;padding:0 clamp(24px,4vw,50px) 30px;display:flex;flex-direction:column;align-items:center;gap:18px}
.auth-trust__claim{font-size:12.5px;color:rgba(255,255,255,.55)}
.auth-trust__strong{color:rgba(255,255,255,.85);font-weight:600}
/* marquesina de logos legacy (SVG monocromos de tinta oscura, ver _v3_marcas()): sobre el panel
   oscuro se pasan a blanco con filter; fundido a los lados y pausa en hover, como la tira legacy */
@keyframes authMarcas{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.auth-trust__marquee{width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.auth-trust__marquee:hover .auth-trust__track{animation-play-state:paused}
.auth-trust__track{display:flex;width:max-content;animation:authMarcas 26s linear infinite}
.auth-trust__marks{display:flex;align-items:center;gap:28px;padding-right:28px;opacity:.8}
/* mismo tamaño que la tira del hero de la Home (home.css .hero__brand img, petición 2026-08-19) */
.auth-mark img{display:block;height:30px;width:auto;filter:brightness(0) invert(1)}

/* ---------- 2 · logo, en sus dos versiones (Login.dc.html:46-49 y 68-71) ---------- */
/* logo real: logo.svg sobre claro, logo-light.svg sobre el panel oscuro */
.auth-logo{display:flex;align-items:center}
.auth-logo__img{height:28px;width:auto;display:block}
/* sobre el fondo oscuro del panel: más grande y flotando en la esquina */
.auth-logo--dark{position:absolute;top:26px;left:28px;z-index:2}
.auth-logo--dark .auth-logo__img{height:32px;filter:drop-shadow(0 1px 8px rgba(8,20,12,.4))}

/* ---------- 3 · panel del formulario (Login.dc.html:66-163) ---------- */
.auth-panel{display:flex;flex-direction:column;min-height:100vh;padding:24px clamp(20px,5vw,54px) 26px;box-sizing:border-box;background:linear-gradient(168deg,#e8f5ee 0%,rgba(232,245,238,0) 44%),radial-gradient(760px 480px at 84% -100px,rgba(127,214,163,.4),rgba(127,214,163,0) 62%),radial-gradient(620px 460px at -80px 108%,rgba(46,139,87,.16),rgba(46,139,87,0) 58%),radial-gradient(420px 320px at 50% 55%,rgba(231,243,236,.5),rgba(231,243,236,0) 70%),var(--c-white)}
.auth-panel__top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.auth-back{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:var(--c-body);margin-left:auto;transition:color .15s}
.auth-back:hover{color:var(--c-green-text)}
.auth-back i{font-size:12px;line-height:1}

.auth-panel__body{flex:1;display:flex;align-items:center;justify-content:center;padding:36px 0}
.auth-card{width:min(400px,100%);display:flex;flex-direction:column;gap:20px;animation:dcFadeUp .4s ease}

.auth-head{display:flex;flex-direction:column;gap:12px;text-align:center}
.auth-head__title{margin:0;font-size:clamp(26px,4vw,34px);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.auth-head__lead{margin:0;font-size:16px;line-height:1.55;color:var(--c-secondary);text-wrap:pretty}

/* el bloque de campos del template (líneas 84 y 132) */
.auth-form{display:flex;flex-direction:column;gap:12px;margin-top:4px}
/* al enviar el enlace de recuperación el formulario desaparece y deja el aviso (líneas 131 y 144) */
.auth-form[hidden]{display:none}

.auth-field{display:flex;flex-direction:column;gap:6px}
.auth-field__label{font-size:13px;font-weight:600;color:#3c4a41}
.auth-input{width:100%;box-sizing:border-box;border:1px solid var(--c-border-input);border-radius:var(--r-sub);padding:15px 16px;font-size:14px;font-family:inherit;color:var(--c-ink);background:var(--c-white);transition:border-color .15s,box-shadow .15s;outline:none}
.auth-input:focus{border-color:var(--c-brand);box-shadow:var(--sh-focus)}
/* borde rojo mientras el campo tiene error; loginform.js quita la clase al escribir */
.auth-input.is-invalid,.auth-input.is-invalid:focus{border-color:var(--c-error);box-shadow:none}
/* el mensaje de error se pega al campo de arriba, como en el template */
.auth-field__error{font-size:12px;color:var(--c-error);margin-top:-6px}
.auth-field__error[hidden]{display:none}

/* contraseña: hueco a la derecha para el ojo (líneas 92-102) */
.auth-pass{position:relative;display:block}
.auth-input--pass{padding-right:44px}
.auth-pass__toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:0;background:none;border-radius:var(--r-input);cursor:pointer;color:var(--c-muted);transition:color .15s,background .15s}
.auth-pass__toggle:hover{color:var(--c-ink);background:var(--c-tint-selected)}
.auth-pass__icon[hidden]{display:none}

.auth-forgot{align-self:flex-end;font-size:12.5px;font-weight:500;color:var(--c-secondary);text-decoration:underline;text-decoration-color:#c3cfc7;text-underline-offset:3px;transition:color .15s;margin-top:-4px}
.auth-forgot:hover{color:var(--c-green-text)}

/* el widget no está en el template: se centra y se encoge por debajo de su ancho fijo (304 px),
   igual que en la página de contacto */
.auth-captcha{display:flex;justify-content:center;margin-top:2px}
.auth-captcha[hidden]{display:none}
.auth-captcha .g-recaptcha{transform-origin:center top}

/* la caja de error general tampoco está en el template: toma su rojo y el tinte de aviso del
   sistema, que es lo que usa la página de contacto */
.auth-form__error{margin:0;font-size:12.5px;color:var(--c-error);background:var(--c-error-bg);border:1px solid var(--c-error-border);border-radius:var(--r-sub);padding:10px 13px}
.auth-form__error[hidden]{display:none}

.auth-submit{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--g-cta);color:var(--c-white);border:0;border-radius:var(--r-sub);padding:16px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;box-shadow:var(--sh-cta);margin-top:6px;transition:transform .15s,box-shadow .15s,opacity .15s}
.auth-submit:hover{transform:translateY(-1px);box-shadow:var(--sh-cta-hover)}
.auth-submit:active{transform:scale(.98)}
/* mientras envía: el template baja la opacidad y desactiva el clic (btnOp/btnEv, 270-271) */
.auth-submit[disabled]{opacity:.75;pointer-events:none}
.auth-submit i{font-size:13px;line-height:1}
.auth-submit__spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:var(--c-white);animation:lgSpin .7s linear infinite}
.auth-submit__spinner[hidden]{display:none}
@keyframes lgSpin{to{transform:rotate(360deg)}}

.auth-signup{font-size:13.5px;color:var(--c-secondary);text-align:center;line-height:1.6;margin-top:2px}
.auth-signup__link{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--c-brand);border-bottom:1px solid var(--c-border-success);padding-bottom:1px;transition:color .15s,border-color .15s}
.auth-signup__link:hover{color:var(--c-green-text);border-color:var(--c-brand)}
.auth-signup__link i{font-size:12px;line-height:1}

/* aviso de enviado del modo recuperar (Login.dc.html:145-148) */
.auth-sent{display:flex;gap:12px;align-items:flex-start;background:var(--c-tint-badge);border:1px solid #d3e9dc;border-radius:var(--r-sub);padding:15px 16px;animation:dcPop .2s ease}
.auth-sent[hidden]{display:none}
.auth-sent i{font-size:17px;line-height:1.4;color:var(--c-green-text);flex:none}
.auth-sent__text{font-size:13.5px;line-height:1.55;color:var(--c-green-ink);text-align:left}
.auth-sent__text b{font-weight:700}

.auth-relogin{display:inline-flex;align-items:center;gap:6px;align-self:center;font-size:13.5px;font-weight:600;color:var(--c-brand);transition:color .15s}
.auth-relogin:hover{color:var(--c-green-text)}
.auth-relogin i{font-size:12px;line-height:1}

/* pie del panel (Login.dc.html:156-162) */
.auth-legal{display:flex;align-items:center;justify-content:center;gap:8px 18px;flex-wrap:wrap;font-size:12.5px;color:var(--c-muted)}
.auth-legal a{color:var(--c-muted)}
.auth-legal a:hover{color:var(--c-green-text)}
.auth-legal__dot{width:3px;height:3px;border-radius:50%;background:#c5d2c9}

/* ---------- ancho > 960 px: pantalla partida (Login.dc.html:231-232 y 247) ---------- */
@media (min-width:961px){
  .auth{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
  .auth-aside{display:block}
  /* con el panel de marca a la vista, el logo de la cabecera del formulario sobra */
  .auth-logo--compact{display:none}
}

/* el captcha no cabe entero en pantallas muy estrechas */
@media (max-width:400px){
  .auth-captcha .g-recaptcha{transform:scale(.85)}
}

/* mismo criterio que en el resto de módulos v3: sin movimiento si el sistema lo pide */
@media (prefers-reduced-motion:reduce){
  .auth-card,.auth-sent{animation:none}
  .auth-submit:hover{transform:none}
  .auth-submit__spinner{animation-duration:2s}
  /* la marquesina de marcas vuelve a fila estática que se envuelve */
  .auth-trust__marquee{mask-image:none;-webkit-mask-image:none}
  .auth-trust__track{width:100%;animation:none}
  .auth-trust__marks{flex-wrap:wrap;justify-content:center;gap:14px 28px;width:100%;padding-right:0}
  .auth-trust__marks--clone{display:none}
}