/* Lonja · login.css · pantalla de acceso (marcal operador)
   Se carga tras base.css; body.acceso lo pone login.html ({% block body_class %}). */
body.acceso .cab { display: none; }
/* F6 (13-sep-2026): el selector de idioma vive DENTRO de .cab en el resto
   del portal, pero .cab entero se oculta aquí — sin esta copia flotante,
   login/olvide/invitación no tenían NINGUNA forma de cambiar de idioma
   (encontrado viendo una captura real de la app, no solo leyendo código). */
body.acceso .idioma-switch-acceso {
  display: flex; position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 50;
}
body.acceso main { max-width: none; padding: 0; margin: 0; min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.acceso-hero { position: relative; overflow: hidden; isolation: isolate; color: var(--verde-tiza);
               /* el velo sobre la foto, con el color de la marca del operador (/marca/tema.css) */
               background: linear-gradient(180deg, color-mix(in srgb, var(--verde-2) 62%, transparent) 0%,
                                                   color-mix(in srgb, var(--verde) 74%, transparent) 55%,
                                                   color-mix(in srgb, var(--verde-2) 94%, transparent) 100%),
                           url("/static/img/hero/campo-900.webp") center 42% / cover no-repeat var(--verde-2);
               padding: calc(28px + env(safe-area-inset-top)) 22px 40px; border-radius: 0 0 var(--r2) var(--r2); }
.acceso-hero .marca { font-size: 22px; gap: 12px; color: #fff; }
.acceso-hero .marca .marca-b { color: var(--lima); }
.acceso-hero .logo-marca { width: 44px; height: 44px; }
.acceso-hero .eyebrow { color: var(--lima); margin: 26px 0 4px; }
.acceso-hero h1 { font-size: 26px; margin: 0; color: #fff; }
.acceso-form { position: relative; z-index: 1; width: min(100%, 440px); margin: -22px auto 0; padding: 0 14px 32px; }
.acceso-form .card { padding: 18px 16px 16px; box-shadow: var(--sombra-lift); }
.acceso-form h2 { margin: 0 0 10px; }
.acceso-form label { display: block; font-size: 13px; font-weight: 600; color: var(--tinta-2); margin: 12px 0 5px; }
.acceso-form input { min-height: 50px; font-size: 17px; }
.acceso-form button[type=submit] { width: 100%; min-height: 50px; font-size: 17px; margin-top: 16px; border-radius: var(--r-pill); } /* .vivo = lima: LA acción de la pantalla */
.acceso-error { background: var(--rojo-suave); color: var(--rojo-tinta); border-radius: var(--r1); padding: 10px 12px; font-size: 14px;
                display: flex; gap: 8px; align-items: center; margin: 0 0 4px; }
.lg-clave { position: relative; }
.lg-clave input { padding-right: 54px; }
.lg-clave button[data-ver-clave] { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); min-height: 44px; min-width: 44px;
                                   padding: 0; background: none; color: var(--tinta-2); border-radius: 50%; }
.lg-clave button[data-ver-clave]:active { transform: translateY(-50%) scale(.94); }
.lg-clave button[data-ver-clave][aria-pressed="true"] { color: var(--vivo-tinta); }
.acceso-pie { text-align: center; margin: 14px 0 0; font-size: 14px; }
.acceso-pie a, .acceso-pie button { color: var(--vivo-tinta); font-weight: 600; text-decoration: none; min-height: 44px;
                                    display: inline-flex; align-items: center; justify-content: center; width: 100%;
                                    background: none; border: 0; font: inherit; cursor: pointer; }
@media (min-width: 900px) {
  body.acceso main { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; }
  .acceso-hero { border-radius: 0; display: flex; flex-direction: column; justify-content: center; padding: 48px 56px;
                 background-image: linear-gradient(180deg, color-mix(in srgb, var(--verde-2) 55%, transparent) 0%,
                                                         color-mix(in srgb, var(--verde) 70%, transparent) 55%,
                                                         color-mix(in srgb, var(--verde-2) 92%, transparent) 100%),
                                   url("/static/img/hero/campo-1600.webp"); }
  .acceso-hero h1 { font-size: 34px; }
  .acceso-form { margin: auto; padding: 32px; }
  .acceso-form .card { padding: 26px 24px 22px; }
}