.step-btn.active {
      background-color: #007bff;
      border-color: #007bff;
      color: white;
  }

  .step-btn.completed {
      background-color: #28a745;
      border-color: #28a745;
      color: white;
  }

  .welcome-section h1,
  .studentform-section h1 {
      font-size: 2.5rem;
      color: #2571b3;
  }



  .welcome-section h5 {
      color: #2571b3;
  }

  .footer-section {
      background: #2571b3;
      color: #FFF;
  }

  .stepwizard-step p {
      margin-top: 35px;
      padding-left: 15px;
  }

  .stepwizard-row {
      display: table-row;
  }

  .stepwizard {
      display: table;
      width: 100%;
      position: relative;
  }

  .stepwizard-step button[disabled] {
      opacity: 1 !important;
      filter: alpha(opacity=100) !important;
  }

  .stepwizard-row:before {
      top: -45px;
      bottom: 0;
      position: absolute;
      content: " ";
      width: 80%;
      left: 0;
      right: 0;
      margin: auto;
      height: 4px;
      background-color: #EFF0FF;
      z-order: 0;
  }

  .stepwizard-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: relative;
      flex: 1;
      min-width: 80px;
  }

  .stepwizard-row {
      display: flex;
      justify-content: space-between;
      /* Mantiene el primer y último botón en los bordes */
      align-items: center;
      flex-wrap: wrap;
      /* Permite que los pasos bajen en pantallas pequeñas */
      gap: 0;
      /* Elimina el espacio entre botones */
      padding: 0;
      /* Asegura que no haya padding dentro del contenedor */
  }

  .btn-circle {
      width: 30px;
      height: 30px;
      text-align: center;
      padding: 6px 0;
      font-size: 12px;
      line-height: 1.428571429;
      border-radius: 15px;
      font-weight: bolder;
  }

  .stepwizard-step a {
      position: absolute;
      top: 0;
      margin-left: -10px;
  }

  .stepwizard-step a.btn-primary {
      background: #160A26;
      border-color: #160A26;
      color: #FFF;
      box-shadow: 0 0 0px 5px #160A2699;
      /* Versión con transparencia */
  }

  .studentform-section h5 {
      color: #2571b3;
  }

  .studentform-section span {
      color: red;
  }

  .studentform-section ul.list-unstyled b {
      color: #2571b3;
  }



  .form-group.has-error select,
  .form-group.has-error input,
  .form-group.has-error textarea {
      border-color: red;
  }

  .form-group.has-error .form-text {
      color: red;
  }

  .studentform-section input:focus {
      box-shadow: none;
  }

  .stepwizard-row .btn-default[disabled] {
      background-color: #EFF0FF;
      border-color: #EFF0FF;
      color: #160A26;
      /* Asegura contraste con el fondo claro */
      opacity: 0.7;
      /* Opcional: da efecto de deshabilitado */
  }

  .btn-indicaciones {
      background-color: #304350 !important;
      border-color: #304350 !important;
  }

  .btn-ayuda {
      background-color: #606065 !important;
      border-color: #606065 !important;
  }

  .stepwizard-row .btn[disabled] {
      pointer-events: none;
      cursor: not-allowed;
      filter: alpha(opacity=65);
      -webkit-box-shadow: none;
      box-shadow: none;
      opacity: 1;
  }

  .custom-checkbox .custom-control-input:checked~.custom-control-label::before {
      background-color: #2571b3;
  }


  .ui-state-highlight,
  .ui-widget-content .ui-state-highlight,
  .ui-widget-header .ui-state-highlight {
      border: 1px solid #2571b3 !important;
      background: #2571b3 !important;
      color: #FFF !important;
  }

  @media(max-width:504px) {
      .stepwizard-step p {
          margin-top: 35px;
          padding-left: 15px;
          font-size: 12px;
      }

      .stepwizard-row::before {
          top: -590px;
      }

      .stepwizard-step {
          border-bottom: #EFF0FF solid 5px;
      }

  }

  @media (min-width: 576px) {
      .stepwizard-step p {
          margin-top: 40px;
          padding-left: 15px;
          font-size: 12px;
      }
  }

  @media (min-width: 768px) {
      .dropdown:hover>.dropdown-menu {
          display: block;
      }

      .stepwizard-step p {
          margin-top: 35px;
          padding-left: 15px;
          font-size: 1rem;
      }
  }

  @media (min-width: 992px) {}

  @media (min-width: 1200px) {}

  #confetti-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
      pointer-events: none;
  }

  .confetti {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: #ff4081;
      animation: confetti-fall 3s linear forwards;
  }

  @keyframes confetti-fall {
      0% {
          transform: translateY(-100px) rotate(0deg);
      }

      100% {
          transform: translateY(100vh) rotate(720deg);
      }
  }


  .progress-container {
      width: 80px;
      height: 80px;
      margin-left: 20px;
      /* Espacio entre el texto y el círculo */
  }

  .progress-container svg {
      width: 100%;
      height: 100%;
  }

  .progress-container text {
      font-size: 14px;
      font-weight: bold;
      fill: var(--ct-emphasis-color);
  }

  @media (max-width: 768px) {
      .progress-container {
          right: 10px;
          /* Ajuste en móviles */
      }
  }

  .bg-head {
      background-color: var(--ct-primary-bg-subtle);
      margin: 0;
      padding: 10px;
      /* Agrega algo de padding si es necesario */
      width: 100%;
      border-top-left-radius: 5px;
      /* Opcional: suavizar esquinas si es necesario */
      border-top-right-radius: 5px;
  }

  /* Contenedor principal */
  .ayuda-titulo {
      background-color: var(--ct-primary-bg-subtle);
      padding: 15px;
      border-radius: 5px;
      font-family: Arial, sans-serif;
      font-size: 14px;
      border: 1px solid var(--ct-primary-bg-subtle);
      width: 100%;
  }

  /* Título */
  .titulo {
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 10px;
      text-align: center;
  }

  /* Asegurar que las columnas sean del mismo tamaño */
  .contenido .col {
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  /* Botones de pasos */
  .boton {
      border: 1px solid #777;
      background-color: #EFF0FF;
      padding: 8px 15px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      width: 100%;
  }

  /* Contenedor de cada paso */
  .step-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
  }

  /* Estilos de los pasos */
  .paso {
      font-size: 12px;
      color: #C532D9 !important;
      font-weight: bold;
  }

  /* Caja de término adicional */
  .termino-adicional {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 2px dashed #777;
      width: 100%;
      height: 55px;
      text-align: center;
      border-radius: 5px;
      font-size: 12px;
  }

  /* Enlace Digital */
  .digital {
      color: #064bd4 !important;
      text-decoration: none;
      font-size: 14px;
      font-weight: bold;
      margin-left: 5px;
  }

  /* Responsive: En pantallas pequeñas se apila */
  @media (max-width: 768px) {
      .contenido {
          flex-direction: column;
          gap: 10px;
      }
  }

  #submitBtnCondicion:disabled {

    background-color: gray;
    border-color: gray;
    opacity: 0.5;
    cursor: not-allowed;
  }

  #toas-experiences-work {
    position: fixed;
    top: 20px; /* Ajusta la distancia desde la parte superior */
    left: 50%;
    transform: translateX(-50%); /* Esto centra el toast horizontalmente */
    z-index: 1050; /* Asegura que el toast esté por encima de otros elementos */
}

