/* Sección base del botón */
.btn-section {
  display: flex;
  padding: 2rem 1rem;
  width: 100%;
  max-width: 820px;
}

/* Alineaciones */
.align-left   { justify-content: flex-start; }
.align-center { justify-content: center; }
.align-right  { justify-content: flex-end; }

/* Botón base */
.btn-primary {
  background-color: #026792; 
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 2rem;
  padding: 0.8rem 2rem;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Hover normal */
.btn-primary:hover {
  background-color: #02558b;
  transform: translateY(-2px);
}

/* Versión invertida */
.btn-invert {
  background-color: #fff;
  color: #026792;
  border: 2px solid #026792;
}

.btn-invert:hover {
  background-color: #026792;
  color: #fff;
}


#btnContinuar[disabled],
#btnContinuar[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #ccc !important;  /* gris claro */
  border-color: #aaa !important;
  color: #666 !important;
  box-shadow: none !important;
  transform: none !important;
}


/* Estado normal del "botón" (enlace con apariencia de botón) */
#btnContinuar {
  display: inline-block;           /* que se comporte como botón */
  text-decoration: none;           /* sin subrayado */
  text-align: center;
  background-color:  #02558b;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 2rem;
  padding: 0.8rem 2rem;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Hover cuando está habilitado */
#btnContinuar:not([aria-disabled="true"]):hover {
  background-color: #026792; 
  transform: translateY(-2px);
  text-decoration: none;
}

/* Estado deshabilitado */
#btnContinuar[aria-disabled="true"] {
  pointer-events: none;          /* bloquea clics aunque tenga href */
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #ccc !important;
  border-color: #aaa !important;
  color: #666 !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none;         /* evita que parezca enlace */
}


/* Comportamiento normal */
.btn-section--stack {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* En mobile los apilamos */
@media (max-width: 768px) {
  .btn-section--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .btn-section--stack a,
  .btn-section--stack button {
    width: 100%;
    text-align: center;
  }
}