/* ==========================================================================
   RANTI · pantalla de acceso
   Firma «Ruta viva». Esta pantalla se queda siempre de noche: es el momento en
   que la firma se declara, y la jornada del distribuidor empieza a oscuras.
   Por eso el layout de acceso fija data-bs-theme="dark" y no consulta la
   preferencia guardada; el resto del sistema sí la respeta.
   ========================================================================== */

.rt-acceso-cuerpo {
  min-height: 100vh; display: grid; place-items: center;
  padding: 1.5rem; background: var(--rt-ground);
  position: relative; overflow: hidden;
}

/* La ruta del fondo va en ::before para que ningún elemento del formulario
   dependa de ella: si el SVG no carga, la pantalla queda igual de usable. */
.rt-acceso-cuerpo::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 16% 20%, rgba(52, 208, 127, .16), transparent 42%),
    radial-gradient(circle at 84% 78%, rgba(52, 208, 127, .10), transparent 46%),
    url("../img/ruta.svg") center / cover no-repeat;
  opacity: .55;
}

/* ---------- tarjeta ---------- */
.rt-acceso {
  position: relative; z-index: 1;
  width: 100%; max-width: 380px;
  background: var(--rt-surface); border: 1px solid var(--rt-line);
  border-radius: .85rem; padding: 2rem 1.75rem 1.75rem;
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .9);
}

.rt-acceso .marca { display: flex; align-items: center; }
.rt-acceso .marca img { height: 84px; width: auto; }
.rt-acceso .lema { color: var(--rt-muted); font-size: .86rem; margin: .55rem 0 1.65rem; }

/* ---------- campos ---------- */
.rt-acceso label {
  display: block; font-family: var(--rt-titulo); font-size: .84rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--rt-muted); margin: 0 0 .35rem;
}
.rt-campo {
  display: flex; align-items: center; gap: .6rem; height: 46px; padding: 0 .75rem;
  margin-bottom: 1rem; background: var(--rt-ground);
  border: 1px solid var(--rt-line-fuerte); border-radius: .5rem;
}
.rt-campo:focus-within { border-color: var(--rt-accent); box-shadow: 0 0 0 3px var(--rt-accent-soft); }
.rt-campo > .ic { color: var(--rt-muted); }
.rt-campo:focus-within > .ic { color: var(--rt-accent); }
.rt-campo input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--rt-ink);
  font: inherit; font-size: .98rem; padding: 0; outline: none;
}
.rt-campo input::placeholder { color: var(--rt-muted); opacity: .7; }

/* El navegador pinta el autocompletado de blanco y rompe la tarjeta oscura. */
.rt-campo input:-webkit-autofill,
.rt-campo input:-webkit-autofill:hover,
.rt-campo input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--rt-ink);
  -webkit-box-shadow: 0 0 0 40px var(--rt-ground) inset;
  caret-color: var(--rt-ink);
}

/* ---------- código de seis dígitos ----------
   Una sola caja en vez de seis recuadros: se pega el código de un tirón desde
   el correo y el teclado numérico del teléfono aparece solo. El aire entre
   letras es lo que hace que se lea de a dígitos. */
.rt-codigo {
  font-family: var(--rt-mono);
  font-size: 1.6rem !important;
  font-weight: 600;
  letter-spacing: .42em;
  text-indent: .42em;   /* compensa el hueco que el interletraje deja a la derecha */
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rt-campo:has(.rt-codigo) { height: 58px; }

/* ---------- ver u ocultar la contraseña ---------- */
.rt-ver {
  flex: 0 0 auto; border: 0; background: transparent; color: var(--rt-muted);
  padding: .35rem; border-radius: .3rem; display: grid; place-items: center; cursor: pointer;
}
.rt-ver:hover, .rt-ver:focus-visible { color: var(--rt-accent); background: var(--rt-accent-soft); }

/* ---------- acciones y avisos ---------- */
.rt-acceso .btn-primary {
  width: 100%; height: 48px; margin-top: .35rem;
  font-size: 1.02rem; font-weight: 600; justify-content: center;
}
.rt-acceso small { display: block; color: var(--rt-muted); font-size: .78rem; margin: -.7rem 0 1rem; }
.rt-acceso .aviso {
  display: flex; align-items: center; gap: .45rem; margin-bottom: 1.2rem;
  background: var(--rt-danger-soft); color: var(--rt-danger);
  padding: .65rem .8rem; border-radius: .45rem; font-size: .88rem;
}
.rt-acceso .aviso.ok { background: var(--rt-accent-soft); color: var(--rt-accent); }
.rt-acceso .aviso.info { background: var(--rt-cool-soft); color: var(--rt-cool); }
.rt-acceso .volver {
  display: block; text-align: center; margin-top: 1rem;
  color: var(--rt-muted); font-size: .86rem; text-decoration: none;
}
.rt-acceso .volver:hover { color: var(--rt-accent); }

@media (max-width: 420px) {
  .rt-acceso { padding: 1.6rem 1.25rem 1.4rem; }
  .rt-acceso .marca img { height: 72px; }
}