/* ==========================================================================
   UVERO · 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.
   ========================================================================== */

/* Centrado con «margin: auto» sobre un contenedor flexible, y no con
   place-items, a proposito: cuando el formulario es mas alto que la pantalla
   --el registro tiene cuatro campos, el acceso dos-- centrar recorta por
   arriba y esa parte queda inalcanzable. Con margin auto se centra si cabe y
   se apoya arriba si no, dejando la pagina desplazarse.

   Y sin overflow: hidden, que era lo que quitaba la barra. No hacia falta para
   el fondo: el ::before es absoluto con inset 0 y no se sale de su caja. */
.uv-acceso-cuerpo {
  min-height: 100vh; display: flex;
  padding: 1.5rem; background: var(--uv-ground);
  position: relative; overflow-x: 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. */
.uv-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 ---------- */
.uv-acceso {
  position: relative; z-index: 1;
  margin: auto;
  width: 100%; max-width: 380px;
  background: var(--uv-surface); border: 1px solid var(--uv-line);
  border-radius: .85rem; padding: 2rem 1.75rem 1.75rem;
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .9);
}

/* El logo es vertical: la hoja arriba y la palabra abajo. Centrado y con
   altura holgada, porque a la altura de una firma horizontal la hoja quedaba
   del tamaño de un icono. */
.uv-acceso .marca { display: flex; align-items: center; justify-content: center; }
.uv-acceso .marca img { height: 148px; width: auto; }
.uv-acceso .lema {
  color: var(--uv-muted); font-size: .86rem; text-align: center;
  margin: .85rem 0 1.65rem;
}

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

/* El navegador pinta el autocompletado de blanco y rompe la tarjeta oscura. */
.uv-campo input:-webkit-autofill,
.uv-campo input:-webkit-autofill:hover,
.uv-campo input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--uv-ink);
  -webkit-box-shadow: 0 0 0 40px var(--uv-ground) inset;
  caret-color: var(--uv-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. */
.uv-codigo {
  font-family: var(--uv-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;
}
.uv-campo:has(.uv-codigo) { height: 58px; }

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

/* ---------- acciones y avisos ---------- */
.uv-acceso .btn-primary {
  width: 100%; height: 48px; margin-top: .35rem;
  font-size: 1.02rem; font-weight: 600; justify-content: center;
}
.uv-acceso small { display: block; color: var(--uv-muted); font-size: .78rem; margin: -.7rem 0 1rem; }
/* El aviso es una caja flexible, asi que cada elemento de adentro se mide por
   su cuenta. Con un correo largo dentro de un <strong>, ese pedazo se lleva el
   ancho y estruja el resto del mensaje en una columna de dos palabras. Por eso
   el mensaje va envuelto en un solo <span>: un elemento, una medida.

   align-items al inicio --y no al centro-- para que el icono quede a la altura
   de la primera linea cuando el texto ocupa varias. */
.uv-acceso .aviso {
  display: flex; align-items: flex-start; gap: .45rem; margin-bottom: 1.2rem;
  background: var(--uv-danger-soft); color: var(--uv-danger);
  padding: .65rem .8rem; border-radius: .45rem; font-size: .88rem;
  line-height: 1.45;
}
.uv-acceso .aviso > .ic { flex: none; margin-top: .15rem; }

/* min-width 0 para que el texto pueda encogerse --un elemento flexible no baja
   de su contenido minimo sin esto-- y anywhere para que un correo largo parta
   en vez de desbordar la tarjeta. */
.uv-acceso .aviso > span { min-width: 0; overflow-wrap: anywhere; }
.uv-acceso .aviso.ok { background: var(--uv-accent-soft); color: var(--uv-accent); }
.uv-acceso .aviso.info { background: var(--uv-cool-soft); color: var(--uv-cool); }
.uv-acceso .volver {
  display: block; text-align: center; margin-top: 1rem;
  color: var(--uv-muted); font-size: .86rem; text-decoration: none;
}
.uv-acceso .volver:hover { color: var(--uv-accent); }

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

/* ---------- el boton, mientras se envia ----------
   El registro habla con el licenciamiento, que esta en otro servidor: puede
   tardar unos segundos. Sin una senal de que algo pasa, se vuelve a pulsar y se
   manda dos veces. El anillo es el mismo de sitio.css, en chico. */
.uv-acceso .btn[data-ocupado] { pointer-events: none; opacity: .9; }
.uv-acceso .btn[data-ocupado] .uv-anillo {
  width: 1rem; height: 1rem; margin: 0; border-width: 2px;
  border-color: rgba(255, 255, 255, .35); border-top-color: currentColor;
}