.bg-textureFondo {
    background-image: url('../images/inicio/Texturas.png');
}



body {
    margin: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}


.is-valid {
    border-color: #28a745 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.is-invalid {
    border-color: #dc3545 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

.is-invalid ~ .invalid-feedback {
    display: block;
}

.was-validated .form-control:invalid, 
.was-validated .form-control:invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}


.image-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .upload-box {
    width: 250px;
    height: 250px;
    border: 2px dashed #ccc;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #888;
    cursor: pointer;
    position: relative;
    text-align: center;
    background-color: #f8f9fa;
    transition: background-color 0.2s ease;
    overflow: hidden;
  }

  .upload-box:hover {
    background-color: #e9ecef;
  }

  .upload-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
  }

  .upload-box input[type="file"] {
    display: none;
  }

  .plus-icon {
    font-size: 3rem;
    line-height: 1;
  }

  .remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
  }

  .remove-btn i {
    font-size: 1.3rem;
    color: red;
  }


  .hover-cell {
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.7);
    text-shadow: 1px 1px 2px black;
}

.hover-cell:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1;
    position: relative;
}

/* Para celdas con eventos */
.bg-success, .bg-warning, .bg-info {
    opacity: 0.9;
    font-weight: bold;
    
    /*background-color: #39A900 !important;*/

    
}

.bg-verde-personalizado {
    background-color: #39A900 !important;
}

.bg-verde-secundario {
    background-color: #007832 !important;
}

.bg-naranja {
    background-color: #FDC300 !important;
}

.bg-morado {
    background-color: #71277A !important;
}


  #calendario {
    width: 95%; 
    max-width: 1400px; 
    margin: 40px auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

#calendario th, #calendario td {
    border: 1px solid #ccc;
    padding: 28px; 
    text-align: center;
    font-size: 1.4rem; 
    background-color: rgba(255, 255, 255, 0.514);
}

#calendario th {
    background-color: rgba(56, 169, 0, 0.534);
    color: white;
    font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
    #calendario {
        width: 100%;
        font-size: 1rem;
    }

    #calendario th, #calendario td {
        padding: 14px;
    }
}



/* Termina */

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}

.h-screen {
    height: 100vh;
}

.bg-gray-800 {
    background-color: #2d3748; /* Gray-800 */
}

.bg-gray-200 {
    background-color: #edf2f7; /* Gray-200 */
}

.p-4 {
    padding: 1rem;
}

.text-white {
    color: white;
}

.text-blue-600 {
    color: #3182ce; /* Blue-600 */
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

/* Estilos específicos para la vista de eventos */
.eventos-container {
    background-color: #f4f4f4; /* Color de fondo específico */
    padding: 20px; /* Espaciado específico */
}

.eventos-title {
    color: #2c3e50; /* Color del título específico */
}

/* Otros estilos específicos para la vista de eventos */





/* Estilos específicos para la vista de horarios */
.horarios-container {
    background-color: #e9ecef; /* Color de fondo específico */
    padding: 20px; /* Espaciado específico */
    border-radius: 8px; /* Bordes redondeados */
}

.horarios-title {
    color: #343a40; /* Color del título específico */
    font-size: 2rem; /* Tamaño de fuente del título */
    margin-bottom: 20px; /* Espaciado inferior */
}

.horarios-table {
    width: 100%; /* Ancho completo */
    border-collapse: collapse; /* Colapsar bordes */
    margin-top: 20px; /* Espaciado superior */
}

.horarios-table th, .horarios-table td {
    border: 1px solid #dee2e6; /* Bordes de las celdas */
    padding: 10px; /* Espaciado interno */
    text-align: center; /* Alinear texto al centro */
}

.horarios-table th {
    background-color: #007bff; /* Color de fondo de los encabezados */
    color: white; /* Color del texto de los encabezados */
}

.horarios-table tr:nth-child(even) {
    background-color: #f2f2f2; /* Color de fondo para filas pares */
}

.horarios-button {
    background-color: #28a745; /* Color de fondo del botón */
    color: white; /* Color del texto del botón */
    padding: 10px 15px; /* Espaciado interno del botón */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambiar cursor al pasar el mouse */
}

.horarios-button:hover {
    background-color: #218838; /* Color de fondo al pasar el mouse */
}


#event-list-sideBar::-webkit-scrollbar {
    width: 8px;
}

#event-list-sideBar::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

#event-list-sideBar::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}


@keyframes slideIn {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    60% {
        transform: translateX(-10%);
        opacity: 1;
    }
    100% {
        transform: translateX(0);
    }
}

.bounce {
    animation: slideIn 0.5s ease forwards;
}

@keyframes slideOut {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%); /* Mueve el sidebar fuera de la pantalla */
        opacity: 0; /* Desvanece el sidebar */
    }
}

.boounce-out {
    animation: slideOut 0.5s ease forwards;
}



/* CALENDARIO */



/* Estilos específicos para la vista de calendario */
.calendar-container {
    background-color: #e9ecef; /* Color de fondo específico */
    padding: 20px; /* Espaciado específico */
    border-radius: 8px; /* Bordes redondeados */
}

