/* --- ESTILOS PARA LA ANIMACIÓN DEL CAMIÓN (sin cambios) --- */
/* (El resto de tu CSS para la animación del camión va aquí) */
.loader { width: fit-content; height: fit-content; display: flex; align-items: center; justify-content: center; }
.truckWrapper { width: 200px; height: 100px; display: flex; flex-direction: column; position: relative; align-items: center; justify-content: flex-end; overflow-x: hidden; }
.truckBody { width: 130px; height: fit-content; margin-bottom: 6px; animation: motion 1s linear infinite; }
@keyframes motion { 0% { transform: translateY(0px); } 50% { transform: translateY(3px); } 100% { transform: translateY(0px); } }
.truckTires { width: 130px; height: fit-content; display: flex; align-items: center; justify-content: space-between; padding: 0px 10px 0px 15px; position: absolute; bottom: 0; }
.truckTires svg { width: 24px; }
.road { width: 100%; height: 1.5px; background-color: #282828; position: relative; bottom: 0; align-self: flex-end; border-radius: 3px; }
.road::before { content: ""; position: absolute; width: 20px; height: 100%; background-color: #282828; right: -50%; border-radius: 3px; animation: roadAnimation 1.4s linear infinite; border-left: 10px solid white; }
.road::after { content: ""; position: absolute; width: 10px; height: 100%; background-color: #282828; right: -65%; border-radius: 3px; animation: roadAnimation 1.4s linear infinite; border-left: 4px solid white; }
.lampPost { position: absolute; bottom: 0; right: -90%; height: 90px; animation: roadAnimation 1.4s linear infinite; }
@keyframes roadAnimation { 0% { transform: translateX(0px); } 100% { transform: translateX(-350px); } }

/* CSS para que el loader de SweetAlert2 sea un cuadrado perfecto */
.swal2-popup.square-loader {
    /* Definimos el tamaño del cuadrado */
    width: 260px !important;
    height: 250px !important;

    /* Usamos flexbox para centrar perfectamente el contenido */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Este ajuste sigue siendo bueno para asegurar que no haya otros márgenes */
.swal2-popup.square-loader .swal2-html-container {
    margin: 0 !important;
}

/* Reduce el tamaño y espacio del título para el loader cuadrado */
.swal2-popup.square-loader .swal2-title {
    font-size: 1.25em !important;      /* Hacemos la letra más pequeña */
    margin: 0 0 0.5em !important;    /* Reducimos el espacio de abajo */
    color: #6c757d !important;       /* Un color más suave para que sea menos llamativo */
}

/* Estilos para el modal de "Gracias" */
.swal2-popup.thank-you-swal {
    width: auto;
    max-width: 600px; /* Un ancho más apropiado para el contenido */
    padding: 2em !important;
}

.thank-you-swal .logo-img {
    max-width: 120px;
    height: auto;
    margin: 0 auto 1rem;
}

.thank-you-swal .display-4 {
    color: #F29F05; /* Naranja */
    font-size: 2.5rem;
    font-weight: 600;
}

.thank-you-swal .btn-custom-primary {
    background-color: #F29F05;
    border-color: #F29F05;
    color: white;
    transition: background-color 0.2s ease-in-out;
}
.thank-you-swal .btn-custom-primary:hover {
    background-color: #d98e04;
    border-color: #d98e04;
    color: white;
}