/*
  Archivo legacy: estilos migrándose gradualmente al módulo SCSS
  resources/scss/components/_tab-nav.scss. Mantener temporalmente.
*/
.contenedor-tab-nav .nav-tabs .nav-link:hover {
    cursor: pointer !important;
    color: inherit !important;
    background-color: transparent !important;
    border-color: transparent !important;
}
.contenedor-tab-nav .nav-tabs {
    border-bottom: 4px solid #CCCCCC !important;
    position: relative !important; /* Asegura que el indicador se posicione respecto a este contenedor */
    display: flex !important; /* Asegura que sea un contenedor flex */
    flex-wrap: nowrap !important; /* Evita que las pestañas se envuelvan a la siguiente línea */
    overflow-x: auto !important; /* Permite el desplazamiento horizontal si las pestañas no caben */
    overflow-y: hidden !important; /* Oculta el desplazamiento vertical si aparece */
    overflow: visible !important;  /* Permite que el indicador sobresalga si es necesario */
    /* Opcional: Ocultar la barra de scroll visualmente si se desea, aunque la funcionalidad persiste */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* Opcional: Ocultar la barra de scroll para Webkit (Chrome, Safari) */
.contenedor-tab-nav .nav-tabs::-webkit-scrollbar {
    display: none;
}

.contenedor-tab-nav .nav-tabs .nav-item {
    text-align: center !important;
    position: relative !important;
    flex-grow: 1 !important; /* Hace que cada pestaña ocupe una parte igual del espacio disponible */
    min-width: 0 !important; /* Permite que los items se encojan si es necesario (aunque nowrap lo previene) */
}

/* Hide the radio buttons */
.contenedor-tab-nav .tab-input {
    display: none !important;
}

.contenedor-tab-nav .nav-tabs .nav-link {
    color: #8A8A8A !important;
    border: none !important;
    padding: 0.75rem 1rem !important; /* Ajusta el padding según sea necesario */
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
}

.contenedor-tab-nav .nav-tabs .nav-link:hover {
    color: #495057 !important;
}

/* Sliding indicator */
.contenedor-tab-nav .sliding-indicator {
    position: absolute !important;
    bottom: -4px !important; /* Coloca la barrita 1px debajo del borde inferior del contenedor */
    height: 4px !important; /* Altura igual al borde */
    background-color: #0F69C4 !important; /* Color azul */
    width: calc(100% / 3) !important; /* Ancho basado en 3 pestañas con flex-grow: 1 */
    left: 0 !important;
    transition: transform 0.3s ease !important; /* Transición para el deslizamiento */
    z-index: 10 !important; /* Asegura que esté por encima del borde */
}

/* Move the indicator based on which radio is checked */
.contenedor-tab-nav #tab1:checked ~ .nav-tabs .sliding-indicator {
    transform: translateX(0) !important; /* Asegura la aplicación con !important */
}

.contenedor-tab-nav #tab2:checked ~ .nav-tabs .sliding-indicator {
    transform: translateX(100%) !important; /* Asegura la aplicación con !important */
}

.contenedor-tab-nav #tab3:checked ~ .nav-tabs .sliding-indicator {
    transform: translateX(200%) !important; /* Asegura la aplicación con !important */
}

/* Style for active tab */
.contenedor-tab-nav #tab1:checked ~ .nav-tabs .tab1-label,
.contenedor-tab-nav #tab2:checked ~ .nav-tabs .tab2-label,
.contenedor-tab-nav #tab3:checked ~ .nav-tabs .tab3-label {
    color: #0F69C4 !important;
}

.contenedor-tab-nav #tab1:checked ~ .nav-tabs .tab1-label i,
.contenedor-tab-nav #tab2:checked ~ .nav-tabs .tab2-label i,
.contenedor-tab-nav #tab3:checked ~ .nav-tabs .tab3-label i {
    color: #0F69C4 !important;
}

.contenedor-tab-nav .nav-tabs .nav-link i {
    color: #6c757d !important;
    margin-right: 5px !important;
}

.contenedor-tab-nav #tab1:checked ~ .tab-content .tab-pane-1,
.contenedor-tab-nav #tab2:checked ~ .tab-content .tab-pane-2,
.contenedor-tab-nav .nav-tabs .nav-link:hover {
/*
  Archivo legacy que será reemplazado por resources/scss/components/_tab-nav.scss.
  Mantener temporalmente hasta completar la migración de estilos.
*/
  color: #495057 !important;
.contenedor-tab-nav #tab3:checked ~ .tab-content .tab-pane-3 {
    display: block !important;
}

