/* ==========================================
   ESTADOS DE CARGA Y ÉXITO (Registro API)
   ========================================== */

.carga-estado,
.exito-estado {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background: transparent;
   z-index: 20;
   opacity: 0;
   transition: opacity 0.5s ease;
   text-align: center;
   color: #fff;
}

.carga-estado.activa,
.exito-estado.activa {
   opacity: 1;
}

/* Spinner de carga */
.spinner {
   width: 60px;
   height: 60px;
   border: 5px solid rgba(255, 255, 255, 0.1);
   border-top-color: var(--colorAcento, #3AB397);
   border-radius: 50%;
   animation: girar 1s linear infinite;
   margin-bottom: 20px;
}

@keyframes girar {
   to {
      transform: rotate(360deg);
   }
}

.carga-estado p {
   font-size: 1.2rem;
   font-family: Arial, sans-serif;
   color: #a3a7b5;
   letter-spacing: 1px;
}

/* Animación del Checkbox de Éxito */
.check-container {
   margin-bottom: 25px;
   display: flex;
   justify-content: center;
   width: 100%;
}

.checkmark {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   display: block;
   stroke-width: 3;
   stroke: var(--colorAcento, #3AB397);
   stroke-miterlimit: 10;
   box-shadow: inset 0px 0px 0px var(--colorAcento, #3AB397);
   animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__circle {
   stroke-dasharray: 166;
   stroke-dashoffset: 166;
   stroke-width: 3;
   stroke-miterlimit: 10;
   stroke: var(--colorAcento, #3AB397);
   fill: none;
   animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
   transform-origin: 50% 50%;
   stroke-dasharray: 48;
   stroke-dashoffset: 48;
   animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

@keyframes stroke {
   100% {
      stroke-dashoffset: 0;
   }
}

@keyframes scale {

   0%,
   100% {
      transform: none;
   }

   50% {
      transform: scale3d(1.1, 1.1, 1);
   }
}

@keyframes fill {
   100% {
      box-shadow: inset 0px 0px 0px 40px rgba(58, 179, 151, 0.1);
   }
}

/* Textos de Éxito */
.exito-estado h2 {
   font-size: 2.5rem;
   margin-bottom: 15px;
   color: var(--colorAcento, #3AB397);
   text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.exito-estado p {
   font-size: 1.1rem;
   font-family: Arial, sans-serif;
   color: #e0e0e0;
   max-width: 500px;
   line-height: 1.6;
   margin-bottom: 40px;
}

.exito-estado strong {
   color: #fff;
   font-size: 1.2rem;
}

/* Botones de Éxito */
.opciones-ticket {
   display: flex;
   gap: 20px;
}

.btn-ver,
.btn-imprimir {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 15px 35px;
   font-size: 1.1rem;
   font-weight: bold;
   border-radius: 30px;
   cursor: pointer;
   transition: transform 0.3s, box-shadow 0.3s;
   border: none;
}

.btn-ver {
   background: var(--colorAcento, #3AB397);
   color: #111;
   box-shadow: 0 5px 15px rgba(58, 179, 151, 0.3);
}

.btn-ver:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 25px rgba(58, 179, 151, 0.5);
}

.btn-imprimir {
   background: rgba(255, 255, 255, 0.1);
   color: #fff;
   border: 1px solid rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(5px);
}

.btn-imprimir:hover {
   background: rgba(255, 255, 255, 0.2);
   transform: translateY(-3px);
}