.calendar-title {
    color: #343a40; /* Color del título específico */
    font-size: 2rem; /* Tamaño de fuente del título */
    margin-bottom: 20px; /* Espaciado inferior */
    text-align: center; /* Centrar el título */
}

.calendar-table {
    width: 100%; /* Ancho completo */
    border-collapse: collapse; /* Colapsar bordes */
    margin-top: 20px; /* Espaciado superior */
}

.calendar-table th, .calendar-table td {
    border: 1px solid #dee2e6; /* Bordes de las celdas */
    padding: 10px; /* Espaciado interno */
    text-align: center; /* Alinear texto al centro */
}

.calendar-table th {
    background-color: #007bff; /* Color de fondo de los encabezados */
    color: white; /* Color del texto de los encabezados */
}

.calendar-table tr:nth-child(even) {
    background-color: #f2f2f2; /* Color de fondo para filas pares */
}

.calendar-button {
    background-color: #28a745; /* Color de fondo del botón */
    color: white; /* Color del texto del botón */
    padding: 10px 15px; /* Espaciado interno del botón */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambiar cursor al pasar el mouse */
}

.calendar-button:hover {
    background-color: #218838; /* Color de fondo al pasar el mouse */
}

/* Estilo para el contenedor del calendario */
#calendar {
    display: flex;
    flex-direction: column; /* Asegura que los elementos se apilen verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
    margin: 0 auto; /* Centra el contenedor en la página */
}


/* REPORTES  GRAFICAS ESTILOS */
/* estilo.css */


/* Estilos específicos para la vista de reportes y gráficas */
.reportes-container {
    background-color: #ffffff; /* Color de fondo blanco para el contenedor de reportes */
    padding: 20px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    margin-top: 20px; /* Espaciado superior */
}

.reportes-title {
    color: #2c3e50; /* Color del título específico */
    font-size: 2rem; /* Tamaño de fuente del título */
    margin-bottom: 20px; /* Espaciado inferior */
    text-align: center; /* Centrar el título */
}

.reportes-table {
    width: 100%; /* Ancho completo */
    border-collapse: collapse; /* Colapsar bordes */
    margin-top: 20px; /* Espaciado superior */
}

.reportes-table th, .reportes-table td {
    border: 1px solid #dee2e6; /* Bordes de las celdas */
    padding: 10px; /* Espaciado interno */
    text-align: center; /* Alinear texto al centro */
}

.reportes-table th {
    background-color: #007bff; /* Color de fondo de los encabezados */
    color: white; /* Color del texto de los encabezados */
}

.reportes-table tr:nth-child(even) {
    background-color: #f2f2f2; /* Color de fondo para filas pares */
}

.reportes-button {
    background-color: #28a745; /* Color de fondo del botón */
    color: white; /* Color del texto del botón */
    padding: 10px 15px; /* Espaciado interno del botón */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambiar cursor al pasar el mouse */
    margin-top: 10px; /* Espaciado superior */
}

.reportes-button:hover {
    background-color: #218838; /* Color de fondo al pasar el mouse */
}

/* Estilos para gráficas */
.grafica-container {
    background-color: #ffffff; /* Color de fondo blanco para el contenedor de gráficas */
    padding: 20px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    margin-top: 20px; /* Espaciado superior */
}

.grafica-title {
    color: #2c3e50; /* Color del título específico */
    font-size: 2rem; /* Tamaño de fuente del título */
    margin-bottom: 20px; /* Espaciado inferior */
    text-align: center; /* Centrar el título */
}

/* Estilos para el botón de descarga de gráficas */
.grafica-download-button {
    background-color: #007bff; /* Color de fondo del botón de descarga */
    color: white; /* Color del texto del botón */
    padding: 10px 15px; /* Espaciado interno del botón */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambiar cursor al pasar el mouse */
    margin-top: 10px; /* Espaciado superior */
}

.grafica-download-button:hover {
    background-color: #0056b3; /* Color de fondo al pasar el mouse */
}






/* Sidebar */
.sidebar {
    height: calc(100vh - 56px); /* Resta la altura del navbar */
    background-color: #ffffff;
    position: fixed;
    top: 56px; /* Posición debajo del navbar */
    left: 0;
    width: 710px;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    z-index: 999;
    overflow-y: auto; /* Para scroll si el contenido es largo */
}

/* Enlaces en el sidebar */
.sidebar a {
    display: block;
    color: #333;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 18px;
}

.sidebar a:hover {
    background-color: #007bff;
    color: white;
}

/* Contenedor Principal */
.content-area {
    margin-left: 420px; /* Deja espacio para el sidebar */
    padding: 20px;
    margin-bottom: 60px; /* Espacio para que el pie de página no quede pegado */
    transition: margin-left 0.3s;
}

/* Contenedor del Calendario */
.calendar-container {
    width: 100%;
    max-width: 380px; /* Limita el ancho pero mantiene la flexibilidad */
    margin: 0 auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e0e0;
    overflow: hidden; /* Evitar desbordamientos */
}

/* Tabla de Calendario */
.calendar-table {
    width: 100%; /* Ocupa el 100% del contenedor */
    table-layout: fixed; /* Asegura que las celdas no se desborden */
    border-collapse: separate;
    border-spacing: 5px;
}

