:root {
			/* Paleta institucional Veolia (referencia trámites / imagen) */
			--veolia-rojo: #E5002C;
			--veolia-rojo-oscuro: #C40024;
			--veolia-rojo-suave: #FDE8EC;
			--veolia-rojo-borde: #F5B3BE;
			--veolia-gris-marquesina: #2A2B2A;
			--veolia-texto-titulos: #2A2B2A;
			--veolia-texto-secundario: #5c656b;
			--color-oscuro: #2A2B2A;
			/* Alias: el turquesa institucional se reemplaza por el rojo corporativo */
			--veolia-turquesa: var(--veolia-rojo);
		}

		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}

		body {
			background: #ffffff;
			background-image:
				radial-gradient(ellipse at top left, rgba(229, 0, 44, 0.06) 0%, transparent 45%),
				radial-gradient(ellipse at bottom right, rgba(229, 0, 44, 0.05) 0%, transparent 40%);
			font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
			color: var(--color-oscuro);
			display: flex;
			flex-direction: column;
		}

		/* --- HEADER CORPORATIVO --- */
		.navbar-corporativa {
			background-color: #ffffff;
			border-bottom: 4px solid var(--veolia-rojo);
			box-shadow: 0 4px 12px rgba(42, 43, 42, 0.06);
			flex-shrink: 0;
			height: 65px;
			display: none;
			align-items: center;
		}
		
		.header-layout {
			display: grid;
			grid-template-columns: 1fr auto 1fr;
			align-items: center;
			width: 100%;
		}
		
		.header-left { justify-self: start; }
		.header-center { justify-self: center; }
		.header-right { justify-self: end; }

		.logo-empresa { max-height: 42px; width: auto; }
		#sedeTitulo { color: var(--veolia-texto-titulos); letter-spacing: -0.5px; }

		.user-badge {
			background-color: var(--veolia-rojo-suave);
			color: var(--veolia-rojo);
			font-weight: 600;
			border: 1px solid var(--veolia-rojo-borde);
			border-radius: 20px;
			padding: 0.5rem 1rem !important;
		}

		/* --- MARQUESINA --- */
		.marquesina-horarios {
			background-color: var(--veolia-gris-marquesina);
			color: #ffffff;
			font-weight: 500;
			font-size: 0.88rem;
			padding: 7px 0;
			letter-spacing: 0.3px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.12);
		}

		/* --- LOGO MÓVIL --- */
		.mobile-logo-container {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 1rem;
			flex-shrink: 0;
		}
		.logo-empresa-mobile { max-height: 50px; width: auto; filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.12)); }

		/* --- CONTENEDOR PRINCIPAL --- */
		.main-container {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 1rem;
			height: 100%;
			overflow: hidden;
		}

		.wrapper-formulario {
			background: #ffffff;
			border-radius: 12px;
			padding: 3px;
			background: linear-gradient(135deg, var(--veolia-rojo) 0%, var(--veolia-rojo-oscuro) 100%);
			box-shadow: 0 15px 40px rgba(229, 0, 44, 0.16);
			width: 100%;
			max-width: 610px;
		}

		.card-formulario {
			border: none;
			border-radius: 10px;
			background: #ffffff;
			width: 100%;
		}

		.form-control-custom {
			padding: 0.5rem 0.75rem;
			font-size: 0.95rem;
			border-radius: 6px;
			border: 1.5px solid #e2e8f0;
			transition: all 0.2s ease-in-out;
		}
		.form-control-custom:focus, .form-select:focus {
			border-color: var(--veolia-rojo);
			box-shadow: 0 0 0 0.25rem rgba(229, 0, 44, 0.18);
			outline: none;
		}

		/* Clases de estado que requiere tu script original para no generar NullPointer */
		.formulario__grupo-incorrecto .form-control-custom {
			border-color: #bb2d3b !important;
		}
		.formulario__grupo-correcto .form-control-custom {
			border-color: #157347 !important;
		}

		/* Botón principal institucional */
		.btn-primario-cl {
			background-color: var(--veolia-rojo);
			border-color: var(--veolia-rojo);
			color: #ffffff;
			font-weight: 700;
			letter-spacing: 0.5px;
			padding: 0.65rem 1.5rem;
			border-radius: 6px;
			transition: all 0.25s ease;
			box-shadow: 0 4px 12px rgba(229, 0, 44, 0.22);
		}
		.btn-primario-cl:hover:not([disabled]) {
			background-color: var(--veolia-rojo-oscuro);
			border-color: var(--veolia-rojo-oscuro);
			color: #ffffff;
			transform: translateY(-1px);
		}
		.btn-primario-cl:disabled {
			background-color: #cbd5e1;
			border-color: #cbd5e1;
			color: #64748b;
			box-shadow: none;
			cursor: not-allowed;
		}

		/* Autocompletado de barrio */
		.barrio-autocomplete {
			position: relative;
		}
		.barrio-sugerencias {
			display: none;
			position: absolute;
			left: 0;
			right: 0;
			top: calc(100% + 4px);
			z-index: 30;
			max-height: 180px;
			overflow-y: auto;
			margin: 0;
			padding: 0;
			list-style: none;
			background: #ffffff;
			border: 1.5px solid #e2e8f0;
			border-radius: 6px;
			box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
		}
		.barrio-sugerencias.show { display: block; }
		.barrio-sugerencias li {
			padding: 0.55rem 0.75rem;
			font-size: 0.92rem;
			color: #334155;
			cursor: pointer;
			border-bottom: 1px solid #f1f5f9;
		}
		.barrio-sugerencias li:last-child { border-bottom: none; }
		.barrio-sugerencias li:hover,
		.barrio-sugerencias li.active {
			background: var(--veolia-rojo-suave);
			color: var(--veolia-rojo);
		}
		.barrio-sugerencias li.barrio-sin-resultados {
			cursor: default;
			color: #94a3b8;
			font-style: italic;
		}
		.barrio-sugerencias li.barrio-sin-resultados:hover {
			background: transparent;
			color: #94a3b8;
		}
		#barrioBusqueda.barrio-seleccionado {
			border-color: #157347;
			background-color: rgba(21, 115, 71, 0.04);
		}

		.form-check.border {
			border-color: var(--veolia-rojo-borde) !important;
			background-color: var(--veolia-rojo-suave) !important;
		}
		.form-check-input:checked {
			background-color: var(--veolia-rojo);
			border-color: var(--veolia-rojo);
		}
		.form-check-input:focus {
			border-color: var(--veolia-rojo);
			box-shadow: 0 0 0 0.2rem rgba(229, 0, 44, 0.2);
		}

		.link-institucional {
			color: var(--veolia-rojo) !important;
		}
		.link-institucional:hover {
			color: var(--veolia-rojo-oscuro) !important;
		}

		@media (min-width: 769px) {
			.navbar-corporativa { display: flex; }
			.mobile-logo-container { display: none; }
			.main-container { height: calc(100vh - 65px - 36px); }
		}
		@media (max-width: 768px) {
			.navbar-corporativa { display: none; }
			.mobile-logo-container { display: flex; }
			.wrapper-formulario { padding: 3px; }
			.card-formulario { padding: 1.25rem !important; }
			h2 { font-size: 1.35rem; }
			.form-label { font-size: 0.85rem; }
		}
		/* ANIMACIÓN DE CARGA */
