/* =============================================================================================
   LAS PANTALLAS DE ENTRAR Y DE DARSE DE ALTA. Hoja APARTE, y aparte por una razón concreta.

   `css/app.css` está en la lista ESTATICOS del Service Worker (sw.js): el mostrador la sirve de su
   caché para poder trabajar sin red. El nombre de esa caché lleva la huella de lo que precachea, así
   que CUALQUIER byte que cambie en app.css obliga a mover la huella y hace que todas las tablets ya
   instaladas vuelvan a descargarse sus estáticos. Un botón nuevo en el login no puede costar eso.

   Esta hoja NO está precacheada —el mostrador no la necesita, no se entra sin red— y la carga sólo
   `layout/publico.html`. Aquí dentro se puede iterar todo lo que haga falta sin tocar la caché de
   nadie.

   Lo que NO vive aquí: `.publico__*`. Eso es el armazón de la pantalla pública y lo comparte también
   el acceso de plataforma, que no pasa por este layout; sacarlo de app.css dejaría esa pantalla sin
   estilos. Aquí sólo va lo que es de autenticación de verdad.
   ============================================================================================= */

/* ---------- Entrar o darse de alta con Google ---------- */
/* El logotipo se sirve desde /vendor/google/google.svg, de este servidor: el navegador no le pide ni
   un byte a Google, que es regla del proyecto. */
.btn--google { gap: .6rem; font-weight: 600; }
.btn__logo { width: 18px; height: 18px; flex: 0 0 auto; }

/* El separador entre el acceso con Google y el de siempre: deja claro que debajo sigue lo de antes. */
.separador-o { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: var(--gris-600); font-size: .85rem; }
.separador-o::before, .separador-o::after { content: ""; flex: 1; height: 1px; background: var(--gris-300); }

/* ---------- El alta con Google: el correo ya viene verificado y NO se toca ---------- */
/* Un campo deshabilitado no viaja en el envío, y uno de sólo lectura sí se puede cambiar con las
   herramientas del navegador. Por eso el correo se PINTA como texto, no como campo: lo que vale es
   el del id_token y el servidor no mira lo que llegue del formulario. Esto sólo lo dice en pantalla. */
.correo-fijado {
  display: flex; align-items: center; gap: .6rem;
  background: var(--superficie-alt); border: 1px solid var(--gris-300); border-radius: var(--r);
  padding: .7rem .9rem; margin-bottom: 1rem;
}
.correo-fijado__logo { width: 18px; height: 18px; flex: 0 0 auto; }
.correo-fijado__correo { font-weight: 600; word-break: break-all; }
.correo-fijado__nota { display: block; font-size: .8rem; color: var(--texto-suave); font-weight: 400; }