.calendar-table th {
    background-color: #2ecc71;
    color: white;
    padding: 8px;
    border-radius: 6px;
}

.calendar-table td {
    padding: 8px;
    text-align: center;
    border-radius: 6px;
    transition: background-color 0.3s ease;
    overflow: hidden; /* Evitar que el texto se desborde */
}

.calendar-table td.event-day {
    background-color: #23c233;
    color: white;
    font-weight: bold;
}

/* Navegación del Calendario */
.calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.calendar-nav .btn {
    width: 45px;
    height: 45px;
    font-size: 18px;
}

/* Para suavizar los bordes del calendario */
.calendar-container .table-bordered {
    border-radius: 10px; /* Redondeamos el borde de la tabla */
}

.calendar-container {
    width: 250px; /* Establece un ancho fijo para el calendario */
    margin: 0 auto; /* Centra el calendario dentro de su contenedor */
}
.calendar-table {
    width: 100%; /* Hace que la tabla ocupe el 100% del contenedor, que ahora tiene un ancho fijo */
}

.calendar-table td {
    border-radius: 10px; /* Redondeamos las celdas */
}

.calendar-table th {
    border-radius: 40px 10px 0 0; /* Solo redondeamos los bordes superiores */
    
}

.card-img-top {
    height: 200px;
    object-fit: cover;
}

.card {
    transition: transform 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
}

/* Navbar estilo */
.navbar {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Mejora en los botones */
.btn-outline-primary, .btn-outline-secondary {
    font-weight: 600;
    color: #2c3e50;
}

.btn-personalizado {
    font-weight: 600;
    color: #ffffff;
    background-color: #39A900;
    border: none;
    padding: 0.55rem 1.2rem;
    border-radius: 8px;
    transition: 0.25s ease-in-out;
}

.btn-personalizado-naranja {
    font-weight: 600;
    color: #ffffff;
    background-color: #FDC300;
    border: none;
    padding: 0.55rem 1.2rem;
    border-radius: 8px;
    transition: 0.25s ease-in-out;
}

.btn-personalizado-morado {
    font-weight: 600;
    color: #ffffff;
    background-color: #71277A;
    border: none;
    padding: 0.55rem 1.2rem;
    border-radius: 8px;
    transition: 0.25s ease-in-out;
}

.btn-personalizado-verde-secundario {
    font-weight: 600;
    color: #ffffff;
    background-color: #007832;
    border: none;
    padding: 0.55rem 1.2rem;
    border-radius: 8px;
    transition: 0.25s ease-in-out;
}

.btn-personalizado:hover {
    background-color: #39A900;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.btn-personalizado:active {
    transform: scale(0.97);
}


/* Botones de navegación */
.calendar-nav btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    color: #2ecc71;
    transition: all 0.2s ease;
}

/* Tabla de calendario */


/* Estilos del buscador */
/* Estilos del contenedor de búsqueda dentro del sidebar */
.search-container {
    background-color: #ffffff; /* Fondo blanco para el contenedor de búsqueda */
    padding: 20px;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */
    margin-bottom: 30px; /* Espacio inferior */
}

