/* css/modal_micuenta.css */

/* Spinner estilo Apple (iOS) */
.ios-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  position: relative;
}
.ios-spinner div {
  transform-origin: 20px 20px;
  animation: ios-spinner 1.2s linear infinite;
}
.ios-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 18.5px;
  width: 3px;
  height: 9px;
  border-radius: 20%;
  background: #a3a3a3;
}
.ios-spinner div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; }
.ios-spinner div:nth-child(2) { transform: rotate(30deg); animation-delay: -1s; }
.ios-spinner div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s; }
.ios-spinner div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s; }
.ios-spinner div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s; }
.ios-spinner div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s; }
.ios-spinner div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s; }
.ios-spinner div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s; }
.ios-spinner div:nth-child(9) { transform: rotate(240deg); animation-delay: -0.3s; }
.ios-spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; }
.ios-spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; }
.ios-spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; }

@keyframes ios-spinner {
  0% { opacity: 1; }
  100% { opacity: 0.15; }
}
/* ESTILOS PARA EL TEXTO CIRCULAR Y LOGO (MODAL 3) */
.circular-logo-container {
    position: relative;
    width: 250px; /* Tamaño del contenedor */
    height: 250px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circular-text-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* animation: rotateText 15s linear infinite; */ /* Descomenta si quieres que gire */
}

.circular-text-svg text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 900; /* Letra más gruesa */
    fill: #ffffff; /* Color blanco forzado */
    letter-spacing: 3px; /* Espaciado entre letras */
}

.center-logo-p {
    position: relative;
    width: 110px; /* Ajusta el tamaño de la P aquí */
    height: auto;
    z-index: 10;
}

@keyframes rotateText {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}