/* Estilo específico para la vista móvil */
@media (max-width: 767px) {

    /* Contenedor de los pasos (ajustado para que se alineen horizontalmente) */
    .stepwizard-mobile {
        display: flex;
        justify-content: space-between; /* Distribuye los guiones uniformemente */
        align-items: center; /* Alinea los guiones verticalmente */
        flex-wrap: nowrap; /* Evita que los guiones se desborden hacia abajo */
        width: 100%;
        margin-top: 10px;
        overflow: hidden; /* Evita que los guiones se desborden */
    }

    /* Filas de pasos, ajustadas para que no se desborden */
    .stepwizard-row-mobile {
        display: flex;
        flex-direction: row; /* Alinea los guiones horizontalmente */
        flex-wrap: nowrap; /* No permite que los guiones se vayan a una nueva línea */
        justify-content: space-between; /* Asegura distribución horizontal */
        width: 100%;
    }

    /* Estilos de los guiones como pasos */
    .step-gui-mobile {
        display: inline-block;
        font-size: 10vw; /* Ajuste dinámico del tamaño de los guiones en función del tamaño de la pantalla */
        font-weight: bold;
        color: #007bff; /* Color por defecto */
        text-decoration: none;
        margin: 0 5px; /* Espacio entre los guiones */
        transition: color 0.3s ease;
        flex-shrink: 1; /* Permite que los guiones se ajusten cuando es necesario */
        white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    }

    /* Guiones que se muestran */
    .step-gui-symbol {
        content: "-"; /* Mostrar guiones */
        font-size: 50px;
        letter-spacing: 2px;
    }

    /* Estilos para los diferentes estados */
    .step-completed {
        color: aqua;
    }

    .step-current {
        color: purple;
        font-weight: bold;
    }

    .step-future {
        color: gray;
    }

    /* Pasos deshabilitados (futuros) */
    .step-gui-mobile.disabled {
        pointer-events: none;
        opacity: 0.6; /* Pasos deshabilitados con opacidad reducida */
    }

    /* Eliminar cualquier texto o línea debajo de los guiones */
    .stepwizard-mobile p {
        display: none;
    }

    /* No mostrar iconos o números */
    .step-gui-mobile i {
        display: none;
    }

    /* Eliminar cualquier línea horizontal o conexión entre los guiones */
    .stepwizard-mobile .stepwizard-row-mobile:after {
        display: none;
    }
}