/* Título del buscador */
.search-container h1 {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

/* Estilos para los inputs del buscador */
.search-input-container {
    margin-bottom: 15px;
}

.search-input-container label {
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 5px;
}

.search-input-container input {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s ease;
}

/* Efecto de enfoque en los inputs */
.search-input-container input:focus {
    border-color: #007bff; /* Azul cuando el input está en foco */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Sombra de enfoque */
}

/* Botón de búsqueda (si lo hay) */
.search-button {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Cambio de color del botón al pasar el ratón */
.search-button:hover {
    background-color: #0056b3;
}





/* Contenedor general del sidebar */
.sidebar {
    height: 100vh;
    width: 410px; /* Ancho del sidebar */
    background-color: #f8f9fa; /* Fondo claro */
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 20px;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.15); /* Sombra suave en el sidebar */
    border-right: 1px solid #ddd; /* Borde derecho sutil */
    z-index: 999; /* Asegura que el sidebar esté encima del contenido */
}

/* Contenido principal */
.content-area {
    margin-left: 420px; /* Deja espacio para el sidebar */
    padding: 20px;
}

/* Estilos del calendario */
.calendar-container {
    width: 410px; /* Establecemos un ancho fijo para el calendario */
    margin: 0 auto; /* Centra el calendario dentro de su contenedor */
    text-align: center;
    border-radius: 10px;
    background-color: #f8f9fa;
    padding: 14px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.calendar-table {
    width: 100%;
    border-radius: 10px; /* Bordes redondeados */
    border: 1px solid #ddd; /* Bordes suaves */
    text-align: center;
    
}
.calendar-title{
        margin: 0;
        font-size: 27px;
        font-weight: 400;
      
      
}

/* Estilo de los días en el calendario */
.calendar-table td {
    cursor: pointer;
    border-radius: 50%; /* Bordes redondeados para los días con eventos */
    padding: 10px;
    transition: background-color 0.3s ease;
}

/* Estilo al pasar el mouse sobre los días */
.calendar-table td:hover {
    background-color: #d4edda; /* Color suave cuando se pasa el ratón sobre los días */
}

/* Celda que contiene días con eventos */
.dia-evento {
    background-color: #c3e6cb; /* Color suave de fondo para los días con eventos */
}

/* Celda sin evento */
.bg-light {
    background-color: #f8f9fa !important;
}
/* Estilo para los contenedores de los campos de búsqueda */
.search-input-container {
    margin: 10px 0;  /* Espacio entre los elementos */
    display: flex;
    flex-direction: column;
    align-items: center;  /* Centra los elementos */
    justify-content: Left;
}

/* Estilo para los inputs y selectores */
.search-input-container input,
.search-input-container select {
    width: 80%;  /* Ancho de los campos de búsqueda */
    max-width: 400px;  /* Limita el tamaño máximo */
    padding: 10px;
    margin: 5px 0;  /* Espacio entre los elementos */
    border-radius: 5px;  /* Bordes redondeados */
    border: 1px solid #ccc;  /* Borde gris claro */
    box-sizing: border-box;  /* Incluye padding y border dentro del tamaño total */
}

/* Placeholder con estilo centrado */


/* Asegura que todos los campos tengan un borde similar al estilo original */
.search-input-container input:focus,
.search-input-container select:focus {
    border-color: #007bff;  /* Borde azul al hacer foco */
    outline: none;  /* Elimina el contorno por defecto */
}

/* Estilo del label para mantener consistencia */
.search-input-container label {
    margin-bottom: 5px; /* Espacio debajo de la etiqueta */
    font-weight: 600; /* Asegura que las etiquetas sean visibles */
    text-align: left; 
}





/* ESTILO VISTA PUBLICA INICIO */





/* === HEADER === */
/* Estilo personalizado para navbar */
.navbar-custom {
    background-color: #10bd35; /* Verde calendario */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.navbar-custom .nav-link {
    color: #f0f3f0 !important;
    font-weight: 500;
    transition: color 0.3s ease;
}

.navbar-custom .nav-link:hover {
    color: #23d423 !important; /* Verde muy claro al pasar el mouse */
}

.navbar-custom .navbar-brand {
    color: #ffffff !important;
}


            
/* === GENERAL  PARA LA PÁGINA PÚBLICA === */





.public-page * {
    box-sizing: border-box;
    /* font-size: 1.25rem; */
    /* transform: scale(0.9);  */
    /* 90% del tamaño original */
    /* transform-origin: top left; */
    zoom: 95%;

}
.public-page body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background-color: #dfe4e9;
}

body.public-page .navbar-custom {/* fondo navbar public*/
    background-color: #10bd35;
    backdrop-filter: blur(40px);
    color: rgb(248, 242, 242);
    color: white !important;
    /* text-shadow: 0 0 1px #000, 0 0 1px #000; contorno negro fino */
    /* font-size: 1.4rem; */
    font-weight: 600;
    letter-spacing: 1.9px;
}

/* === NAVBAR === */
.public-page .navbar {
    position: fixed; /* Navbar fijo arriba */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050;
    background-color: #e1f0ed;
    box-shadow: 0 4px 6px rgba(36, 36, 36, 0.1);
}

/* BODY  PUBLIC */
body.public-page::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    /* background-image: url('/css/Body/CDTI_VERDE.jpg');   IMAGEN FONDO CONTENIDO PUBLICO*/
    background-size: cover;
    background-position: center;
    filter: blur(var(--blur-nivel, 6px)) brightness(0.9) saturate(0.8);
    /* opacity: 0.5; */
    z-index: -2;
    transition: filter 0.3s ease;
}


/* === SIDEBAR PUBLIC=== */
.public-page .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 410px;
    height: 100vh;
    background-color: #f8f9fa;
    padding: 20px;
    box-shadow: 4px 0 10px rgba(12, 19, 0, 0.15);
    overflow-y: auto;
    z-index: 999;
    border-right: 3px solid #edf3ec;
}

/* Estilo general del sidebar en pantallas grandes */




/* Sidebar por defecto (pantalla grande) */
.sidebar {
    width: 300px;
    background: #f8f9fa;
    padding: 20px;
    height: 100% !important;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    border-right: 1px solid #ccc;
    z-index: 1000;
}

/* Contenido principal con espacio a la izquierda */
.main-content {
    margin-left: 300px;
    padding: 20px;
}

/* Botón hamburguesa solo visible en móviles */
.menu-toggle {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1100;
    background: #ffffff;
    border: 1px solid #ccc;
    padding: 10px 15px;
    border-radius: 5px;
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -100%;
        width: 100%;
        height: 100% !important;
        background: #ffffff;
        transition: left 0.3s ease;
        z-index: 1000;
    }

    .sidebar-open .sidebar {
        left: 0;
    }

    .main-content {
        margin-left: 0;
    }

    .menu-toggle {
        display: block;
    }
}




/* === CALENDARIO === */
.public-page .calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* color de eventos */
.evento-pasado {
    background-color: #007bff; /* Azul */
    color: white;
}

.evento-agendado {
    background-color: #28a745; /* Verde */
    color: white;
}



