/* ============================================================
   MOTION DE LAS PANTALLAS PUBLICAS
   (login, registro, verificacion, recuperar contrasena)
   ------------------------------------------------------------
   Lo comun (escala de tokens, snippets de las fichas, guard de
   reduced-motion) vive en css/motion.css, que estas plantillas
   cargan antes a traves de core/_motion.html. Aqui queda solo
   lo propio de estas pantallas: los errores de formulario, el
   ojo de la contrasena, el checkbox (ficha 25, solo se usa
   aqui), el tamano del success check y el boton al enviar.

   Va aparte de base.css a proposito: base.css lo cargan 31
   plantillas del producto y aqui no queremos tocarlo. Las
   plantillas enlazan este fichero DESPUES de su CSS propio.
   ============================================================ */
:root {
  --check-box:     var(--duration-quick, 150ms);
  --check-draw:    var(--duration-medium, 350ms);
  --check-delay:   0ms;
  --check-uncheck: var(--duration-quick, 150ms);
  --check-ease:    var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
  --check-len:     15;   /* getTotalLength() del trazo M1 5.52L3.92 9.17L9.17 1 = 14.4 */
}

/* ============================================================
   Errores de formulario (ficha 12, error state shake)
   ------------------------------------------------------------
   El error lo pinta el servidor tras el POST (.nu-field.is-invalid
   > ul, o ul.errorlist de Django), asi que public_motion.js lo
   detecta al cargar y sacude el campo (NumioMotion.shake). No hay
   auto-revert de 3 s: el mensaje tiene que seguir leyendose.
   Teclear en el campo quita el estado con fundido.
   ============================================================ */
.nu-field input,
.nu-field__ctrl {
  will-change: transform;
}
.nu-field input {
  transition: border-color var(--duration-quick) var(--ease-out),
              box-shadow   var(--duration-quick) var(--ease-out);
}

/* Los mensajes de error no tenian estilo (lista con vinetas del navegador). */
.nu-field ul,
.nu-form > ul.errorlist {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.4;
  color: var(--error, #EF4444);
  animation: nu-msg-in var(--revert-dur) var(--ease-out) backwards;
  transition: opacity    var(--revert-dur) var(--ease-out),
              visibility 0s linear var(--revert-dur);
}
.nu-form > ul.errorlist { margin: 0; }
/* Al corregir el campo el mensaje se apaga (sin mover el resto del formulario). */
.nu-field:not(.is-invalid) > ul,
.nu-field:not(.is-invalid) > .nu-field__ctrl + ul {
  opacity: 0;
  visibility: hidden;
}
@keyframes nu-msg-in { from { opacity: 0; } }

/* ============================================================
   Ojo de la contrasena (ficha 9, icon swap; el snippet esta en
   motion.css). El boton .nu-eye es absoluto (36x36).
   ============================================================ */
.nu-eye.t-icon-swap {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
}
.nu-eye .t-icon svg { width: 20px; height: 20px; fill: currentColor; }

/* ============================================================
   Checkbox (ficha 25, checkbox check) sobre el <input> nativo
   ------------------------------------------------------------
   El input sigue en el DOM (name, required, foco) pero se
   oculta sin display:none; la caja .nu-checkbox__box se rellena
   en --check-box y el trazo se dibuja en --check-draw.
   ============================================================ */
.nu-checkbox,
.nu-check { position: relative; }
.nu-checkbox input[type="checkbox"],
.nu-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.nu-checkbox__box {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border: 1.5px solid var(--line, #E8E3F8);
  border-radius: 5px;
  background: #fff;
  color: #fff;
  transition:
    background   var(--check-box) var(--check-ease),
    border-color var(--check-box) var(--check-ease),
    box-shadow   var(--check-box) var(--check-ease);
}
.nu-check .nu-checkbox__box { width: 16px; height: 16px; margin-top: 0; }
.nu-checkbox__box svg { width: 11px; height: 11px; display: block; overflow: visible; }
.nu-check .nu-checkbox__box svg { width: 10px; height: 10px; }
.nu-checkbox__box svg path {
  stroke-dasharray: var(--check-len, 15);
  stroke-dashoffset: var(--check-len, 15);
  transition: stroke-dashoffset var(--check-uncheck) var(--check-ease);
}
input[type="checkbox"]:checked + .nu-checkbox__box {
  background: var(--brand, #6B5BFF);
  border-color: var(--brand, #6B5BFF);
}
input[type="checkbox"]:checked + .nu-checkbox__box svg path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--check-draw) var(--check-ease) var(--check-delay);
}
input[type="checkbox"]:focus-visible + .nu-checkbox__box { box-shadow: var(--ring, 0 0 0 3px rgba(124, 92, 255, .25)); }
.nu-checkbox:hover .nu-checkbox__box,
.nu-check:hover .nu-checkbox__box { border-color: var(--brand, #6B5BFF); }

/* ============================================================
   Confirmacion (ficha 10, success check; snippet en motion.css)
   Arranca en carga con data-state="in" en el HTML: sin JS.
   ============================================================ */
.nu-auth .t-success-check {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 0 var(--s-12, 12px);
  color: var(--success, #22C55E);
}
.nu-auth .t-success-check svg { width: 100%; height: 100%; }

/* ============================================================
   Boton al enviar (ficha 4, text swap; snippet en motion.css).
   .nu-button--disabled no tenia regla (verify.html la usa).
   ============================================================ */
.nu-button--disabled,
.nu-button[disabled] {
  opacity: .55;
  pointer-events: none;
  transition: opacity var(--duration-quick) var(--ease-out);
}
.nu-button.is-loading { pointer-events: none; }

/* ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .nu-field ul, .nu-form > ul.errorlist { animation: none !important; }
  .nu-checkbox__box, .nu-checkbox__box svg path { transition: none !important; }
}