/* static/css/acceso.css — pantallas de acceso de seguridad/ (login, segundo
 * factor, reautenticación). Se carga DESPUÉS de panel.css y reutiliza sus
 * variables. Antes estos estilos vivían en un <style> en línea, lo que obligaba
 * a permitir 'unsafe-inline' en style-src; ya no (F5, 2026-10-20). */

body.acceso {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
}
.acceso-tarjeta {
  width: 100%; max-width: 400px; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 28px 28px 30px;
}
.acceso-logo { display: block; height: 64px; width: auto; margin: -8px 0 10px -12px; }
.acceso-tarjeta h1 {
  font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.acceso-tarjeta p.sub { color: var(--tinta-2); font-size: 14.5px; margin: 0 0 18px; }
.acceso-tarjeta label { display: block; margin: 14px 0 6px; }
.acceso-tarjeta button {
  width: 100%; margin-top: 20px; min-height: 46px; padding: 11px 16px; border: 1px solid var(--boton);
  border-radius: var(--radio-chico); background: var(--boton); color: #FFFFFF; font: inherit; font-weight: 600;
  cursor: pointer;
}
.acceso-tarjeta button:hover { background: var(--boton-hover); }
.acceso-tarjeta button.secundario { background: var(--superficie); color: var(--tinta); border-color: var(--borde-fuerte); }
.mensajes { list-style: none; margin: 0 0 8px; padding: 0; }
.mensajes li { padding: 10px 12px; border-radius: var(--radio-chico); font-size: 14px; margin-bottom: 8px; }
.mensajes li.error { background: var(--peligro-fondo); color: var(--peligro-tinta); }
.mensajes li.info { background: var(--info-fondo); color: var(--info-tinta); }
.pie { margin-top: 18px; text-align: center; font-size: 13.5px; color: var(--tinta-2); }
code.codigo {
  display: block; font-family: var(--mono); font-size: 15px; padding: 9px 12px; margin: 4px 0;
  background: var(--lienzo); border: 1px solid var(--borde); border-radius: var(--radio-chico);
  color: var(--tinta); overflow-wrap: anywhere;
}
img.qr { display: block; margin: 12px auto; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: #FFFFFF; padding: 8px; }