.public-page .calendar-nav .btn { /*FLEcha*/
    width: 45px;
    height: 45px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    background-color: #e0f8e9;
    border: 2px solid #20ae1b;
    color: #5c6058;
    transition: all 0.3s ease;
}

.public-page .calendar-nav .btn:hover {
    background-color: #11ea44;
    color: #fff;
}

.public-page .calendar-container {
    background-color: #ffffff; /* Fondo verde suave */
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 3px 8px rgba(231, 232, 228, 0.15); /* se*/
    margin-bottom: 30px;
    text-align: center;
}

.public-page .calendar-title {
    font-size: 13px;
    margin: 0 0 10px 0;
}

.public-page .calendar-table {
    width: 100%;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.public-page .calendar-table th {
    background-color: #10bd35;;/* Color de dias calendario*/
    color: white;
    padding: 10px;
    border-radius: 40px 10px 0 0;
    text-shadow: 0 0 1px #000, 0 0 1px #000; /* contorno negro fino */
   
}

.public-page .calendar-table td {
    background-color: #e3e7e4;
    border-radius: 50%;
    padding: 10px;
    transition: background-color 0.3s ease;
    color: #333;
    cursor: pointer;
    
}

.public-page .calendar-table td:hover {
    background-color: #d4edda;
}

.public-page .calendar-table td.event-day {
    background-color: #48cc2e;/* Color de fechas programadas */
    color: white;
    font-weight: bold;
}

.public-page .calendar-table td.empty-day {
    background-color: transparent;
    cursor: default;
}

/* === BUSCADOR === */
.public-page .search-input-container {
    display: flex;
    flex-direction: column;
    margin: 15px 0;
    align-items: flex-start;
}

.public-page .search-input-container label {
    font-weight: 600;
    margin-bottom: 5px;
}

.public-page .search-input-container input,
.public-page .search-input-container select {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.public-page .search-input-container input:focus,
.public-page .search-input-container select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* === CONTENIDO PRINCIPAL === */
/* .public-page .content-area {
    margin-left: 420px; /* espacio para el sidebar */
    /*margin-top: 70px;   /* espacio para el navbar */
    /*padding: 20px;
} */
.public-content-area {
    margin-left: 410px; /* exactamente el ancho del sidebar */
    margin-top: 70px;   /* altura de la navbar fija */
    padding: 20px;
    flex: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


/* === TARJETAS DE EVENTOS === */

/* === BOTONES === */
.public-page .btn-outline-primary,
.public-page .btn-outline-secondary {
    font-weight: 600;
    border-radius: 5px;
}




/* Contenedor de tarjetas */
.public-page .card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas de igual tamaño */
    gap: 20px; /* Espacio entre las tarjetas */
    padding: 20px; /* Espacio interno */
}

/* Estilo de las tarjetas */
.public-page .card {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.public-page .card:hover {
    transform: scale(1.05); /* Efecto de aumento al pasar el ratón */
}

.public-page .card-img-top {
    width: 100%;
    height: 200px; /* Ajusta la altura de la imagen */
    object-fit: cover; /* Asegura que la imagen se ajuste sin deformarse */
}

.public-page .card-body {
    padding: 15px;
}







/* FOOTER   -°|>><<|°-  PIE DE PAGINA */





.agensena-footer {
    background-color: #4caf50;
    padding: 1rem 0;
    text-align: center;
    color: white;
    margin-top: auto;
}

.agensena-footer-content {
    font-family: 'Work Sans', 'Calibri', sans-serif;
    font-size: 1rem;
    font-weight: 500;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}


.public-footer {
    background-color: #39a900;
    padding: 1rem 0;
    text-align: center;
    color: white;
    flex-shrink: 0;
}

.public-footer-content {
    font-family: 'Work Sans', 'Calibri', sans-serif;
    font-size: 1rem;
    font-weight: 500;
}




/* solicitud publica   autenticacion */

    #auth_error {
        margin-top: 10px;
        padding: 10px;
        border-radius: 5px;
    }
    .is-invalid {
        border-color: #dc3545;
    }
    .is-valid {
        border-color: #28a745;
    }

    





/* solicitud publica   autenticacion */

    #auth_error {
        margin-top: 10px;
        padding: 10px;
        border-radius: 5px;
    }
    .is-invalid {
        border-color: #dc3545;
    }
    .is-valid {
        border-color: #28a745;
    }

    


/* estilos css para el boton de configuracion y el modal del header */

/* MODAL DE VER MAS EVENTO PUBLIC*/

/* Estilo del modal */
/* --- MODAL GENERAL --- */
#showPublicModal .modal-dialog {
    width: 95%;
    max-width: 1300px;
    margin: auto;
    /* min-height: 90vh; */
}

.modal-content {
    /* min-height: 85vh; */
    border-radius: 15px;
    overflow: hidden;
    background-color: #ffffff; /* Fondo blanco */
    color: #333; /* Texto oscuro para buen contraste */
    font-size: 1.15rem;
}

