/* já existia */
.spinner-container {
    position: fixed;
    background-color: rgba(58, 58, 58, 0.836);
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    z-index: 2000;
}

/* NOVO: equivalente a "relative flex items-center justify-center" */
.spinner-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* NOVO: equivalente a 
   "absolute w-40 h-40 border-4 border-gray-200 rounded-full animate-spin" */
.spinner-circle {
    position: absolute;
    width: 10rem;           /* w-40 */
    height: 10rem;          /* h-40 */
    border-width: 4px;      /* border-4 */
    border-style: solid;
    border-color: #e5e7eb;  /* gray-200 */
    border-radius: 9999px;  /* rounded-full */
    animation: spinner-spin 1s linear infinite; /* animate-spin */
}

/* já existia, continua valendo para "border-t-blue" */
.border-t-blue {
    border-top-color: #002069;
}

/* NOVO: animação equivalente ao animate-spin do Tailwind */
@keyframes spinner-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}