/* Estilos específicos para la página de login */

/* Configurar el main para ocupar toda la altura disponible.
   Sin min-height calculada ni overflow:hidden: el body ya es flex column con
   min-height 100vh y el footer lleva margin-top:auto, así que en páginas
   cortas el footer queda abajo igual. Con la altura fija más overflow oculto,
   una página alta (el error de certificado, con su lista de pasos) desbordaba
   el viewport, no dejaba desplazarse y recortaba el footer. */
main.login-main {
  padding: 0 !important;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Contenedor del formulario de login */
.login-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

@media (min-width: 640px) {
  .login-container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .login-container {
    padding: 0 2rem;
  }
}

/* ============================================= */
/* Estilos para el botón de certificado digital  */
/* ============================================= */

/* Separador "o" entre formulario y botón de certificado */
.cert-login-separator {
  display: flex;
  align-items: center;
  margin: 1rem 0;
  gap: 0.75rem;
}

.cert-login-separator::before,
.cert-login-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #cbd5e0, transparent);
}

.cert-login-separator span {
  font-size: 0.8rem;
  font-weight: 500;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Botón principal de login con certificado */
.cert-login-button {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: linear-gradient(135deg, #223d71 0%, #2e5194 100%);
  border: 2px solid #223d71;
  border-radius: 8px;
  text-decoration: none;
  color: white;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(34, 61, 113, 0.25);
  position: relative;
  overflow: hidden;
}

.cert-login-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  transition: left 0.5s ease;
}

.cert-login-button:hover::before {
  left: 100%;
}

.cert-login-button:hover {
  background: linear-gradient(135deg, #2e5194 0%, #3b63b0 100%);
  border-color: #2e5194;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 61, 113, 0.35);
  text-decoration: none;
  color: white;
}

.cert-login-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(34, 61, 113, 0.25);
}

/* Icono del certificado */
.cert-login-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  flex-shrink: 0;
}

.cert-login-icon i {
  font-size: 1.25rem;
  color: white;
}

/* Texto del botón */
.cert-login-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.cert-login-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.cert-login-subtitle {
  font-size: 0.7rem;
  font-weight: 400;
  opacity: 0.75;
  line-height: 1.3;
  margin-top: 2px;
}

/* Flecha animada */
.cert-login-arrow {
  font-size: 0.875rem;
  opacity: 0.7;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.cert-login-button:hover .cert-login-arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* ============================================= */
/* Variantes del botón para el resto de accesos  */
/* ============================================= */

/* Certificado digital FNMT/DNIe.
   El azul corporativo queda para Identidad Unizar (el estilo base), así que
   el certificado usa el verde para distinguirse. */
.cert-login-button--cert {
  background: linear-gradient(135deg, #0f766e 0%, #14918a 100%);
  border-color: #0f766e;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25);
}

.cert-login-button--cert:hover {
  background: linear-gradient(135deg, #14918a 0%, #1aa89f 100%);
  border-color: #14918a;
  box-shadow: 0 6px 20px rgba(15, 118, 110, 0.35);
}

.cert-login-button--cert:active {
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25);
}

/* Accesos principales de la pantalla de inicio de sesión */
.login-options {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* ============================================= */
/* "Otro acceso": usuario y contraseña            */
/* ============================================= */

/* Va separado y con bastante menos peso visual que el certificado o la
   identidad institucional: es la vía de excepción, no la habitual. */
.login-other-access-wrapper {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e9edf3;
}

.login-other-access {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* Sangrado igual que los accesos principales: los iconos quedan alineados */
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  text-decoration: none;
  color: #64748b;
  font-size: 0.8125rem;
  transition: all 0.2s ease;
}

.login-other-access:hover {
  background: #f4f6fa;
  color: #223d71;
  text-decoration: none;
}

.login-other-access-icon {
  font-size: 0.875rem;
  opacity: 0.8;
}

.login-other-access-text {
  flex: 1;
  font-weight: 500;
}

.login-other-access-arrow {
  font-size: 0.75rem;
  opacity: 0.5;
  transition: all 0.2s ease;
}

.login-other-access:hover .login-other-access-arrow {
  opacity: 0.9;
  transform: translateX(3px);
}

/* Botón de vuelta a la pantalla de métodos de acceso (sobre la tarjeta) */
.login-back-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: white;
  border: 1px solid #dbe2ec;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #223d71;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: all 0.2s ease;
}

.login-back-button:hover {
  background: #f8fafc;
  border-color: #223d71;
  color: #223d71;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(34, 61, 113, 0.14);
}

.login-back-button i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.login-back-button:hover i {
  transform: translateX(-3px);
}

/* Aviso del login SIR3 simulado (solo desarrollo local) */
.sir3-dev-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #92400e;
}

.sir3-dev-warning i {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

/* Icono de la página de error de SIR3 */
.sir3-error-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 1.25rem;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #d97706;
}