/* ========== RESPONSIVE DESIGN ========== */
/* Estilos responsivos separados para mantener mejor organización */

/* ========== TABLETS Y DESKTOP (768px+) ========== */
@media (min-width: 768px) {
    /* Layout */
    .container {
        max-width: 1200px;
    }
    
    .content {
        padding: 32px;
    }
    
    /* Grid responsive */
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Calendar */
    .calendar {
        gap: 16px;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    
    .calendar-day {
        min-height: 100px;
        font-size: 1rem;
    }
    
    .calendar-day.weekend {
        cursor: default;
    }
    
    .calendar-header {
        font-size: 1rem;
        padding: 12px;
    }
    
    .day-number {
        font-size: 1.75rem;
    }
    
    .day-name {
        font-size: 0.875rem;
    }
    
    .assigned-dj {
        font-size: 0.9rem;
    }
    
    /* Admin Layout - Dos columnas en desktop */
    .admin-layout {
        flex-direction: row;
        gap: 24px;
    }
    
    .dj-list {
        flex: 0 0 320px;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        position: sticky;
        top: 100px;
    }
    
    .admin-calendar {
        flex: 1;
    }
    
    /* Drag and Drop mejorado en desktop */
    .dj-item {
        cursor: grab;
    }
    
    .dj-item:active {
        cursor: grabbing;
    }
    
    .dj-item.dragging {
        opacity: 0.5;
        cursor: grabbing;
    }
    
    /* Date badges clickeables */
    .date-badge.clickable-date {
        margin: 4px;
    }
    
    .date-badge.clickable-date:hover {
        transform: translateY(-2px) scale(1.05);
    }
}

/* ========== DESKTOP XL (1200px+) ========== */
@media (min-width: 1200px) {
    /* Layout ampliado */
    .container {
        max-width: 1400px;
    }
    
    /* Calendar más espacioso */
    .calendar {
        gap: 20px;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    
    .calendar-day {
        min-height: 140px;
    }
    
    /* DJ List más ancha */
    .dj-list {
        flex: 0 0 380px;
    }
    
    /* Typography mejorada */
    header h1 {
        font-size: 2rem;
    }
    
    /* Botones más grandes */
    .btn {
        font-size: 1rem;
        padding: 14px 24px;
    }
}

/* ========== PANTALLAS PEQUEÑAS (360px o menos) ========== */
@media (max-width: 360px) {
    /* Month selector compacto */
    .month-selector {
        padding: 10px 8px;
        gap: 6px;
    }
    
    .month-selector button {
        min-width: 36px;
        min-height: 36px;
        width: 36px;
        height: 36px;
        padding: 6px;
        font-size: 1.25rem;
    }
    
    .month-selector h3 {
        font-size: 1rem;
        padding: 0 4px;
    }
    
    /* Calendar compacto */
    .calendar {
        gap: 8px;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    
    .calendar-day {
        min-height: 100px;
    }
    
    .calendar-day .day-number {
        font-size: 0.875rem;
    }
    
    /* Reducir padding en móviles pequeños */
    .container {
        padding: var(--spacing-sm);
    }
    
    /* Botones más compactos */
    .btn {
        padding: 10px 16px;
        font-size: 0.875rem;
    }
    
    /* Modal más compacto en móviles */
    .modal {
        max-height: 90vh;
        margin: var(--spacing-sm);
    }
    
    .modal-header {
        padding: var(--spacing-md);
    }
    
    .modal-title {
        font-size: var(--font-size-lg);
    }
    
    .modal-content {
        padding: var(--spacing-md);
    }
    
    .dj-selection-item {
        padding: var(--spacing-sm);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .dj-selection-info h4 {
        font-size: var(--font-size-base);
    }
    
    .dj-selection-status {
        align-self: flex-end;
        padding: 6px 12px;
    }
}

/* ========== MÓVILES EN GENERAL (max 768px) ========== */
@media (max-width: 768px) {
    /* Month selector adaptado a móvil */
    .month-selector {
        padding: 12px 10px;
        gap: 8px;
    }
    
    .month-selector button {
        min-width: 40px;
        min-height: 40px;
        width: 40px;
        height: 40px;
        padding: 6px;
        font-size: 1.375rem;
    }
    
    .month-selector h3 {
        font-size: 1.125rem;
        padding: 0 6px;
    }
    
    /* Modal adaptado a móvil */
    .modal {
        max-width: 95vw;
        max-height: 80vh;
    }
    
    .modal-overlay {
        padding: var(--spacing-sm);
    }
    
    .dj-selection-list {
        max-height: 40vh;
    }
    
    .dj-selection-item {
        min-height: 56px;
    }
}