/* --- HEADER del modal --- */
.modal-header {
    background: linear-gradient(to right, #007832, #ffffff); /* verde sapote degradado */
    color: white;
    padding: 1.5rem;
    border-bottom: none;
}

.modal-title {
    font-size: 2rem;
    font-weight: bold;
    width: 100%;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Cierre del modal */
.modal-header .btn-close {
    filter: invert(1);
    opacity: 0.9;
}

/* --- CUERPO del modal --- */
#publicModalBody {
    padding: 2rem;
    overflow-y: auto;
    background: url('../images/inicio/Texturas.png') no-repeat center center;
    background-size: cover;
}

/* Imagen principal */
#publicModalBody img {
    width: 100%;
    max-height: 450px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Título del evento */
#publicModalBody h4 {
    font-size: 2rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 1rem;
}

/* Descripción */
#publicModalBody p {
    font-size: 1.8rem;
    color: #444;
    line-height: 1.7;
}

/* Lista de detalles */
#publicModalBody ul {
    padding-left: 1.8rem;
    list-style: none;
    margin-top: 1rem;
}

#publicModalBody li {
    font-size: 1.8rem !important;   /* Fuerza el tamaño más grande */
    line-height: 1.7;
    color: #222 !important;         /* Color oscuro para fondo blanco */
    font-weight: 500;
    margin-bottom: 0.8rem;
}


/* Footer */
.modal-footer {
    background-color: rgba(63, 163, 77, 0.1); /* Verde claro transparente */
    border-top: none;
    padding: 1.5rem;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    .modal-title {
        font-size: 1.5rem;
    }

    #publicModalBody p,
    #publicModalBody li {
        font-size: 1rem;
    }
}


/* Ajuste de sombra */
.modal-backdrop{
    width: 100% !important;
    height: 100% !important;
}


/* FIN MODAL VER MAS PUBLIC EVENTO */






/* Estilos específicos para este dropdown */
.custom-config-dropdown .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.2);

  }
  
  .custom-config-dropdown .dropdown-item {
    color: #fff;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    transition: background-color 0.2s;
  }
  
  .custom-config-dropdown .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  /* Estilo para el ícono dentro del dropdown-item */
  .custom-config-dropdown .dropdown-item i {
    margin-right: 0.5rem;
    font-size: 1.1em;
  }

.imagen-checkbox img {
    border: 3px solid transparent;
    transition: border 0.3s;
    cursor: pointer;
}

.imagen-checkbox.seleccionada img {
    border: 3px solid #0d6efd !important;
}



/* SECCION PUBLICA CARRUSEL BANNER */
/* Banner público - Carrusel */

.hero-section {
    position: relative;
    width: 100%;
    height: 472px;
    overflow: hidden;
    border-radius: 8px;
}

.hero-section img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}
@media (max-width: 768px) {
    .hero-section {
        height: 300px;
    }
}
@media (max-width: 480px) {
    .hero-section {
        height: 220px;
    }
}

.hero-carousel {
    max-height: 472px;
    overflow: hidden;
    border-radius: 8px;
}
.hero-carousel img {
    width: 100%;
    height: 472px;
    object-fit: cover;
}
@media (max-width: 768px) {
    .hero-carousel img {
        height: 300px;
    }
}

#bannerCarousel .carousel-item {
            height: 472px;
            position: relative;
            background-color: #000;
        }

        #bannerCarousel .carousel-item img {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

        .carousel-caption {
            z-index: 10;
        }
.banner-caption-bg {
    background-color: rgba(0, 0, 0, 0.5); /* fondo oscuro con transparencia */
    padding: 0.5rem;
    border-radius: 5px;
}

.banner-caption-text {
    color: white;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* sombra al texto */
}
.bannerFotos-img-contain {
        width: 100%;
        height: auto;
        object-fit: contain;
        background-color: #000; /* o cualquier fondo que combine con tu diseño */
    }


#btnFullscreenBanner {
    z-index: 9999 !important; /* Bien por encima de captions y controles */
    position: absolute;
    top: 1rem;
    right: 1rem;
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    border: none;
    padding: 0.5rem 0.6rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* FULL SCREEN BANNER FOTOS DE EVENTOS REALIZADOS */
/* Modo pantalla completa para el carrusel */
:fullscreen #bannerCarousel,
:-webkit-full-screen #bannerCarousel,
:-moz-full-screen #bannerCarousel,
:-ms-fullscreen #bannerCarousel {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    background-color: #000;
}

:fullscreen #bannerCarousel .carousel-inner,
:-webkit-full-screen #bannerCarousel .carousel-inner {
    height: 100vh !important;
}

:fullscreen #bannerCarousel .carousel-item,
:-webkit-full-screen #bannerCarousel .carousel-item {
    height: 100vh !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
}

:fullscreen #bannerCarousel .carousel-item img,
:-webkit-full-screen #bannerCarousel .carousel-item img {
    object-fit: contain !important;
    max-height: 100vh !important;
    max-width: 100vw !important;
    width: auto !important;
    height: auto !important;
}

.img-fullscreen-modal {
    object-fit: contain;
    width: 100%;
    height: 100vh;
    background-color: #000;
}

