html, body {
            font-family: 'Arial', sans-serif;
            background-color: #e9ecef;
            margin: 0;
            padding: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .navbar {
            background-color: #1f2833;
            border: none;
        }

        .navbar-brand {
            color: #B22222 !important;
            font-weight: bold;
        }

        .navbar-nav li a {
             background-color: #1f2833;
            color: #D70040 !important;
        }
        
        /* Estilo para el elemento activo en el menú */
        .navbar .nav li.active > a {
            background-color: #000000;  /* Color de fondo igual al de la navbar */
            color: #B22222; /* Color del texto */
        }

        .navbar .nav li.active > a:hover {
            background-color: #000000;  /* Mantener el fondo igual al de la navbar */
            color: #D70040; /* Mantener el color de texto */
        }


        .hero-section {
            background: linear-gradient(135deg, #B22222 , #000000);
            color: white;
            padding: 100px 20px;
            text-align: center;
            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
        }

        .hero-section h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
        }
        
        .hero-section p {
            font-size: 1.5rem;
            margin-bottom: 30px;
        }

        .section {
            padding: 50px 20px;
            background-color: white;
            margin: 30px 0;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .content {
            flex: 1;
        }

        .footer {
            background-color: #1f2833;
            color: #c5c6c7;
            padding: 20px 0;
            text-align: center;
        }

        .footer p {
            margin: 0;
        }

        .btn-primary {
            background-color: #D70040;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            transition: transform 0.2s, background-color 0.3s;
        }

        .btn-primary:hover {
            background-color: #C21807;
            transform: scale(1.05);
        }
        /* Asegurar que las imágenes abarquen el 100% del ancho y mantengan una altura proporcional */

        .carousel-inner .item img {
            width: 100%;
            height: auto; /* Permite que la altura sea proporcional al ancho */
            max-height: 500px; /* Limita la altura máxima para evitar que la imagen sea demasiado alta */
            object-fit: contain; /* Asegura que la imagen se ajuste completamente sin recortes */
        }

        /* Opcional: Fondo colorido para el carrusel */
        .carousel-inner {
            background-color: #333; /* Fondo oscuro en caso de que las imágenes no carguen o sean demasiado pequeñas */
        }

        /* Modal */
        .modal {
          display: flex;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(255, 255, 255, 1); /* Fondo blanco */
          z-index: 1050;
          justify-content: center;
          align-items: center;
          height: 100vh; /* Asegura que cubra toda la pantalla */
          width: 100vw;  /* Ocupa el 100% del ancho de la pantalla */
          opacity: 1;
          transition: opacity 1s ease-out; /* Efecto de desvanecimiento del modal */
        }

        /* Animación del logo */
        .logo-modal {
          width: 150px; /* Tamaño inicial del logo */
          height: auto;
          opacity: 1;
          transition: all 2s ease-in-out; /* Transición para expandir y desvanecer */
          transition-delay: 0.5s; /* Espera un poco antes de comenzar la animación */
          object-fit: contain; /* Mantener la relación de aspecto */
        }

        /* Estilo para que el logo ocupe toda la pantalla */
        .logo-modal.expand {
          width: 100vw;  /* Ocupa el 100% del ancho de la pantalla */
          height: 100vh; /* Ocupa el 100% de la altura de la pantalla */
          opacity: 0; /* Hace que el logo se desvanezca */
        }



    .plan-container {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    .plan-table {
        width: 80%;
        max-width: 600px;
        border-collapse: collapse;
        background: #000;
        color: #B22222;
        font-size: 18px;
    }

    .plan-table th, .plan-table td {
        padding: 12px;
        border: 1px solid #B22222;
        text-align: center;
    }

    .plan-table th {
        background: #B22222;
        color: #000;
    }

    .plan-table tr:hover {
        background: rgba(255, 0, 0, 0.2);
    }

    .horario-container {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    .horario-card {
        background: black;
        color: #B22222;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
        width: 250px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    .horario-card i {
        font-size: 50px;
        margin-bottom: 10px;
    }

    .horario-card h3 {
        font-size: 1.8em;
        margin: 10px 0;
    }

    .horario-card p {
        font-size: 1.5em;
        font-weight: bold;
    }

    .cerrado {
        background: red;
        color: white;
    }

    .cerrado i {
        color: white;
    }
.select2-container {
    z-index: 9999 !important; /* más alto que el modal */
}

.select2-dropdown {
    z-index: 99999 !important; /* dropdown sobre el modal */
}