/* Estilos principales para el Planificador Comercial

Las principales secciones son:
1. Estilos generales y del body
2. Contenedor principal y encabezado
3. Filtros del calendario
4. Estilos de formularios
5. Utilidades
6. Media queries para responsividad
7. Estilos adicionales para mejorar la apariencia
8. Estilos para el acordeón
9. Estilos para la navegación superior
10. Estilos para el listado
*/

/* 1. Estilos generales y del body */
body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/* 2. Contenedor principal y encabezado */
.container {
    display: flex;
    flex-direction: column;
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
}

header .container {
    padding-left: 60px;
}

h1 {
    text-align: center;
    margin-bottom: 10px;
}

/* 3. Filtros del calendario */
#calendar-filters {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#calendar-filters label {
    display: inline-block;
    margin: 0 5px;
    padding: 5px 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#calendar-filters label span {
    pointer-events: none;
}

#calendar-filters input[type="checkbox"] {
    display: none;
}

#calendar-filters input[type="checkbox"]:checked + span {
    font-weight: bold;
}

#calendar-filters input[type="checkbox"]:checked + span::before {
    content: '✓ ';
}

/* SEGUNDA PARTE */ 

/* 4. Estilos de formularios */
.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"],
input[type="date"],
input[type="number"],
select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

button {
    padding: 10px 15px;
    background-color: rgb(29, 44, 61);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #0056b3;
}

.form-actions {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

/* Estilos para checkbox */
input[type="checkbox"] {
    margin-right: 5px;
}

/* 5. Utilidades */
.hidden {
    display: none !important;
}

/* 6. Media queries para responsividad */
@media (max-width: 600px) {
    .modal-content {
        width: 90%;
    }

    #calendar-filters {
        flex-direction: column;
        align-items: center;
    }

    #calendar-filters label {
        margin: 5px 0;
    }
}

/* 7. Estilos adicionales para mejorar la apariencia */
#close-window {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #333;
}

/* 8. Estilos para el acordeón */
.ui-accordion .ui-accordion-header {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    padding: 10px;
    margin-top: 5px;
    cursor: pointer;
}

.ui-accordion .ui-accordion-content {
    border: 1px solid #ddd;
    border-top: none;
    padding: 10px;
}

/* Estilo para los botones dentro del formulario */
#event-form button,
#promo-form button {
    margin-right: 10px;
}

/* Ajustes adicionales para mejorar la legibilidad y el espaciado */
#event-form,
#promo-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-group:last-child {
    margin-bottom: 0;
}

/* ULTIMA PARTE */ 

/* Estilos para hacer que los selects sean más atractivos */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 98%;
    background-position-y: 50%;
}

/* Mejoras en la accesibilidad */
button:focus,
input:focus,
select:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* 9. Estilos para la navegación superior */
.top-nav {
    text-align: center;
    margin-bottom: 0px;
    padding: 10px 0;
    background-color: #1a2127;
    border-bottom: 1px solid #e9ecef;
}

.nav-button {
    display: inline-block;
    padding: 10px 20px;
    margin: 0 10px;
    text-decoration: none;
    color: #333;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 5px;
    transition: all 0.1s ease;
}

.nav-button:hover {
    background-color: #007bff;
    color: white;
}

.nav-button.active {
    background-color: #007bff;
    color: white;
}

/* 10. Estilos para el listado */
#listado-container table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

#listado-container th, #listado-container td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

#listado-container th {
    background-color: #f2f2f2;
}

#listado-container tr:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}

/* Estilos para el acordeón en el listado */
.accordion-section {
    margin-bottom: 10px;
}

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    font-size: 18px;
}

.accordion:hover {
    background-color: #ccc;
}

.accordion.active {
    background-color: #007bff;
    color: white;
}

.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.accordion.active:after {
    content: "\2212";
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.item-count {
    font-size: 14px;
    color: #666;
}

.accordion.active .item-count {
    color: #ddd;
}