/* Exclivia · auth.css — detalles propios de las pantallas de acceso. */

.exc-auth-body { background: var(--exc-bg); }

/* El panel decorativo de escritorio se apaga en pantallas chicas para que el
   formulario quede a la vista sin desplazar. */
.exc-auth-aside h2 { margin-bottom: .25rem; }

.exc-auth-head .exc-logo-img { height: 46px; margin-inline: auto; }

.exc-auth-box .exc-field:last-of-type { margin-bottom: 1.25rem; }

/* Ojo de "ver contraseña" pegado al campo. */
.exc-pass-wrap { position: relative; }
.exc-pass-wrap .exc-input { padding-right: 3rem; }
.exc-pass-toggle {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--exc-muted);
  cursor: pointer; border-radius: var(--exc-radius-sm);
}
.exc-pass-toggle:hover { color: var(--exc-text); }

/* El enlace de «ve a ponerte una contraseña», dentro del aviso de error.
   Va debajo y no al lado: en un teléfono, un enlace a la derecha del mensaje
   se parte a media palabra y deja media frase colgando. */
.exc-auth-err-ir {
  display: inline-block;
  margin-top: .4rem;
  font-weight: 700;
  text-decoration: underline;
  color: inherit;
}

/* ─── Recuperar la contraseña ──────────────────────────────────────────────
   Los dos pasos viven en la misma pantalla y se alternan con `exc-hide`: en
   dos páginas, quien vuelve del correo con el código en la cabeza aterriza en
   un formulario vacío y tiene que acordarse de qué correo puso. */
.exc-rec-canales {
  display: flex;
  gap: .5rem;
}

/* Y lo que se pinta en su lugar cuando solo queda el correo.
   Clase de ESTE módulo y no `.exc-note`: aquélla vive en la hoja de
   `bienvenida`, que esta pantalla no carga — es la trampa de reusar la
   clase de otro módulo, que no falla, solo sale sin estilo. */
.exc-rec-solo-correo {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
  padding: .7rem .85rem;
  border: var(--exc-border-width) solid var(--exc-border);
  border-radius: var(--exc-radius);
  background: var(--exc-surface-2);
  font-size: .88rem;
  color: var(--exc-muted);
}
/* El icono no encoge con el texto: en un renglón de dos líneas, `flex`
   le quitaría ancho hasta dejarlo ovalado. */
.exc-rec-solo-correo svg { flex: 0 0 auto; color: var(--exc-accent); }

/* `position: relative` NO es decoración: el radio de dentro es `absolute`, y
   sin un ancestro colocado se ancla al primer antepasado que sí lo esté —o al
   documento—. Es la misma trampa que plantaba las sugerencias de direcciones
   del calendario encima del campo que se estaba escribiendo. */
.exc-rec-canal {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .7rem .5rem;
  border: var(--exc-border-width) solid var(--exc-border);
  border-radius: var(--exc-radius-sm, 10px);
  background: var(--exc-surface);
  color: var(--exc-muted);
  cursor: pointer;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.2;
  transition: border-color .15s, background .15s, color .15s;
}

.exc-rec-canal:hover { border-color: var(--exc-accent); }

/* El radio de verdad se esconde pero SIGUE ahí: es lo que hace que las flechas
   del teclado y los lectores de pantalla entiendan que son dos opciones de una
   misma pregunta. Dibujarlo con botones sueltos rompe las dos cosas. */
.exc-rec-canal input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  appearance: none;
}

.exc-rec-canal:has(input:checked) {
  border-color: var(--exc-accent);
  background: var(--exc-accent-soft);
  color: var(--exc-text);
}

/* El foco se pinta sobre la PASTILLA, no sobre el radio escondido: un contorno
   alrededor de algo invisible deja al teclado sin saber dónde está parado. */
.exc-rec-canal:has(input:focus-visible) {
  outline: 2px solid var(--exc-accent);
  outline-offset: 2px;
}
.exc-rec-codigo {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .5em;
  text-align: center;
  padding-left: .5em;   /* compensa el espaciado, que descentra a la derecha */
}