/* ✅ Estilos Generales */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9fafc;
}

.container {
    display: flex;
    gap: 20px;
    margin: 20px auto;
    max-width: 1200px;
}

/* ✅ Publicaciones */
.publications {
    flex: 1;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.publication {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 10px;
}

/* ✅ Caja de Fecha */
.date-box {
    background-color: #f0f4ff;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    margin-right: 15px;
    min-width: 70px;
}

.date {
    font-size: 0.9em;
    font-weight: bold;
    color: #555;
}

.date span {
    display: block;
    font-size: 1.5em;
    color: #004aad;
}

/* ✅ Detalles del Evento */
.details strong {
    font-size: 1em;
    color: #333;
}

.details p {
    margin: 3px 0;
    font-size: 0.9em;
}
/* ✅ Filtros de búsqueda */
.search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    background: #f9fafc;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    align-items: center; /* Alinea verticalmente los elementos */
}

/* ✅ Cada etiqueta ocupa un espacio fijo */
.search-filters label {
    display: flex;
    flex-direction: column;
    font-size: 0.9em;
    gap: 5px;
    flex: 0 1 220px; /* Flexibilidad controlada y ancho fijo */
    min-width: 180px;
    max-width: 220px;
}

/* ✅ Ajuste de campos de entrada y selección */
.search-filters input,
.search-filters select {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
    width: 100%; /* Asegura que ocupen el 100% del contenedor */
}

/* ✅ Botones */
.search-filters button {
    background-color: #6c5ce7;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    flex: 0 1 auto; /* Evita que el botón se estire innecesariamente */
}

.search-filters button:hover {
    background-color: #5a4ec2;
}

.clear-btn {
    background-color: #e0e0e0;
    color: #333;
    padding: 8px 12px;
    border-radius: 4px;
    text-decoration: none;
    flex: 0 1 auto; /* Evita que el botón se estire innecesariamente */
}

/* ✅ Alineación Responsiva */
@media (max-width: 768px) {
    .search-filters {
        flex-direction: column; /* Apila los campos en pantallas pequeñas */
        gap: 10px;
    }

    .search-filters label {
        flex: 1 1 auto; /* Permite que ocupen todo el ancho */
        max-width: 100%;
    }

    .search-filters button,
    .search-filters .clear-btn {
        width: 100%; /* Los botones ocupan todo el ancho */
    }
}

/* ✅ Colores para Días Específicos */
.date-box.feriado {
    background-color: #FFCDD2; /* Fondo rojo claro */
    color: #B71C1C; /* Texto rojo oscuro */
}

.date-box.no-laborable {
    background-color: #FFF9C4; /* Fondo amarillo claro */
    color: #F57F17; /* Texto amarillo oscuro */
}

.date-box.importante {
    background-color: #BBDEFB; /* Fondo azul claro */
    color: #1565C0; /* Texto azul oscuro */
}

/* ✅ Etiquetas (Badges) */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    border-radius: 4px;
    margin-right: 5px; /* Espacio entre el badge y el texto */
}

/* Colores específicos para badges */
.badge-feriado {
    background-color: #E53935; /* Rojo */
}

.badge-no-laborable {
    background-color: #F9A825; /* Amarillo */
}

.badge-importante {
    background-color: #1E88E5; /* Azul */
}

/* ✅ Ajuste de Espacio del Badge */
.details p {
    display: flex;
    align-items: center;
    gap: 5px; /* Espacio entre badge y texto si hay badge */
    margin: 3px 0;
    font-size: 0.9em;
}

/* Eliminar margen cuando no hay badge */
.details .badge:not(:empty) {
    margin-right: 5px; /* Solo si el badge tiene contenido */
}

.details .badge:empty {
    display: none; /* Ocultar el badge si está vacío */
    margin-right: 0; /* Eliminar cualquier margen adicional */
}

/* ✅ Divisores de Mes */
.month-divider {
    margin: 30px 0 10px;
    padding: 10px 0;
    border-bottom: 2px solid #ccc;
    text-align: left;
    background-color: #f9f9f9;
}

.month-divider h3 {
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
    color: #444;
}

/* ✅ Ajustes Base */
.publication {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-box {
    text-align: center;
    font-weight: bold;
    min-width: 80px;
}

.date-box span {
    font-size: 1.4em;
}

/* ✅ Ajuste Adicional para Importantes */
.date-box.importante {
    background-color: #e6f7ff; /* Azul Claro */
    border: 2px solid #3498db; /* Borde Azul */
}



.month-navigation {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.month-navigation a {
    background-color: #6c5ce7;
    color: white;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 4px;
}

.month-navigation a:hover {
    background-color: #5a4ec2;
}

/* ✅ Navegación entre Meses */
.month-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
    font-size: 1.1em;
    font-weight: bold;
}

.month-navigation a {
    background-color: #6c5ce7; /* Fondo morado */
    color: #ffffff; /* Texto blanco */
    padding: 8px 12px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.month-navigation a:hover {
    background-color: #5a4ec2; /* Morado más oscuro al pasar el mouse */
}

.month-navigation .current-month {
    font-size: 1.2em;
    font-weight: bold;
    color: #333; /* Texto oscuro para destacar */
    padding: 5px 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
    text-transform: capitalize; /* ✅ Primer letra en mayúscula */
}