.btn-fullscreen-banner {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    padding: 0.4rem 0.5rem;
    font-size: 1.2rem;
    line-height: 1;
    transition: background-color 0.3s ease;
}
.btn-fullscreen-banner:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.img-fullscreen-modal {
    object-fit: contain;
    width: 100%;
    height: 100%;
    background-color: #000;
}


/* Fin banner Public*/





/* Contenedor de tarjetas */
.public-page .card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas de igual tamaño */
    gap: 20px; /* Espacio entre las tarjetas */
    padding: 20px; /* Espacio interno */
}

.public-page .card {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.public-page .card:hover {
    transform: scale(1.05); /* Efecto de aumento al pasar el ratón */
}

.public-page .card-img-top {
    width: 100%;
    height: 200px; /* Ajusta la altura de la imagen */
    object-fit: cover; /* Asegura que la imagen se ajuste sin deformarse */
}

.public-page .card-body {
    padding: 15px;
}

@media (max-width: 768px) {
    .public-page .card-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en pantallas más pequeñas */
    }
}

@media (max-width: 480px) {
    .public-page .card-container {
        grid-template-columns: 1fr; /* 1 columna en pantallas muy pequeñas */
    }
}







/* VALIDACION PARA SOLICITUD EVENTO */

/* Estilos para el modal de autenticación */
.modal-content {
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.modal-header {
    background-color: #007bff; /* Color de fondo del encabezado */
    color: white; /* Color del texto */
    border-top-left-radius: 10px; /* Bordes redondeados */
    border-top-right-radius: 10px; /* Bordes redondeados */
}

.modal-title {
    font-weight: bold; /* Negrita para el título */
}

.modal-body {
    padding: 2rem; /* Espaciado interno */
}

.form-label {
    font-weight: bold; /* Negrita para las etiquetas */
}

.form-control {
    border-radius: 5px; /* Bordes redondeados para los campos de entrada */
    border: 1px solid #ced4da; /* Color del borde */
    transition: border-color 0.3s; /* Transición suave para el borde */
}

.form-control:focus {
    border-color: #007bff; /* Color del borde al enfocar */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Sombra al enfocar */
}

.btn-primary {
    background-color: #007bff; /* Color de fondo del botón */
    border-color: #007bff; /* Color del borde del botón */
}

.btn-primary:hover {
    background-color: #0056b3; /* Color de fondo al pasar el ratón */
    border-color: #0056b3; /* Color del borde al pasar el ratón */
}

.btn-secondary {
    background-color: #6c757d; /* Color de fondo del botón secundario */
    border-color: #6c757d; /* Color del borde del botón secundario */
}

.btn-secondary:hover {
    background-color: #5a6268; /* Color de fondo al pasar el ratón */
    border-color: #5a6268; /* Color del borde al pasar el ratón */
}

/* Estilo base del botón personalizado */
.btn-secondary-personalizado {
    background-color: #39A900 !important;
    border-color: #39A900 !important;
    color: #fff !important;
    padding: 0.45rem 1rem;
    border-radius: 0.45rem;
    transition: all 0.3s ease;
    font-weight: 500;
    box-shadow: none !important;
}

/* Hover */
.btn-secondary-personalizado:hover {
    background-color: #2f8a00 !important;
    border-color: #2f8a00 !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: none !important;
}

/* Quitar borde y sombra del focus/click */
.btn-secondary-personalizado:focus,
.btn-secondary-personalizado:active,
.btn-secondary-personalizado:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background-color: #2f8a00 !important;
    border-color: #2f8a00 !important;
    color: #fff !important;
}




/* Efecto al hacer clic */
.btn-secondary-personalizado:active {
    transform: translateY(0);
    box-shadow: none;
}


.text-danger {
    font-weight: bold; /* Negrita para el mensaje de error */
}
.modal-body {
    padding: 2rem; /* Aumentar el espaciado interno */
}





/* FIN VALIDACION SOLICTUD EVENTO  */



/*  modal de autenticación */
#authModalAgregarEvento .modal-content {
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    background-color: #fff;
}

#authModalAgregarEvento .modal-header {
    border-bottom: none;
}

#authModalAgregarEvento .modal-footer {
    border-top: 1px solid #ddd;
}
/* fin modal autenticacion */



/* estilo de formulario publico solicitud evento  */
 #formularioEvento {
  max-width: 1200px;
  width: 100%;
  margin: 2rem auto;
  padding: 2rem 3rem;
  box-sizing: border-box;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  overflow-wrap: break-word;
  overflow-x: hidden; /* <-- esto evita que haya scroll horizontal */
}

#formularioEvento * {
  max-width: 100%; /* asegura que todos los hijos no sobrepasen el ancho */
  box-sizing: border-box;
}

