.audio-recording-container
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.start-recording-button:hover
{
    color: #1fa5bb;
}
.start-recording-button.active:hover,.start-recording-button.active
{
    color: var(--bs-red);
}
i.fa.fa-play
{
    padding: 0 0.3rem;
}
.start-recording-button {
  display: inline-flex;          /* para poder centrar el icono */
  align-items: center;
  justify-content: center;

  width: 80px;                   /* ancho del área táctil */
  height: 80px;                  /* alto del área táctil */
  padding: 10px;                  /* espacio extra por si el icono no ocupa todo */
  
  font-size: 60px;               /* tamaño del icono */
  color: #7c7c7c;
  border-radius: 50%;            /* si quieres círculo */
  background: #f5f5f5;           /* opcional, contraste para probar */
  cursor: pointer;

  touch-action: none;            /* evita gestos de scroll/zoom sobre el botón */
}

.recording-contorl-buttons-container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.5rem 0;

}
.recording-contorl-buttons-container.hide
{
    display: none;
}

.recording-elapsed-time
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.red-recording-dot {
    font-size: 21px;
    color: var(--bs-red);
    /*transitions with Firefox, IE and Opera Support browser support*/
    animation-name: flashing-recording-dot;
    -webkit-animation-name: flashing-recording-dot;
    -moz-animation-name: flashing-recording-dot;
    -o-animation-name: flashing-recording-dot;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
}
.elapsed-time
{
    margin: 0;
    font-size: 21px;
}

.audio-element.hide
{
    display: none;
}

.card-loading
{
    background: #00000030;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fonetica {
    /*font-size: 85%;      Hace el texto un 15% más pequeño */
    font-style: italic; /* Aplica cursiva al texto */
    color: green;     /* Cambia el color del texto a verde */
    margin-bottom: 0;   /* Elimina el margen inferior */
    line-height: .9;   /* Ajusta el espaciado de línea */
}

{
    background: #00000030;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lds-dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
  }
  .lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2s linear infinite;
  }

@keyframes flashing-recording-dot {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes flashing-recording-dot {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes flashing-recording-dot {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes flashing-recording-dot {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


  @keyframes lds-dual-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }