/*
	  Este CSS se encarga de:
Mejorar la interacción del usuario en menús y botones.
Mostrar mensajes de error y estados de carga.
Animar elementos como spinner y puntos parpadeantes.
Estilizar formularios de teléfono con selector de país y banderas.
Crear un fondo de partículas animado y un mensaje de carga.
Ajustar el logo y el fondo general de la página.
	  */
         /*--------------------*/
         .nav-user .user-dropdown li:hover {
         background-color: #f8f9fa;
         }
         .nav-user .user-dropdown a {
         transition: background 0.2s;
         }
         /*--------------------*/
         .error-message {
         color: red;
         font-size: 0.9em;
         margin-top: 4px;
         }
         /* Cargando paises */
         .hidden-on-load {
         visibility: hidden;
         }
         .spinner {
         width: 14px;
         height: 14px;
         border: 2px solid #ccc;
         border-top-color: #555;
         border-radius: 50%;
         display: inline-block;
         animation: spin 0.6s linear infinite;
         margin-left: 8px;
         vertical-align: middle;
         }
         @keyframes spin {
         to {
         transform: rotate(360deg);
         }
         }
         /* Cuando está cargando */
         #sendBtn.loading {
         pointer-events: none;
         }
         /* El texto del botón */
         #sendBtn .loading-text {
         display: inline-block;
         }
         /* Puntos animados */
         #sendBtn .dots span {
         opacity: 0;
         animation: blink 1.2s infinite;
         animation-fill-mode: both;
         color: #fff;
         }
         /* Delay progresivo para cada punto */
         #sendBtn .dots span:nth-child(1) { animation-delay: 0s; }
         #sendBtn .dots span:nth-child(2) { animation-delay: 0.2s; }
         #sendBtn .dots span:nth-child(3) { animation-delay: 0.4s; }
         @keyframes blink {
         0%   { opacity: 0; }
         50%  { opacity: 1; }
         100% { opacity: 0; }
         }
         /* Estado normal del botón, btn interactivo Enviar cotizacion */
         .phone-input-container {
         display: flex;
         align-items: center;
         gap: 8px;
         width: 100%;
         flex-wrap: nowrap;
         overflow: hidden;
         box-sizing: border-box;
         position: relative;
         min-height: 58px; /* reserva espacio desde el inicio */
         }         .custom-select {
         display: flex;
         align-items: center;
         gap: 6px;
         flex-shrink: 0;
         }
         .flag-img {
         width: 24px;
         height: 16px;
         border: 1px solid #ccc;
         border-radius: 2px;
         }
         .country-selector {
         padding: 0.75rem 1rem;
         border: 1px solid #ccc;
         border-radius: 4px;
         background-color: white;
         font-size: 1rem;
         width: 121px;
         flex-shrink: 0;
         }
         .phone-number {
         padding: 0.75rem 1rem;
         border: 1px solid #ccc;
         border-radius: 4px;
         font-size: 1rem;
         flex: 1 1 auto;
         min-width: 0;
         box-sizing: border-box;
         }
         /* Fondo de partículas animado */
         #particles-js {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         z-index: -1; /* IMPORTANTE: -1 para que esté detrás */
         background: transparent;
         pointer-events: none;
         }
         #loading-message {
         position: absolute;
         inset: 0;
         display: flex;
         justify-content: center;
         align-items: center;
         background: rgba(255,255,255,0.85);
         border: 1px solid #ddd;
         border-radius: 4px;
         z-index: 10;
         font-size: 0.95rem;
         color: #555;
         }
         /* Eleva el contenido principal para que esté sobre las partículas */
         body {
         position: relative;
         z-index: 1;
         background-color: #f5f7fa; /* el mismo fondo que ya usas o quieres mantener */
         }
         .logo {
         height: 90%;              /* la caja del logo ocupa todo el alto del nav */
         display: flex;
         align-items: center;        /* centra la imagen dentro */
         }
         .logo img {
         height: 80%;               /* ahora sí, el logo toma todo el alto del nav */
         }