/* Pantallas de acceso (entrar y doble factor). Panel de marca en el color principal del laboratorio, con el patrón
   tenue de pocillos de una placa de análisis; formulario sobrio a la derecha. Usa las variables de portal.css. */
.acceso-pagina { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; }

.acceso-marca {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--riel); color: var(--riel-texto);
  padding: clamp(28px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; gap: 30px;
}
/* Placa de pocillos: solo en la esquina inferior, desvaneciéndose hacia el texto. */
.acceso-marca::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(circle at center, color-mix(in srgb, var(--riel-texto) 12%, transparent) 0 9px, transparent 10px);
  background-size: 34px 34px; background-position: 17px 17px;
  -webkit-mask-image: linear-gradient(155deg, transparent 38%, #000 92%); mask-image: linear-gradient(155deg, transparent 38%, #000 92%);
}
.marca-cabeza { display: flex; align-items: center; gap: 14px; }
.marca-icono { width: 46px; height: 46px; flex: none; }
.marca-logo { max-height: 52px; width: auto; }
.marca-portal { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.marca-lab { font-size: 15px; opacity: .88; }
.marca-lema { font-size: clamp(22px, 2.6vw, 36px); line-height: 1.25; font-weight: 650; max-width: 20ch; margin: 0;
              text-wrap: balance; }
.marca-seguridad { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; opacity: .92; max-width: 38ch; margin: 0; }
.marca-seguridad svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }

.acceso-panel { background: var(--fondo); display: grid; place-items: center; padding: 32px 20px; }
.acceso-form { width: min(400px, 100%); display: grid; gap: 22px; }
.acceso-form form { display: grid; gap: 16px; margin: 0; }
.acceso-form h1 { font-size: 30px; margin: 0; letter-spacing: -0.01em; }
.acceso-ayuda { margin: -6px 0 0; color: var(--suave); }
.acceso-paso, .acceso-soporte { margin: 0; color: var(--suave); font-size: 13.5px; }
.acceso-soporte span { color: var(--texto); user-select: all; }

.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; font-size: 14px; }
.campo input { font: inherit; font-size: 16px; color: var(--texto); background: var(--superficie); width: 100%;
               border: 1px solid var(--borde); border-radius: 8px; padding: 11px 12px; min-height: 46px; }
.campo input:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; border-color: var(--primario); }
.clave { position: relative; }
.clave input { padding-right: 88px; }
.ver-clave { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: inherit; font-size: 13px;
             font-weight: 600; color: var(--primario); background: transparent; border: 0; border-radius: 6px;
             padding: 6px 10px; cursor: pointer; }
.ver-clave:hover { background: var(--primario-f); }
.ver-clave:focus-visible { outline: 2px solid var(--primario); }
.boton.ancho { width: 100%; min-height: 46px; font-size: 15px; }
.codigo { font-family: var(--mono) !important; font-size: 24px !important; letter-spacing: .45em; text-align: center; }

.pasos { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--texto); }
.acceso-form .qr { display: flex; justify-content: center; }
.acceso-form .qr svg { width: 200px; height: 200px; background: #fff; padding: 10px; border-radius: 8px; border: 1px solid var(--borde); }
.acceso-otro { margin: 0; }
.enlace { font: inherit; font-size: 13.5px; color: var(--primario); background: none; border: 0; padding: 0; cursor: pointer;
          text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 820px) {
  .acceso-pagina { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .acceso-marca { gap: 14px; padding: 22px 20px; }
  .marca-lema { font-size: 18px; max-width: none; }
  .marca-seguridad { display: none; }
  .acceso-panel { place-items: start center; padding-top: 28px; }
}

/* El panel de acceso es un <main>: anula el ancho y la alineación del contenido del portal */
main.acceso-panel { max-width: none; margin: 0; align-content: center; justify-content: center; }
/* Pantalla de carga al entrar: el portal, quien presta el servicio y quien lo desarrolla */
.precarga { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px;
            background: var(--riel, #13315c); color: var(--riel-texto, #fff); opacity: 0; transition: opacity 200ms ease-out; }
.precarga.visible { opacity: 1; }
.precarga-caja { width: min(420px, 100%); display: grid; gap: 10px; text-align: center; }
.precarga-portal { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.precarga-lab { opacity: .8; }
.precarga-barra { height: 4px; border-radius: 4px; background: rgb(255 255 255 / .18); overflow: hidden; margin: 14px 0 4px; }
.precarga-barra span { display: block; width: 40%; height: 100%; border-radius: 4px; background: currentColor;
                       animation: precarga-avanza 1.1s ease-in-out infinite; }
@keyframes precarga-avanza { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
.precarga-texto { margin: 0; opacity: .85; }
.precarga-credito { display: grid; gap: 2px; margin-top: 36px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .2); }
.precarga-credito span { font-size: 13px; opacity: .75; }
.precarga-credito b { font-size: 22px; letter-spacing: .02em; }
.precarga-credito small { font-size: 12px; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .precarga, .precarga-barra span { transition: none; animation: none; } }
.acceso-creditos a { color: inherit; }
.precarga[hidden] { display: none; }   /* sin esto, la capa invisible tapa el formulario */