/* ══ EL BOTÓN «LUZ» · los dos logins (Dirección, 31-oct-2026) ══

   Decisión: `docs/aud/mockups/logins-boton-luz/DECISIONES.md` §1 y §2
   (rama auditor/mockup-master-staffing-e2-35). Medido de orvik.tech
   (`.btn-luz`): un aro de luz que gira alrededor del botón, relleno
   marino, esquina 12. UNO solo por pantalla y sólo en «Entrar».

   Una sola hoja para los dos logins: el de empleados (`index.html`) y
   el de Dirección (`corporativo/index.html`), que no carga los tokens
   a propósito. Por eso esta hoja no depende de `orvik-tokens.css`: lo
   que usa se declara aquí, una vez.

   ── DE DÓNDE SALEN LOS VALORES (Dirección, 2-nov) ──
   Los once son tokens: `orvik-tokens.css` §13. Esta hoja no declara
   ninguno y tampoco repite ninguno: sólo los usa.

   Por la mañana sí los repetía, como respaldo detrás de cada `var()`,
   porque el login de Dirección no cargaba los tokens y sin el respaldo
   los once desaparecían ahí sin un solo error (`docs/65` A.1). **Esa
   misma tarde Dirección aprobó que `corporativo/index.html` cargue
   `orvik-tokens.css`**, así que los respaldos sobran y se borraron: el
   valor vive una sola vez, en los tokens.

   Comprobado con las dos páginas servidas antes y después: las 24
   propiedades calculadas de los dos botones y de la tarjeta de la clave
   salen idénticas. */

/* El aro y el relleno son pseudoelementos, no hijos: las dos pantallas
   cambian el texto del botón con `textContent` («Leyendo tu rostro…»,
   «Entrando…»), y eso borraría cualquier `<span>` de adentro. */
.luz {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--luz-alto);
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: var(--luz-r);
  background: transparent;
  color: var(--luz-texto);
  font: var(--luz-letra);
  cursor: pointer;
  box-shadow: var(--luz-sombra);
  transition: transform .35s cubic-bezier(.25, 1, .5, 1);
  -webkit-tap-highlight-color: transparent;
}
.luz::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -2;
  width: 200%;
  aspect-ratio: 1 / 1;
  background: var(--luz-aro);
  transform: translate(-50%, -50%);
  animation: luz-gira var(--luz-giro) linear infinite;
  pointer-events: none;
}
.luz::after {
  content: "";
  position: absolute;
  inset: var(--luz-margen);
  z-index: -1;
  border-radius: var(--luz-r-relleno);
  background: var(--luz-relleno);
  pointer-events: none;
}
.luz:hover:not(:disabled) { transform: scale(1.04) }
.luz:focus-visible { outline: 2px solid var(--luz-foco); outline-offset: 3px }
.luz:disabled { cursor: default; opacity: .6 }
@keyframes luz-gira { to { transform: translate(-50%, -50%) rotate(360deg) } }

/* «Reducir movimiento»: el aro se queda quieto y nada crece. */
@media (prefers-reduced-motion: reduce) {
  .luz::before { animation: none }
  .luz { transition: none }
  .luz:hover:not(:disabled) { transform: none }
}