/* ==========================================================================
   CooperApp · Estilo C «Bento» — pantalla: auth
   --------------------------------------------------------------------------
   Solo lo que es exclusivo de esta pantalla. Todo lo que sirva para más de
   una va en components.css. Prohibido escribir colores, radios o sombras
   literales: se consumen con var(--token) de tokens.css.

   Cubre las cuatro pantallas sin sesión: acceso de sede, acceso de
   contraparte, cuenta pendiente y sin permisos. Las cuatro comparten el
   armazón `base_auth.html` (con `.auth-body`/`.auth-container` ya resueltos
   en base.css) y una única celda `.c` centrada como contenido.

   Esta hoja se carga en TODAS las páginas (assets.html no distingue), así
   que cada selector va prefijado con `.auth-` para no interferir con el
   resto de la aplicación.
   ========================================================================== */

/* ---- Celda de acceso ------------------------------------------------------
   Contenido único de cada pantalla: marca, aviso opcional, formulario o
   acciones, y salida. Todo apilado y centrado salvo el propio formulario. */
.auth-celda{
  display:flex;flex-direction:column;gap:var(--esp-5);
  text-align:center;
}

/* ---- Marca ------------------------------------------------------------- */
.auth-marca{display:flex;flex-direction:column;align-items:center;gap:var(--esp-2)}
.auth-marca-ic{
  width:56px;height:56px;border-radius:var(--r-l);display:grid;place-items:center;
  background:linear-gradient(140deg,var(--acento),var(--acento-2));
  color:var(--acento-solido-txt);font-size:var(--t-xl);flex:none;
}
.auth-marca h1{font-size:var(--t-2xl)}
.auth-subtitulo{color:var(--texto-3);font-size:var(--t-s)}

/* ---- Acciones y separador -------------------------------------------------
   Pila de botones de ancho completo (Microsoft, contraparte, cerrar sesión…)
   con un separador «o» cuando hay dos caminos de acceso. */
.auth-acciones{display:flex;flex-direction:column;gap:var(--esp-3)}
.auth-separador{
  display:flex;align-items:center;gap:var(--esp-4);
  color:var(--texto-3);font-size:var(--t-s);
}
.auth-separador::before,.auth-separador::after{content:"";flex:1;height:1px;background:var(--borde)}

/* ---- Formulario -------------------------------------------------------------
   El bloque de credenciales se alinea a la izquierda: es el único contenido
   de la celda que no va centrado. */
.auth-form{text-align:left;display:flex;flex-direction:column;gap:var(--esp-4)}

/* ---- Acceso de desarrollo ---------------------------------------------------
   Solo visible con `debug` activo. Deliberadamente secundario: separado del
   acceso real con una regla, etiqueta discreta y botones pequeños. */
.auth-dev{
  padding-top:var(--esp-4);border-top:1px solid var(--borde);
  display:flex;flex-direction:column;gap:var(--esp-2);
}
.auth-dev-titulo{text-align:center}
.auth-dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--esp-2)}
/* Las etiquetas de rol («Técnico/a de sede», «Gestor/a de país») no caben en
   una sola línea a este ancho: se deja envolver en vez de desbordar. */
.auth-dev-grid .btn{white-space:normal;text-align:center}

/* ---- Bloque de estado (cuenta pendiente / sin permisos) -------------------
   Reutiliza `.aviso` para que el icono, el título y el texto compartan un
   único bloque de color según el estado: avisa (pendiente) o mal (sin
   permisos). El color nunca va solo: el icono y el texto ya dicen lo mismo. */
.auth-estado{text-align:left}
.auth-estado h2{font-size:var(--t-m);margin-bottom:3px}
.auth-estado p + p{margin-top:3px}

/* ---- Pie ------------------------------------------------------------------ */
.auth-pie{text-align:center;font-size:var(--t-xs);color:var(--texto-3)}