/* Si tienes listas desplegables o elementos con position absolute dentro, añade también */
#formularioEvento ul,
#formularioEvento select,
#formularioEvento input,
#formularioEvento textarea {
  max-width: 100%;
  box-sizing: border-box;
}


    #formularioEvento .form-label::after {
        content: "*";
        color: red;
        margin-left: 4px;
    }

    #formularioEvento .invalid-feedback {
        font-size: 0.875rem;
        color: #d9534f;
    }

    #formularioEvento button[type="submit"] {
        background: linear-gradient(135deg, #38b000, #aacc00);
        border: none;
        padding: 0.75rem 2rem;
        font-weight: bold;
        color: white;
        border-radius: 0.5rem;
        transition: background 0.3s ease-in-out;
    }

    #formularioEvento button[type="submit"]:hover {
        background: linear-gradient(135deg, #2d8600, #8ca900);
    }

    .list-group-item-action:hover {
        background-color: #eafce8;
        cursor: pointer;
    }

    #formularioEvento h1 {
        font-weight: bold;
        font-size: 2rem;
        color: #2a5d34;
        margin-bottom: 2rem;
        text-align: center;
    }

    /* Responsive */
    @media (max-width: 768px) {
        #formularioEvento {
            padding: 1.5rem;
        }
    }

    /* Opcional: ajusta el padding en pantallas pequeñas para que no se vea muy estrecho */

/* Fin estilo de formulario publico solicitud evento */




/* +++++ BANNER FULLSCREEN +++++ */
#publicidadCarrusel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1055 !important; /* Más alto que modales y overlays */
    background-color: rgba(0, 0, 0, 0.95); /* Fondo oscuro */
    display: flex;
    align-items: center;
    justify-content: center;
}

#publicidadCarrusel .carousel {
    width: 100%;
    height: 100%;
}

#publicidadCarrusel .carousel-inner,
#publicidadCarrusel .carousel-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#publicidadCarrusel img {
    object-fit: contain; /* Muestra toda la imagen sin recorte */
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.carousel-item {
    transition: transform 0.6s ease, opacity 0.6s ease;
}
.bannerPublicidad-img-cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
/* +++++ FIN BANNER FULLSCREEN +++++ */



/* zoom sobre imagen  modal public modal evento*/
    .zoom-img-container {
        overflow: hidden;
        position: relative;
    }

    .zoom-img-container img {
        transition: transform 0.4s ease;
    }

    .zoom-img-container:hover img {
        transform: scale(1.1); /* Ajusta la escala si quieres más o menos zoom */
    }

    /* zoom cuando pasa mouse */
.zoom-img-container {
    cursor: zoom-in;
}


/* public  girar celular para mejro visualizacion */
/* Mensaje de alerta, fijo en pantalla, centrado y visible solo en portrait */
.orientation-alert {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffc107; /* amarillo alerta */
  color: #000;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  z-index: 9999;
  display: none; /* por defecto oculto */
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* Mostrar solo en portrait */
@media (orientation: portrait) and (max-width: 768px) {
  .orientation-alert {
    display: block;
  }
}

/* Ocultar en landscape */
@media (orientation: landscape) and (max-width: 768px) {
  .orientation-alert {
    display: none;
  }
}





/*  GUIA DE SOLUCITUD DE EVENTO PUBLIC */

/* Opcional: Para asegurar que el contenido del modal de ayuda se posicione correctamente */
#helpCenterModal .modal-body {
    position: relative;
    overflow: hidden; /* Para que los contenidos ocultos no se desborden visualmente */
}

/* Opcional: Asegura que el contenido del carrusel ocupe el espacio disponible */
#tutorialDiapositivas, #helpCardsContent {
    height: 100%;
    width: 100%;
    padding-top: 50px; /* Espacio para el botón de volver y el header del modal */
    padding-bottom: 20px;
    box-sizing: border-box;
}

#tutorialCarousel {
    height: calc(100% - 60px); /* Ajusta según el padding superior/inferior */
    display: flex; /* Para centrar contenido si es necesario */
    align-items: center;
    justify-content: center;
}

#tutorialCarousel .carousel-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ===== SIDEBAR MEJORADO ===== */

.sidebar-container {
    background: #ffffff;
    border-right: 1px solid #e5e5e5;
    height: 100%;
    padding: 20px 10px;
    overflow-y: auto;
}

.sidebar-title {
    font-weight: 700;
    font-size: 1.2rem;
    color: #0e0f0e;
    margin-bottom: 15px;
}

.event-card {
    border: none;
    border-radius: 12px;
    padding: 12px;
    background: #f8f9fa;
    transition: 0.2s ease-in-out;
}
.event-card:hover {
    background: #eefbf0;
    transform: translateX(5px);
}

/* Cuadros de búsqueda */
.search-box-title {
    /*background: #FDC300;*/
    background: #39A900;
    color: white;
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

.search-box-card {
    border: none !important;
    background: #ffffff;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0px 3px 10px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}

/* Inputs */
.sidebar-form .form-control {
    border-radius: 10px;
}

/* Botón búsqueda */
.btn-search {
    border-radius: 10px;
    padding: 8px 14px;
}

/* Botones finales */
.sidebar-actions .btn {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 10px;
    font-weight: 600;
}

.banner-info-overlay {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    text-align: center;
    max-width: 90%;
}

.banner-meta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.banner-meta i {
    margin-right: 5px;
}

#modalFullscreenBanner .carousel-item {
    display: flex;
    justify-content: center;
    align-items: center;
}




/* FIN GUIA SOLICIRUD EVETO  */




/* Ajueste Modal Fullscreen */

.modal-fullscreen{
    width: 100% !important;
}