/* Navbar de progreso del tramite*/ 
/* Add a black background color to the top navigation */
.topnav {
  background-color: #f2f6fb;
  height: 128px;
  position: fixed;
  top: 75px;
  right: 0;
  left: 0;
  display: grid;
  padding: 0 142px; /*Esto dará algo de espacio en los lados*/
  z-index: 1030;
}

.imagen-circular {
  width: 32px;
  height: 32px;
  /* flex-grow: 0; */
}

/* Progreso del topnav para avanzar en el tramite */
.contenedorCircular {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress {
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
}

/* Configuración inicial para escritorio */
.contenedorCircular .progress {
  stroke-dasharray: 0 195;
}

.textos {
  display: flex;
  flex-direction: column; /* Esto hará que los párrafos se apilen verticalmente */
  margin-left: 16px; /* Esto dará algo de espacio entre la imagen y los párrafos */
}

.p-paso{
  font-size: 14px;
  font-family: Roboto-Regular;
  color: #818fa0;
  margin: 0px 0px 4px 0px;
}
.p-identificate{
  font-size: 32px;
  font-family: Roboto-Bold;
  color: #0047ba;
  margin: 4px 0px 0px 0px;
}

/* Contenido principal */
.contenido-principal {
  margin-top: 235px; /* Altura del navbar más la del topnav, ajusta según sea necesario */
}

#titulo{
  font-family: Roboto-Regular;
  width: 100%;
  margin-bottom: 0px;
  padding-bottom: 32px;
  font-size: 24px;
  color: #333333;
  box-shadow: inset 0 -1px 0 0 #e5edf8;
}
/* Fin progreso del topnav para avanzar en el tramite */

.estiloPaso{
  font-family: Roboto-Regular;
}
.estiloTituloPaso{
  font-family: Roboto-Medium;
}

/* boton de ayuda */
.btn-ayuda{
  height: 44px;
  width: 120px;
  font-size: 16px; 
  padding: 0px;
  border: solid 1px #afc8f0;
  background-color: transparent;
}
.btn-ayuda:hover{
  background-color: transparent;
}
.btn-ayuda:active{
  background-color: transparent;
}
/* fin de boton de ayuda */


@media (max-width: 576px) {

  .topnav {
    height: 80px;
  }
  
  .contenido-principal {
    margin-top: 179px; /* Altura del navbar más la del topnav, ajusta según sea necesario */
  }

  .ajusteColumna{
    width: 50%;
    max-width: none;
  }
  .contenedorIzq{
    padding-right: calc(var(--bs-gutter-x) * 0.5);
  }
  .contenedorDer{
    padding-left: calc(var(--bs-gutter-x) * 0.5);;
  }
  /* input */

  /* .form-floating .form-control{
    width: 343px;
  } */

  /* fin de input */


  /* inicio contenedorFormEscribirDatosManual */
  .contenedorFormEscribirDatosManual{
    padding-left: 0px;
    padding-right: 0px;
  }
  /* fin formEscribirDatosManual */

    .contenedorOpcion {
      height: 99px;
      width: 100%;
  }

  .topnav {
    height: 80px;
    padding: 19px 16px;
  }
  .p-paso{
    font-size: 12px;
    margin: 0px 0px 2px 0px;
  }
  .p-identificate{
    font-size: 20px;
    margin: 2px 0px 0px 0px;
  }

  /* Progreso del topnav para avanzar en el tramite */
  /* para pantallas 576px */
  .imagen-circular {
    width: 24px;
    height: 24px;
  }

  .contenedorCircular {
    width: 48px;
    height: 48px;
  }

  .circular-container {
    width: 48px;
    height: 48px;
  }

  .contenedorCircular .progress {
    stroke-dasharray: 0 195;
    /* stroke-dasharray: 0 150.8; */
  }
  /* Fin Progreso del topnav para avanzar en el tramite */

  .tooltip-clave, .tooltip-curp {
    display: flex;
    justify-content: center;
    padding-bottom: 8px;
  }

  #titulo{
    font-size: 20px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 24px;
  }

  .btn-ayuda{
    height: 24px;
    width: 61px;
    font-size: 12px; 
    padding: 0px;
    margin-bottom: 30px;
    border: solid 1px #afc8f0;
    background-color: transparent;
  }
}