.page-loading-1 {
	visibility: hidden;
}
.page-loading {
	visibility: visible;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 999;
	backdrop-filter: blur(3px) saturate(200%);
    -webkit-backdrop-filter: blur(3px) saturate(200%);
    background-color: rgba(255, 255, 255, 0.45);	
  }
  
  .three-balls {
	margin: 0 auto;
	width: 70px;
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	top: 45%;
  }
  
  .three-balls .ball {
	position: relative;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	display: inline-block;
	background-color: var(--veolia-rojo);
	-webkit-animation: bouncedelay 2.0s infinite cubic-bezier(.62, .28, .23, .99) both;
	animation: bouncedelay 2.0s infinite cubic-bezier(.62, .28, .23, .99) both;
  }
  
  .three-balls .ball1 {
	-webkit-animation-delay: -.16s;
	animation-delay: -.16s;
  }
  
  .three-balls .ball2 {
	-webkit-animation-delay: -.08s;
	animation-delay: -.08s;
  }

@keyframes bouncedelay {
	0%, 80%, 100% { transform: scale(0.6); opacity: 0.55; }
	40% { transform: scale(1); opacity: 1; }
}
.marquesina-reloj,
.marquesina-aviso-icon {
	color: var(--veolia-rojo);
}
#tituloFormulario {
	color: var(--veolia-rojo);
}
#subtituloFormulario {
	color: var(--veolia-texto-secundario);
}
#cbox1 {
	width: 1.1rem;
	height: 1.1rem;
}