.contenedor-tab-nav .portal-link{
  font-family: "Roboto" !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 24px !important;
  letter-spacing: 0px !important;
  text-align: center;
  text-decoration: underline !important;
  text-decoration-style: solid !important;
  text-decoration-thickness: 0% !important;
  color: #006FB3 !important;
}

.portal-link {
  font-family: "Roboto" !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 24px !important;
  letter-spacing: 0px !important;
  text-align: center !important;
  text-decoration: underline !important;
  text-decoration-style: solid !important;
  text-decoration-thickness: 0% !important;
  color: #006FB3 !important;
}

.portal-link span {
  text-decoration: none !important;
  display: inline-flex !important;
}

.contenedor-tab-nav .info-target-text-descripcion{
  margin-bottom: 0px !important;
}

.contenedor-tab-nav ul {
  margin-bottom: 0px !important;
}

.portal-link .material-icons-outlined {
  vertical-align: middle !important;
  font-size: 18px !important;
}

.contenedor-tab-nav .portal-link span{
  height: 20px !important;
  width: 20px !important;
  text-decoration: none !important;
}
.contenedor-tab-nav .contenedor-alert{
  padding: 16px !important;
}

.contenedor-postulacion-incompleta{
  border-width: 1px !important;
  border-radius: 8px !important;
  padding: 16px !important;
  border: 1px solid #A8B7C7 !important;


}
.contenedor-postulacion-incompleta h6{
  margin-bottom: 0px !important;
}
.contenedor-postulacion-incompleta .ultima-actualizacion-postulacion-incompleta{
  font-family: "Roboto" !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0px !important;
  color: #8A8A8A !important;
  margin-bottom: 0px !important;

}

.contenedor-postulacion-incompleta .ultima-actualizacion-postulacion-presencial{
  font-family: "Roboto" !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0px !important;
  color: #8A8A8A !important;
  margin-bottom: 0px !important;
}

.contenedor-tab-nav .span-credito{
  font-family: "Roboto" !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0px !important;
  color:#4A4A4A !important;
}
/* Add more padding on larger screens */
@media (min-width: 576px) {
    .contenedor-tab-nav .nav-tabs .nav-link {
        padding: 0.75rem 1rem !important;
    }
}


.contenedor-tab-nav .progress-circle2 {
  width: 24px!important;
  height: 24px!important;
  border-radius: 50%!important;
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
  color: white!important;
}

.contenedor-tab-nav .completed2 {
  background-color: #0B8578 !important; /* Color verde azulado */
}

.contenedor-tab-nav .pending2 {
  background-color: #B2B2B2!important; /* Color gris */
}

.contenedor-tab-nav .progress-line2 {
  width: 80px !important;
  height: 4px !important;
  margin: 0 0px !important;
  background-image: linear-gradient(to right, #A8B7C7 50%, transparent 50%) !important;
  background-size: 10px 4px !important;
  background-repeat: repeat-x !important;
}

.contenedor-tab-nav .progress-container2 {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}

.span-icono{
  font-size: 16px !important;
}

.contenedor-tab-nav .contenedor-nav-tab-presencial {
  margin-top: 40px !important;
}

.contenedor-tab-nav .contenedor-nav-tab-completa{
  margin-top: 80px !important;
}
.contenedor-tab-nav .contenedor-nav-tab-incompleta{
  margin-top: 40px !important;
}
.contenedor-tab-nav .contenedor-nav-tab-incompleta h5{
  margin-bottom: 0px !important;
}

/* Media Query para pantallas pequeñas (ej. móviles, < 576px) */
@media (max-width: 575.98px) {
    /* Ocultar los iconos dentro de los enlaces de las pestañas */
    .contenedor-tab-nav .nav-tabs .nav-link .material-icons-outlined {
        display: none !important; /* Oculta el icono */
    }

    /* Ajustar padding si es necesario para compensar la ausencia del icono */
    .contenedor-tab-nav .nav-tabs .nav-link {
        padding: 0.75rem 0.5rem !important; /* Reduce padding horizontal en móvil */
        justify-content: center !important; /* Asegura que el texto esté centrado */
    }
}