* { 
    margin:0; 
    padding:0; 
    box-sizing:border-box; 
    font-family:'Poppins', sans-serif; 
}

body {
    margin: 0;
    padding: 0;
    background-color: #f0f0f0; /* Color de fondo opcional */
    box-sizing: border-box; /* Asegura que el padding y border se incluyan en el tamaño total del elemento */
    overflow-y: scroll;
}

.container {
    flex-direction: column;
    justify-content: flex-start; /* Ajusta el contenido desde arriba */
    top: 20px; /* Menor separación superior */
    position: relative;
    margin-left: 15px;
    max-width: 92%;
    background-color: #fff;
    padding: 15px; /* Reduce un poco el padding */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    width: calc(100% - 290px);
    transition: all 0.5s ease;
    left: 250px;
    border-radius: 10px;
}

.sidebar.close ~ .container { 
    left:70px; 
    width: calc(100% - 60px); 
}

header {
    display: flex;
    justify-content: space-between; /* Distribuye título y botones a los extremos */
    align-items: center;
    margin-bottom: 20px;
}

header h1 {
    font-size: 20px;
    color: #265da3;
}

/* Contenedor de los botones */
header div {
    display: flex;
    gap: 10px; /* separa los botones entre sí */
    justify-content: center; /* centra los botones dentro del div */
}

/* Estilo de los botones */
header button { 
    background:#265da3; 
    color:#fff; 
    border:none; 
    padding:6px 15px; /* ajusta tamaño */
    font-size:14px; 
    border-radius:6px; 
    cursor:pointer; 
    transition:0.3s; 
}

header button:hover { 
    background:#1e4a82; 
}


.calendar { 
    width: 100%; 
}

.calendar-header { 
    display:flex; 
    justify-content: center; /* Centra el título */
    align-items: center; 
    gap: 20px; /* Espacio entre los botones y el título */
    margin-bottom:10px; 
}

.calendar-header h2 { 
    font-size:18px; 
    color:#132d52; 
    flex: 1; /* Ocupa espacio central */
    text-align: center; 
}

.calendar-header button { 
    background:#265da3; 
    color:#fff; 
    border:none; 
    padding:5px 12px; /* Ajusta el tamaño de los botones */
    border-radius:5px; 
    cursor:pointer; 
}

.calendar-header button:hover { 
    background:#1e4a82; 
}

.days-of-week { 
    display:grid; 
    grid-template-columns: repeat(7,1fr); 
    text-align:center; 
    font-weight:600; 
    margin-bottom:5px; 
    color:#265da3; 
}

.calendar-days { 
    display:grid; 
    grid-template-columns: repeat(7,1fr); 
    gap:5px; 
}

.calendar-days div {
    min-height:60px; /* Reduce un poco la altura */
    background:#f9f9f9; 
    border-radius:6px; 
    padding:5px; 
    cursor:pointer; 
    transition:0.2s; 
    position:relative;
}

.calendar-days div:hover { 
    background:#e0ebff; 
}

.today { 
    border:2px solid #265da3; 
}

.task-note {
    background:#265da3; 
    color:#fff; 
    padding:2px 4px; 
    font-size:12px; 
    border-radius:4px; 
    margin-top:2px; 
    display:block; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space:nowrap;
}

/* Modal */
.modal { 
    display:none; 
    position:fixed; 
    z-index:1000; 
    left:0; top:0; 
    width:100%; height:100%; 
    background: rgba(0,0,0,0.5); 
}

.modal-content { 
    background:#fff; 
    margin:8% auto; 
    padding:20px; 
    width:400px; 
    border-radius:10px; 
    position:relative; 
}

.cerrar { 
    position:absolute; 
    top:10px; 
    right:15px; 
    font-size:22px; 
    cursor:pointer; 
}

.form-group { 
    display:flex; 
    flex-direction:column; 
    margin-bottom:15px; 
}

.form-group label { 
    margin-bottom:5px; 
    font-weight:500; 
}

