body {
     font-family: 'Inter', sans-serif;
     background: linear-gradient(135deg, #f0f4ff, #e8ecf7);
     min-height: 100vh;
     padding: 2rem 0;
 }

 .card-modern {
     background: #fff;
     border-radius: 1.5rem;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
     padding: 2rem;
     transition: transform .2s ease;
 }

 .card-modern:hover {
     transform: translateY(-4px);
 }

 .header-event {
     background: linear-gradient(90deg, #3450a1, #1a73e8);
     color: #fff;
     border-radius: 1.5rem;
     padding: 2rem;
     margin-bottom: 1.5rem;
     display: flex;
     align-items: center;
     gap: 1.5rem;
     box-shadow: 0 5px 15px rgba(26, 115, 232, 0.2);
 }

 .header-event img {
     height: 90px;
     width: 90px;
     border-radius: 1rem;
     object-fit: cover;
 }

 .form-control,
 .form-select {
     border-radius: 0.75rem;
     border: 1px solid #d0d5dd;
     padding: 0.75rem 1rem;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }

 .form-control:focus,
 .form-select:focus {
     border-color: #1a73e8;
     box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
 }

 label.form-label {
     font-weight: 600;
     color: #2d3748;
 }

 button.btn-submit {
     background: linear-gradient(90deg, #1a73e8, #3450a1);
     color: #fff;
     border: none;
     padding: 0.9rem;
     font-weight: 600;
     border-radius: 0.75rem;
     transition: background 0.3s ease, transform 0.2s ease;
 }

 button.btn-submit:hover {
     background: linear-gradient(90deg, #3450a1, #1a73e8);
     transform: translateY(-2px);
 }

 footer {
     text-align: center;
     color: #6b7280;
     margin-top: 3rem;
 }

 footer span {
     font-weight: 600;
     color: #1a73e8;
 }

 /* 🔧 Centrar el texto dentro del select2 */
 /* Ajustes para mantener el estilo moderno de tus inputs */
 .select2-container--bootstrap-5 .select2-selection {
     border-radius: 0.75rem !important;
     border: 1px solid #d0d5dd !important;
     padding: 0.6rem 0.75rem !important;
     transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
     min-height: 45px !important;
 }

 .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
     color: #495057 !important;
     line-height: 1.5 !important;
 }

 .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
     height: 100% !important;
 }

 .select2-container--bootstrap-5.select2-container--focus .select2-selection {
     border-color: #1a73e8 !important;
     box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2) !important;
 }

 /* Sombra en hover */
 .select2-container--bootstrap-5 .select2-selection:hover {
     border-color: #1a73e8 !important;
 }

 .select2-container--bootstrap-5 .select2-selection--single {
     display: flex !important;
     align-items: center !important;
     height: 45px !important;
     padding: 0 0.75rem !important;
 }

 /* 🔧 Ajustar el texto renderizado dentro */
 .select2-container--bootstrap-5 .select2-selection__rendered {
     line-height: normal !important;
     padding-left: 0 !important;
     color: #495057 !important;
     font-size: 0.95rem !important;
 }

 /* 🔧 Ajustar el ícono de cierre (la X) */
 .select2-container--bootstrap-5 .select2-selection__clear {
     font-size: 1.1rem !important;
     margin-right: 5px !important;
     color: #6c757d !important;
     opacity: 0.7 !important;
     transition: color 0.2s ease, opacity 0.2s ease;
 }

 .select2-container--bootstrap-5 .select2-selection__clear:hover {
     color: #1a73e8 !important;
     opacity: 1 !important;
 }

 /* 🔧 Corrige altura general del contenedor */
 .select2-container .select2-selection--single {
     height: 45px !important;
 }

 /* 🔧 Quitar ese salto de línea visual */
 .select2-container .select2-selection__rendered {
     padding-top: 0 !important;
     padding-bottom: 0 !important;
 }

 /* 🔹 Color al pasar el mouse sobre una opción */
 .select2-container--bootstrap-5 .select2-results__option--highlighted {
     background-color: #1a73e8 !important;
     /* color de fondo al hover */
     color: #fff !important;
     /* color del texto */
 }

 /* 🔹 Color al hacer clic o al tener la opción seleccionada */
 .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
     background-color: #0b57d0 !important;
     /* color al seleccionar */
     color: #fff !important;
 }

 /* 🔹 (Opcional) bordes redondeados dentro del menú */
 .select2-container--bootstrap-5 .select2-results__option {
     border-radius: 8px;
     margin: 2px;
     transition: background-color 0.2s ease;
 }

 /* 🔹 Limita la altura del dropdown y habilita scroll */
 .select2-container--bootstrap-5 .select2-results>.select2-results__options {
     max-height: 180px;
     /* ajusta la altura visible */
     overflow-y: auto;
     /* scroll vertical */
 }

 /* (Opcional) Estilo del scrollbar */
 .select2-container--bootstrap-5 .select2-results>.select2-results__options::-webkit-scrollbar {
     width: 6px;
 }

 .select2-container--bootstrap-5 .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
     background-color: #ccc;
     border-radius: 3px;
 }

 .select2-container--bootstrap-5 .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover {
     background-color: #999;
 }