.form-group input, .form-group textarea { 
    padding:8px; 
    border:1px solid #ccc; 
    border-radius:6px; 
}

.modal-content button { 
    background:#265da3; 
    color:#fff; 
    border:none; 
    padding:8px 15px; 
    border-radius:5px; 
    cursor:pointer; 
}

.modal-content button:hover { 
    background:#1e4a82; 
}


/* =======================
   Pantallas grandes (>1200px)
   ======================= */
@media (min-width: 1200px) {
    .container {
        width: calc(100% - 290px);
        left: 250px;
        padding: 15px;
    }

    .calendar-days div {
        min-height: 60px;
    }

    .modal-content {
        width: 400px;
        margin: 8% auto;
    }
}

/* =======================
   Pantallas medianas (768px - 1199px)
   ======================= */
@media (min-width: 768px) and (max-width: 1199px) {
    .container {
        width: calc(100% - 200px);
        left: 200px;
        padding: 12px;
    }

    header h1 {
        font-size: 18px;
    }

    .calendar-days div {
        min-height: 50px;
    }

    .modal-content {
        width: 350px;
        margin: 10% auto;
    }
}

/* =======================
   Pantallas pequeñas / celulares (<768px)
   ======================= */
@media (max-width: 767px) {
    .container {
        width: 95%;
        left: 0;
        margin: 0 auto;
        padding: 10px;
    }

    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    header h1 {
        font-size: 16px;
    }

    header div {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 5px;
    }

    .calendar-header {
        flex-direction: column;
        gap: 10px;
    }

    .calendar-header h2 {
        font-size: 16px;
    }

    .calendar-days div {
        min-height: 40px;
        padding: 4px;
    }

    .modal-content {
        width: 90%;
        margin: 20% auto;
        padding: 15px;
    }

    .form-group input, .form-group textarea {
        padding: 6px;
    }

    .modal-content button {
        width: 100%;
        padding: 8px 0;
    }
}

/* ===== ESTILOS DE PAGINACIÓN ===== */

.pagination {
    margin: 24px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.pagination button a {
    text-decoration: none;
    color: inherit;
}

.pagination button {
    padding: 6px 14px;
    border: 1px solid #3b82f6;
    border-radius: 5px;
    background: white;
    color: #3b82f6;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.pagination button:not(:disabled):hover {
    background: #3b82f6;
    color: white;
}

.pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #9ca3af;
}

/* Números de paginación */
.page-numbers {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin: 0 10px;
}

.page-number {
    padding: 6px 12px;
    border: 1px solid #3b82f6;
    border-radius: 5px;
    background: white;
    color: #3b82f6;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    min-width: 35px;
    text-align: center;
    transition: all 0.2s ease;
}

.page-number:hover {
    background: #3b82f6;
    color: white;
}

.page-number.active {
    background: #3b82f6;
    color: white;
}

/* RESPONSIVE - Media Queries (only) */

/* Mobile (≤480px) - ajustar inputs a 100% */
@media (max-width: 480px) {
    .form-group input,
    .form-group textarea {
        width: 100% !important;
        padding: 6px;
    }
    .modal-content { width: 90%; margin: 12% auto; padding: 12px; }
    .calendar-days div { min-height: 40px; padding: 6px; }
    .task-note { font-size: 11px; }
    .export-buttons { margin-top: -28px; justify-content: flex-end; }
}

/* Tablet (768px - 1023px) - inputs más estrechos */
@media (min-width: 768px) and (max-width: 1023px) {
    .form-group input,
    .form-group textarea {
        width: 75% !important;
    }
    .modal-content { width: 360px; margin: 8% auto; }
    .calendar-days div { min-height: 50px; }
    .export-buttons { margin-top: -32px; }
}

/* Desktop (≥1024px) - ancho base reducido por consistencia */
@media (min-width: 1024px) {
    .form-group input,
    .form-group textarea { width: 70% !important; }
    .modal-content { width: 400px; margin: 8% auto; }
    .export-buttons { margin-top: 0; }
}